作用: 用来选择标签的
jQuery中的选择器借鉴了CSS中选择器的思想,CSS中选择器选择出标签以后只能给标签加样式,而jQuery中的选择器选择出标签(或元素)后可以做任意操作。
通过修改div的背景颜色看效果
一. 基本选择器(basic 5个)
61.id选择器 #id
根据给定的id匹配一个元素 返回单个元素
$("#myDiv")选取id为myDiv的元素
演示代码:
var $obj = $("#myDiv");
$obj.css("background-color","burlywood");
console.dir($obj);
2.标签选择器element
返回集合元素
$("p")选取所有的<p>元素
3.类选择器 .class
根据给定的类名匹配元素 集合元素
$(".test")选取所有class为test的元素
4.通配符选择器 *
匹配所有元素 集合元素
$("*")选取所有的元素
5组合选择器 .select1,select2,….selectN
将每一个选择器匹配 集合元素
$("div,span,p.myClass")选取所有<div>、<span>和拥有class为myClass的<p>标签的一组元素
最常用的是id选择器和类选择器
二.层次选择器()level 4个
1.子级(子代选择器和后代选择器)
子代选择器: 儿子结点
$("parent>child") 选取parent元素下的child(子代元素)
返回集合元素
$("div>span")
选取div下的儿子结点span
后代选择器: 儿子和孙子结点
$("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素
返回集合元素
$("div span")
选取div里的所有的span元素
2.同级(下一个和下面所有、上一个和上面所有同级兄弟)
$('prev+next') 选取紧接在prev元素后的next元素 返回集合元素
$('.one+div')选取class属性为one的下一个<div>元素
与$(".one").next("div")等价
$('prev~siblings') 选取prev元素之后的所有siblings元素 返回集合元素
$('#two~div')选取id值为two的后面的所有<div>兄弟元素,
与$("#two").nextAll("div")等价
$("#prev").siblings("div") 选取和id值为prev的元素同级的div元素
上一个 prev() 上面所有 prevAll();
三.过滤选择器(filter 6个)
1基本过滤 10个
2.内容过滤 4个
3.可见性过滤 2个
4.属性过滤 7个
5.子元素过滤 4个
6.表单对象属性过滤 4个
四.表单选择器(form)
使用表单选择器 可以快速选出表单中的表单域
练习:表格隔行换色jQuery实现等
表格隔行换色(面试题)
$("#table1 tbody tr:even").css("background","red");//偶数行
$("#table1 tbody tr:odd").css("background","green");//奇数行
演示代码:
$(function(){
//页面加载完毕后 隔行换色
$("#table1 tr:even").css("backgroundColor","#BAD0EF");
//表格头 黑底白字
var $object = $("tr:first");
$object.css("backgroundColor","#000000");
$object.css("color","#ffffff");
});
1.判断有多少选择框被选中(包括单选框和复选框)
var $obj = $("input:checked");
console.info($obj);
2. 查找被选中的爱好 复选框
var $obj = $("input[name='hobby']:checked");
console.info($obj);
$(".test :hidden").length 层次选择器
$(".test:hidden") 可见性过滤
补充: each()方法
需求: 打印每一个li中的内容
body中的代码
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
$(function(){
document.write($("li").text() + "<br/>");
});
CoffeeMilkSoda
我们想要的想过是每打印一个li的内容后换行
$(“li”) 是获得所有的li,如果想遍历每一个li需要使用 each()方法
$(function(){
$("li").each(function(){
document.writeln($(this).text() + “<br/>”);
});
});
Coffee
Milk
Soda