jQueryのandSelf()メソッドの使用例

巴扎黑
リリース: 2017-06-24 10:33:22
オリジナル
1335 人が閲覧しました

この記事では、主に jQuery での andSelf() メソッドの使用方法を紹介します。この例では、以前に選択した要素を現在の要素コレクションに追加するための andSelf() メソッドの使用スキルを分析します。必要な友人はそれを参照できます

。この記事では、例について説明します。 jQuery で andSelf() メソッドを使用する方法を学びます。皆さんの参考に共有してください。具体的な分析は次のとおりです:

このメソッドは、以前に選択した要素を現在の要素コレクションに追加できます。

文法構造:

コードは次のとおりです:

.andSelf()

このメソッドを理解するのは難しいかもしれないので、見やすくするために次の例を詳しく分析してみましょう。コード、インターセプトのみ コードの核となる内容。

コードは次のとおりです:

$(".second").
next
All().css("color","green"); 
<ul> 
  <li>html专区</li> 
  <li class="second">p+CSS专区</li> 
  <li>
Javascript
专区</li> 
  <li>Jquery专区</li> 
</ul>
ログイン後にコピー

上記のコードを実行すると、3 番目と 4 番目の li のテキストの色が緑色に設定されます。以下のコードを見てください:

コードは次のとおりです:

$(".second").nextAll().andSelf().css("color","green");
<ul>
  <li>html专区</li>
  <li class="second">p+CSS专区</li>
  <li>Javascript专区</li>
  <li>Jquery专区</li>
</ul>
ログイン後にコピー

上記のコードが実行されると、2 番目、3 番目、および 4 番目の li のテキストの色が緑色に設定されます。
2 つのコードの実行結果の違いは、andSelf() メソッドによるものです。

コードの実行プロセスを分析します。まず、クラス セレクターを使用して 2 番目の li 要素を選択し、次に nextAll() メソッドを使用して 3 番目と 4 番目の要素を現在の選択に変換します。ここで css() メソッドの呼び出しを開始すると、それが最初のコード部分の結果になります。 andSelf() メソッドが呼び出されると、以前に選択した要素が現在の要素コレクションに追加され、その後 css() メソッドが呼び出され、3 つの li 要素のフォントの色が緑色に変わります。

コード例:

コードは次のとおりです:

<!DOCTYPE html>
<html>
<
head
>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(
document
).ready(function(){ 
  $(".second").nextAll().andSelf().css("color","green"); 
}) 
</script> 
</head> 
<body> 
<p> 
  <ul> 
    <li>html专区</li> 
    <li class="second">p+CSS专区</li> 
    <li>Javascript专区</li> 
    <li>Jquery专区</li> 
  </ul> 
</p> 
</body> 
</html>
ログイン後にコピー

以上がjQueryのandSelf()メソッドの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート