HybridApp开发之jQuery选择器-创新互联
什么是选择器?
JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性,通过JQuery选择器对页面元素精确定位,进而方便完成处理元素属性和行为事件。
成都创新互联是一家专业提供峡江企业网站建设,专注与成都网站设计、网站建设、外贸网站建设、H5建站、小程序制作等业务。10年已为峡江众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。选择器的优势
与传统的JavaScript获取页面元素和事务处理相比,JQuery具备以下几个优势:
代码比较简单
完善的检测机制
1、)代码更简单
在JQuery库中封装了大量可以通过选择器直接调用的函数,使编程更加简单轻松,使用简单的代码就可以使用相对复杂的功能。
2、)完善的检测机制
传统js设置页面元素的事务的时候,先要找到页面上的元素,然后在赋予相应的属性或事件,如果页面元素不存在,则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候,无须考虑页面中是否存在,即使页面中不存在该元素也不会报错,极大的方便了代码的执行效率。
选择器分类
大致分为下面四大类
基本选择器
层次选择器
过滤选择器
表单选择器
过滤选择器又分为以下几个小分类
简单过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
接下来挨个学习一下。
基础选择器
#id 根据Id匹配一个元素 返回的单个元素
.class 根据给定的类名匹配一个元素 返回的是元素集合
element 根据元素名匹配一个元素 返回的是元素集合
* 匹配所有元素 返回的是元素集合
selecttor1,selector2并集,返回两个选择器匹配到的元素 返回的是元素集合
写个小例子学习一下
Title 第一层第二层段落
层次选择器
ancestor descendant 根据祖先匹配所有的后代元素 返回的是元素集合
parent>child 根据父元素匹配所有的子元素,直接后代 返回的是元素集合
prev+next 匹配下一个兄弟元素 相当于next()方法 返回的是元素集合
prev~siblings 匹配后面的兄弟元素 相当于nextAll()方法,siblings()方法为匹配所有的兄弟元素 返回的是元素集合
写个小例子学习一下
层次选择器
- 首页
- 商城
- 分类
风云
×××,一遇风云便化龙。
九霄龙吟惊天变,风云际会潜水游。
我要成仙
简单过滤选择器
:first或first() 匹配第一个元素 返回的单个元素
:last或last() 匹配最后一个元素 返回的单个元素
:not(selector) 匹配非selector能匹配到的元素 返回的是元素集合
:even 匹配索引值为偶数的元素,索引号从0开始 返回的是元素集合
:odd 匹配索引值为奇数的元素,索引号从0开始 返回的是元素集合
:eq(index) 匹配指定索引号的元素,索引号从0开始 返回的单个元素
:gt(index) 匹配索引号大于给定索引值的元素,索引号从0开始 返回的是元素集合
:lt(index) 匹配索引号小于给定索引值的元素,索引号从0开始 返回的是元素集合
:header 匹配所有的标题元素 h2 h3 h4 h5 h6 h7 返回的是元素集合
:animated 匹配所有正在执行动画的元素 返回的是元素集合
简单选择过滤器
- 第1行
- 第2行
- 第3行
- 第4行
- 第5行
- 第6行
- 第7行
- 第8行
内容过滤选择器:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
内容过滤选择器
- 第1行
- 第2行
- 第3行
- 第4行
- 第5行
- 第6行
- 第7行
- 第8行
可见性过滤选择器:
:hidden 匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式
:visible 获取所有的可见元素
可见性过滤选择器
- 第1行
- 第2行
- 第3行
- 第4行
- 第5行
属性过滤选择器:
[attribute] 匹配含有给定属性的元素
[attribute=value] 匹配含有属性=value的元素
[attribute!=value] 匹配含有属性但!=value的元素
[attribute^=value] 匹配属性值是以value开始的元素
[attribute$=value] 匹配属性值是以value结束的元素
[attribute*=value] 匹配属性值包含某些值的元素,部分前后,中间有也算
[selector][selector] 匹配属性选择器的交集
属性过滤选择器
- 第1行
- 第2行
- 第3行
- 第4行
- 第5行
- 第6行
- 第7行
- 第8行
子元素过滤选择器:
:nth-child(eq|even|odd|index) 获取所有父元素特定位置的子元素
:first 获取所有父元素下的第一个子元素
:last 获取所有父元素下最后一个子元素
:only-child 获取所有父元素下唯一的一个元素
子元素选择过滤器
- 第1行
- 第2行
- 第3行
- 第4行
- 第5行
- 第6行
- 第7行
- 第8行
表单对象属性过滤选择器:
:enabled 获取表单中所有可用的元素
:disabled 获取表单中所有不可用的元素
:checked 获取表单张所有被选中的元素
:selected 获取表单中所有被选中的option的元素
表单选择器:
:input 获取所有的表单元素
:text 获取所有的单行文本框
:password 获取所有的密码框元素
:radio 获取所有的单选按钮
:checkbox 获取所有的复选框
:submit 获取所有的提交按钮
:p_w_picpath 获取所有的图像按钮
:reset 获取所有的重置按钮
:button 获取所有的按钮
:file 获取所有的文件上传框
表单选择器 表单选择器
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:HybridApp开发之jQuery选择器-创新互联
文章出自:http://pwwzsj.com/article/ccijdi.html