pemilih jQuery

Komponen teras jQuery ialah: enjin pemilih, yang mewarisi sintaks CSS dan boleh dengan cepat dan tepat memilih nama teg, nama atribut, status, dll. elemen DOM tanpa perlu risau tentang keserasian penyemak imbas >Jadi kebanyakan pemilih jQuery yang kami perkenalkan di bawah adalah serupa dengan pemilih CSS yang kami pelajari sebelum ini

Pemilih CSS digunakan untuk mencari dan mencari elemen pada halaman, dan menetapkan gaya Pergi ke elemen

Pemilih jQuery juga digunakan untuk mencari elemen Selepas kita mencari elemen, kita boleh menggunakan beberapa kaedah yang diberikan untuk mengubah suai, memadam atau memindahkan elemen

<. 🎜>
Apabila menggunakan pemilih jQuery, kita mesti menggunakan fungsi "$()" untuk membungkus peraturan css kami, dan selepas peraturan css diluluskan sebagai parameter kepada objek jQuery, ia dikembalikan Mengandungi objek jQuery elemen yang sepadan dalam halaman Kemudian, kita boleh melakukan operasi tingkah laku pada nod DOM yang diperoleh.

Pemilih Elemen

Pemilih elemen jQuery memilih elemen berdasarkan namanya.

Pilih semua <p> elemen dalam halaman:

$("p")

Contoh

Selepas pengguna mengklik butang, semua <p> akan bertukar warna:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css('color','red');           //添加一个行为
            });
        });
     </script>

</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Jalankan program untuk mencubanya

#id selector

jQuery #id selector memilih elemen yang ditentukan melalui atribut id elemen HTML.

Nota: ID hanya dibenarkan muncul sekali pada halaman Kami biasanya memerlukan pembangun untuk mematuhi dan mengekalkan peraturan ini. Tetapi jika anda muncul tiga kali dalam halaman dan menggunakan gaya css, maka ketiga-tiga elemen ini masih akan melaksanakan kesannya Tetapi jika anda melakukan ini dalam jQuery, anda akan menghadapi masalah Hanya satu ID akan berkuat kuasa, jadi kami mesti Jadikannya kebiasaan menggunakan hanya satu ID pada halaman

Sintaks untuk memilih elemen mengikut id adalah seperti berikut:

$("#test")

Instance

Apabila pengguna mengklik butang, elemen dengan atribut id="test" akan bertukar merah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").css('color','red');
            });
        });
    </script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html>

Jalankan program untuk mencubanya

.pemilih kelas

Pemilih kelas jQuery boleh mencari elemen mengikut kelas yang ditentukan.

Sintaksnya adalah seperti berikut:

$(".test")

Contoh

Selepas pengguna mengklik butang, semua elemen dengan atribut class="test" akan bertukar warna:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(".test").css('color','blue');
            });
        });
    </script>
</head>
<body>
<h2 class="test">class选择器</h2>
<p class="test">class选择器</p>
<button>点我</button>
</body>
</html>

Jalankan program untuk mencubanya

Lebih banyak contoh pemilih

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>标题</h2> <p>段落</p> <p id="test">#id选择器，点击我会隐藏</p> <button>点我</button> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

pemilih jQuery

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]