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") //不带空格,是过滤选择器
posted @ 2018-01-19 18:54  小小邪  阅读(789)  评论(0编辑  收藏  举报