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..
|
2月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
25 1
|
2月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
39 2
|
2月前
|
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个子元素无关,比如
46 5
|
15天前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
13 0
|
17天前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
6 0
|
2月前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
2月前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
40 5
|
2月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
2月前
|
JSON JavaScript 前端开发
Jquery常用的选择器有哪些?用途有什么不同?
Jquery常用的选择器有哪些?用途有什么不同?
|
2月前
|
Web App开发 JavaScript 前端开发
JQuery的选择器有哪些?
JQuery的选择器有哪些?
19 1