jQuery选择器

来源：互联网发布：sql2005数据库软件下载编辑：程序博客网时间：2024/06/06 11:44

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

阅读全文

0 0