JQ选择器逐一测试
在web开发中大部分时间都在查找DOM元素和对DOM元素进行控制。
从上面就知道JQ为什么那么流行,因为它极大的缩短对DOM元素的查找和控制,让开发更快。
而它的对查找DOM的方法也很方便,这归类为选择器,如果对它了解,就知道它还有子类库sizzle,
这是选择器分出来的库,还有在从源码里也可以知道选择器这块的代码量,有2000行左右,让我们
可以像css选择器一样,把繁杂的选择简单化,也可以看出它替我们干了多少事,让我们更快开发。下面测试
每一个选择器的功能。
一般情况下都是$(),它接受两个参数,第一个参数不说,第二个参数可选,它就像以下:
原生:
var oDiv=document.getElementById('div');
JQ:
$("#div",document) 第二参数就是代表原生的document 如: var oDiv=obj.getElementById('div'); $("#div",obj)
1、#id
<div id="div"></div>
<script>
$(function(){
$("#div").css({"width":100,"height":100,"border":"1px solid #000"})
})
</script>
2、element
var oDiv=document.getElementById('div');
$(function(){
$("div",document).css({"width":100,"height":100,"border":"1px solid #000"})
})
3、class
<div id="div" class="div"></div>
<script>
var oDiv=document.getElementById('div');
$(function(){
$(".div",document).css({"width":100,"height":100,"border":"1px solid #000"})
})
</script>
4、*
var oDiv=document.getElementById('div');
$(function(){
$("*",document).css({"width":100,"height":100,"border":"1px solid #000"})
})
5、多选择器:selector1,selector2,selectorN
$("div,.div,#div").css({"width":100,"height":100,"border":"1px solid #000"})
6、ancestor descendant后代选择器
$("ul li").css({"width":100,"height":100,"border":"1px solid #000"})
7、parent > child
$("ul>li").css({"width":100,"height":100,"border":"1px solid #000"})
8、
$("li+li").css({"width":100,"height":100,"border":"1px solid #000"})
9、prev ~ siblings
$("li~li").css({"width":100,"height":100,"border":"1px solid #000"})
10、:first
$("li:first").css({"width":100,"height":100,"border":"1px solid #000"})
11、:not(selector) 去除匹配元素
$("li:not(.active)").css({"width":100,"height":100,"border":"1px solid #000"})
12、:even 匹配所有索引值为偶数的元素,从 0 开始计数
$("li:even").css({"width":100,"height":100,"border":"1px solid #000"})
13、:odd 匹配所有索引值为奇数的元素,从 0 开始计数
$("li:odd").css({"width":100,"height":100,"border":"1px solid #000"})
14、:eq(index) 匹配一个给定索引值的元素
$("li:eq(0)").css({"width":100,"height":100,"border":"1px solid #000"}) 匹配第一个元素
15、:gt(index) 匹配所有大于给定索引值的元素
$("li:gt(1)").css({"width":100,"height":100,"border":"1px solid #000"}) 匹配索引大于1的元素
16、:lang(language) 选择指定语言的所有元素。
$("li:lang(it)").css({"width":100,"height":100,"border":"1px solid #000"})
17、:last() 获取最后个元素
$("li:last").css({"width":100,"height":100,"border":"1px solid #000"})
18、:lt(index) 匹配所有小于给定索引值的元素
$("li:lt(5)").css({"width":100,"height":100,"border":"1px solid #000"}) 匹配索引值小于5的元素
19、:header 匹配如 h1, h2, h3之类的标题元素
$(":header").css({"width":100,"height":100,"border":"1px solid #000"})
20、:animated 匹配所有正在执行动画效果的元素
$("div:animated").css({"width":100,"height":100,"border":"1px solid #000"})
21、:focus 匹配当前获取焦点的元素。
$("input:focus").css({"width":100,"height":100,"border":"1px solid #000"})
22、:root 选择该文档的根元素。
在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。
$(":root").css({"width":100,"height":100,"border":"1px solid #000"})
23、:target 选择由文档URI的格式化识别码表示的目标元素。
$("div:target").css({"width":100,"height":100,"border":"1px solid #000"})
24、:contains(text) 匹配包含给定文本的元素
$("div:contains['zhng']").css({"width":100,"height":100,"border":"1px solid #000"}) 选择包含字符串zhng的元素
25、:empty 匹配所有不包含子元素或者文本的空元素
$("div:empty").css({"width":100,"height":100,"border":"1px solid #000"})
26、:has(selector) 匹配含有选择器所匹配的元素的元素
$("div:has(p)").css({"width":100,"height":100,"border":"1px solid #000"}) 选择包含p标签的元素
27、:parent 匹配含有子元素或者文本的元素
$("div:parent").css({"width":100,"height":100,"border":"1px solid #000"})
28、:hidden 匹配所有不可见元素,或者type为hidden的元素
<div id="div" class="div" style="display: none;"></div> $("div:hidden").css({"width":100,"height":100,"border":"1px solid #000"})
29、:visible 匹配所有的可见元素
<div id="div" class="div" style="display: none;"></div>
<div id="div" class="div" style="display: block;"></div> $("div:visible").css({"width":100,"height":100,"border":"1px solid #000"})
30、[attribute] 匹配包含给定属性的元素。
$("div[class]").css({"width":100,"height":100,"border":"1px solid #000"})
31、[attribute=value] 匹配给定的属性是某个特定值的元素
$("div[class='div']").css({"width":100,"height":100,"border":"1px solid #000"})
31、[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
$("div[class!='div']").css({"width":100,"height":100,"border":"1px solid #000"})
32、[attribute^=value] 匹配给定的属性是以某些值开始的元素
$("div[class^='d']").css({"width":100,"height":100,"border":"1px solid #000"})
33、[attribute$=value] 匹配给定的属性是以某些值结尾的元素
$("div[class$='v']").css({"width":100,"height":100,"border":"1px solid #000"})
34、[attribute*=value] 匹配给定的属性是以包含某些值的元素
$("div[class*='i']").css({"width":100,"height":100,"border":"1px solid #000"})
35、[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。
$("div[id][class*='i']").css({"width":100,"height":100,"border":"1px solid #000"})
36、:first-child 匹配第一个子元素
$("div p:first-child").css({"width":100,"height":100,"border":"1px solid #000"})
37、:first-of-type 结构化伪类,匹配E的父元素的第一个E类型的孩子。等价于 :nth-of-type(1) 选择器。
$("div p:first-of-type").css({"width":100,"height":100,"border":"1px solid #000"})
38、:last-child 匹配最后一个子元素
$("div p:last-child").css({"width":100,"height":100,"border":"1px solid #000"})
39、:last-of-type 结构化伪类,匹配E的父元素的最后一个E类型的孩子
$("div p:last-of-type").css({"width":100,"height":100,"border":"1px solid #000"})
40、:nth-child 匹配其父元素下的第N个子或奇偶元素
要匹配元素的序号,从1开始
$("div p:nth-child(1)").css({"width":100,"height":100,"border":"1px solid #000"}) 第一个子元素
41、:nth-last-child(n|even|odd|formula) 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
$("div p:nth-last-child(1)").css({"width":100,"height":100,"border":"1px solid #000"})
42、nth-last-of-type(n|even|odd|formula) 选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。
$("div p:nth-last-of-type(1)").css({"width":100,"height":100,"border":"1px solid #000"}) 选中最后一个子元素
43、:nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。
$("div p:nth-of-type(1)").css({"width":100,"height":100,"border":"1px solid #000"})
44、:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,那将不会被匹配
$("div p:only-child").css({"width":100,"height":100,"border":"1px solid #000"}) 当p是唯一的时候选中
45、:only-of-type 选择所有没有兄弟元素,且具有相同的元素名称的元素。
$("div p:only-of-type").css({"width":100,"height":100,"border":"1px solid #000"})
46、:input 匹配所有 input, textarea, select 和 button 元素
$(":input").css({"width":100,"height":100,"border":"1px solid #000"}) 匹配所有的input标签
47、:text 匹配所有的单行文本框
$(":text").css({"width":100,"height":100,"border":"1px solid #000"}) 匹配单行文本框
48、:password 匹配所有密码框
$(":password").css({"width":100,"height":100,"border":"1px solid #000"}) 匹配密码框
49、:radio 匹配所有单选按钮
$(":radio").css({"width":100,"height":100,"border":"1px solid #000"})
50、:checkbox 匹配所有复选框
$(":checkbox").css({"width":100,"height":100,"border":"1px solid #000"})
51、:submit 匹配所有提交按钮
$(":submit").css({"width":100,"height":50,"border":"1px solid #000"})
52、:image 匹配所有图像域
<input type="image" /> $(":image").css({"width":100,"height":50,"border":"1px solid #000"}) 匹配<input type="image" />
53、:reset 匹配所有重置按钮
$(":reset").css({"width":100,"height":50,"border":"1px solid #000"})
54、:button 匹配所有按钮
$(":button").css({"width":100,"height":50,"border":"1px solid #000"})
55、:file 匹配所有文件域
$(":file").css({"width":100,"height":50,"border":"1px solid #000"})
56、:enabled 匹配所有可用元素
$(":enabled").css({"width":100,"height":50,"border":"1px solid #000"})
57、:disabled 匹配所有不可用元素
$(":disabled").css({"width":100,"height":50,"border":"1px solid #000"})
58、:checked 匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected
$(":checked").css({"width":100,"height":50,"border":"1px solid #000"})
59、:selected 匹配所有选中的option元素
$(":selected").css({"width":100,"height":50,"border":"1px solid #000"})
扩展:
var jQuery=window.jQuery=window.$=function(selector,context){
return new jQuery.fn.init(selector,context)
} /*这是jquery的总入口,所有的调用都基于这个入口*/ /*在一些jq插件里源码看到这个jQuery.fn,其实它是如下*/ jQuery.fn.init.prototype=jQuery.fn;
JQ选择器逐一测试的更多相关文章
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
- 常用jq选择器和遍历的使用
1.jq的选择器,常用有哪些? class id > ~ ul li a 2.遍历的使用(在使用用遍历节点时,我们的注意遍历在不传递参数(也就是传参),代表的是传递局部全局,也就是"* ...
- jq选择器基础
Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
- jq 选择器
基本选择器 1. id选择器(指定id元素)将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...
- JQ选择器
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
- jq 选择器基础及拓展
jquery 用的很多,所以jq的选择器就很受欢迎,但是用的过程中有一些小问题,如果不点透就永远不知道. 1:ID选择器:$("#ID"); 得到一个指定对应,并且只能得到一个对象 ...
- JQ选择器大全
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
- JQ选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
随机推荐
- Particle Playground 3.03 - 粒子特效王者
<ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op ...
- CGRectXXX笔记
CoreGraphics中有关CGRect相关函数笔记 1.CGRectInset //该结构体的应用是以原rect为中心,再参考dx,dy,进行缩放或者放大. CGRect rect = CGRec ...
- sql常用语法
--在表中添加字段if col_length('JX_DomesticStudy','XL') is null begin alter table JX_DomesticStudy add PXlev ...
- PHP ftp使用
本文章来总结几个利用php中的ftp功能来实现通过FTP上传文件,有需要学习的朋友可参考参考.ftp_get() 函数从 FTP 服务器上下载一个文件.若成功则返回 true,失败则返回 false. ...
- 在Openfire中使用自己的数据表之修改配置文件
目前我使用的Openfire版本是3.10.3,以下使用说明也是在这个版本上做的修改. Openfire提供了两种方式使用用户数据表.一种是安装完成之后默认实现的org.jivesoftware.op ...
- poj3468 A Simple Problem with Integers (线段树区间最大值)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 92127 ...
- 关闭Ubuntu 12.04的内部错误提示
刚装完系统后,才安装一个输入法重启电脑后,竟然就提示'内部错误'需要提交报告,什么状况? 发扬'不求甚解'的光荣传统,我又不搞Linux开发,对我来说只是个工具而已,工具出问题了解决问题即可不想劳神深 ...
- poj 1035 Spell checker
Spell checker Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u J ...
- SQL Server优化技巧之SQL Server中的"MapReduce"
日常的OLTP环境中,有时会涉及到一些统计方面的SQL语句,这些语句可能消耗巨大,进而影响整体运行环境,这里我为大家介绍如何利用SQL Server中的”类MapReduce”方式,在特定的统计情形中 ...
- Jupyter 服务开发指南
1. 取kylin 数据 import requests import pandas as pd def getDtu(dtuid,addr): sqlData = '{ "sql" ...