1.基础语法(对象)

1.什么是对象(object) -和Python中的对象一样,有对象属性和对象方法
2.创建对象
a.创建对象字面量
对象字面量:{属性名1:属性值1, 属性名2:属性值}
注意:当属性值是普通值我们叫这个属性为对象属性;当属性值是函数这个属性就是对象方法

p1 = {
            name:'余婷', 
            age:10, 
            eat:function(){
            console.log('吃饭!')
            }
        }
    p2 = {
            name:'小明', 
            age:18, 
            eat:function(){
            console.log('吃饭!')
            }
        }

b.通过构造方法创建对象
声明构造方法(类似python声明类)
声明一个函数,使用函数名来作为类名,在函数中通过this关键字来添加对象属性和对象方法
构造方法的函数名,首字母大写
this类似python中的self
通过构造方法创建对象
对象 = new 构造方法()

function Person(name1='张三', age1=18, sex1='男'){
    this.name = name1
    this.age  = age1
    this.sex = sex1
    this.eat = function(food){
          console.log(this.name+'在吃'+food)
    }
    return this
}
    //创建Person的对象
    p3 = new Person()
    p4 = new Person('小明')
    //使用对象属性和方法
    console.log(p3, p4, p3===p4, p3.age, p4.name)
    p4.eat('苹果')
    
    
    //调用函数，获取返回值
    win1 = Person()
    console.log(win1)
    win1.alert('我是window')

c.函数中this关键字
当调用函数的时候前面加关键字new,就是把这个函数当成构造函数来创建对象,函数中的this就是当前对象;
直接调用函数的时候,函数中的this是window对象

3.使用对象属性(获取属性值)

a.对象.属性 - p5.name
b.对象[属性名]

var t = 'age'
    p5 = new Person('小花', 20, '女')
    console.log(p5.name)
    console.log(p5['name'], p5[t])
    p5.eat('面条')

4.修改对象属性的值
属性存在的时候是修改,不存在的时候就是添加
对象.属性 = 值
对象[属性名] = 值
//修改属性值
p5.name = '小红'
console.log(p5)
p5['age'] = 30
console.log(p5)

添加属性
p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)

给对象添加属性只作用于一个对象,不影响其他对象
console.log(p4)

构造方法(类名).prototype.属性 = 值 - 给指定的构造方法的所有对象都添加指定的属性

Person.prototype.aaa = '123'
    p6 = new Person()
    p6.aaa = 'abc'
    console.log(p6.aaa)
    Person.
    console.log(p5.aaa)
    
    //给String类型添加方法
    String.prototype.ytIndex = function(x){
        return this[x]
    }
    str1 = new String('abcdef')
    console.log(str1.ytIndex(0))
    console.log('hello'.ytIndex(3))
    
    //练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
    function Student(name, age, score){
        this.name = name;
        this.age = age;
        this.score = score;
        
        return this;
    }
    students = [new Student('小明', 18, 90), new Student('小红', 20, 78), new Student('小花', 19, 98)];
    //sort方法排序后，原数组会改变，也会产生新的数组
    newStudents = students.sort(function(a,b){
        return a.score - b.score;
    });
    console.log(newStudents, students)

2 DOM获取节点

1.什么是dom(文档对象模型)

DOM是document object model的缩写
DOM模型就是一个数结构,里面是由各种节点组成

2.document对象 - js写好的一个对象,代码是网页内容结构

通过document对象可以拿到网页中所有内容对应的节点

3.获取节点(在js中获取网页中的标签)

1.直接获取节点

a.通过标签的id值来获取指定的标签
.document.getElementById(ID值) - 返回节点对象
如果html中同样的id对应的标签有多个,只能取宇哥.所以一般在使用id的时候要唯一

var pNode = document.getElementById('p1')
console.log(pNode)

b.通过标签名来获取指定的标签
.document.getElementsByTagName(标签名) - 返回的是一个数组对象,数组中是节点

 var aNodeArray = document.getElementsByTagName('a')
     for(x in aNodeArray){
        // 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length，item等其他非标签对象
        var aNode = aNodeArray[x]
        
        // 只对标签进行操作
        if(typeof(aNode) == 'object'){
            console.log(aNode, '是标签！')
        }
     }

c.通过类名来后驱指定的标签
.document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,返回的是一个数组对象

 var c1NodeArray = document.getElementsByClassName('c1')
     console.log(c1NodeArray)

d.通过name属性的值来获取指定的标签
document.getElementsByName('username') - 返回一个节点数组对象

3 DOM间接获取节点

1.获取父节点

子节点.parentElement - 获取子节点对应的父节点

    var box1Node = box11Node.parentElement;
    var box1Node2 = box11Node.parentNode;
    console.log(box1Node, box1Node2);

2.获取子节点

a.获取所有的子节点
父节点.children - 返回一个数组对象

    var allChildArray = box1Node.children
    console.log(allChildArray)

父节点.childNodes - 获取父节点下的所有内容(包括子节点和文本)

    var allChildArray2 = box1Node.childNodes
    console.log(allChildArray2)

b.获取第一个子节点
父节点.firstElementiChild

    var childNode = box1Node.firstElementChild
    console.log(childNode)

c.获取最后一个子节点

var childNode2 = box1Node.lastElementChild
console.log(childNode2)

4 DOM创建添加和删除节点

1.创建节点

document.createElement(标签名) - 创建指定标签节点(创建后不会主动添加到浏览器上)
a.节点属性:
标签节点就是标签对象,可以通过document去网页中获取到,也可以自己创建
标签对象中有相应的标签相关属性,可以通过标签节点获取或者修改这些属性值
例如,a标签节点有:href属性,id属性, classNme属性, style属性等...
img标签的属性有:src, id属性, style, alt, title
b.innerHTML和InnerText属性
innerHTML - 双标签的标签内容包含其他标签
innerText - 双标签的标签内容侧重只有文字

 var divNode =  document.createElement('div')
    divNode.innerText = '我是box1'
    
    //创建一个img标签对象
    var imgNode = document.createElement('img')
    imgNode.src = 'img/thumb-1.jpg'

2添加节点

a.在指定的标签中的最后,添加一个节点
父节点.appendChild(需要添加的节点)

var div1Node = document.getElementById('div1')
    function addDiv(){
        var divNode =  document.createElement('div')
        divNode.innerText = '我是box1'
        div1Node.appendChild(divNode)
    }

b.在指定的节点前插入一个节点
父节点.insertBefore(新节点, 指定节点) - 在父节点中的指定节点前插入新节点

div1Node.inserBefore(imgNode, div1Node.firstChild)

3.删除节点

父节点.removeChild(子节点) - 删除父节点中指定的节点

div1Node.removeChild(imgNode)

清空标签(删除所有的子标签)

div1Node.innerHTML = null

节点.remove() - 将节点从浏览器中删除

5 删除广告

6动态添加和删除

7DOM属性操作

1.属性的点语法操作

节点.属性 - 获取属性值; 节点.属性 = 新值 - 修改属性的值

    console.log(imgNode.src)
    imgNode.title = '图片1'
    
    var name = 'src'

2.通过相应方法对属性进行操作

a.获取属性
节点.getAttribute(属性名)
var srcAttr = imgNode.getAttribute(name)
console.log(srcAttr)

b.给属性赋值
节点.setAttribute(属性名, 值)

imgNode.setAttribute('title', '帅哥1')

c.删除属性
节点.removeAttribute(属性值)

    var buttonNode = document.getElementsByTagName('button')[0]

让按钮可以点击

buttonNode.disabled = ''

添加属性

buttonNode.ytIndex = 100

删除属性

buttonNode.removeAttribute('ytIndex')

8.BOM 基础

1.什么是BOM - 浏览器对象模型(broser object model)

js中提供了一个全局的window对象,用来表示当前浏览器
js中声明的全局变量,其实都是绑定在window对象中的属性(使用window的属性和方法的时候前面可以加window,也可以省略)

    var a = 100;  //window.a = 100
    console.log(a, window.a)  
    //window.alert('你好！')
    //alert('你好！')
    //2.window基本操作
    //a.打开新窗口
    //window.open('http://www.baidu.com')  
    //b.关闭窗口
    //window.close()
    //c.移动当前窗口
    //窗口对象.moveTo(x坐标, y坐标)
    function windowAction(){
        myWindow = window.open('','','width=200,height=300')
        myWindow.moveTo(300, 300)
        //d.调整窗口大小
        myWindow.resizeTo(400, 400)
        //e.刷新(暂时看不到效果)
        //true -> 强制刷新
        window.reload(true)
    }

f.获取浏览器的宽度和高度
innerWidth\innerHeight - 浏览器显示内容部分的宽度和高度
outerWidth\outerHeight - 整个浏览器的宽度和高度

    console.log(window.innerWidth, window.innerHeight)
    console.log(window.outerWidth, window.outerHeight)

3弹框

a.alert(提示信息) - 弹出提示信息(带确定按钮)

window.alert('alert弹出')

b.confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值,取消 - false, 确定 - true

result = window.confirm('confirm,是否删除?')
console.log('===:',result)

function closeAction(){
        var result = window.confirm('是否删除?')
        if(result==false){
            return
        }
        var divNode = document.getElementById('div1')
        divNode.remove()
    }

c.prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消, 确定按钮的提示框; 点取消, 返回值是 null; 点确定返回值是输入框中输入的内容

        var result = window.prompt('message', 'defalut')
    console.log(result)

9定时事件

1.

setInterval(函数,时间) - 每隔指定的时间调用一次函数, 时间单位是毫秒l;返回定时对象
clearInterval(定时对象) - 停止定时
1000毫秒 = 1秒

  var pNode = document.getElementById('time')
  var num = 0
  //开始定时
  var interval1 = window.setInterval(function(){
      //这个里面的代码每个1秒会执行一次
      num ++
      //console.log(num)
      pNode.innerText = num
      
      if(num == 10){
          //停止指定的定时
          window.clearInterval(interval1)
      }
  }, 1000)

setTimeout(函数, 时间) - 隔指定的时间调用一次函数(函数只会调用一次,就像定时炸弹)
clearTimeout(定时对象) - 停止定时

    var message = '爆炸!!!!!!!!!!!'
    var timeout1 = window.setTimeout(function(){
        console.log(message)
    }, 10000)
    
    function clearBoom(){
        //
        window.clearTimeout(timeout1)
        console.log('炸弹被拆除')
    }

10 自动跳转



    
        
        
        
    
    
        
        
            5s后自动跳转到百度...
            
            马上跳转

1.事件

js是事件驱动语言

1.事件三要素(事件源、事件、事件驱动程序)

例如：
小明打狗，狗嗷嗷叫！ --- 事件;在这个事件中狗是事件源, 狗被打就是事件，狗嗷嗷叫就是事件驱动程序
小明打狗，他老爸就打他 --- 狗是事件源,狗被打是事件，小明被打是事件驱动程序
点击按钮，就弹出一个弹框 - 事件源：按钮, 事件：点击, 驱动程序：弹出弹框

2.绑定事件

第一步：获取事件源
第二步：绑定事件
第二步：写驱动程序

在标签内部给事件源的事件属性赋值
标签事件属性='驱动程序'>
标签事件属性='函数名()'> - 一般不这样绑定
/注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中的this关键字是

window
    function showAlert(){
        console.log(this)
    }

b.通过节点绑定事件1
标签节点.事件属性 = 函数
注意：这个时候函数中的this是事件源

    var btnNode = document.getElementById('btn2');
    function changeColor(){
        console.log(this)
        this.style.backgroundColor = 'skyblue'
    }
    btnNode.onclick = changeColor;

c.通过节点绑定事件2
标签节点.事件属性 = 匿名函数
注意：这个时候函数中的this是事件源

    var btn3Node =  document.getElementById('btn3');
    btn3Node.onclick = function(){
        this.style.color = 'red';
    }

d.通过节点绑定事件3
节点.addEventListener(事件名,函数) - 指定的节点产生指定的事件后调用指定函数
事件名 - 字符串，去掉on
注意：这个时候函数中的this是事件源; 这种方式可以给同一个节点的同一事件绑定多个驱动程序

    var btn4Node = document.getElementById('btn4');
    btn4Node.addEventListener('click', function(){
        this.style.color = 'yellow';
    });
    btn3Node.addEventListener('click', function(){
        this.style.backgroundColor = 'yellow';
    })

3.获取事件对象
当事件的驱动程序时一个函数的时候，函数中可以设置一个参数，来获取当前事件的事件对象

    var div1Node = document.getElementById('div1');
    div1Node.onclick = function(evt){
        //参数evt就是事件对象
        //a.clientX/clientY - 事件产生的位置的坐标(相对浏览器内容部分)
        console.log(evt.clientX, evt.clientY);
        
        console.log(evt.offsetX, evt.offsetY);
        console.log(this.style.width)
        if(evt.offsetX < 100){
            this.style.backgroundColor = 'red';
        }else{
            this.style.backgroundColor = 'yellow';
        }
    }

12常见事件类型

常见事件类型

1.onload - 页面加载完成对应的事件(标签加载成功)

window.onload = 函数

2.鼠标事件

onclick - 点击
onmouseover
onmouseout
...

3.键盘事件

onkeypress - 按下弹起
onkeydown
onkeyup

4.输入框内容改变

onchange - 输入框输入状态结束

day25-web前端