jQ节点操作方法

删除节点

• remove()删除整个节点，可以自己删除自己
• 语法：$(selector).remove([expr])
• empty()清空节点内容
• 语法：$(selector). empty()
• detach()删除整个节点，保留元素的绑定事件、附加的数据
• empty remove 和 detach 执行完之后都有返回值，返回删除的节点

替换节点

• replaceWith()
• replaceAll()
• 注：两者的关系类似于append和appendTo

<button>点我</button>
<ul>
<li>我是新闻1</li>
<li>我是新闻2</li>
</ul>
<script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>
<script>
$('button').click(function () {
  let h1 = $('<h1>我爱学习</h1>')
  $('li:eq(0)').replaceWith(h1)
  //第一个li被h1所替换
  h1.replaceAll( $('li:eq(0)') )
  //用h1来替换第一个li
  })
  </script>

复制节点

• clone()用于复制某个节点
• 语法：$(selector).clone([events]);

$('li').eq(0).click(function () {
let a= $(this).clone(true)
//true复制事件处理，flase时反之
//false或者不传参数都不能实现复制事件
 $('ul').append(a)//把a插入ul之后

删除元素属性

• removeAttr()用来删除元素属性
• 语法：$(selector).removeAttr(name)
• 示例：$('.a img').removeAttr('alt')

获取元素属性

• prop，attr()用来获取与设置元素属性
• attr是获取元素的自定义属性，可以设置属性值

$('img').attr('width','100px')
$('img').attr('height','100px')

• prop是获取元素自身的属性
• 语法：$(selector).attr/prop(name)

遍历同辈元素

• filter 过滤 在集合元素中过滤出指定的元素
• parent()：获取元素的父级元素
• parents()：返回元素的所有祖先元素
• 用于获取紧邻匹配元素之后的元素 next()
• 用于获取紧邻匹配元素之前的元素 prev()
• 用于获取位于匹配元素前面和后面的所有同辈元素 siblings()
• 除了他自己 前面后面的都被选中
• each( ) ：规定为每个匹配元素规定运行的函数

$('li').each(function(i,e){
    each 回调函数里面的第一个参数表示元素的索引
第二个参数表示每一个遍历的原生元素
 })

遍历儿系

• children()方法可以用来获取元素的所有子元素
• find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

鼠标发生事件

• .mouseover - 当鼠标指针位于元素上方时，会发生 mouseover 事件
• .mouseout - 当鼠标指针离开元素上方时，会发生 mouseout 事件
• .hover - 鼠标移入和移出都会执行hover事件