jquery选择器

最新推荐文章于 2024-03-14 10:38:40 发布

约德尔蒙

最新推荐文章于 2024-03-14 10:38:40 发布

阅读量297

点赞数

分类专栏： JQuery（以及源码解读）

本文链接：https://blog.csdn.net/gyq04551/article/details/53262445

版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
//--------------------------------基本选择器-----------------------------------------------------------------
        //入口函数
        jQuery(document).ready(function () {
            //三种方法获取jquery对象，然后用css方法操作
            var jqdiv = $("div");
            var jqCdiv = $(".box");
            var jqIdiv = $("#box");

            jqdiv.css("width",100);
            jqdiv.css("height",100);
            jqdiv.css("margin",10);
            jqdiv.css("background","pink");

            //操作类选择器(隐式迭代，不用一个一个设置)
            jqCdiv.css("background","red");

            //操作id选择器
            jqIdiv.css("background","yellow");



//------------------------------------层级选择器-------------------------------------------------------------

            //获取ul中的li设置为粉色
            //后代，儿孙重孙曾孙玄孙....
            var jqli = $("ul li");
            jqli.css("margin",5);
            jqli.css("background","pink");

            //子代，亲儿子
            var jqotherLi = $("ul>li");
            jqotherLi.css("background","red");



//-----------------------------------基本过滤选择器--------------------------------------------------------

            //利用过滤选择器设置偶数位元素的背景
            var jqliodd = $("ul li:odd"); //获取奇数索引
            jqliodd.css("background","pink");

            //利用过滤选择器设置奇数位元素的背景
            var jqlieven = $("ul li:even");//获取偶数索引
            jqlieven.css("background","red");

            //利用过滤选择器设置指定索引值元素的背景
            //也可以当筛选选择器用
            // jqul.children().eq(0).next().css("background","yellow");
            var jqlifirst = $("ul li:eq(0)");
            jqlifirst.css("background","yellow");

            //获取页面上所有的li，然后最大索引值就是长度-1；
            var li = $("li");
            var jqlifirst = $("ul li:eq("+(li.length-1)+")");
            jqlifirst.css("background","blue");
        });
    </script>
</head>










<body>
    <!--------------------------------基本选择器-------------------------------------------------------->
    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>

    <!------------------------------层级选择器------------------------------------------------------->
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <ol>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ol>
    </ul>

<!----------------------------------基本过滤选择器-------------------------------------------------------->

    <ul>
        <li>每天第一件事 对着镜子给自己磕个头 敬个礼.</li>
        <li>每天第一件事 对着镜子给自己磕个头 敬个礼.</li>
        <li>每天第一件事 对着镜子给自己磕个头 敬个礼.</li>
        <li>每天第一件事 对着镜子给自己磕个头 敬个礼.</li>
        <li>每天第一件事 对着镜子给自己磕个头 敬个礼.</li>
        <li>每天第一件事 对着镜子给自己磕个头 敬个礼.</li>
    </ul>
</body>
</html>

约德尔蒙

关注

0
点赞
踩
0

收藏

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

//--------------------------------基本选择器----------------------------------------------------------------- //入口函数 jQuery(document).ready(function () { //三种方法获取jquery对象，然后用css
复制链接

扫一扫

专栏目录