JQuery要素を素早く操作する方法

今回は、JQuery要素を素早く操作する方法と、JQuery要素を操作する際の注意点を紹介します。実際の事例を見てみましょう。

まず、jquery で目的のノードを見つける方法を見てみましょう。

ステップ 1: シズルセレクター

は、要素の ID、クラス、タイプ、属性、属性値などに基づいて HTML 要素 を「検索」(または選択) します。簡単に言うと、それは に基づいています。 cssセレクター、さらに、いくつかの特定のセレクターがあります。

ステップ 2: 祖先をクエリする

parent()

このメソッドは、1 つ上のレベルの DOM ツリーのみをスキャンします

parents()

オプションのパラメーターを使用して、親要素の検索をフィルタリングします

選択した要素のすべての祖先要素を返します。ドキュメントのルート要素まで遡ります

parentsUntil()

指定された 2 つの要素間のすべての祖先要素を返します。例は次のとおりです。

$(document).ready(function(){
  //会返回span开始到p为止的祖先元素
  $("span").parentsUntil("p");
});

ステップ 3: 子孫をクエリする

children()

オプションのパラメータを使用して子要素の検索をフィルタリングできます

選択した要素のすべての直接の子要素を返します。このメソッドは DOM をトラバースするだけですツリーレベルごとに

find()

オプションのパラメータを使用して要素の検索をフィルタリングできます

最後の子孫まで、選択した要素の子孫要素を返します

ステップ 4: 兄弟をクエリします

siblings()

選択した要素のすべての兄弟要素を返します

next()

選択した要素の次の兄弟要素を返します

nextAll()

選択した要素の後のすべての兄弟要素を返します

nextUntil( )

指定された 2 つのパラメーター間の後続のすべての兄弟要素を返します

$(document).ready(function(){
  //返回介于 <h2>与<h6>元素之间的所有同胞元素
  
  $("h2").nextUntil("h6");
  
});

prev()、prevAll()、および prevUntil()

prev()、prevAll()、および prevUntil() メソッドは、上記のメソッドと同様の方法で動作しますただし、方向は逆です。前の兄弟要素を返します (DOM ツリー内の兄弟要素の後の要素をたどるのではなく、兄弟要素の前の要素に沿って移動します)。

ステップ 5: クエリ時にフィルタリングを追加する

first()

選択された要素の最初の要素を返します

last()

選択された要素の最後の要素を返します

eq()

例: $(element[flag]) は、element.eq(flag)

filter()

クエリ結果をフィルタリングします。以下の not() と似ていますが、逆の効果があります

not()

標準に一致しないすべての要素を返します

$(document).ready(function(){
  //返回不带有类名"target"的所有p元素
  
  $("p").not(".target");
  
});

要素が見つかったら、要件に従って見つかったノードを操作する必要があります。

ステップ 6: text()、html()、val()、attr()

text()、html()、val()、attr() にはコールバック関数があります。コールバック関数は、選択された要素リスト内の現在の要素のインデックスと元の (古い) 値の 2 つのパラメータを取ります。次に、関数の新しい値として使用する 文字列を返します

1.text() - 選択した要素のテキストの内容を設定または返します

2.html() - 選択した要素の内容を設定または返します(HTML マークを含む)

3.val() - フォームフィールドの値を設定または返します

4.attr() - 属性値を設定または返します

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
  
    return "旧文本: " + origText + " 新文本: index: " + i;
    
  });
  
});

ステップ 7: 要素を追加します

append( ) - 選択時 要素の内側の最後にコンテンツを挿入します

prepend() - 選択した要素の内側の先頭にコンテンツを挿入します

after() - 選択した要素の後にコンテンツを挿入します

before() - 前にコンテンツを挿入します選択した要素 🎜

第八步：删除元素

remove()可接受一个参数，允许你对被删元素进行过滤，empty()不可以

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

//等同于$("p.target").remove();
$("p").remove(".target");

第九步：替换元素

replaceAll()和replaceWith()功能类似，但是目标和源相反

replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceAll() - 用集合的匹配元素替换每个目标元素

第十步：class操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

hasClass() - 判断一个元素是否存在该class

第十一步：css()方法

设置或返回被选元素的一个或多个样式属性

css("propertyname"); - 返回propertyname属性的值

css("propertyname","value"); - 设置propertyname属性的值

css({"propertyname":"value","propertyname":"value",...}); - 设置多个值

第十二步：元素尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery代码性能优化方法总结

jQuery动态操作div步骤详解

以上がJQuery要素を素早く操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。