Jquery选择器
选择器允许您对元素组或单个元素进行操作。
Jquery选择器:基本选择器、层次选择器、基本筛选器、表单选择器、子元素选择器、属性选择器、内容选择器。(注意:前提是要导入jquery文件)
如下图
1、基本选择器
id选择器
根据给定的ID匹配一个元素。
//某标签的id属性为hid
$("#hid").css("color","orange")
class选择器
根据给定的css类名匹配元素。
//某标签的class属性为tt
$(".tt").css("color","blue")
选择器组
根据给定的元素标签名匹配所有元素
//h1,h2,h3为标签
$("h1,h2,h3").css("color","blue")
2、层次选择器
用ul,ol,li做解释例子
获取ul中所有子元素节点li(包括后代节点)
//获取ul中所有子元素节点li(包括后代节点),并设置样式
$("ul li").css("color","orange");
//获取ul中所有直接子元素节点li(包括后代节点),并设置样式
$("ul>li").css("color","gray");
//获取ul同级紧邻后面的第一个兄弟节点li,并设置样式
$("ul+li").css("color","beige");
//获取ul后面所有同级兄弟li元素节点,并设置样式
$("ul~li").css("color","green");
3、基本筛选器
//获取所有li节点并设置样式
$("li").css("color","red");
//获取第一个li节点并设置样式
$("li:first").css("color","red");
//获取最后一个li节点并设置样式
$("li:last").css("color","red");
//获取偶数索引号对应的所有li节点并设置样式
$("li:even").css("color","red");
//获取奇数索引号对应的所有li节点并设置样式
$("li:odd").css("color","red");
//获取class属性值为cc的所有li节点并设置样式
$("li.cc").css("color","red");
//获取class属性值不为cc的所有li节点并设置样式
$("li:not(.cc)").css("color","red");
//获取索引位置为2的li节点并设置样式
$("li:eq(2)").css("color","red");
//获取前2个li节点并设置样式
$("li:lt(2)").css("color","red");
4、内容选择器
在小文本使用效率高
在大文本使用效率低
//选取div中内容含有John的内容将他的颜色变为orange
$("div:contains('John')").css("color","orange");
5、属性选择器
//获取所有含有value属性的input元素标签,并设置样式
$("input[value]").css("border","1px solid red");
//获取name属性值为phone的input元素标签,并设置样式
$("input[name='phone']").css("border","1px solid red");
//获取name属性值不为phone的input元素标签,并设置样式
$("input[name!='phone']").css("border","1px solid red");
//获取name属性值是以a字符开头的所有input元素标签,并设置样式
$("input[name^='a']").css("border","1px solid red");
//获取name属性值是以e字符结尾的所有input元素标签,并设置样式
$("input[name$='e']").css("border","1px solid red");
//获取name属性值中含有m字符的所有input元素标签,并设置样式
$("input[name*='m']").css("border","1px solid red");
6、子元素选择器
//获取每组ul中的第一个li节点并添加样式
$("ul li:first-child").css("color","red");
//获取每组ul中的最后一个li节点并添加样式
$("ul li:last-child").css("color","red");
//获取每组ul中的第三个li节点并添加样式
$("ul li:nth-child(3)").css("color","red");
7、表单选择器
//获取所有多选框中选择中的元素节点
//var list = $("input[type='checkbox']:checked");和下一行代码结果一样
var list = $(":checkbox:checked");
alert(list.length);
//获取li元素节点(条件是里面的多选框必须选中),并设置样式
$("li:has(input:checked)").css("color","red");