jquery学习记录一（基础选择器）

最新推荐文章于 2024-07-14 12:56:18 发布

Aart123456789

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量165

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/emmaBlogs/p/5291272.html

版权

　　基础选择器包括：

　　　　1.#id选择器

　　　　2.element选择器

　　　　3.class选择器

　　　　4.*选择器

　　　　5.sele1,sele2,seleN选择器

　　　　6.ance desc 选择器

　　　　7.parent>child 选择器

　　　　8. prev+next选择器

　　　　9.pre~siblings选择器

一、初识jQuery

　　jQuery本身就是JavaScript, 只不过是把JavaScript代码包装成拿过来就能实现特定功能的代码库！

　　$()就是jQuery中的函数，它的功能就是获取()中指定的标签元素。$()中的()不一定是元素，也可能是函数。在jQuery中$()方法等价与jQuery()方法，前者是后者的一个简写。

二、jQuery基础选择器

　　（1）id选择器：$("#id")

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

　　（2）element选择器：$("element)

    <body>
        <button id="btntest">点我</button>
        <script type="text/javascript">
            $("button").attr("disabled","true");
        </script>
    </body>

　　（3）.class 选择器：$(".class")

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

　　（4）*选择器：$("*")

　　如下选择的是form下的所有input标签

    <body>
        <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>
    </body>

　　（5）sele1,sele2,seleN选择器：$("sele1,sele2,seleN")

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

　　（6）ance desc选择器：$("ance desc")

　　在实际应用中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素。

　　其中ance desc是使用空格隔开的两个参数。 ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。

　　如下获取的是div下面的所有label标签(包括p标签下的label标签)。

    <body>
        <div>码农家族
            <p>
               <label></label>
            </p>
            <label></label>
        </div>
        
        <script type="text/javascript">
            $("div label").css("background-color","grey");
        </script>
    </body>

　　（7）parent>child 选择器$("parent>child")

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

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

　　如下是获取的是div中的所有label标签（不包括p标签下的label标签）

    <body>
        <div>
            码农家族
            <p>
                <label></label>
            </p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("div>label").css("border", "solid 5px red");
        </script>
    </body>

　　（8）prev +next选择器：$("prev+next")

　　prev + next选择器查找的是与“prev”元素紧邻的下一个“next”元素。

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

　　如下获取的是p标签下的第一个label标签。

    <body>
        <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p+label").css("background-color","red");
        </script>
    </body>

　　（9）prev～siblings选择器： $("prev~siblings")

　　与prev+next层次选择器相同，prev～siblings选择器也是查找prev元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev元素后面全部紧邻的元素。

　　如下获取的是p标签下的两个label标签。

    <body>
        <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>
    </body>

转载于:https://www.cnblogs.com/emmaBlogs/p/5291272.html

Aart123456789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery学习记录一（基础选择器）

　　基础选择器包括：　　　　1.#id选择器　　　　2.element选择器　　　　3.class选择器　　　　4.*选择器　　　　5.sele1,sele2,seleN选择器　　　　6.ance desc 选择器　　　　7.parent>child 选择器　　　　8. prev+next选择器　　　　9.pre~siblings选择器...
复制链接

扫一扫