jQuery —— 选择器

最新推荐文章于 2024-11-11 19:29:13 发布

Jxinyun1314

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Cocoomg/p/9900989.html

版权

Jquery 选择器

我们可以通过 Jquery 选择器从网页文档中找到我们需要的 DOM 节点；

基本选择器
属性选择器

其他选择器

<script type="text/javascript">
    $(document).ready(function(){
        // 基本选择器
        $("#a1").css("background-color","red");  // 根据id
        $(".c1").css("background-color","red");  // 根据class类别
        $("a").css("background-color","red");    // 根据标签元素
        
        // 属性选择器
        $("[href]").css("background-color","red"); // href属性
        $("[href='http://www.baidu.com']").css("background-color","red"); // href属性 等于某个值（ http://www.baidu.com ）
        $("[href$='com']").css("background-color","red"); //href属性 以com结尾

        // 其他选择器 
        $("p.c1").css("background-color","red");        //p 下面的c1
        $("ul li:first").css("background-color","red"); //ul下面的第一个li 标签
        $("ul li:last").css("background-color","red");  //ul下面的最后一个li 标签
    }); 
</script>

<body >
    <p class="c1">Jquery选择器</p>
    <ul>
        <li id="i1"><a id="a1" class="c1" href="http://www.baidu.com" >百度</a></li>
        <li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
        <li><a href="http://www.iteye.com">iteye</a></li>
        <li><a href="http://www.cnblogs.com">博客园</a></li>
        <li><a class="c1" href="#">百度</a></li>
        <li><a href="http://www.google.com">谷歌</a></li>
    </ul>
</body>