jquery的api以及用法总结-选择器
jQuery API及用法总结
选择器
基本选择器
* 通用选择器
.class 类选择器，一个元素可以有多个类(chrome使用原生js函数getElementByClassName()实现)
利用类选择器改变元素的样式
<div class="demo"></div>
<script type="text/javascript">
$('.demo').css({
border: '3px solid red',
})
</script>
- element元素选择器，DOM节点的标签名(调用函数getElementByTagName()实现)
利用元素选择器查找文档中的元素,添加css样式
<script type="text/javascript">
$('div').css({
color: 'skyblue',
})
</script>
- id选择器，具有唯一性,在一个文件中只能使用一次（原生js调用getElementById()函数)
查找id元素添加样式
<div id="demo">demo3</div>
<script type="text/javascript">
$('#demo').css({
border: '3px solid skyblue',
})
</script>
层级选择器
- 子选择器(选择父元素的子元素)
<div>
<p></p>
</div>
<script type="text/javascript">
$('div>p').css({
border: '3px solid skyblue',
})
</script>
- 群组选择器（选择可以匹配的所有元素）
选择.demo和#demo,以逗号为间隔隔开
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<script type="text/javascript">
$('.demo, #demo').css({
border: '2px solid red',
})
</script>
- 后代选择器（选择元素的下一个元素）
注意：会选择该元素下所有匹配合适的元素
此例中所有的p均会被加上border样式
<div>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
<script type="text/javascript">
$('div p').css({
border: '1px solid skyblue',
})
</script>
- 前缀选择器
此例中选择只有div下面类名为demo的元素
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<script type="text/javascript">
$('div.demo').css({
color: 'red',
})
</script>
- next选择器（只选择到紧跟其后的同级元素）
注意：元素之间的关系必须是同级即兄弟元素，不能为父子关系
此例中选择的是仅紧跟着p标签的第一个span标签，故会改变1的样式
<p></p>
<span>1</span>
<span>2/span>
<span>3</span>
<script type="text/javascript">
$('p+span').css({
border: '2px solid blue',
})
</script>
- nextAll选择器（选择到跟随其后的所有同级元素）
同第五个next选择器，只不过选择的范围不同
此例中会选择p标签之后的所有span标签，改变样式
<p></p>
<span>1</span>
<span>2/span>
<span>3</span>
$('p~span').css({
border: '2px solid blue',
})
属性选择器
- [attribute]
$('div[title]')
查找所有属性名为title的元素
此例三个div均会被添加border样式
<div title = "demo"></div>
<div title = "demo"></div>
<div title = ""></div>
$('div[title = demo]').css({
border: '5px solid skyblue',
})
- [attribute = value],属性名 = 属性值
$('div[title = demo]')
查找title的属性值为demo的所有元素并设置样式
此例加边框样式的只有第一个第二个div
<div title = "demo"></div>
<div title = "demo"></div>
<div title = ""></div>
$('div[title = demo]').css({
border: '5px solid skyblue',
})
- [attribute|='value']
跟[attribute = value]基本类似，均是选择属性名等于该属性值的所有元素
- [attribute='value']=以value开头的所有元素
div[title^=demo]
查找title属性是以demo开头的元素
此例三个div中只有前两个div会被选择改变样式
<div title = "demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title = demo]').css({
border: '5px solid skyblue',
})
- [attribute$='value']$=以value结尾的所有元素
div[title$=demo]
查找title属性是以demo结尾的元素
此例三个div中前三个div会被选择改变样式
<div title = "demo"></div>
<div title = "demo demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title $= demo]').css({
border: '5px solid skyblue',
})
- [attribute!='value']
这个选择器等同于 :not([attr=value]) 即非
div[title!=demo]
原生dom提供querySelectorAll()提高查询的性能
此例中选择title不等于demo的元素，即第一个和第三个
<div title = "demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title != demo]').css({
border: '5px solid skyblue',
})
- [attribute*='value']
只要属性名中的一部分包含了value这个属性值，均会被选择到
div[title*=demo]
此例中第一个和第二个div均包含demo，所以选择第一二个div元素
<div title = demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title*=demo]').html('jianmei');
- [attribute~='value']
div[title~=demo]即title属性中有用空格分隔后的值等于demo
此例中第一个和第三个中都含有demo，且第二个有空格，故选择的是第一个和第三个
__注意：__若此例中使用div[title=demo]，则选择的只有第一个
<div title = "demo"></div>
<div title = "de demo"></div>
<div title = "demodemo"></div>
<div title = "de"></div>
$('div[title~=demo]').html('jianmei');
基本筛选选择器
- :eq(index) index 匹配元素的索引值，从0开始
eq = equal平等的，即是等于index的值
此例中选择的是index等于0的div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
$('div:eq(0)').css({
color: 'red',
})
- :gt(index)
gt = great than 即是大于index的值
此例中第二个和第三个div会被选择，选择的是index大于0的元素
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
$('div:gt(0)').css({
color: 'red',
})
- :lt(index)
lt = less than 即是小于index的值
此例中第一个和第二个div会被选择，选择的是index小于0的元素
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
$('div:lt(2)').css({
color: 'red',
})
- :odd选择__index为奇数__的元素,并不是按照视觉可见的顺序
此例中选择的是第二个和第四个div，index分别为1，3
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<div class="demodemo">demo4</div>
$('div:odd').css({
color: 'red',
})
5.:even 选择__index为偶数__的元素,并不是按照视觉可见的顺序
此例中选择的是第一个和第三个div，index分别为0，2
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<div class="demodemo">demo4</div>
$('div:even').css({
color: 'red',
})
- :first相当于:eq(0),为了更好的性能，一般使用.filter(':first')
此时的顺序是视觉上可见的顺序
此例中仅选择第一个div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
$('div:first').html('jianmei');
- :last，为了更好的性能，一般使用.filter(':last')
此例中仅选择最后一个div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
$('div:last').html('jianmei');
- :header 选择所有的标题元素，为了更好的性能，一般使用.filter(':header')
此例中的h1和h2均会被选择，改变样式
<h1>jianmei</h1>
<h2>jianmei</h2>
$(':header').css({
background: 'skyblue',
})
- :not() 用于过滤的选择器，但是通常会构建非常复杂的选择器，所以大多数情况下使用.not()方法
这里只写.not(selector)方法
此例中选择的是index不是奇数的div，所以选择的是第一个和第三个div
<div class="demo">demo1</div>
<div class="demo">demo2</div>
<div id="demo">demo3</div>
<div class="demodemo">demo4</div>
$('div').not(':odd').css({
border: '2px solid skyblue',
})
- :lang('language') 选择指定语言的所有元素
注意：此例中只有第一个和第二个span元素均会被选中，:lang会选中含有language或者第一个符合的language的元素，并不是只要含有language的元素都会被选择
<span lang = "en">1</span>
<span lang = "en-mei">2</span>
<span lang = "mei-en">3</span>
$('span:lang(en)').css({
border: '2px solid red',
})
- :root 选择的根元素永远都是html
此例中会向每一个p中添加一个html
<p>demo</p>
<p>demo</p>
<p>demo</p>
$('<b></b>').html($(':root')[0].nodeName).appendTo('p');
- :target 匹配ID和标识符相匹配的元素
例如：给定url : http://example.com/#foo
$('p:target');
将选择 <p id = 'foo'>的元素
- :animated选择所有正在执行动画效果的元素
为了更好的使用效果，首先使用纯CSS选择器选择元素，然后使用.filter(":animated")
内容筛选
- :parent选择所有包含子元素或者文本的父级元素
为了获得更好的性能，首先使用纯css选择器选择元素，然后使用.filter(':parent')
注意:parent涉及的子元素包含文本节点
此例中选择的是第一个和第二个div，因为只有第三个是没有子元素和文本节点的
<div><p></p></div>
<div> </div>
<div></div>
$('div:parent').css({
border: '3px solid skyblue',
})
- empty:和parent相反，选择没有包含子元素的元素
此例中选择的是第三个div，因为只有第三个是没有子元素和文本节点的
<div><p></p></div>
<div> </div>
<div></div>
$('div:empty').css({
border: '3px solid skyblue',
})
- :has()
$('div:has(p)')选择一个div，这个div内至少含有一个p标签
此处选择的是第一个div，只有第一个div内含有p标签
<div><p></p></div>
<div></div>
$('div:has(p)').css({
border: '2px solid skyblue',
})
- :contains(text)text区分大小写，选择所有包含指定文本的元素
$('div:has(mei)') 查找所有含有mei的div
<div>jian mei</div>
<div>mei</div>
$('div:contains(mei)').css({
border: '2px solid skyblue'
})
可见性筛选
- :hidden 选择所有隐藏的元素
元素可以被认为是隐藏的几种情况：
- css的display值为none
- type = "hidden"
- 元素的高度和宽度显式设置为0
元素visibility:hidden和opcity:0被认为是可见的，因为他们仍然占据文档空间，
使用:hidden()查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用.filter(":hidden")代替
此例中div本来是隐藏的，选择的是有隐藏元素的div，并在3s之后显示
<div style="display: none;">hidden</div>
// :hidden
$('div:hidden').show(3000);
```
1. :visible 选择所有可见的元素
跟hidden用法相反
<p>demo</p>
<p>demo</p>
<p>demo</p>
$('p:visible').click(function() {
$(this).css({
background: 'skyblue',
})
})
***
### 子元素筛选选择器
1. :first-child 选择所有父级元素下的第一个子元素
此例中仅div下面的第一个p改变样式
<div>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
$('div p:first-child').css({
'text-decoration': 'underline',
})
2. first-of-type 选择所有相同的元素名称的第一个兄弟元素
_注意_：此例中跟first-child不一样的地方是，first-child只选择直系的第一个，如果第一个不是，则不选择，first-of-type选择的是只要包含有就选择包含的第一个兄弟元素，此处选择的是div内包含的p标签的第一个
<div>
<a href=""></a>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
$('div p:first-of-type').css({
background: 'red',
})
3. :last-child 选择所有父级元素下的第一个子元素
此例中仅div下面的最后一个p改变样式
<div>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
$('div p:last-child').css({
'text-decoration': 'underline',
})
4. last-of-type 选择所有相同的元素名称的最后一个兄弟元素
原理同上：first-of-type，
<div>
<a href=""></a>
<p>demo</p>
<p>demo</p>
<p>demo</p>
</div>
$('div p:last-of-type').css({
background: 'red',
})
5. :nth-child(index/even/odd/equation)
index：匹配的索引值，从1开始，可以是even（偶数） odd（奇数）2n
__注意__：和eq()不一样的地方是，eq()的索引是从0开始的
<div>
<button></button>
<button></button>
</div>
<div>
<button></button>
</div>
$('div:nth-child(2)').click(function () {
$(this).css({
border: '2px solid skyblue',
});
});
6. :only-child 如果某元素是其父元素的唯一一个子元素，就会被选择，如果父元素还有其他元素，就不会被选择
此例中，只有第二个div内有唯一一个button，所以选择的是第二个，在第二个button内添加文本：alone
<div>
<button></button>
<button></button>
</div>
<div>
<button></button>
</div>
$('div button:only-child').text('alone').css({
border: '2px solid skyblue',
}
7. ：nth-of-type() 同一个父元素下面标签名字相同的子元素中的第n个
index是从1开始的，可以是字符串even或者odd或者是方程式:nth-of-type(even), :nth-of-type(4n)
此例中选择的是第一个div内的button兄弟元素的第二个
<div>
<button></button>
<button></button>
</div>
<div>
<button></button>
</div>
$('div button:nth-of-type(1)').text('alone').css({
border: '2px solid skyblue',
}
***
### 表单选择器
1. :button 选择所有按钮元素和类型为按钮的元素
此例中两个元素均被选择且添加move样式
<input type="button" value="Input Button"/>
<button>Button</button>
$(':button').addClass('move');
2. :checkbox 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能，建议使用[type="checkbox"]代替
<input type="checkbox" />
$(':checkbox').wrap("<span style='background-color:red'>");
----------------------------------------------------------
//最好这样写
$('[type = checkbox]').wrap("<span style='background-color:red'>");
3. :checked 匹配所有勾选的元素
此例中选择了第三个处于选中状态的input
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked />
$('input:checked').wrap("<span style='background-color:red'>");
```
- :disabled 匹配所有禁用的元素
此例中选择第一个input
<input type="checkbox" disabled/>
<input type="checkbox" />
$('input:disabled').wrap("<span style='background-color:red'>");
- enabled 匹配所有可用的元素，和disabled用法相反
此例中选择第二个input
<input type="checkbox" disabled/>
<input type="checkbox" />
$('input:enabled').wrap("<span style='background-color:red'>");
- :focus 选择当前获取焦点的元素
此例中选择的是当前获取焦点的input,且该input的类型为text，再设置样式
<input type="text" />
$('input[type = text]').focus(function () {
$(this).css({
background:'red',
})
})
总结：:file :image :input : password :radio :reset :select :submit :text
均是选择所有类型为该属性的元素用法同上。
jquery的api以及用法总结-选择器的更多相关文章
- jquery的api以及用法总结-数据/操作/事件
数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...
- jquery的api以及用法总结-属性/css/位置
属性/css 属性 .attr() attr()设置普通属性,prop()设置特有属性 获取或者设置匹配的元素集合中的第一个元素的属性的值 如果需要获取或者设置每个单独元素的属性值,需要依靠.each ...
- jQuery常用API之jQuery选择器
3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...
- jquery中$.each()的用法
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jQuery中Animate进阶用法（一）
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 d ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
随机推荐
- 分享：个人APP(非企业资质)的微信登录方案
目前微信开放平台个人主体类APP不支持开通微信登录,那么个人开发者如何解决微信登录的问题呢?目前有一种替代方案是用微信小程序作为媒介来达到微信登录的目的. 微信小程序的登录无需企业资质,同时登录后返回 ...
- OPC协议
详解OPC协议-工业控制和自动化领域的接口标准 摘要:OPC全称是OLEforProcessControl,即用于过程控制的OLE,是针对现场控制系统的一个工业标准接口,是工业控制和生产自动化 ...
- 实战docker，编写Dockerfile定制tomcat镜像，实现web应用在线部署
最初在tomcat上部署web应用的方式,是通过maven的maven-compiler-plugin插件先打成war包,再将war包复制到tomcat的webapps目录下,后来用上了tomcat7 ...
- window下 局域网内使用mysql，mysql 开启远程访问权限
一.window 10 开启3306端口 1.按win键选择设置 2.搜索防火墙 3.选择高级设置 3.右键入站规则->新建规则 4.按照提示,规则类型选择端口,应用于tcp,特定本地端口输入3 ...
- session一致性的解决方案
更多内容,欢迎关注微信公众号:全菜工程师小辉.公众号回复关键词,领取免费学习资料. 什么是session? 服务器为每个用户创建一个会话,存储用户的相关信息,以便多次请求能够定位到同一个上下文,这个相 ...
- 一文带您了解 Elasticsearch 中，如何进行索引管理（图文教程）
欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...
- vue路由菜单权限设置就button权限设置
路由权限的设计思路: 首先,我们的需要校验权限的路由的 url,全部由后端返回,后端会返回当前用户的路由树数组.前端在进入页面前请求接口,把数据拿到: 其次,前端会维护一个路由映射组件的列表,如果路由 ...
- java设计模式7.策略模式、模板方法模式、观察者模式
策略模式 策略模式的用意,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 环境角色:持有一个抽象策略角色的引用. 抽象策略 ...
- Keras（六）Autoencoder 自编码 原理及实例 Save&reload 模型的保存和提取
Autoencoder 自编码 压缩与解压 原来有时神经网络要接受大量的输入信息, 比如输入信息是高清图片时, 输入信息量可能达到上千万, 让神经网络直接从上千万个信息源中学习是一件很吃力的工作. 所 ...
- windows服务autofac注入quartz任务
一.nuget下载相关类库引用 install-package Quartz install-package Autofac install-package Autofac.Configuration ...