• 技术文章 >web前端 >前端问答

    jquery有哪些对节点访问的方法

    青灯夜游青灯夜游2022-04-28 14:30:22原创290

    节点访问的方法:1、children(),可访问被选元素的所有直接子元素;2、closest(),可访问被选元素的第一个祖先元素;3、find(),可访问被选元素的后代元素;4、first(),访问被选元素的第一个元素;5、last()等。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery可对节点进行访问的方法

    方法描述
    add()把元素添加到匹配元素的集合中
    addBack()把之前的元素集添加到当前集合中
    children()返回被选元素的所有直接子元素
    closest()返回被选元素的第一个祖先元素
    contents()返回被选元素的所有直接子元素(包含文本和注释节点)
    each()为每个匹配元素执行函数
    end()结束当前链中最近的一次筛选操作,并把匹配元素集合返回到前一次的状态
    eq()返回带有被选元素的指定索引号的元素
    filter()把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
    find()返回被选元素的后代元素
    first()返回被选元素的第一个元素
    has()返回拥有一个或多个元素在其内的所有元素
    is()根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true
    last()返回被选元素的最后一个元素
    map()把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象
    next()返回被选元素的后一个同级元素
    nextAll()返回被选元素之后的所有同级元素
    nextUntil()返回介于两个给定参数之间的每个元素之后的所有同级元素
    not()从匹配元素集合中移除元素
    offsetParent()返回第一个定位的父元素
    parent()返回被选元素的直接父元素
    parents()返回被选元素的所有祖先元素
    parentsUntil()返回介于两个给定参数之间的所有祖先元素
    prev()返回被选元素的前一个同级元素
    prevAll()返回被选元素之前的所有同级元素
    prevUntil()返回介于两个给定参数之间的每个元素之前的所有同级元素
    siblings()返回被选元素的所有同级元素
    slice()把匹配元素集合缩减为指定范围的子集

    其中,访问并查询同级元素一般有七个方法:siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

    例:

    siblings()方法

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    	</head>
    
    	<body>
    		<div><span>Hello</span></div>
    		<p class="selected">Hello Again</p>
    		<p>And Again</p>
    
    		<script>
    			$("p").siblings(".selected").css("background", "yellow");
    		</script>
    
    	</body>
    </html>

    1.png

    next()方法

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    	</head>
    
    	<body>
    		<ul>
    			<li>list item 1</li>
    			<li>list item 2</li>
    			<li class="third-item">list item 3</li>
    			<li>list item 4</li>
    			<li>list item 5</li>
    		</ul>
    
    		<script>
    			$('li.third-item').next().css('background-color', 'red');
    		</script>
    
    	</body>
    </html>

    2.png

    prev()方法

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    		<style>
    			.siblings * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style>
    		<script>
    			$(document).ready(function() {
    				$("li.start").prev().css({
    					"color": "red",
    					"border": "2px solid red"
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<div style="width:500px;" class="siblings">
    			<ul>ul (父节点)
    				<li>li (兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li class="start">li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>
    		</div>
    
    	</body>
    </html>

    5.png

    访问并查询子元素有两种方法:find() 和 children()

    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div{
    			/*background-color: pink;*/
    		}
    	</style>
    </head>
    <body>
        <div>
        	<span>11</span>
        	<span>
        		<ul>
        			<li class="no1">aaa</li>
        			<li>bbb</li>
        			<li>ccc</li>
        		</ul>
        	</span>
        	<span>222</span>
        	<ul>
        		<li>ddd</li>
        		<li>eee</li>
        		<li>fff</li>
        	</ul>
        </div>
     
     
    </body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    	$("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
     
    	// $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    </script>
    </html>

    1.png

    此时我们再把find 这项打开注释

    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div{
    			/*background-color: pink;*/
    		}
    	</style>
    </head>
    <body>
        <div>
        	<span>11</span>
        	<span>
        		<ul>
        			<li class="no1">aaa</li>
        			<li>bbb</li>
        			<li>ccc</li>
        		</ul>
        	</span>
        	<span>222</span>
        	<ul>
        		<li>ddd</li>
        		<li>eee</li>
        		<li>fff</li>
        	</ul>
        </div>
     
    </body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    	// $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    	// console.log($("div").children(".no1")[0]);
     
     
    	$("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    	console.log($("div").find(".no1")[0]);
    </script>
    </html>

    对应截图:

    2.png

    【推荐学习:jQuery视频教程web前端

    以上就是jquery有哪些对节点访问的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:tweenmax能改变css3属性吗 下一篇:css3中渐变怎么改变角度
    千万级数据并发解决方案

    相关文章推荐

    • jquery怎么移除多个class• jquery怎么删除hidden属性• jquery怎么删除元素本身• jquery怎么实现元素向上滑动消失• jquery怎么往div末尾增加内容
    1/1

    PHP中文网