jQuery选择器

阿坤~

于 2020-08-09 14:06:06 发布

阅读量89

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45192400/article/details/107892927

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

jQuery选择器

一、基本选择器

1、ID选择器

根据指定的id获取元素，只能获取单个元素
示例

 $("#a").css("font-weight","bold");

2、class选择器

根据指定的类匹配元素
示例

$(".b").css("font-style","italic");

3、全局选择器

获取所有元素
示例

  $("*").css("font-size","30px");

4、标签选择器

根据指定的标签获取元素，可将该标签的所有元素全部获取
示例

  $("p").css("color","blue");

5、并集选择器

根据给定的标签获取元素，中间用 “,” 隔开，两者为或者关系
示例

//将id为a或者class为b的元素背景颜色改为黄色
 $("#a,.b").css("background-color","yellow");

6、交集选择器

根据给定的标签获取元素，中间无任何符号，两者为并且关系
示例

//将id为a的p标签元素缩进2个字符
$("p#a").css("text-indent","2cm");

二、层次选择器

1、后代选择器

两者为后代关系或者父子关系，中间用空格隔开
示例

//将div下的所有li获取
$("div li").css("list-style","none");

2、子选择器

两者必须是直接的父子关系，中间用**>**隔开
示例

$("ul>li").css("color","red");

3、相邻兄弟选择器

获取所给标签的后一个同级标签，中间用**+**隔开
示例

$("#er+li").css("background-color","black");

4、通用兄弟选择器

获取所给标签以后的所有同级标签，中间用**~**隔开
示例

$("#er~li").css("font-size","40px");

三、属性选择器

方法：使用**[]**,在[]写入所查找属性

[name]：包含name属性的标签  标志： []
$("[name]").css("color","green");
//[name="lyz"]：name属性赋值是lyz
$("[name='lyz']").css("font-size","60px");
//[name!="sy"]：name属性赋值不是sy 标志： !=
$("[name!='sy']").css("background-color","yellow");
//[name^"w"]：name属性赋值以w开头   标志： ^
$("[name^='w']").css("font-family","楷体");
//[name$="y"]：name属性赋值以y结尾  标志： $
$("[name$='y']").css("color","red");
//[name*="s"]：name属性赋值包含s   标志： *
$("[name*='s']").css("font-style","italic");

四、基本过滤选择器

//li:first 第一个li
$("li:first").css();
//li:last  最后一个li
 $("li:last").css();
//li:eq(2)  下标为2的li
$("li:eq(2)").css();
//li:gt(2)  下标大于2的li
$("li:gt(2)").css();
//li:lt(2)  下标小于2的li
$("li:lt(2)").css();
//li:even   下标为偶数的li
$("li:even").css();
//li:odd   下标为奇数的li
$("li:odd").css();
//获取所有的标题 h1-h6
$(":header").css("color","red");

五、基本可见性过滤选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            //给显示按钮添加单击事件
            $("[value='显示']").click(function(){
                //获取被隐藏的div
                $("div:hidden").show();
            })
            //给隐藏按钮添加单击事件
            $("[value='隐藏']").click(function(){
                //获取被隐藏的div
                $("div:visible").hide();
            })
        })
    </script>
</head>
<body>
<div style="display: none;background-color: red;">这是隐藏的div</div>
<input type="button" value="显示"/>
<input type="button" value="隐藏"/>
</body>
</html>

总结

在这里插入图片描述

阿坤~

关注

0
点赞
踩
0

收藏

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

jQuery选择器一、基本选择器1、ID选择器2、class选择器3、全局选择器4、标签选择器5、并集选择器6、交集选择器二、层次选择器1、后代选择器2、子选择器3、相邻兄弟选择器4、通用兄弟选择器三、属性选择器四、基本过滤选择器五、基本可见性过滤选择器总结一、基本选择器1、ID选择器根据指定的id获取元素，只能获取单个元素示例 $("#a").css("font-weight","bold");2、class选择器根据指定的类匹配元素示例$(".b").css("font-style"
复制链接

扫一扫