jQueryのセレクタは、jQueryライブラリの中で最も重要な部分の一つです。
jQueryのセレクタ
jQueryのセレクタを使用すると、HTML要素(複数可)を選択し、操作することができます。
jQueryのセレクタが、属性など多くの自分の名前、ID、クラス、種類、属性、値に基づいてHTML要素を「見つける」(または選択)するために使用されています。It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. これは、既存のに基づいているCSSのセレクタ 、および加えて、それはいくつかの独自のカスタムセレクタを持っています。
$():jQueryの中のすべてのセレクタは、ドル記号、括弧で始まります。
要素セレクタ
jQueryの要素セレクタは、要素名に基づいて要素を選択します。
あなたはこのようなページのすべての<P>要素を選択することができます。
$("p")
例
ユーザーがボタンをクリックすると、すべての<P>要素が非表示になります。
例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
»それを自分で試してみてください#IDセレクタ
jQueryの#IDセレクタは、特定の要素を見つけるために、HTMLタグのid属性を使用しています。
あなたは、単一の、ユニークな要素を見つけたいときに#IDセレクターを使用する必要がありますので、IDは、ページ内で一意である必要があります。
特定のIDを持つ要素を検索するには、HTML要素のidに続くハッシュ文字を書きます:
$("#test")
例
ユーザーがボタンをクリックすると、ID = "テスト"を持つ要素が非表示になります。
例
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
»それを自分で試してみてください.classファイルセレクタ
jQueryのクラスセレクタは、特定のクラスを持つ要素を検索します。
特定のクラスを持つ要素を検索するには、クラスの名前が続くピリオド文字を書きます:
$(".test")
例
ユーザーがボタンをクリックすると、クラス= "テスト"を持つ要素が非表示になります。
例
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
»それを自分で試してみてくださいjQueryのセレクタのその他の例
Syntax | Description | Example |
---|---|---|
$("*") | Selects all elements | Try it |
$(this) | Selects the current HTML element | Try it |
$("p.intro") | Selects all <p> elements with class="intro" | Try it |
$("p:first") | Selects the first <p> element | Try it |
$("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
$("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
$("[href]") | Selects all elements with an href attribute | Try it |
$("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
$("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
$(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
$("tr:even") | Selects all even <tr> elements | Try it |
$("tr:odd") | Selects all odd <tr> elements | Try it |
私たちの使用jQueryのセレクタテスターを異なるセレクタを実証します。
すべてのjQueryのセレクタの完全なリファレンスについては、当社をご覧くださいjQueryのセレクタリファレンス 。
別のファイルに関数
あなたのウェブサイトがページの多くが含まれており、あなたはjQueryの機能を維持しやすいようにしたい場合は、別の.jsファイルにjQueryの関数を置くことができます。
このチュートリアルではjQueryを実証すると、関数は<head>セクションに直接追加されます。However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): しかし、時には(.jsファイルを参照するためにsrc属性を使用します)このように、別のファイルにそれらを配置することが好ましいです。
例
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>