cari

Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang penggunaan pemilih jQuery examples_jquery

Penjelasan terperinci tentang penggunaan pemilih jQuery examples_jquery

WBOY
WBOYasal
2016-05-16 15:25:181396semak imbas

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>

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah pelaksanaan mudah kemahiran cloning_javascript array javascriptArtikel seterusnya：Kaedah pelaksanaan mudah kemahiran cloning_javascript array javascript

Artikel berkaitan

Lihat lagi