憩 园 碧云山上烟居客，世外桃源乡居人。

jQuery学习-基础选择器

2015-06-26
前端
 

前言

jQuery基础学习笔记之一

##jQuery基础选择器

###id选择器 ` $(“#my_id”)`

    <div id="divtest">div的内容</div>
    <div id="default"></div>
    <script type="text/javascript">
        $("#default").html($("#divtest").html());
    </script>

###元素选择器 $(“element”)

    <button id="btntest">点我</button>
    <script type="text/javascript">
        $("button").css("font-weight","bold");
        $("button").attr("disabled","true");
    </script>

###class选择器 $(“.class”)

  <div class="red">立正，向我这边看齐</div>
  <div class="green">我先歇歇脚</div> 
    <script type="text/javascript">
        var $redHTML = $(".red").html();
        $(".green").html($redHTML);
    </script>

* 选择器 $(“*”)

    <form action="#">
    <input id="Button1" type="button" value="button" />
    <input id="Text1" type="text" />
    <input id="Radio1" type="radio" />
    <input id="Checkbox1" type="checkbox" />
    </form>
    
    <script type="text/javascript">
        $("form *").attr("disabled", "true");
    </script> 表示获取其他元素中的全部子元素。

sele1,sele2,seleN选择器 $(“sele1,sele2,seleN”)

    <div class="red">选我吧！我是red</div>
    <div class="green">选我吧！我是green</div>
    <div class="blue">选我吧！我是blue</div>       
    <script type="text/javascript">
        $(".red,.green").html("hi,我们的样子很美哦!");
    </script>

其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

###ance desc选择器（层次性选择器） $("ance desc")

在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：

$("ance desc")

其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。

    <div>最外部分
        <p>
           <label></label>
        </p>
        <label></label>
    </div>
    
    <script type="text/javascript">
        $("div label").css("background-color","blue");
    </script>

###parent > child选择器 $(“parent > child”)

与ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：

$(“parent > child”)

child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。

    <div> 最外部分
        <p>
            <label></label>
        </p>
        <label></label>
        <label></label>
    </div>
    <label></label>
    
    <script type="text/javascript">
        $("div>label").css("border", "solid 5px red");
    </script>

prev + next选择器 $(“prev + next”)

通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素

其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

    <div> 最外部分
        <label></label>
        <p></p>
        <label></label>
        <label></label>
    </div>
    <label></label>
    
    <script type="text/javascript">
        $("p + label").css("background-color","red");
    </script>

###prev ~ siblings选择器 $(“prev ~ siblings”)

与prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：

$(“prev ~ siblings”)

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。

    <div>最外部分
        <label></label>
        <p></p>
        <label></label>
        <label></label>
    </div>
    <label></label>        
    <script type="text/javascript">
        $("p ~ label").css("border", "solid 1px red");
        $("p ~ label").html("我们都是p先生的粉丝");
    </script>

评论

Content