4--Jqueryのセレクター（基本セレクター）

セレクターは、Jqueryフレームワークの基盤であり、Jqueryでのイベント処理です。DOMとajax操作の両方をトラバースすることはセレクターに依存しています。
Jqueryセレクターの利点は、簡潔に記述されていることです。
$（ "
＃username "）は次と同等です：domcument.getElementById（ "username"）;
$（ "tagName"）は次と同等です：
domcument.getElementsByTagName（ "tagName"）
デモに必要なHTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的选择器</title>
    <script src="jquery-1.11.3.js"></script>
    <!--导入自定义的js文件-->
   <!-- <script src="selector_base.js"></script>-->
    <!--<script src="selector_level.js"></script>-->
    <script src="selector_filter.js"></script>
    <style>
        div,span,p {
     
     
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border:#000 1px solid;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }
        div.mini {
     
     
            width:55px;
            height:55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide {
     
     
            display:none;
        }
    </style>
</head>

<body>
    <div class="one" id="one" >
        id为one,class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one"  id="two" title="test" >
        id为two,class为one,title为test的div.
        <div class="mini"  title="other">class为mini,title为other</div>
        <div class="mini"  title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"  title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;"  class="none">
        style的display为"none"的div
    </div>

    <div class="hide">class为"hide"的div</div>

    <div>
        包含input的type为"hidden"的div<input type="hidden" size="8"/>
    </div>

    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

基本セレクターは、Jqueryで最も一般的に使用されるセレクターであり、最も単純なセレクターでもあります。要素ID、クラス、タグ名でDOM要素を検索します。（CSSと同様）

#id（idセレクター）：使用法$（ "＃myDIV"）;戻り値は単一要素のコレクションです。HTMLでid =” myDIV”の要素を直接選択します。
例：IDが1の要素の背景色を＃FF0000に変更します。

/*Id选择器：
*  语法：$("#id的值")
* */
$(function(){
    
    
    $("#one").css("background-color","#FF0000");
});

要素（要素セレクター）：使用法$（ "要素名"）：戻り値、コレクション要素
例：要素名を変更する
すべての要素の背景は青（青）です

/*元素选择器：
* 语法:$("元素名")
* */
$(function(){
    
    
    $("div").css("backgroundColor","blue");
});

クラス（クラスセレクター）：usage $（ "。myClass"）、戻り値、コレクション要素
例：クラスがミニであるすべての要素の背景を黄色（黄色）に変更します。

/*类选择器：
* 语法：$(".类属性的值")
* */
$(function(){
    
    
    $(".mini").css("backgroundColor","yellow").css("color","red");
});

ワイルドカードセレクター*：使用法$（ "*"）：戻り値、要素の設定、すべての要素の一致。
例：すべての要素の背景を＃00FF33に変更します

/*通配符选择器：
* 语法：$("*")
* */
$(function(){
    
    
    $("*").css("backgroundColor","#00FF33");
});

Selector1、selector2、selector3 ...（組み合わせセレクター）使用法：$（ "div、span、p.myCLass"）はコレクション要素を返します。
例：すべての要素とIDがTWOの要素の背景を黄色に変更します

/*组合选择器：
* 语法：$("selector1,selector2,selectorN")
* */
$(function(){
    
    
    $("span,#two").css("backgroundColor","yellow");
})

エフェクトの例はここでは省略されています。自分で確認できます。
全体のselector_base.jsコードは次のとおりです。

/**
 * Jquery中的基本选择器
 */
/*Id选择器：
*  语法：$("#id的值")
* */
/*
$(function(){
    $("#one").css("background-color","#FF0000");
});
*/
/*元素选择器：
* 语法:$("元素名")
* */
/*
$(function(){
    $("div").css("backgroundColor","blue");
});
*/
/*类选择器：
* 语法：$(".类属性的值")
* */
/*$(function(){
    $(".mini").css("backgroundColor","yellow").css("color","red");
});*/
/*通配符选择器：
* 语法：$("*")
* */
/*$(function(){
    $("*").css("backgroundColor","#00FF33");
});*/
/*组合选择器：
* 语法：$("selector1,selector2,selectorN")
* */
$(function(){
    
    
    $("span,#two").css("backgroundColor","yellow");
})

4--Jqueryのセレクター（基本セレクター）

おすすめ