masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pemilih lapisan jQuery

HierarkiPemilih

Semua nod dalam dokumen mempunyai satu atau lain perhubungan antara mereka. Kita boleh menerangkan hubungan antara nod menggunakan perhubungan keluarga tradisional, dan menganggap pepohon dokumen sebagai salasilah keluarga Kemudian akan wujud perhubungan langsung antara nod, seperti bapa dan anak lelaki, abang dan datuk.

1.jpg

Masih banyak persamaan dan perbezaan antara pemilih tahap

Pemilih hierarki mempunyai nod rujukan

Pemilih keturunan mengandungi kandungan yang dipilih bagi pemilih anak

Pemilihan adik beradik am Elemen yang dipilih oleh pemilih adik beradik bersebelahan dan pemilih adik beradik am mestilah di bawah elemen induk yang sama

Pemilih
Lihat kod berikut : 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("div>a").css("color","red");
		})
	</script>
</head>
<body>
	<div>
		<a href="#">php 中文网</a>
	</div>
</body>
</html>

Cari elemen di bawahnya melalui div dan jadikan warna tag merah

Pemilih keturunan, kita telah membincangkannya di bahagian sebelumnya, kawan-kawan boleh lihat pada kod sumber

Pemilih adik beradik bersebelahan

Kod adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".p1 + p").css("color","red");
		})
	</script>
</head>
<body>
		<div>
			<p>php 中文网</p>
			<p class="p1">php 中文网</p>
			<p>php 中文网</p>
		</div>
</body>
</html>

Pemilih padanan adik beradik am

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".p1 ~ p").css("color","red");
		})
	</script>
</head>
<body>
		<div>
			<p>php 中文网</p>
			<p>php 中文网</p>
			<p>php 中文网</p>
			<p class="p1">php 中文网</p>
			<p>php 中文网</p>
			<p>php 中文网</p>
			<p>php 中文网</p>
		</div>
</body>
</html>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子选择器</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("div>a").css("color","red"); }) </script> </head> <body> <div> <a href="#">php 中文网</a> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  493000 permainan