Rumah > Artikel > hujung hadapan web > jQuery yang ringkas dan mudah difahami: operasi jQuery

jQuery yang ringkas dan mudah difahami: operasi jQuery

WBOYasal: 2023-09-03 22:09:12635semak imbas

Buat, manipulasi dan tambah HTML secara dinamik

Anda boleh membuat penanda HTML secara dinamik dengan menghantar rentetan HTML mentah ke fungsi jQuery.

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){
      alert($('<div><a></a></div>').get(0).nodeName); // Alerts "DIV"
      alert($('<div><a></a></div>').length); // Alerts "1" <div> is in the wrapper set
      alert($('<div><a></a></div><div><a></a></div>').length); // Alerts "2" <div> are in the set
  })(jQuery); </script>
</body>
</html>

Perlu diambil perhatian bahawa apabila menggunakan fungsi jQuery untuk mencipta struktur DOM, hanya elemen akar dalam struktur akan ditambahkan pada set pembalut. Dalam contoh kod sebelumnya, elemen <div> akan menjadi satu-satunya elemen dalam set pembalut. <code><div> 元素将是包装器集中的唯一元素。 <p>一旦创建了 HTML 结构中的任何元素，我们就可以使用 <code>find() 方法对其进行操作。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        (function ($) {
            $('<div><a></a></div>')
                 .find('a')
                .text('jQuery')
                .attr('href', 'http://www.jquery.com');
        })(jQuery); </script>
</body>
</html>

对新创建的 HTML 进行操作后，还可以使用 jQuery 的操作方法之一将其添加到 DOM 中。下面我们使用 appendTo() 方法将标记添加到页面。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('<div><a></a></div>')
      .find('a')
      .text('jQuery')
      .attr('href', 'http://www.jquery.com')
      .end().appendTo('body'); // end() is used to exit the find() method
  })(jQuery); </script>
</body>
</html>

注释：不包含属性的简单元素 - 例如$('<div></div>') - 通过 document.createElement DOM 方法创建，而所有其他情况都依赖于 innerHTML 属性。事实上，您可以直接向 jQuery 函数传递使用 document.createElement -e.g 创建的元素。 $(document.createElement('div'))。

传递给 jQuery 的 HTML 字符串不能包含在 <div> 元素内可能被视为无效的元素。 <p>传递给 jQuery 函数的 HTML 字符串必须格式正确。</p> <p>传递 jQuery HTML 时，您应该打开和关闭所有 HTML 元素。不这样做可能会导致错误，主要是在 Internet Explorer 中。为了安全起见，请始终关闭 HTML 元素并避免编写快捷 HTML - 例如<code>$(<div></div>).

摸索index()方法

您可以通过将元素传递给 index() 方法来确定包装集中元素的索引。例如，假设您有一个包含网页中所有 <div> 元素的包装集，并且您想知道最后一个 <code><div> 元素的索引。 <pre class="brush:html;toolbal:false;"> <!DOCTYPE html> <html lang="en"> <body> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Alerts "3" alert($('div').index($('div:last'))); })(jQuery); </script> </body> </html> </pre> <p><code>index() 的使用并没有真正击中要害，直到我们考虑如何将它与事件一起使用。例如，通过点击下面代码中的 <div> 元素，我们可以将点击的 <code><div> 元素（使用关键字 <code>this）传递给 index() 方法来确定点击的 <div> 的索引。 <pre class="brush:html;toolbal:false;"> <!DOCTYPE html> <html lang="en"> <body> <div id="nav"> <div>nav text</div> <div>nav text</div> <div>nav text</div> <div>nav text</div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { // Alert index of the clicked div amongst all div's in the wrapper set $('#nav div').click(function () { alert($('#nav div').index(this)); // or, a nice trick... alert($(this).prevAll().length); }); })(jQuery); </script> </body> </html> </pre> <hr> <h2>摸索 text() 方法</h2> <p>人们可能会错误地认为 <code>text() 方法仅返回包装器集中第一个元素的文本节点。但是，它实际上会连接包装器集中包含的所有元素的文本节点，然后将连接后的值作为单个字符串返回。确保您了解此功能，否则您可能会得到一些意想不到的结果。

<!DOCTYPE html>
<html lang="en">
<body>
    <div>1,</div>
    <div>2,</div>
    <div>3,</div>
    <div>4</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     alert($('div').text()); // Alerts "1,2,3,4"
 })(jQuery); </script>
</body>
</html>

使用正则表达式更新或删除字符

使用 JavaScript replace() 方法结合一些 jQuery 功能，我们可以非常轻松地更新或删除元素中包含的文本中的任何字符模式。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        I really hate using JavaScript.     I mean really hate it!     It is the best twister
        ever!
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
var $p = $('p');
      // Replace 'hate' with 'love'
      $p.text($p.text().replace(/hate/ig, 'love'));
      // Remove 'twister' and replace it with nothing
      $p.text($p.text().replace(/twister/ig, ''));   // Keep in mind that text() returns a string, not the jQuery object.
      // That is how the replace() string method is chained after using text()
  })(jQuery); </script>
</body>
</html>

您还可以更新从 html() 返回的字符串中包含的任何字符。这意味着您不仅可以更新文本，还可以通过正则表达式更新和替换 DOM 元素。

摸索 .contents() 方法

.contents() 方法可用于查找所有子元素节点，包括元素内部包含的文本节点。然而，有一个问题。如果检索到的内容仅包含文本节点，则所选内容将作为单个文本节点放置在包装器集中。但是，如果您要检索的内容在文本节点中包含一个或多个元素节点，则 .contents() 方法将包含文本节点和元素节点。检查下面的代码以掌握这个概念。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>I love using jQuery!</p>
    <p>I love <strong>really</strong> using jQuery!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Alerts "I love using jQuery!" because no HTML elements exist
      alert($('p:first').contents().get(0).nodeValue);
      // Alerts "I love"
      alert($('p:last').contents().get(0).nodeValue);
      // Alerts "really" but is an HTML element, not a text node
      alert($('p:last').contents().eq(1).text());
      // Alerts "using jQuery!"
      alert($('p:last').contents().get(2).nodeValue);
  })(jQuery); </script>
</body>
</html>

请注意，当包装集中的项目是文本节点时，我们必须使用 .get(0).nodeValue 提取值。 contents() 方法对于提取文本节点值很方便。可以使用 contents() 从 DOM 结构中仅提取文本节点。

<!DOCTYPE html>
<html lang="en">
<body>
    <p>jQuery gives me <strong>more <span>power</span></strong> than any other web tool!
    </p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('p')  .find('*') // Select all nodes
      .andSelf() // Include <p>
      .contents() // Grab all child nodes, including text
      .filter(function() {return this.nodeType == Node.TEXT_NODE;}) // Remove non-text nodes
      .each(function (i, text) { alert(text.nodeValue) }); // Alert text contained in wrapper set
  })(jQuery); </script>
</body>
</html>

使用remove()不会从包装集中删除元素

当您使用 remove() 时，来自 DOM 的 DOM 片段已删除的 DOM 结构中包含的元素仍然包含在包装集中。您可以删除一个元素，对该元素进行操作，然后将该元素实际放回到 DOM 中，所有这些都在单个 jQuery 链中。

<!DOCTYPE html>
<html lang="en">
<body>
    <div>remove me</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('div')
          .remove().html('<a href="http://www.jQuery.com">jQuery</a>')
          .appendTo('body');
  })(jQuery); </script>
</body>
</html>

这里的要点是，仅仅因为您 remove()

Setelah mana-mana elemen dalam struktur HTML dicipta, kami boleh mengendalikannya menggunakan kaedah find(). 🎜 rrreee 🎜Selepas memanipulasi HTML yang baru dibuat, anda juga boleh menambahkannya pada DOM menggunakan salah satu kaedah manipulasi jQuery. Di bawah kami menggunakan kaedah appendTo() untuk menambah markup pada halaman. 🎜 rrreee 🎜Nota: Elemen ringkas tanpa atribut - cth. $('<div></div>') - melalui kaedah DOM document.createElement, semua kes lain bergantung pada atribut innerHTML. Malah, anda boleh menghantar terus elemen yang dicipta menggunakan document.createElement -cth kepada fungsi jQuery. $(document.createElement('div')). 🎜 🎜Rentetan HTML yang dihantar ke jQuery tidak boleh terkandung dalam elemen

<div> yang mungkin dianggap tidak sah. 🎜
🎜Rentetan HTML yang dihantar ke fungsi jQuery mesti dibentuk dengan baik. 🎜
🎜Apabila menghantar HTML jQuery, anda harus membuka dan menutup semua elemen HTML. Kegagalan berbuat demikian boleh mengakibatkan ralat, terutamanya dalam Internet Explorer. Untuk selamat, sentiasa tutup elemen HTML dan elakkan menulis HTML pintasan - seperti <code>$(<div></div>)

.🎜

🎜Meneroka kaedah indeks()🎜 🎜Anda boleh menentukan indeks elemen dalam set berbalut dengan menghantar elemen ke kaedah index(). Sebagai contoh, katakan anda mempunyai set pembalut yang mengandungi semua elemen

<div> dalam halaman web dan anda ingin mengetahui indeks elemen <code><div> yang terakhir. 🎜
rrreee
Penggunaan 🎜<code>index()

tidak begitu berkesan sehingga kami mempertimbangkan cara menggunakannya dengan acara. Contohnya, dengan mengklik pada elemen <div> dalam kod di bawah, kita boleh menghantar elemen <code><div> yang diklik (menggunakan kata kunci <code>this >) Berikan kaedah index() cara untuk menentukan indeks

<div> yang diklik. 🎜
rrreee
<hr>
🎜Meneroka kaedah teks()🎜
🎜Orang ramai mungkin tersalah anggap bahawa kaedah <code>text()

hanya mengembalikan nod teks elemen pertama dalam set pembalut. Walau bagaimanapun, ia sebenarnya menggabungkan nod teks semua elemen yang terkandung dalam set pembalut dan mengembalikan nilai yang digabungkan sebagai rentetan tunggal. Pastikan anda memahami ciri ini atau anda mungkin mendapat beberapa hasil yang tidak dijangka. 🎜 rrreee

🎜Kemas kini atau padam aksara menggunakan ungkapan biasa🎜 🎜Menggunakan kaedah JavaScript replace() digabungkan dengan beberapa fungsi jQuery, kami boleh mengemas kini atau mengalih keluar sebarang corak aksara dalam teks yang terkandung dalam elemen dengan sangat mudah. 🎜 rrreee 🎜Anda juga boleh mengemas kini mana-mana aksara yang terkandung dalam rentetan yang dikembalikan daripada html(). Ini bermakna anda bukan sahaja boleh mengemas kini teks, tetapi juga mengemas kini dan menggantikan elemen DOM melalui ungkapan biasa. 🎜

🎜Meneroka kaedah .contents()🎜 Kaedah 🎜.contents() boleh digunakan untuk mencari semua nod elemen anak, termasuk nod teks yang terkandung dalam elemen. Walau bagaimanapun, terdapat masalah. Jika kandungan yang diambil hanya mengandungi nod teks, pemilihan akan diletakkan dalam set pembalut sebagai satu nod teks. Walau bagaimanapun, jika kandungan yang anda dapatkan mengandungi satu atau lebih nod elemen dalam nod teks, kaedah .contents() akan mengandungi kedua-dua nod teks dan nod elemen. Semak kod di bawah untuk memahami konsep ini. 🎜 rrreee 🎜Sila ambil perhatian bahawa apabila item dalam set pembalut ialah nod teks, kita mesti menggunakan .get(0).nodeValue untuk mengekstrak nilai. Kaedah contents() adalah mudah untuk mengekstrak nilai nod teks. Anda boleh menggunakan contents() untuk mengekstrak nod teks sahaja daripada struktur DOM. 🎜 rrreee

🎜Menggunakan remove() tidak akan mengeluarkan elemen daripada set yang dibalut🎜 🎜Apabila anda menggunakan remove(), elemen yang terkandung dalam struktur DOM dari mana serpihan DOM telah dialih keluar masih disertakan dalam set pembalut. Anda boleh mengalih keluar elemen, melakukan operasi pada elemen itu, dan kemudian meletakkan elemen itu semula ke dalam DOM, semuanya dalam rantai jQuery tunggal. 🎜 rrreee 🎜Maksudnya di sini ialah hanya kerana anda remove() elemen tidak bermakna ia telah dialih keluar daripada set pembungkus jQuery. 🎜

Atas ialah kandungan terperinci jQuery yang ringkas dan mudah difahami: operasi jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jQuery yang ringkas dan mudah difahami: operasi jQuery

Buat, manipulasi dan tambah HTML secara dinamik

摸索index()方法

使用正则表达式更新或删除字符

摸索 .contents() 方法

使用remove()不会从包装集中删除元素

Artikel berkaitan