jQuery选择器分门别类

jQuery选择器分类

jQuery的基本选择器

    选择器的分类

    <!--1.基本选择器
        2.层级选择器
        3.过滤选择器
            3.1 基本过滤选择器
            3.2 内容过滤选择器
            3.3 可见性过滤选择器
            3.4 子元素过滤选择器
            3.5 表单对象属性过滤选择器
        4.表单选择器
        

1. 基本选择器

            #id
            element   根据给定的元素名匹配所有元素


            .class  
            *          改变所有元素的背景色 
            selector,    将每一个选择器匹配到的元素合并后一起返回。


    -->


</title>

    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

#id HTML的代码如下：

    <div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv">id="myDiv"</div>

#id 用于搜索的，通过元素的 id 属性中给定的值

jQuery 代码如下；

<script type="text/javascript">
   $("#myDiv")．css("color","red");
</script>

结果: id=“myDiv”字体变为红色

   [ <div id="myDiv">id="myDiv"</div> ]

element HTML的代码如下：

    <div>DIV1</div>
    <div>DIV2</div>
    <span>SPAN</span>

element 一个用于搜索的元素。指向 DOM 节点的标签名。

jQuery 代码如下；

<script type="text/javascript">
  $("div").css({"font-size":"3em"});
</script>

结果:显示所有div，且字体为3em；

  [ <div>DIV1</div>, <div>DIV2</div> ]

.class HTML的代码如下：

    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

.class 根据给定的类匹配元素。

jQuery 代码如下；

     $(".myClass").css("background","blue");

结果:显示所有，myClass背景为蓝色；

    [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* HTML 代码如下：

    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>

* 匹配所有元素

jQuery 代码如下；

    $("*").css("background","yellow");

结果: body 背景为黄色

jQuery 代码

    [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector HTML 的代码如下：

    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <span>span</span>
    <p class="notMyClass">p class="notMyClass"</p>

selector 将每一个选择器匹配到的元素合并后一起返回。

jQuery 代码如下；

    $("div,span,p.myClass")

结果:注意元素合并用 , 表示;

    [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

3楼姜筱妍

老铁，没毛病 双击评论666

2楼前端兵哥哥

1楼师徒课堂

清晰