Latest web development tutorials

jQueryのセレクタ

jQueryのセレクタは、グループHTML要素または動作するように単一の要素にあなたを可能にします。

jQueryのセレクタ

jQueryのセレクタは、グループHTML要素または動作するように単一の要素にあなたを可能にします。

jQueryのセレクタは、ID要素、クラス、種類の属性に基づいて、属性値を、そのため「検索」（または選択）HTML要素に。 これは、既存のに基づいているCSSセレクタ 、加えて、それはまた、いくつかのカスタムセレクタを有します。

$（）：すべてのjQueryのセレクタは、ドル記号で始まります。

セレクタ

jQueryのセレクタは、要素名に基づいて要素を選択します。

ページ内のすべての<P>要素を選択します。

$("p")

例

ユーザーがボタンをクリックし、すべての<P>要素が隠されています：

例

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

»をお試しください

#IDセレクタ

jQueryのは、セレクタHTML要素のid属性で指定された選択要素を#ID。

あなたは#IDセレクタを介してページ内の要素だけを選択したいので、ページ内のid要素は、一意である必要があります。

次の構文要素を選択することにより、ID：

$("#test")

例

ユーザーがボタンをクリックすると、要素はID = "テスト"属性は表示されませんがあります。

例

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

»をお試しください

.classファイルセレクタ

jQueryのクラスセレクタは、指定されたクラスによって要素を見つけることができます。

構文は次のとおりです。

$(".test")

例

ユーザーは、クラス= "テスト"を持つすべての要素の後にボタンをクリックし、隠し属性は次のとおりです。

例

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

»をお試しください

より多くの例

语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

jQueryの機能を使用して別のファイル

あなたのサイトが多くのページが含まれており、あなたはjQueryの機能を維持するために簡単である必要がある場合は、そのように別々の.jsファイルにあなたのjQueryの関数を入れてください。

我々はjQueryのチュートリアルで実証すると、関数は<head>セクションに直接追加されます。 しかし、より良い、この（src属性によって参照されるファイル）のようになります別のファイルにそれらを置きます：

例

<head>
<script src="http://cdn.static.w3big.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>