cari

Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah kaedah yang ada pada jquery untuk mengakses nod?

Apakah kaedah yang ada pada jquery untuk mengakses nod?

青灯夜游
青灯夜游asal
2022-04-28 14:29:581694semak imbas

Kaedah capaian nod: 1. children(), yang boleh mengakses semua elemen anak langsung bagi elemen yang dipilih 2. closest(), yang boleh mengakses elemen ancestor pertama bagi elemen yang dipilih; ), boleh mengakses unsur turunan unsur yang dipilih 4. pertama(), mengakses unsur pertama unsur yang dipilih 5. terakhir(), dsb.

Apakah kaedah yang ada pada jquery untuk mengakses nod?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Bagaimana jquery boleh mengakses nod

方法 描述
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() 把匹配元素集合缩减为指定范围的子集

Antaranya, secara amnya terdapat tujuh kaedah untuk mengakses dan menanyakan elemen adik beradik: adik beradik(), seterusnya(), seterusnyaSemua(), seterusnyaSehingga(), sebelum(), sebelumSemua(), sebelum()

  • kaedah adik beradik(), terutamanya digunakan untuk mendapatkan semua elemen pada tahap yang sama elemen yang ditentukan

  • kaedah seterusnya(), terutamanya digunakan untuk mendapatkan adik beradik seterusnya daripada kaedah Elemen elemen yang ditentukan

  • nextAll(), terutamanya digunakan untuk mendapatkan semua elemen adik beradik seterusnya bagi elemen yang ditentukan

  • nextUntil () kaedah, terutamanya Digunakan untuk mendapatkan elemen adik-beradik seterusnya unsur yang ditentukan ini mestilah unsur antara unsur yang ditentukan dan unsur yang ditetapkan oleh kaedah nextUntil()

  • kaedah >prev(), terutamanya Digunakan untuk mendapatkan elemen adik beradik peringkat atas bagi elemen yang ditentukan

  • kaedah prevAll(), terutamanya digunakan untuk mendapatkan semua elemen adik beradik di peringkat atas elemen yang ditentukan

  • kaedah prevUntil() digunakan terutamanya untuk mendapatkan elemen adik-beradik sebelumnya bagi elemen yang ditentukan ini mestilah elemen antara elemen yang ditentukan dan elemen yang ditetapkan oleh prevUntil () kaedah

Contoh:

kaedah adik beradik()

<!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>

Apakah kaedah yang ada pada jquery untuk mengakses nod?

kaedah() seterusnya

<!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>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

Apakah kaedah yang ada pada jquery untuk mengakses nod?

kaedah sebelumnya()

<!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>

Apakah kaedah yang ada pada jquery untuk mengakses nod?

Akses dan pertanyaan Terdapat dua kaedah untuk elemen anak: find() dan children()

  • kaedah kanak-kanak(): Dapatkan elemen subset langsung di bawah elemen

  • kaedah find(): Dapatkan semua elemen subset (termasuk subset subset) di bawah elemen 

<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:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
	// $("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
</script>
</html>

Apakah kaedah yang ada pada jquery untuk mengakses nod?

pada masa ini Mari buka item cari dan ulas 

<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:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	// console.log($("div").children(".no1")[0]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

tangkapan skrin yang sepadan:

Apakah kaedah yang ada pada jquery untuk mengakses nod?

[Pembelajaran yang disyorkan: video jQuery tutorial, bahagian hadapan web】

Atas ialah kandungan terperinci Apakah kaedah yang ada pada jquery untuk mengakses nod?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery Filter map 对象 选择器
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bolehkah tweenmax mengubah sifat css3?Artikel seterusnya：Bolehkah tweenmax mengubah sifat css3?

Artikel berkaitan

Lihat lagi