JQuery要素の操作方法-jsチュートリアル-php.cn

JQuery要素の操作方法

php中世界最好的语言

リリース： 2018-06-06 17:37:46

オリジナル

1350 人が閲覧しました

今回は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() - 選択した要素の前にコンテンツを挿入します選択された要素

第 8 ステップ: 要素を削除する

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中文网其它相关文章！