最新のWeb開発のチュートリアル
 

jQueryセレクタ


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>


練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4» 演習5» 演習6»