初学jQuery之选择器

xcc3641 发布于2019-08-02 16:04 / 1627人阅读

摘要：选择器选择器是什么的选择器是用于定位页面中的元素，其用法最初设计是源于的选择其用法，但是的选择器进行了扩展，远比的选择器更加强大。

选择器 选择器是什么

jQuery的选择器是用于定位HTML页面中的元素，其用法最初设计是源于CSS的选择其用法，但是jQuery的选择器进行了扩展，远比CSS的选择器更加强大。

基本选择器

基本选择去具有以下几种：
1.ID选择器
2.元素选择器
3.类选择器
4.通配符选择器
5.组合选择器
示例代码如下：


卧龙学苑
前端开发

层级选择器

jQuery的层级选择器具有以下几种：
1.后代选择器根据给定元素的祖先元素下匹配所有的后代元素
2.子选择器根据给定的父元素下匹配所有的子元素
3.相邻兄弟选择器根据给定的目标元素匹配下一个相邻兄弟元素
4.普通兄弟选择器根据给定的目标元素匹配后面所有兄弟元素
由于jQuery对象是类数组对象，及时匹配的元素只有一个，返回的结果依旧是类数组对象。
示例代码如下：

基本过滤选择器

jQuery的基本过滤选择器具有以下几种：
1.:first过滤选择器获取第一个元素
2.：last过滤选择器获取最后一个元素
3.：even过滤选择器匹配所有索引值为偶数的元素，从0开始
4.：odd过滤选择器匹配所有索引值为奇数的元素，从0开始
5.:eq（）过滤选择器匹配一个给定索引值的元素
6.:gt（）过滤选择器匹配所有大于给定索引值的元素
7.:lt（）过滤选择器匹配所有小于给定索引值的元素
8.:not（）过滤选择器去除所有与给定选择器匹配的元素
9.:header过滤选择器匹配如h1 h2 h3 h4 h5 h6之类的标题元素
10.:animated过滤选择器匹配正在执行动画效果的元素（由jQuery实现的动画）
示例代码如下：


这是标题
这是标题
卧龙学苑

    



前端开发

内容过滤选择器

jQuery中提供了以下几种内容过滤选择器
1.：contains（）过滤选择器匹配包含给定位版本的元素
2.：empty过滤选择器匹配不包含子元素或者文本的空元素
3.：parent过滤选择器匹配有子元素或者文本的元素
4.：has（）过滤选择去匹配含有选择器所匹配的元素的元素
示例代码如下：


这是div元素

可见性过滤选择器

1.：hidden过滤选择器匹配所有不可见元素，或者type为hidde的元素
2.：visible过滤器选择器匹配所有可见的元素


卧龙学苑
前端开发

属性过滤选择器

1.[attr]过滤选择器匹配包含给定属性的元素
2.[attr=value]过滤选择器匹配给定的属性是某个特定值的元素
3.[attr！=value]过滤选择器匹配不含有特定的属性，或者属性不等于特定值的元素
4.[attr^=value]过滤选择器匹配给定的属性是以某些值开始的元素
5.[attr$=value]过滤选择器匹配给定的属性是以某些值结尾的元素
6.[attr*=value]过滤选择器匹配给定的属性是包含某些值的元素
7.组合过滤选择器匹配元素需要同时满足多个属性过滤器

子元素过滤选择器

1.：nth-child（）过滤选择器匹配其父元素下的第N个子或奇偶元素
2.：first-child过滤选择器匹配第一个子元素
3.：last-child过滤选择器匹配最后一个子元素
4.：only-child过滤选择器如果某个元素是父元素中唯一的子元素，就会被匹配



    这是id为d1的div元素
    这是id为d2的div元素
    这是id为d3的div元素

表单对象属性过滤器

1.：enabled过滤选择器匹配所有可用元素
2.：disabled过滤选择器匹配所有不可用元素
3.：checked过滤选择器匹配所有选中的被选中元素
4.：selected过滤选择器匹配所有选中的



    
    html
    css

表单选择器

云服务器 GPU云服务器 jquery常用选择器 jquery过滤选择器 jquery双向选择器 jquery选择器空格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54595.html

初学jQuery之选择器

摘要：选择器选择器是什么的选择器是用于定位页面中的元素，其用法最初设计是源于的选择其用法，但是的选择器进行了扩展，远比的选择器更加强大。选择器选择器是什么 jQuery的选择器是用于定位HTML页面中的元素，其用法最初设计是源于CSS的选择其用法，但是jQuery的选择器进行了扩展，远比CSS的选择器更加强大。基本选择器基本选择去具有以下几种：1.ID选择器 2.元素选择器3...

yankeys 2019-08-23 11:47 评论0 收藏0
jQuery设计思想之理解篇

摘要：创建新元素的方法非常简单，只要把新元素直接传入的构造函数就行了七工具方法设计思想之六除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法。八事件操作设计思想之七，就是把事件直接绑定在网页元素之上。转自：阮一峰 2011年7月26日 http://www.ruanyifeng.com/blo... jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界排名...

newsning 2019-08-20 16:12 评论0 收藏0
JavaScript入门的5条建议

摘要：你是否已经初步掌握了和，但完全不知道从何入手如果是，那么这篇文章一定会对你有所帮助，这里总结了条建议，帮助初学者总结学习方法，提高学习效率。这样的结果就是，个小时最多只利用了个小时。你是否已经初步掌握了html和css，但完全不知道从何入手JavaScript？如果是，那么这篇文章一定会对你有所帮助，这里总结了5条建议，帮助JavaScript初学者总结学习方法，提高学习效率。一、...

李昌杰 2019-08-20 17:46 评论0 收藏0
初学Vue（五）-- 双向绑定

摘要：需要初始化处理一些数据时会比较有用，后面章节将有介绍。主要解绑一些使用监听的事件等。这些钩子与和类似，也是作为选项写入实例内，并且钩子的指向的是调用它的实例你好，{{ name }} var app = new Vue({ el: #app, data: { name: } ...

Thanatos 2019-08-23 18:38 评论0 收藏0
jQuery 效率提升建议

摘要：网上有一篇文章转载比较泛滥，已经不知道原文作者了，里面针对效率提升建议非常科学，现在重新组织里面的内容并转载。事实上，这种处理完全不必要。利用这一点，可以大大简化事件的绑定。对象由于会对变更，速度会远慢于函数。 jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来，也拉低了进入javascript的门槛，初学者对浏览器兼容性一无所知的情况下，几行代码就可以写出超炫的特效。网上有一...

liuhh 2019-06-28 14:11 评论0 收藏0