属性操作

1.节点属性的增删改查

1)查
a.节点.属性
标签相关属性:
innerHTML - 标签内容(包含双标签内容中的其他标签和文件)
innerText - 标签中的文本内容
href,src,text,value,id等,根据标签属性直接获取; 注意:标签中的class属性在节点中对应的是className
如：pNode.innerHTML、pNode.innerText、aNode.href

样式相关属性: 可以通过style来获取样式相关属性
如：aNode.style.color、aNode.style.display
b.节点.getAttributse(属性名)

alert(aNode.getAttribute('href'))
alert(aNode.getAttribute('style'))

2)改、增
a. 节点.属性 = 新值

imgNode.src = 'img/aaa.ico'
imgNode.title = '路飞'
pNode.style.color = 'rgb(255, 0, 0)'  
pNode.ytIndex = 0    //添加属性
alert(pNode.ytIndex)

b.节点.setAttribute(属性名, 新值)
注意：inner相关的无效

imgNode.setAttribute('src', 'img/jd_logo.ico')

3)删
节点.removeAttribute(属性名)

imgNode.removeAttribute('src')

2.BOM操作

1.BOM - 浏览器对象模型(browser object model)

js提供了一个全局的对象window，指向的是浏览器
js中声明的所有的全局变量其实都是添加给window的属性

var a = 100
console.log(a, window.a)

2.基本操作

a.打开新的窗口: open() - 会返回被打开的窗口对应的对象
open() - 空白窗口
open(url) - 在新窗口打开指定网页
open(url,'','width=300,height=200') - 打开新的窗口并且设置窗口的宽度和高度

newWindow = window.open('01车牌号限行案例.html','', 'width=300,height=200')

b.移动窗口

newWindow.moveTo(100, 100)

c.设置窗口的大小

newWindow.resizeTo(500, 600)

d.浏览的宽高
inner是内容的宽度和高度
outer浏览器的宽度和高度

console.log('=====:',newWindow.innerWidth, newWindow.innerHeight)
console.log('!!!!!:',newWindow.outerWidth, newWindow.outerHeight)

3.弹框

a.alert(提示信息) - 提示框，只有提示信息和确定按钮
b.confirm(提示信息) - 提示框，有确定和取消按钮；返回是布尔值，true->点击确定，false->点击取消

result = confirm('是否确定删除?')
console.log(result)

c.prompt - 提示框，有一个输入框，一个确定按钮和取消按钮;
返回值是字符串，点击确定返回值是输入框中的内容，点击取消返回值是null

result = prompt('提示信息', '输入框中的默认值')
console.log(result)

3.计时事件

1.定时器
a.开启定时器
setInterval(函数,时间) - 每隔指定的时间调用一次指定的函数;返回是定时器对象
setTimeout(函数,时间) - 隔指定时间后调用一次指定函数(函数只会调用一次，相当于定时炸弹)
函数 - 可以是函数名，也可以是匿名函数
时间 - 单位是毫秒
b.停止定时
clearInterval(定时器对象) - 停止指定的定时器
clearTimeout(定时器对象) - 停止指定的定时器

    function timeAction(){
        console.log('aaa')
    }
    timer1 = setInterval(timeAction, 1000)
    
    //方案二: 匿名函数
    timer2 = setInterval(function(){
        console.log('bbb')
    },1000)
    timer22 = setTimeout(function(){
        console.log('时间到!')
    },5000)

4.事件绑定

js是事件驱动语言
1.事件三要素: 事件源、事件、事件驱动程序
小明打狗，狗咬他 -- 事件源：狗事件：打狗事件驱动程序: 狗咬他
小明打狗，他爸打他 -- 事件源：狗事件：打狗事件驱动程序: 他爸打他
点击按钮，跳转到其他页面 -- 事件源: 按钮事件:点击按钮事件驱动程序:跳转到其他页面
2.绑定事件
a.直接通过标签绑定事件 - 直接在事件对应的属性里写js代码
b.直接通过标签绑定事件 - 直接在事件对应的属性里写调用函数,这个函数中的this是window

    function buttonAction(){
        console.log(this)
    }

c.通过节点绑定事件 - 给节点的事件属性赋函数或者匿名函数
函数中this就是事件源(当前被点击的按钮)

    btnNode2 = document.getElementById('btn2')
    //给点击事件绑定函数
    btnNode2.onclick = buttonAction
    //给鼠标进入事件绑定函数
    btnNode2.onmouseover = function(){
        this.style.fontSize = '30px'
    }
    btnNode2.onmouseover = function(evt){
        this.style.color = 'red'
    }

d.通过节点绑定事件
节点.addEventListener(事件名, 事件驱动程序)
事件名: 去掉事件名前面的on, 例如onclick -> click
这种方式绑定事件，可以给同一个事件源的同一个事件绑定不同的驱动程序
this是事件源, evt是事件对象

    btnNode3 = document.getElementById('btn3')
    btnNode3.addEventListener('click', function(evt){
        console.log(this)
//      alert('按钮3被点击')
        this.style.color = 'red'
    })

3.驱动程序中的evt参数,代表事件对象

    boxNode1 = document.getElementById('box1')
    boxNode1.addEventListener('click', function(evt){
        if(evt.offsetX <= 75){
            this.style.backgroundColor = 'red'
        }else{
            this.style.backgroundColor = 'yellow'
        }
    })

补充：js中的随机数

console.log(Math.random())    //随机数0-1(小数)
console.log(parseInt(Math.random()*255))    //0-100的整数
console.log(parseInt(Math.random()*90+10))  //10-100的整数

HTMLday7总结