博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery的选择器的简单介绍
阅读量:4969 次
发布时间:2019-06-12

本文共 1769 字,大约阅读时间需要 5 分钟。

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规定,属性值是不能包含这些特殊符号的,但在实际项目应用中偶尔也会遇到这种表达式含有“#”和“[”等特殊符号的情况。

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

如:

科技
图书

如果按照普通方式来获取,如:

$('#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页面如下:

小三
小四

在js中

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

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

转载于:https://www.cnblogs.com/xielong/p/8318462.html

你可能感兴趣的文章
用JAVA编写浏览器内核之实现javascript的document对象与内置方法
查看>>
linux 命令之top
查看>>
洛谷 [P3033] 牛的障碍
查看>>
centos iptables
查看>>
unity3d 移动与旋转 2
查看>>
寻找二叉查找树中比指定值小的所有节点中最大的那个节点
查看>>
如何设置输入框达到只读效果
查看>>
RT3070 USB WIFI 在连接socket编程过程中问题总结
查看>>
MIS外汇平台荣获“2013年全球最佳STP外汇交易商”
查看>>
LeetCode 题解之Add Digits
查看>>
Xml处理工具类(Jdom)
查看>>
hdu1502 , Regular Words, dp,高精度加法
查看>>
20120227_CET6
查看>>
SpringBoot在idea中的热部署配置
查看>>
MyEclipse连接SQL Server 2008数据库的操作方法
查看>>
SqlCel 和MySQL for Excel在批量处理数据上的优劣
查看>>
leetcode【67】-Bulb Switcher
查看>>
JS验证图片格式和大小并预览
查看>>
调节心态的十种做法
查看>>
laravel5.2 移植到新服务器上除了“/”路由 ,其它路由对应的页面显示报404错误(Object not found!)———新装的LAMP没有加载Rewrite模块...
查看>>