锋利的jQuery Day2

JavaScript jQuery

jQuery 选择器

1、CSS选择器

2、jQuery选择器

jQuery选择器完全继承了CSS的风格。学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效。

比较CSS和jQuery的写法：

.demo{//给class为demo的元素添加样式
...
}

$(".demo").click(function(){//给class为demo的元素添加点击行为
...
})

两者写法十分相似，但作用效果不同。CSS选择器找到元素后是添加样式，jQuery选择器找到元素后是添加行为。

jQuery选择器的优势在于：
1) 简介的写法：$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素。
2)支持CSS1到CSS3选择器
3)完善的处理机制：

$('#tt')获取的永远是对象，即使网页上没有此元素。因此当要用jQuery检查某个元素在网页中是否存在时，不能使用以下代码：

if($("#tt")){
    //do something
}

应该根据获取到的元素的长度来判断，代码如下：

if($("#tt").length > 0){
    //do something
}

或者转化成DOM对象来判断：

if($("#tt")[0}){
    //do something
}

jQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

2.1 基本选择器

基本选择器是jQuery中最常用的选择器，通过元素id、class和标签名来查到DOM元素。在网页中，每个id名称只能出现一次，class允许重复使用。

基本选择器

可以使用上述的基本选择器完成绝大数的工作。

2.2 层次选择器

想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等。

层次选择器

层次选择器的例子如下：

其中前两个选择器较为常用，后两个在jQuery中有更为简单的方法取代：
使用next()方法代替$("prev + next")选择器:

$(".one + div");
等价于
$(".one").next("div");

使用nextAll()方法代替$("prev ~ siblings")选择器：

$("#prev ~ div");
等价于
$("#prev").nextAll("div");

siblings()方法与$("prev~div")选择器对比

• $("#prev~div")选择器只能选择“prev”元素之后的同辈<div>元素
• siblings()方法与前后位置无关，只要是同辈节点都能匹配

2.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象过滤选择器。

2.3.1 基本属性过滤器

2.3.2 内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

2.3.3 可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

其中注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type="hidden"/>）和visibility:hidden之类的元素。

2.3.4 属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

2.3.5 子元素过滤选择器

子元素过滤选择器的过滤规则较其他选择器稍微复杂，重点是要将元素的父元素和子元素区分清楚，还要注意它与普通的过滤选择器的区别。

2.3.6 表单对象属性过滤选择器

表单对象属性过滤器主要对选择的表单元素进行过滤，如选择被选中的下拉框，多选框等元素。

2.4 表单选择器

为使用户能够更加灵活地操作表单，jQuery中专门加入表单选择器，能及其方便地获取到表单的某个或某类型的元素。

2.5 选择器注意事项

2.5.1 选择器中含有特殊符号的注意事项

1.含有“·”、“#”、“(”、“)”等特殊字符

根据W3C规定，属性值中不能含有这些特殊字符，但实际项目中偶尔会遇到含有这些特殊字符的情况。解决此类错误的方法就是使用转义符转义。

HTML代码如下：

<div id="id#b">bb</div>
<div id="id[1]>cc</div>

获取元素时应该使用如下写法：

$("#id\\#b");       //转义特殊字符“#”
$("#id\\[1\\]");    //转义特殊字符“[ ]”

2.属性选择器的@符号问题

在jQuery1.3.1版本之后属性选择器选择属性时不需要使用@符号:
以前代码是：

$("div[@title='test']");

正确写法为：

$("div[title='test']");

注：如果项目中使用了较早的jQuery代码和插件，若升级jQuery后，代码报错，其错误来源可能是选择属性器使用了@符号引起的。

2.5.2 选择器中含有空格的注意事项

选择器中的空格也是不容忽视的，多一个空格少一个空格也许会得到截然不同的结果。

$t_a = $(".test :hidden");
$t_b = $(".test:hidden");

之所以造成不同结果，是因为后代选择器和过滤选择器的不同导致的。
带空格的，表示选取class为“test”的元素里面的隐藏元素，即后代选择器。
不带空格的，表示选取隐藏的class为“test”的元素，即过滤选择器。

2.6

$category.show();
//show()显示隐藏的匹配元素
$(this).find("span")
        .css("background","url(img/up.gif) no-repeat 0 0")
        //css(name,value)给元素设置样式
        .text("精简显示品牌");
        //text(string)设置所有匹配的元素的文本内容
$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
//filtrt(expr)筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器。要与find()区别find()会在元素内寻找匹配元素，filter()则是筛选元素。一个是对其子集操作，一个是对自身集合元素进行筛选
        .addClass("promoted");
        //addClass(class)为匹配的元素添加指定的类名
return false;