jQuery补充知识

定时器案例

有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
	思考如何解决
         
<script>
  //获取三个对象
  let i1Ele = document.getElementById('i1')
  let b1Ele = document.getElementById('b1')
  let b2Ele = document.getElementById('b2')
  //将存储循环定时任务的变量定义为全局变量
  let t = null;
  //将展示时间的代码封装成函数
  function showTime() {
    //获取当前时间
    let currentTimeObj = new Date()
    //转换成格式化时间
    //将格式化时间展示到input框中
    i1Ele.value = currentTimeObj.toLocaleTimeString()
  }
  //绑定点击事件
  b1Ele.onclick = function () {
      //循环任务:每隔一秒获取一次当前时间
      if(!t){
          t = setInterval(showTime, 1000)
      }
  }
  b2Ele.onclick = function () {
      //结束循环任务
      clearInterval(t)
      t = null
  }
</script>

筛选器方法

下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

'链式操作的顶层原理：对象每次调用方法之后都会返回一个对象，这个对象也可以调用原来对象拥有的功能'

操作标签

  jQuery操作				js操作				效果
  
addClass()			classList.add()			添加指定的css类名
removeClass()		        classList.remove()		移除类名
hasClass()		        classList.contains()	        判断样式存不存在
toggleClass()		        classList.toggle()	        css类名有就移除没有添加

.css('样式名','值')             style.样式名='值'		 操作css样式

text()				innerText()			文本操作
html()				innerHTML()			文本操作
val()				value				value值
[0].files			files				文件操作

attr()				setAttrbute()			静态属性
				getAttrbute()
prop()								动态变换(checked)

append()			append()
prepend()
after()
before()

remove()										移除标签
empty()											清空标签

jQuery绑定事件

JS绑定事件
    标签对象.on事件名 = function(){事件代码}
        例如：btnEle.onclick = function(){alert(123)}

jQuery绑定事件
    方式1：jQuery对象.事件名(function(){事件代码})
        例如：$btnEle.click(function(){alert(123)})
    方式2：jQuery对象.on('事件名',function(){事件代码})
        例如：$btnEle.on('click',function(){alert(123)})
    有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2

阻止事件后续

能够触发form表单提交数据动作的标签有两个
    <input type='submit'>
    <button></button>
这两个标签自带点击提交事件
给已经有事件的标签绑定事件，会优先执行绑定的事件，再去执行自带的事件
我们也可以让标签自带的事件不执行：
    return false  或者
    e.preventDefault()
$(':submit').click(function(e)){
    alert('111222333')
    // return false	方式1
    e.preventDefault() //方式2
}

事件冒炮

如果子元素有的事件 父元素也有 那么子元素事件执行的时候，会一次向上反馈并执行父元素的相同事件。
阻止事件冒炮：
$("span").click(function(e)){
    alert("span");
    // return false;  方式1
    e.stopPropagation()		// 方式2
}

事件委托

创建标签的两种方式：
    JS：			document.createElement()
    jQuery:		 $('<标签名>')

事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托

$('div').on('click','button',function () {
	alert('123123123')
})
上述方式可以解决动态标签事件的执行问题(注意事件委托指的是标签内部的标签)