jQuery的元素选择举例

1、jQuery的一个很重要的特点就是它的链式操作

$('div').find('h2').eq(2).text()

这一行代码的意思就是：找到文档里的所有div，然后把这些div里面的所有h2找出来，返回一个伪数组，这个伪数组里装着全部的h2，然后找到它们中的第三个h2并且获取它的text内容。

$('div').find('h2').eq(0).text('你好').end()

这时的end要注意下，选择div时进入一个栈，find时又进入下一个栈，eq时又进入了一个栈，在当前的栈里将内容全部改成了‘你好’，通过end()方法退出当前栈回到上一个栈，也就是find('h2')这里，这样就可以对它进行其它的操作了。

2、元素选择

• filter() 和 not()

 $('h2').filter('.h2').css('background','red')

选择所有的h2标签中class是h2的元素，把它的背影变成红色
与filter相反的是not

$('h2').not('.h2').css('background',red)

在h2中排除掉.h2，把剩下的h2背影变成红色
注意：filter和not都是在当前栈中进行的操作

• has() 包含

$('div').has('span').css('font-size','15px')

操作的是包含了span标签的div，依然是在当前栈中进行的操作。注意：这里的包含是指子元素，不是包含什么id啊class什么的

• next() 和 prev()

$('div').filter('.father').next().css('background','blue')

next()和prev()选择的都是兄弟节点，不一定是得和自己一样的标签这里之前理解有误,这两个方法也会进入新的栈

• find()

$('div').find('h2')

这是找到div子元素中的h2并返回一个伪数组，和filter不同，filter是在当元素中过滤，而find则是在后代元素中找。

• eq()

$('div').find('h2').eq(0)

当前元素列中的第几个

• index()

$('div').index()

div元素在兄弟元素中的具体位置，返回一个数值

• 获取和设置内容text() html()

$('div').text()  // $('div').text('新的内容')

空的就是获取，有内容就是设置新的内容

• sibings()

$('div').siblings()  // $('div').siblings('h2')

返回div的所有兄弟元素，返回div兄弟元素中是h2的元素

• children() // parent()类似

$('div').children()

返回的是全部的子元素，和find()不同，find()是在所有的后代元素里找

3、元素选择和获取的其它API

parents()   //获取所有的祖先元素，可用参数进行匹配
siblings()   //获取兄弟（除自己以外）
nextAll()    //DOM树中元素同级兄弟元素中接下来的全部
prevAll()    //原理同上
nextUntil()  //往下截止（不包含截止元素）
prevUntil()  //兄弟元素往上截止（不包含）
parentsUntil() //同上

4、closest()

它必须要写筛选的参数，它是从自己开始找，不停往祖先元素找匹配的元素，并且只能找到一个元素

5、clone()

这个API很重要

<script>
     $('span').clone().appendTo('#div1')
</script>

<script>
     $('span').click(function(){
       console.log('span被点击了')
     })
     $('span').clone(true).appendTo('#div1')
     
  </script>

参数true就是克隆了之前的全部操作。

6、元素的包装

 $('span').wrap('<div>')  //这是对每个span标签外面都包一层
 $('li').wrapAll('<div>')    //这是对所有的li外面整体包一层,注意如果li里混进了其它标签，在整体包装的时候会被排队出去。
$('span').wrapInner('<p>')    //把span标签的子节点用一个p标签包起来
$('li').unwrap()  //删除包装，但是不删body

注意括号里是<div>标签

7、add()

let a = $('li')
let b = a.add('div')

在一个元素集合里添加新的元素，构成新的元素集合，之前的元素集合依然不变。

8、slice()

$('li').slice(1,3).css('color','red')

类似切片，理解理解。