pemilih asas jQuery

PemulajQuery, untuk mempelajari jQuery dengan lebih sistematik, hari ini saya meringkaskan pengalaman pembelajaran saya secara khusus dan menyiarkannya untuk dikongsi dengan pemula terutamanya meringkaskan pemilih asas jQuery. Pemilih asas

jQuery ialah pemilih yang paling biasa digunakan dalam jQuery dan juga merupakan pemilih paling mudah ia menggunakan ID< elemen 🎜>, CLASS, tag elemen ELEMEN, dsb. untuk mencari elemen DOM dalam HTML. Dalam halaman web, setiap nama ID hanya boleh digunakan sekali dan kelas boleh digunakan berulang kali. Dalam aplikasi jQury, anda boleh menggunakan pemilih asas ini untuk menyelesaikan kebanyakan kerja Mari kita lihat proses pelaksanaan khusus mereka. Untuk mengetahui dengan lebih baik, kami mula-mula menyenaraikan kod teg HTML di sini:

<div id="mydiv">
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <p>我是一个段落p标签</p>
    <span>我是一个行内span标签</span>
<div>

Kemudian mari kita lihat aplikasi pemilih asas ini

1. Pemilih ID

Pemilih: #id

Penerangan: Memadankan elemen berdasarkan id yang diberikan

Pengembalian: Elemen tunggal

Contoh:

<script type="text/javascript">    $(document).ready(function(){
        //id选择器        $("#mydiv").css("background","#f96");
     });</script>

Fungsi: Tukar id kepada mydiv Warna latar belakang elemen

2. pemilih kelas

pemilih : .class

Penerangan: Mengembalikan elemen yang sepadan dengan nama kelas diberikan

Pulangan: Elemen koleksi

Contoh:

<script type="text/javascript">    $(document).ready(function(){
        //class选择器        $(".mini").css("background","#f96");
     });</script>

Fungsi: Tukar warna latar belakang semua elemen dengan kelas mini

3 Elemen tag

Pemilih: elemen

Penerangan: Memadankan elemen

berdasarkan nama elemen yang diberikan: Elemen koleksi

Contoh: rreee

Fungsi: Tukar warna latar belakang semua elemen yang nama unsurnya ialah <div>

4. Semua elemen*

Pemilih : *

Penerangan: Menukar semua elemen tag html yang sepadan

Nilai pulangan: Elemen koleksi

Contoh:

<script type="text/javascript">    $(document).ready(function(){
        //element选择器        $("div").css("background","#f96");
     });</script>

Fungsi: Tukar warna latar belakang semua tag elemen html

5

Pemilih: pemilih,pemilih2,...pemilihN

Penerangan: Tukar setiap Elemen yang dipadankan oleh pemilih digabungkan dan dikembalikan bersama

Kembali: Tetapkan elemen

Contoh:

<script type="text/javascript">    $(document).ready(function(){
        //*选择器        $("*").css("background","#f96");
     });</script>

Fungsi: Tukar warna latar belakang kelas mini dan elemen perenggan p

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div id="aaron"> <p>id="aaron"</p> <p>选中</p> </div> <div id="imooc"> <p>id="php中文网"</p> <p>jQuery选中</p> </div> <div id="imooc"> <p>id="php中文网"</p> <p>jQuery未选中</p> </div> <script type="text/javascript"> //通过原生方法处理 var div = document.getElementById('aaron'); div.style.border = "3px solid blue"; </script> <script type="text/javascript"> //通过jQuery直接传入id //id的唯一,只选择到了第一个匹配的id为php中文网的div节点 $("#imooc").css("border", "3px solid red"); </script> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus