masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pemilih asas jQuery (1)

Pemilih Asas

Apabila menggunakan pemilih, kita mesti terlebih dahulu menggunakan "$()" di dalam Untuk membungkus peraturan css, dan kemudian kembalikan objek jquery

Mari kita lihat pemilih mudah berikut, seperti yang ditunjukkan dalam rajah di bawah:

1.png

Mari kita mula-mula lihat pada pemilih ID berikut

Gunakan pemilih id untuk menukar warna teks dalam tag div

<!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(){
			$('#dv').css("color","red");
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
</body>
</html>

Dalam css, kami menulisnya seperti ini

#dv{

warna: merah; //Tambah gaya

}

Dalam jquery, kami memanggil menambah tingkah laku, tingkah laku ini Ia dipanggil menambah gaya

Ini ialah pemilih id, yang juga merupakan pemilih paling mudah dan pemilih yang paling biasa digunakan


Mari kita lihat Pemilih nama tag elemen

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").css("color","#f60");
		})
	</script>
</head>
<body>
	<div>php 中文网</div>
	<div>php 中文网</div>
	<div>php 中文网</div>
</body>
</html>

Lihat kod di atas, kami mempunyai berbilang tag div, dan tiada id, jadi kami perlu menggunakan pemilih tag elemen $("nama elemen"). Gelagat

Pemilih kelas

Mari kita lihat sekeping kod dahulu:

<!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(){
			$(".dv1").css("color","green");
		})
	</script>
</head>
<body>
	<div class="dv1">php 中文网</div>
	<div>php 中文网</div>
	<div class="dv1">php 中文网</div>
</body>
</html>

Menggunakan pemilih kelas, apabila kita menulis gaya css, .nama kelas dan kemudian tambah style , sudah tentu kita perlu menulis seperti ini dalam jquery: $(".dv1"). css, tetapi Perkara berikut tidak akan berkuat kuasa apabila menggunakan jquery Jika berbilang id muncul pada halaman, maka ini adalah kekurangan ketelitian dalam program pembangun

Jadi pembangun mesti mempunyai tabiat pengekodan yang baik id boleh muncul sekali (id yang sama)


Untuk membuktikan bahawa ID mengembalikan satu elemen, manakala nama tag elemen dan kelas mengembalikan berbilang, kita boleh menggunakan jquery teras untuk secara automatik Bawa kaedah panjang atribut atau saiz() untuk menyemak bilangan elemen yang dikembalikan

Mari kita gunakan contoh untuk menerangkan:

Dengan id

<!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(){
			alert($("#dv").size());
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
</body>
</html>

Kami ada 3 , tetapi hasil yang dikembalikan ialah 1

Apabila kita menggunakan kelas kelas

<!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(){
			alert($(".dv").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

hasil yang dikembalikan ialah 3

Gunakan nama tag: 

<!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(){
			alert($("div").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

The keputusan dikembalikan Ia 3

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(){ $('#dv').css("color","red"); }) </script> </head> <body> <div id="dv">php 中文网</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)  492528 permainan