jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

luffot

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量179

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/luffot/article/details/78515898

版权

/*id选择器*/
var div = $("#div1");
console.log(div);

/*class选择器*/
var div2 = $(".div2");
console.log(div2);

/*元素选择器*/
var divs = $("div");
console.log(divs);

/*通配选择器*/
var all = $("*");
console.log(all);

/*并集选择器*/
var eles = $("div,p");
console.log(eles);

/*交集选择器*/
var p = $("p.p1");
console.log(p);

<body>
<div>
    div
    <p id="p1">
        p1
        <span>
            span
        </span>
    </p>
    <p id="p2">
        p2
        <span>
            span2
        </span>
    </p>
    <p id="p3">ccy</p>
    <span id="span1">
        span3
    </span>
    <span id="span2">
        span4
    </span>
</div>
<script src="../jquery-3.1.1.js"></script>
<script>
    /*后代选择器*/
    var spans = $("div span");
    console.log(spans);

    /*子代选择器*/
    var span = $("div > span");
    console.log(span);

    /*相邻选择器,返回元素后面的第一个匹配元素*/
    var result = $("#p1 + p");
    console.log(result);

    /*相邻兄弟选择器,返回元素后面所有的匹配元素*/
    var result = $("#p1 ~ p");
    console.log(result);
<head>
    <meta charset="UTF-8">
    <title>基本伪类选择器</title>
</head>
<body>
<p>ccy0</p>
<h1>ccy1</h1>
<h2>ccy2</h2>
<h3>ccy3</h3>
<ul>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li id="li3">山东工商学院</li>
    <li>滨州医学院</li>
    <li>烟台大学文经学院</li>
</ul>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
    /*first:*/
    var li1 = $("li:first");
    console.log(li1[0]);

    /*last:*/
    var li5 = $("li:last");
    console.log(li5[0]);

    /*not*/
    var lis = $("li:not(#li3)");
    console.log(lis);

    /*even:返回索引为偶数的元素*/
    var evens = $("li:even");
    evens.css({color:"red"});

    /*odd:返回索引为奇数的元素*/
    var odds = $("li:odd");
    odds.css({color:"blue"});

    /*eq:返回指定索引的元素*/
    var eq = $("li:eq(1)");
    eq.css({fontSize:"25px"});

    /*gt:返回所有索引值大于某个指定数的元素*/
    var lis = $("li:gt(2)");
    lis.css({listStyle:"none"});

    /*lt:返回所有索引值小于某个指定数的元素*/
    var lis = $("li:lt(2)");
    lis.css({listStyle:"none"});

    /*header:返回所有的标题标签*/
    var header = $(":header");
    header.css({color:"red"});
 </script>

luffot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

/*id选择器*/var div = $("#div1");console.log(div);/*class选择器*/var div2 = $(".div2");console.log(div2);/*元素选择器*/var divs = $("div");console.log(divs);/*通配选择器*/var all = $("*");console.log(al
复制链接

扫一扫