jQuery选择器

编辑本博客

基础选择器

id选择器

标签选择器

类选择器

通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <ul>
        <li id="brother">A</li>
        <li><a href="www.baidu.com">BaiDu</a></li>
        <li class="l3">C</li>
        <li>D</li>
        <li>E</li>
    </ul>
</body>
<script type="text/javascript">
    <!--回调函数-->
    $(function () {
        //ID选择器
        console.log($("#brother"));
        //通过ID选择器设置元素css样式
        $("#brother").css("color","red");

        //标签选择
        //设置一个值
        $("a").css("color","green")
        //设置多个值，设置多个值用字典对象存储
        $("a").css({"font-size":"25px","color":"green"})

        //类选择器
        $(".l3").css("background","green")

        //通配符选择器，使用不频繁
        $("*").css({"padding":"0","margin":"0"})
        //清空整个html元素
        // $("*").html("")
    });
    <!--回调函数-->
    $(document).ready(function () {

    })
</script>
</html>
View Code

高级选择器

层级选择器

后代选择器，空格

子代选择器>

兄弟选择器

//后代选择器
$("div p").css("color","red");

//子代选择器，不包括孙子类的标签
$("div >p").css("background","green");

//比邻选择器，匹配所有紧接在#brother元素后的下一个元素
$("#brother+ li").css("color","yellow");

//兄弟选择，匹配所有#brother之后的所有兄弟姐妹元素
$("brother~li").css("background","#996633");

//:first 获取第一个元素
$("li:first").text("ok?")

//:last获取最后一个元素
$("li:last").html("sury?")

//根据索引值选择，eq从零开始选择
var vl=$('p:eq(3)').text()
View Code

过滤选择器

/*
* 基本过滤选择器*/
//:first 获取第一个元素
$("li:first").text("ok?")

//:last获取最后一个元素
$("li:last").html("sury?")

//:odd，匹配所有索引值为奇数的元素,从零开始
$("li:odd").css("color","red");

//:even，匹配所有索引值为偶数的元素,从零开始
$("li:even").css("color","yellow")

//根据索引值选择，eq从零开始选择
var vl=$('p:eq(3)').text()

//获取索引值比给定值大的索引元素
$("li:gt(1)").css("font-size","40px")

//获取索引值比给定值小的索引元素
$("li:lt(1)").css("font-size","40px")
View Code

 属性选择器

<script type="text/javascript">
    $(function () {
        //标签[属性名] 查找所有含id属性的该标签元素
        $("li[id]").css("color","red");

        //[attr=value]匹配给定的属性是某个特定的元素
        $("li[class=what]").css("font-size","30px");

        //[attr!=value]匹配所有不含有指定属，或属性不等于指定值的元素
        $("li[class!=what]").class("color","darkgreen");

        //匹配给定的属性是以某些值开头的元素
        $("input[name^=username]").css("background","red")
    })
</script>
View Code

jquery筛选选择器

链式调用

<script type="text/javascript">
    $(document).read(function () {
        //获取第n个元素，数值从0开始
        $("span").eq(n).css("font-size","40px");

        //first()获取第一个元素
        $("ul").first().css("background","green");

        //last()获取最后一个元素
        $("ul").last().css("background","green");

        //.parent()选择父亲元素
        $("span").parent(".p1").css({"width":"10px","height":"20px","background":"green"});

        //.siblings()选择所有兄弟元素
        $(".list").siblings("li").css("color","yellow");

        //.find()查找所有后代元素
        $('div').find('button').css("background","#313131")
    })
</script>
View Code
posted @ 2018-06-18 16:17  丫丫625202  阅读(126)  评论(0)  编辑  收藏  举报