JavaScript操作DOM对象

1.操作表单

表单只接受布尔值的属性：disabled     checked    selected

自定义属性

除了上述属性以外，有时候我们还需要自己定有属性

1.在标签上一律以data-开头

2.在DOM对象上一律以dataset对象方式获取

上文中的dataset是一个对象，id和sm是里面的属性

2.定时器-间歇函数

1.setInterval(函数名，时间间隔)    

  let number = setInterval(function(){
				console.log("这是一个时间隔函数，每隔0.5s打印一次")
			   },500)
  //number是一个返回值，表示定时器的编号

 2.关闭定时器： clearInterval(定时器编号）

 记一个小知识点：在vue2模板语法中用{{data}}绑定定义的数据 

            在js里面可以通过innerhtml=`${data}` 绑定自己定义的自变量

             在vue里面使用v-moudel也可以绑定响应式数据

3.轮播图示例自动播放

	const image = document.querySelector('img')
    const text = document.querySelector('.sliderData text')
	let i = 0
	setInterval(function(){
		i++
        if(i >= sliderData .length){i = 0}
		//修改图片和文字
		image.src = sliderData[i].title
		text.innerHTML = sliderData[i].title
		//杀气拿出原有的样式
		document.querySelector('.sliderData .active').classList.remove('active')
		//对选中的小点增加样式
		document.querySelector(`.sliderData li:nth-child(${i+1})`).classList.add('active')
	},1000)

3.事件监听

元素对象.addEventListener('事件类型'，要执行的函数)

console.log('onload')
document.querySelector('.dianji2').addEventListener('click',function(){
	alert('早上好')
})

鼠标事件：click , mouseenter , mouseleave

焦点事件：focus, blur 

键盘事件：keydown , keyup

表单输入触发事件：input

4.事件对象

事件对象就是时间的对象，事件绑定回调函数的第一个参数就是事件对象（event）

document.querySelector('.btn').addEventListener('click', function (event)
  {
    console.log(event)
  })

常用的部分属性：

type :获得当前事件的类型

clientx/clienty :获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY :获得光标相对于dom元素左上角的位置

key ：用户按下键盘的值

如上图，可以得到按下的具体键盘，用if判断就可以控制键盘能控制

处理字符串空格  ：strim()方法可以去除字符串两侧的空格

5.环境对象

环境对象就是指函数内部特殊的变量this，代表当前函数运行时所处的对象

普通函数this指向的是window （指向调用者，谁调用指向谁）

以上示例使用同一个模板，通过绑定事件显示不同的内容

6.通过全选按钮控制后面的复选框

思路：1.获取大复选框

            2.获取所有的小复选框，获取为一个数组

            3.遍历小复选框的数组，让大复选框的checked等于大复选框的checked

//获取大复选框的对象
  const checkAll = document.querySelector('.checkAll')
  //获取小复选框的对象
  const cks = document.querySelectorAll('.checks')
  //为大复选框注册事件
  checkAll.addEventListener('click', function ()
  {
    //遍历得到的数组，让小复选框的属性与大复选框相等
    for (let i = 0; i < cks.length; i++) {
      cks[i].checked = this.checked
    }
  })
  //现在实现小复选框全选以后全选框选上
  for (let i = 0; i < cks.length; i++) {
    checkAll.addEventListener('click', function ()
    {
      //可以查询框框变大的框框，判断数量是不是等于总数
      const checkedNum = document.querySelector('.ck:chected')
      checkedNum === cks.length ? checkAll.checked = true : checkAll.checked = false 
    })
  }

在学习的时候看到一个知识点，很有用：

.check:checked{width:"200rpx";height:"200rpx"}

上面这个选择器可以实现选中盒子变大的效果