删除节点操作： remove():删除整个节点 (selector).empty(); detach():删除整个节点，保留元素的绑定事件、附加的数据 案列：
let x; //定义一个全局变量
$('button[title]').click(function(){
/* remove方法删除整个节点 包括子节点 */
$('ul').remove();
/* empty 清空节点的内容 会保留自身节点，子节点全部删除 */
$('ul').empty();
/* detach 删除整个节点，保留元素的绑定事件、附加的数据 */
x = $('h1').remove();
// console.log(x);
})
$('button[aa]').click(function(){
$('body').prepend(x);
})
/* detach remove 对于原生的绑定事件 删除之后，绑定的事件都起作用 */
document.getElementsByTagName('h1')[0].addEventListener('click',function(){
alert(123)
})
$('h1').on('click',function(){
alert(123)
})
$('h1').click(function(){
alert(123)
})
遍历前辈元素和filter
/* parent只返回当前元素的一个父节点 */
// console.log($('p').parent())
/*
parent()：获取元素的父级元素
parents()：元素元素的祖先元素
*/
/* parents会把当前元素的祖先节点全部返回 从自身往外找 找到了还会继续遍历上面的节点 */
// console.log($('p').parents('ul'))
/* closest()会返回document文档 从自身往外找 找到了就不找了 */
// console.log($('p').closest('ul'))
/* 区别 */
/* 效率上closest比parents更好 */
/* closest会找到靠近自己最近的一个父节点 */
/* parents会找到自己的所有的匹配的祖先元素 */
/* 把.fl筛选出来 做点什么 */
// $('li').filter('.f1').css('background','red');
/* 排除.f1 给除了.f1的元素做点事情 */
/* 排除多个class */
// $('li').not('.f1,.f2').css('background','red');
/* 排除一个class */
// $('li').not('.f1').css('background','red');
// $('li').not('.f2').css('background','red');
each遍历元素
$('button').click(function(){
/* each回调里面有两个参数，第一个表示元素的索引，第二个表示具体的元素（原生的） */
/* ele不是一个jq对象 */
$('li').each(function(index,ele){
// console.log(index+'-----'+ele.innerText)
// console.log(index+'-----'+$(ele).text())
// $('button').before( $(ele).text()+'<br>' )
/* 不克隆就是原物直接搬运，克隆就是拷贝一份，再搬运 */
if(index!=1){
$('button').before( $(ele).clone() )
}
})
})
prop和attr的区别
/* alt是本身就有的属性 所有两者都能使用 */
// alert( $('img').attr('alt') );
// alert( $('img').prop('alt') );
// alert( $('img').prop('data-title') );
// $('img').prop('data-title','我爱南京');
/* attr 和 prop的区别 */
/* 获取和设置自定义属性的时候 使用attr 不能使用prop */
/* 获取自身属性的时候使用prop */
console.log( $('input[type=checkbox]').attr('checked') ) //选中的时候 checked 未选中是undefined
console.log( $('input[type=checkbox]').prop('checked') ) //选中的时候 true 未选中是false
创建和插入节点
/* 原生 */
// let div = document.createElement('div')
// console.log(div);
/* 把DOM节点转化成jQuery节点 */
// console.log( $('<div></div>') );
// console.log( $('<h1 data-name="zhangsan">我为南京代言</h1>') );
/* $(A).append(B)表示将B追加到A中 */
// $('.box').append( $('<h1 data-name="zhangsan">我为南京代言</h1>') )
// document.getElementsByClassName('box')[0].appendChild(document.createElement('div'))
/* $(A).appendTo(B)表示把A追加到B中 */
// $('<h1 data-name="zhangsan">我为南京代言,我是张sir</h1>').appendTo('.box');
/* $(A). prepend (B)表示将B前置插入到A中 */
// $('.box').prepend('<h1 data-name="zhangsan">我为南京代言,我是张sir</h1>')
/* $(A). prependTo (B)表示将A前置插入到B中 */
// $('<h1 data-name="zhangsan">我为南京代言,我是张sir</h1>').prependTo('.box')
节点遍历
<!-- children()方法可以用来获取元素的所有子元素 -->
<!-- 获取<section>的子元素，但不包含子元素的子元素 -->
<script src="./jquery-1.12.4.js"></script>
<script>
// console.log( $('ul').children('p').css('border','1px solid red') )
/* 遍历同辈元素 */
// $('ul').children('p').prev().css('border','1px solid red')
// $('ul').children('p').next().css('border','1px solid red')
// console.log( $($('ul').children('li')[2]).css('border','1px solid red') )
// $('ul').children('li').eq(2).css('border','1px solid red')
// $('ul').children('li:eq(2)').next().next().css('border','1px solid red')
// $('ul').children('li:eq(2)').prev().prev().css('border','1px solid red')
/* next prev只是一个元素 */
/* 用于获取位于匹配元素前面和后面的所有同辈元素 */
$('ul').children('li:eq(2)').siblings('.aa').css('border','1px solid red')
</script>
附加知识点：
jQuery中 on 和addEventListener的区别：
<div id='one'></div>
jq : on 在绑定事件中
var one = document.getElementById('one');
one.on('click',function(){console.log(123)});
one.on('click',function(){console.log(456)});
控制台会输出456；可想而知，第二个覆盖了第一个函数。
one.addEventListener('click',function(){console.log(123)});
one.addEventListener('click',function(){console.log(456)});
控制台会输出123，456. 说明addEventListener可以同时绑定多个事件。
