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')
类似切片,理解理解。