PHP程序员小白到大牛集训(12期免息)
作者信息

青灯夜游

今天学习一小步,明天提升一大步

最近文章
php怎么去掉含字符串的数组元素604
php怎么只输出数组键值188
php关联数组中怎么去掉空值798
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

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

    原创2022-04-28 14:30:22726 关注公众号:每天精选资源文章推送

    节点访问的方法: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()方法,主要用于获得指定元素的同级所有元素

    • next()方法,主要用于获得指定元素的下一个同级元素

    • nextAll()方法,主要用于获得指定元素的下一个同级的所有元素

    • nextUntil()方法,主要用于获得指定元素的下一个同级元素,这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素

    • prev()方法,主要用于获得指定元素的上一级同级元素

    • prevAll()方法,主要用于获得指定元素上一级所有的同级元素

    • prevUntil()方法,主要用于获得指定元素的上一个同级元素,这个同级元素必须为指定元素与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()

    • children()方法:获取该元素下的直接子集元素

    • 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]); // 打印获取到的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中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:jquery
  • 相关文章

    相关视频


    专题推荐