茫茫人海中，一眼选中你！

最新推荐文章于 2024-06-20 23:42:45 发布

啵啵丶

最新推荐文章于 2024-06-20 23:42:45 发布

阅读量128

点赞数 5

分类专栏： jQuery 文章标签： jquery html5 css

本文链接：https://blog.csdn.net/m0_53620413/article/details/120737695

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、jQuery基础选择器和层级选择器

1. jQuery 基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器") // 里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

2. jQuery 层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

二、jQuery筛选选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

三、jQuery筛选方法---选取父子元素（重点）

语法	用法	说明
parent()	$("li").parent();	查找父级
children(selector)	$("ul").children("li");	相当于$("ul>li")，最近一级（亲儿子）
find(selector)	$("ul").find("li");	相当于$("ul li")，后代选择器
siblings(selector)	$(".first").siblings("li");	查找兄弟结点，不包括自己本身
nextAll([expr])	$(".first").nextAll();	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevtAll();	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected");	检查当前的元素是否含有某个特定的类，如果有，则返回 true
eq(index)	$("li").eq(2);	相当于$("li:eq(2)"),index 从 0 开始

案例：点击某个按钮当前按钮变背景颜色变色，其他按钮不变色

<!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>
<body>
    <div>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
    </div>
    <script>
        $(function(){
             //给所有按钮绑定点击事件
            $("button").click(function(){
                //当前按钮背景颜色为粉色
                $(this).css("background","pink");
               //当前按钮的兄弟无背景颜色
                $(this).siblings("button").css("background","");
            })
        })
    </script>
</body>

啵啵丶

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
11
评论
茫茫人海中，一眼选中你！

一、jQuery基础选择器和层级选择器1. jQuery 基础选择器原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。$("选择器") // 里面选择器直接写CSS选择器即可，但是要加引号名称用法描述 ID选择器 $("#id") 获取指定ID的元素全选选择器 $("*") 匹配所有元素类选择器 $(".class") 获取同一类class的元素标签选..
复制链接

扫一扫