jQuery基础语法-选择器/设置样式/筛选方法

最新推荐文章于 2023-01-16 20:33:46 发布

httpkaidi

最新推荐文章于 2023-01-16 20:33:46 发布

阅读量433

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121620973

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery基础语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
美元符号定义 jQuery，

jQuery基础选择器
原生js获取元素的方式有很多，很杂，jQuery做了封装，使元素统一标准
$("选择器"） //里面选择器直接写CSS选择器即可，但是要加引号

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
    </ol>
    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <script>
       $(function(){
        console.log($(".nav"));;//选取出 我是div
        console.log($("ol li"));//选取ol里面的li
       })
    </script>

jQuery设置样式

$('div').css('属性','值')

隐式迭代，即给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化操作，方便调用

       //获取页面中所有的div
        $("div");
        //隐式迭代，即给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化操作，方便调用
        //给div设置颜色 jQuery不能使用style
        $("div").css("background","pink");//给所有div盒子背景改为粉色
        $("ol li").css("color","blue");//给所有ol里面的li的字体改为蓝色

jQuery筛选选择器
语法   用法   描述
:first()   $(" li:first")   获取第一元素
:last()   $(“li:last”)   获取最后一个元素
:eq(index)   $(“li:eq(2)”)   匹配index下标的元素
:odd   $(“li:odd”)   获取到的li元素中，选择索引号为奇数的元素
:even   $(“li.even”)   获取到的li元素中，选择索引号为偶数的元素

$("ol li:eq(2)").css("color","red");//给ol里面的第三个li改为红色

jQuery筛选方法
语法   用法   说明
.parent()   $(“li”).parent()   查找父级最近一级（亲父亲）
.children(selector)   $(“li”).children(“li”)   相当于$(“ul>li”)，最近一级（亲儿子）
.find(selector)   $(“li”).find(“li”)   后代查找
.siblings(selector)   $(".first").silibing("li’)   查找兄弟节点，不包括自身

$(“.dd”).children("ul"),show();  //找到.dd下的带Ul的所有子元素  显示
$("ol .item").siblings("li").css("color","red");
//选择除了自己以外的所有亲兄弟，将其字改为红色
//选择第n个元素
$("ul li:eq(2)").css("color","blue")
$("ul li").eq(index).css("color","blue")//两种方法都可，更推荐这一种，便于修改
 //判断是否有某个类名
 console.log($('div:first').hasClass("current"));//返回结果为true或false

案例: jQuery实现下拉菜单

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        li,a{
            text-decoration: none;
            list-style: none;
        }
        .nav{
            width: 300px;
            margin: 100px auto;
        }
        a:hover{
            background-color: bisque;
        }
        .nav>li{
            display: inline-block;
            width: 40px;
            height: 400px;
            margin: auto 5px;
        }
        .nav ul{
            position: absolute;
            display: none;
        }
        .nav ul>li{
           border-left: 1px solid rgb(143, 106, 106);
           border-right:1px solid rgb(143, 106, 106) ;
           border-bottom:1px solid rgb(143, 106, 106);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="nav">
        <li>
            <a href="#">菜单</a>
            <ul>
                <li>选项</li>
                <li>选项</li>
                <li>选项</li>
            </ul>
        </li>
        <li>
            <a href="#">菜单</a>
            <ul>
                <li>选项</li>
                <li>选项</li>
                <li>选项</li>
            </ul>
        </li>
        <li>
            <a href="#">菜单</a>
            <ul>
                <li>选项</li>
                <li>选项</li>
                <li>选项</li>
            </ul>
        </li>
        <li>
            <a href="#">菜单</a>
            <ul>
                <li>选项</li>
                <li>选项</li>
                <li>选项</li>
            </ul>
        </li>
    </div>
    <script>
        $(function(){
            $('.nav>li').mouseover(function(){
                //鼠标经过
                // $(this) jquery当前元素 this不要加引号
                $(this).children("ul").show();
            })
            //鼠标离开
            $('.nav>li').mouseleave(function(){
                $(this).children('ul').hide();
            })
        })
    </script>

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础语法-选择器/设置样式/筛选方法

jQuery基础语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。美元符号定义 jQuery，jQuery基础选择器原生js获取元素的方式有很多，很杂，jQuery做了封装，使元素统一标准$("选择器"） //里面选择器直接写CSS选择器即可，但是要加引号<body> <div>我是div</div> <div class="nav">我是nav div</div> <.
复制链接

扫一扫