jQuery函数操作汇总——过滤和查找

最新推荐文章于 2022-03-18 22:13:59 发布

程序小白逆袭记

最新推荐文章于 2022-03-18 22:13:59 发布

阅读量205

点赞数

分类专栏： web客户端框架技术jQuery对象操作文章标签： web jquery

本文链接：https://blog.csdn.net/qq_43608567/article/details/105682234

版权

web客户端框架技术jQuery对象操作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

除了选择器之外，jQuery还为我们提供了以“方法”（类似于函数方法,更加语义化）形式存在的2种方式：（1）过滤方法；（2）查找方法。

jQuery进行对象过滤和对象选择的方法：
在jQuery对象中的元素对象数组中过滤出一部分元素来
1.first() 获取第一个元素
2.last() 获取最后个元素
3.eq(index|-index) 获取第N个元素
4.filter(selector) 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
5.not(selector) 删除与指定表达式匹配的元素
6.has(selector) 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
（1）jQuery对象过滤

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>15_筛选_过滤</title>
</head>

<body>
<ul>
	<li>AAAAA</li>
    <li title="hello" class="box2">88888</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDD</li>
    <li title="two"><span>88888</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br/>

<!-- 
在jQuery对象中的元素对象数组中过滤出一部分元素来
1.first()
2.last()
3.eq(index|-index)
4.filter(selector)
5.not(selector)
6.has(selector)
-->

<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	var $lis=$('ul>li')
	//1.ul下li标签的第一个
	//$lis.first().css('background','red')
	//$lis[0].style.background='red'
	
	//2.ul下li标签的最后一个
	//$lis.last().css('background','red')
	//3.ul下li标签的第二个
	//$lis.eq(1).css('background','red')
	//4.ul下li标签的title属性为hello的
	//$lis.filter('[title=hello]').css('background','red')
	//5.ul下li标签中title属性不为hello的
	//$lis.not('[title=hello]').css('background','red')
	//$lis.filter('[title!=hello]').css('background','red')
	//6.ul下li标签中有span子标签的
	$lis.has('span').css('background','red')
</script>
</body>
</html>

jQuery对象过略实例效果

（2）jQuery对象选择

在已经匹配的元素集合中根据选择器查找孩子/父母/兄弟标签
1.children([expr])：子标签中找
2.find(expr|obj|ele)：后代标签中找
3.yparent([expr])：父标签
4.prevAll([expr])：前面所有的兄弟标签
5.nextAll([expr])：后面所有的兄弟标签
6.siblings([expr])：前后所有的兄弟标签

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>16_筛选_查找孩子_父母_兄弟标签</title>
</head>

<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br />
<div>
    <ul>
    	<span>span文本1</span>
        <li>AAAAA</li>
        <li title="hello" class="box2">88888</li>
        <li class="box" id="cc">CCCCC</li>
        <li title="hello">DDDDD</li>
        <li title="two"><span>span文本2</span></li>
        <span>span文本3</span>
    </ul>
    <span>span文本444</span><br />
    <li>eeeee</li>
    <li>EEEEE</li>
    <br/>
</div>
<!-- 
在已经匹配的元素集合中根据选择器查找孩子/父母/兄弟标签
1.children([expr])：子标签中找
2.find(expr|obj|ele)：后代标签中找
3.yparent([expr])：父标签
4.prevAll([expr])：前面所有的兄弟标签
5.nextAll([expr])：后面所有的兄弟标签
6.siblings([expr])：前后所有的兄弟标签
-->

<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	var $ul=$('ul')
	//1.ul标签的第2个span子标签
	//$ul.children('span:eq(1)').css('background','red')
	
	//2.ul标签的第2个span后后代标签
	//$ul.find('span:eq(1)').css('background','red')
	
	//3.ul标签的父标签
	//$ul.parent().css('background','red')
	
	//4.id为cc的li标签的前面的所有的li标签
	var $li=$('#cc')
	//$li.prevAll('li').css('background','red')
	
	//5.id为cc的li标签的所有兄弟li标签
	$li.siblings('li').css('background','red')
	
</script>
</body>
</html>

jQuery对象查找实例效果
（3）jQuery对象应用实例：全选练习

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选练习</title>
</head>

<body>
<form method="post" action="">
	你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选全选/不全选
    <br />
    <input type="checkbox" name="items" value="足球" />足球 
    <input type="checkbox" name="items" value="篮球" />篮球 
    <input type="checkbox" name="items" value="羽毛球" />羽毛球 
    <input type="checkbox" name="items" value="乒乓球" />乒乓球 
    <br />
    <input type="button" id="checkedAllBtn" value="全 选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
</form>


<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	var $checkedAllBox=$('#checkedAllBox')
	var $items=$(':checkbox[name=items]')
	//1.点击‘全选’：选中所有爱好
	$('#checkedAllBtn').click(function(){
		$items.prop('checked',true)
		$checkedAllBox.prop('checked',true)
	})
	
	//2.点击‘全不选’：所有爱好都不勾选
	$('#checkedNoBtn').click(function(){
		$items.prop('checked',false)
		$checkedAllBox.prop('checked',false)
	})
	
	//3.点击‘反选’：改变所有爱好的勾选状态
	$('#checkedRevBtn').click(function(){
		$items.each(function() {
			this.checked=!this.checked
			})
			$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
	})
	
	//4.点击‘提交’：提示所以勾选的爱好
	$('#sendBtn').click(function(){
		$items.filter(':checked').each(function() {
           alert(this.value) 
        }) 
	})
	
	//5.点击‘全选/全不选’：选中所有爱好，或者全不选中
	$checkedAllBox.click(function(){
		$items.prop('checked',this.checked)
	})
	
	//6.点击某个爱好时，必要时更新‘全选/全不选’的选中状态
	$items.click(function(){
		$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
	})
	
</script>
</body>
</html>

程序小白逆袭记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery函数操作汇总——过滤和查找

除了选择器之外，jQuery还为我们提供了以“方法”（类似于函数方法,更加语义化）形式存在的2种方式：（1）过滤方法；（2）查找方法。jQuery进行对象过滤和对象选择的方法：在jQuery对象中的元素对象数组中过滤出一部分元素来1.first() 获取第一个元素2.last() 获取最后个元素3.eq(index|-index) 获取第N个元素4.filter(selector...
复制链接

扫一扫