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..
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
104 1
|
6月前
|
JavaScript 索引
|
12月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
113 2
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
99 5
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
97 0
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
108 0
|
12月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$("p") 选取所有段落元素,而 $("button").click(function(){ $("p").hide(); }) 实现点击按钮后隐藏所有段落。
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
JavaScript
jQuery 选择器
jQuery 选择器
72 3
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
79 1