ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryセレクターの使い方を詳しく解説examples_jquery
jQueryセレクターの使い方を詳しく解説examples_jquery
- WBOYオリジナル
- 2016-05-16 15:25:181432ブラウズ
この記事の例では、jQuery セレクターの使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
jQuery は 2 つのメソッドを使用して HTML 要素を選択します。1 つ目は CSS セレクターと Xpath セレクターを組み合わせて、jQuery のコンストラクターに送信される文字列を形成します ($("div > ul a") など)。方法は、jQuery オブジェクトのいくつかのメソッドを使用することです。これら 2 つの方法を組み合わせて使用することもできます。
CSS セレクターと XPath セレクターを使用して選択する方法は数多くあります。CSS セレクターの詳細については、このサイトの関連記事を参照してください。
まず、ID を介して要素を取得する方法を見てみましょう: $( "#id" ) 名前の前に # を追加して、引用符を失わないように注意してください。
msg の ID を持つspan要素をページに追加し、span要素にhelloworldを表示します。これは次のように実現できます。
<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>
次の例:
たとえば、ID が順序リストであるリストがあり、このリストの参照を取得するための jQuery は $("#ownedlist") で、値が次のクラス属性 $("#ownedlist") を追加します。 red.addClass("red")、addClass 関数は CSS 設定を要素に追加するために使用されます。リスト内の最後の li の参照を取得します $( "#ownedlist li:last" )。
次の例では、最後の li の内容を 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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。