JQuery的选择器的简单介绍

1、jquery工厂函数

　　介绍Jquery选择器前，先来说一下JQuery的工厂函数"$"，在JQuery中，无论使用哪种类型选择符都要从一个“$”符号和一对“()”开始。

在“()”中通常使用字符串参数，参数中可包含任何CSS选择符表达式。常见的用法如下：

1）在参数中使用标签名。如：$("div") 用于获取文档中全部的<div>

2) 在参数中使用ID名。如： $("#user")  用于获取文档中ID属性为user的一个元素

3）在参数中使用CSS类名。 如：$(".btn_color")  用于获取文档中使用CSS类名为btn_color的所有元素

2、jquery选择器是什么

　　JQuery选择器是JQuery库中非常重要的部分之一。它支持开发者所熟知的CSS语法，能够轻松快速对页面进行设置。JQuery选择器的

语法格式为： $(selector).methodName();

selector：是一个字符串的表达式，用于识别DOM中的元素，然后使用Jquery方法加以设置。多个Jquery操作可以以链的形式串起来，

语法格式为：$(selector).method1().method2().method3();

如：要隐藏id为user的DOM元素，并为它添加样式content， $("#user").hide().addClass("content");

3、jquery选择器

1）基本选择器

　　1.1）ID选择器（#id）

　　1.2）元素选择器（element）

　　1.3）类名选择器（.class）

　　1.4）复合选择器（selector1,selector2,selectorN）

　　1.5）通配符选择器（*）

2）层次选择器

　　 2.1）后代选择器（ancestor descendant）

　　2.2）父子选择器（parent>child）

　　2.3）兄弟选择器（prev+next）

　　2.4）同辈选择器（prev~siblings）

3）过滤选择器

　　3.1）简单过滤器

　　3.2）内容过滤器

　　3.3）可见性过滤器

　　3.4）表单对象的属性过滤器

　　3.5）子元素过滤器

4）属性过滤器

　　4.1）属性过滤器

5）表单选择器

　　5.1）表单选择器

4、选择器中注意事项

1）选择器含有“.”、“#”、“(” 和 “)”等特殊符号

1.1）选择器含有“.”、“#”、“(” 和 “)”等特殊符号

　　根据W3C规定，属性值是不能包含这些特殊符号的，但在实际项目应用中偶尔也会遇到这种表达式含有“#”和“[”等特殊符号的情况。

这时，如果按照普通方式去处理的话就会出现错误。解决此类的方法是使用转义符号将其转义。

如：

<div id='my#soft'>科技</div>
<div id='mybook(1)'>图书</div>

如果按照普通方式来获取，如：

$('#my#soft');
$('#mybook(1)');

这样是不能正确获取到元素的，正确的写法如下：

$('#my\\#soft');
$('#mybook\\(1\\)');

1.2） 属性选择器的@符号问题

　　在Jquery升级版本中，Jquery在1.3.1放弃了1.1.0版本遗留下的@符号，如果使用1.3.1以上的版本，那么不需要再属性前添加@符号。

例如：

$("div[@name='user']");

正确的写法是假@符号去掉，改为如下：

$("div[name='user']");

2） 选择器含有空格的注意事项

如html页面如下：

<div class="name">
     <div style="display:none;">小三</div>
      <div style="display:none;">小四</div>
     <div style="display:none;" class="name">小五</div>
</div>
<div style="display:none;" class="name">小七</div>
<div style="display:none;" class="name">小八</div>

在js中

<script type="text/javascript">
     var str1 = $(".name :hidden").length;   //带空格的jquery选择器
     var str2 = $(".name:hidden").length;   //不带空格的jquery选择器

     console.log("输出数量："+ str1);  //3个：小三、小四、小五
     console.log("输出数量："+ str2);  //2个：小七、小八
</script>

以上代码会出现不同的结果，是因为后代选择器和过滤选择器的不同

$(".name :hidden")   //带空格，是后代选择器

$(".name:hidden")    //不带空格，是过滤选择器