jQuery筛选器过滤 - 会coding的HAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery.js"></script>
<title>jQuery2</title>
</head>
<body>
<ol>
<li>第1项</li>
<li><i>33333333333333333333</i>第2项</li>
<li>第3项</li>
<li>第4项</li>
<li>第5项</li>
<li>第6项</li>
<li>第7项</li>
</ol>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<script>
// 1.jQuery对象是一个容器内部可以有多个标签元素
// 2.在jQuery对象上调用某些方法时会对jQuery对象中的每个标签元素都起作用
// 3.jQuery对象的某些方法会返回jQuery对象本身所以可以链式调用
// 链式调用的原理:对象方法能返回对象本身
// 使用筛选器过滤
// $('li').filter(':nth-child(2n)').css('color','blue')
// var lis = $('li')
// var filters = lis.filter(':nth-child(2n)')
// filters.css('color','blue')
// $('ul>li').filter(document.querySelectorAll('li:nth-child(2n)')).css('color','red')
// 包含指定元素
// $('li').has('i').css('color','blue')
// 排除掉一部分 not()从匹配元素集合中删除元素
// $('ol>li:odd,ul>li:odd').not('ol>li').css('color','blue')
// 切片
// $('li').slice(3,9).css('color','red')
// 合并两个jQuery对象生成jQuery对象
// $('ol>li:odd').add('ul>li:even').css('color','red')
// console.log($('ol>li:odd').add('ul>li:even'))
// 第3项
// $('ol>li:nth-child(4)').prev().nextAll(':odd').addBack().css('color','red')
</script>
</body>
</html>

发送评论编辑评论

发送评论 编辑评论