笔记4，jQuery选择器

1，jQuery选择器
jQuery选择器类似于CSS选择器，用来选取网页中的元素
$("h3").css("background","#09F");
获取并设置网页中所有<h3>元素的背景 “
h3”为选择器语法，必须放在$()中
$(“h3”)返回jQuery对象
.css()是为jQuery对象设置样式的方法

2，jQuery选择器功能强大，种类也很多，分类如下
类css选择器
基本选择器
层次选择器
属性选择器

过滤选择器
基本过滤选择器
可见性过滤选择器

基本选择器包括




层次选择器




$(document).ready(function() {
$("h2").click(function(){
//$("#menu span").css("background-color","#09F");//后代选择器，
//$("#menu>span").css("background-color","#09f");//子选择器
//$("h2+dl").css("background-color","#09F");//相邻选择器
$("h2~dl").css("background-color","#09F");//同辈选择器
});
});

属性选择器





$(document).ready(function() {
$("h2").click(function(){
//$("h2[title]").css("background-color","#09F");
//改变含有title属性的<h2>元素的背景颜色
//$("[class=odds]").css("background-color","#09F");
//改变class属性的值为odds的元素的背景颜色
//$("[id!=box]").css("background-color","#09F");
//改变id属性的值不为box的元素的背景颜色
//$("[title^=h]").css("background-color","#09F");
//改变title属性的值中以h开头的元素的背景颜色
$("[title$=jp]").css("background-color","#09F");
//改变title属性的值中以jp结尾的元素的背景颜色
//$("[title*=s]").css("background-color","#09F");
//改变title属性的值中含有s的元素的背景颜色
//$("li[class][title*=y]").css("background-color","#09F");
//改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色
});
});

过滤选择器

过滤选择器通过特定的过滤规则来筛选元素，语法特点是使用“:”,如使用$("li:first")来选取第一个li元素
主要分类如下：
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器，子内容过滤选择器












$("li:first").css("background-color","#09F");//改变第1个<li>元素的背景颜色
//$("li:last").css("background-color","#09F");//改变最后一个<li>元素的背景颜色
//$("li:not(.three)").css("background-color","#09F");//改变class不为three的<li>元素的背景颜色
//$("li:even").css("background-color","#09F");//改变索引值为偶数的<li>元素的背景颜色
//$("li:odd").css("background-color","#09F");//改变索引值为奇数的<li>元素的背景颜色
//$("li:eq(1)").css("background-color","#09F");//改变索引值等于1的<li>元素的背景颜色
//$("li:gt(1)").css("background-color","#09F");//改变索引值大于1的<li>元素的背景颜色
//$("li:lt(1)").css("background-color","#09F");//改变索引值小于1的<li>元素的背景颜色
//$(":header").css("background-color","#09F");//改变所有标题元素，例如<h1>,<h2>,<h3>……这些元素的背景颜色
//$(":focus").css("background-color","#09F");//改变当前获取焦点的元素的背景颜色

注意事项：

1，选择器中的特殊符号需要转义，在如下html代码中
例如：<div class="id#a">dddd</div>
<div class="id[2]">aaaa</div>
$("#id\\#a");
$("#id\\[2\\]");

2,选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

var $t_a = $(".test :hidden"); //带空格的jQuery选择器
选取class为“test”的元素内部的隐藏元素
var $t_b = $(".test:hidden"); //不带空格的jQuery选择器
选取隐藏的class为“test”的元素