Penjelasan terperinci tentang penggunaan pemilih jQuery examples

Penjelasan terperinci tentang penggunaan pemilih jQuery examples_jquery

WBOY

Lepaskan： 2016-05-16 15:25:18

asal

1410 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan pemilih jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

jQuery menggunakan dua kaedah untuk memilih elemen html Yang pertama menggunakan pemilih CSS dan Xpath untuk digabungkan untuk membentuk rentetan yang dihantar kepada pembina jQuery (seperti: $("div > ul a")); kaedah adalah menggunakan beberapa kaedah objek jQuery. Kedua-dua kaedah ini juga boleh digunakan secara gabungan.

Terdapat banyak cara untuk memilih menggunakan pemilih CSS dan XPath Untuk pemilih CSS terperinci, sila rujuk artikel yang berkaitan di tapak ini.

Pertama, mari kita lihat untuk mendapatkan elemen melalui IDnya: $( "#id" ).

Tambah elemen span dengan id msg pada halaman dan paparkan helloworld dalam elemen span Ini boleh dicapai seperti berikut:

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
   <script type="text/javascript">
    $( function() {
     $("#msg").html("Hello, world."); } );
   </script>
  </head>
<body>
  <span id="msg"/>
</body>
</html>

Salin selepas log masuk

Nota: #id perlu disertakan dalam petikan dan fungsi html dengan parameter digunakan untuk menetapkan nilai kepada innerHTML elemen.

Contoh seterusnya:

Sebagai contoh, kami mempunyai senarai yang IDnya senarai tertib, maka jQuery untuk mendapatkan rujukan senarai ini ialah $("#orderedlist"), dan tambahkan atribut kelas $("#orderedlist") dengan nilai merah. addClass("red"), fungsi addClass digunakan untuk menambah tetapan CSS pada elemen. Dapatkan rujukan li terakhir dalam senarai, $( "#orderedlist li:last" ).

Contoh berikut menukar kandungan li terakhir kepada hello, world.

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
  <script type="text/javascript">
    $( function() {
     alert("wait");
     $( "#orderedlist li:last" ).html("hello, world.");
    } );
  </script>
</head>
<body>
  <ol id="orderedlist">
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
  </ol>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.