JQuery选择器及其样式操作、筛选方法以及链式编程

最新推荐文章于 2023-07-03 11:00:56 发布

Try Tomato

最新推荐文章于 2023-07-03 11:00:56 发布

阅读量1.5k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_63836026/article/details/123398222

版权

+ jQuery 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

我们今天了解一下jQuery的选择器，使我们快速入手jQuery，进行操作

我们的jQuery选择器、样式操作、筛选方法与CSS选择器及其的类似，操作非常的方便

链式编程也是非常的简便高效

一.jQuery选择器

：first =>$("ul li:first") 获取ul里面的第一个li元素

：last =>$("ul li:last") 获取ul里面的最后一个li元素

：eq(index) =>$("ul li:eq(2)") 获取ul里面的所有li元素中索引号为2的元素

：odd =>$("ul li:odd") 获取ul里面的所有li元素中索引号为奇数的元素

：even =>$("ul li:even") 获取ul里面的所有li元素中索引号为偶数的元素

我们这里使用索引号选择器eq来做一个案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
   </ul>
</body>
<script>
    $(function(){
        $("ul li:eq(2)").css('color','red');
    })
</script>
</html>

二.jQuery筛选方法

parent() => $("li").parent() 查找亲爸爸

children() => $("ul").children("li") 查找亲儿子

【相当于CSS子代选择器，选择出离父级最近的一级子元素】

find() => $("ul").find("li") 查找儿子

【相当于后代选择器，选择所有的儿子】

siblings() => $(".first").siblings() 查找所有的兄弟元素（同一级元素）

【不包括自己】

nextAll() => $(".first").nextAll() 查找出当前元素之后的所有同辈元素

prevAll() => $(".last").prevAll() 查找当前元素之前的元素

hasClass() => $("div").hasClass("protected") 查找当前元素是否有某个特定的类

【如果有，返回true】

eq(index) => $("li").eq(2); 【相当于$（"li:eq(2)"）】

三.jQuery的样式操作

操作CSS方法：

1,参数只写属性名，则返回属性值

$("div").css("backgroundColor");
//返回值为backgroundColor对应的颜色

2.参数是属性名与属性值，逗号分隔，设置一组样式属性名必须加上引号，如果值为数字，可以不加引号和单位

$("div").css("backgroundColor","red");

3.参数可以是对象的形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

$("div").css({
    backgroundColor:#5e5e5e,
    width:10rem
})

还是老话，这里要注意复合属性一定要使用驼峰命名法

四.设置类样式方法

设置类样式方法呢，作用是等同于原生JS中的classList，可以操作类样式

注意：操作类里面的参数不要加点

1.添加类 $("div").addClass("current");

2.移除类 $("div").removeClass("current");

3.切换类 $("div").toggleClass("current");

这里是操作类，那我们也要用我们学到的来做一个小例子，点击按钮，让盒子改变当前颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 200px;
        background-color: #000;
    }
    .current{/*自定义一个类*/
        background-color: #7fffd4;
    }
</style>
<body>
    <button>点我试试，我给你点颜色看看</button>
  <div></div>
</body>
<script>
    $(function(){
        $("button").click(function(){//点击按钮触发事件
            $("div").toggleClass("current");//触发class类事件，将上面的css类名给到div，达到改变颜色的目的
        })
    })
</script>
</html>

这样当我点击按钮时，盒子变为绿颜色：

当我们再点击一次的时候，盒子再次变为黑子：

这是我们切换类的用处，是不是非常的便捷呀

接下来我们来学习一个jQuery中非常重要的，非常便捷的一个功能：

五.链式编程

我们直接来看一段代码，我进行相应的解读，我们也就能明白链式编程是什么了：

$("div").eq(2).show.siblings().hide();
//怎么理解呢？
//就是先获取div元素,让索引号为2的那个div显示出来，当前的这个盒子的所有兄弟元素都隐藏

怎么样，可以理解吗？就是相当于将俩句话合并在一起

举个例子：甲说：一起出去玩吗？

乙在回答：我打算明天中午再去玩

乙回答：今天不去玩了

合并回答：乙：我打算明天中午去玩

就是这么一个意思，将前面的调用节省掉了，这样说话是不是超酷呀

小tips:原生JS中className会覆盖掉元素原先里面的类名，jQuery里面的类操作只是对指定的类名进行操作，不影响原来的类名

学习前端，关注小窝

Try Tomato

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery选择器及其样式操作、筛选方法以及链式编程

jQuery选择器---jQuery筛选方法---jQuery的样式操作---设置类样式方法----链式编程
复制链接

扫一扫

专栏目录

JQuery选择器及其样式操作、筛选方法以及链式编程

一.jQuery选择器

二.jQuery筛选方法

三.jQuery的样式操作

四.设置类样式方法

五.链式编程

“相关推荐”对你有帮助么？