jQuery选择器整理

简介: jQuery选择器整理
第六章jQuery选择器

一、jQuery选择器的分类:

1.基本选择器

2.层次选择器

3.属性选择器

4.基本过滤选择器

5.可见性过滤选择器

二、jQuery的基本选择器:

///基本选择器

//id选择器

//$("#div1").css(“background”,“red”);

//class选择器
//$(".p1").css("color","red");
//标签选择器
//$("p").css("color","red");
//并集选择器
//$("p,li").css("color","red");
//全局选择器
//$("*").css("color","red");

三、jQuery的层次选择器

//1.后代选择器

//$("#div2 ul").css(“color”,“red”);

//2.子选择器
//$("#div2>p").css("color","red");
//3.相邻选择器
//$(".p1+p").css("color","red");
//4.同辈元素
//$(".p1~p").css("color","red");

四、jQuery中的属性选择器:

//1.包含给定属性选择器的元素

//获取所有含有name属性的元素,颜色设置为红色

//$("[name]").css(“color”,“red”);

//2.name的值等于name的变成红色
//$("[name='name']").css("color","red");
//3.name的值不是name的变成红色
//$("[name!='name']").css("color","red");
//4.name的值以p开头的变成红色
//$("[name^=p]").css("color","red");
//5.name的值以e结尾的颜色变成红色
//$("[name$=e]").css("color","red");
//6.2019年6月21日11:38:40
//name的值中包含e的字体颜色变红
//$("[name*=e]").css("color","red");
//7.选取含有id属性,并且name的值中包含e的元素,,字体颜色变成红色
//$("[id][name*=e]").css("color","red");

五、jQuery的过滤性选择器:

//1.将第一个li变成红色

//$(“li:first”).css(“color”,“red”);

//2.将最后一个li变成红色
//$("li:last").css("color","red");
//3.选取class不是p1的元素变成红色
//$("li:not(.p1)").css("color","red");
//4.所有li的索引是偶数的背景色换一下
//$("li:even").css("background","red");
//5.所有li的索引是奇数的背景色换一下
//$("li:odd").css("background","red");
//6.索引等于2的li变成红色
//$("li:eq(2)").css("color","red");
//7.索引大于1的li变色
//$("li:gt(1)").css("color","red");
//8.索引小于2的li变色
//$("li:lt(2)").css("color","red");
//9.所有的标题元素变成红色
//$(":header").css("color","red");

六、可见性过滤器:

//1.所有可见元素变色

//$(":visible").css(“color”,“red”);

//2.将隐藏的元素变色
$("h3").hide();
$(":hidden").css("color","red");
目录
相关文章
N..
|
11天前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
18 1
|
12天前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
32 2
|
12天前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
41 5
|
9天前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
9天前
|
JSON JavaScript 前端开发
Jquery常用的选择器有哪些?用途有什么不同?
Jquery常用的选择器有哪些?用途有什么不同?
|
12天前
|
JavaScript 前端开发 开发者
jquery选择器有哪些
jquery选择器有哪些
11 0
|
11天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
11天前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
29 5
|
11天前
|
Web App开发 JavaScript 前端开发
JQuery的选择器有哪些?
JQuery的选择器有哪些?
12 1
|
11天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
13 0