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值不能重复在文档中只能有一个 ...

随机推荐

Spring MVC Web框架
1. Spring MVC简介 Spring MVC是java EE平台请求驱动类型的轻量级Web框架,使用了MVC设计模式的思想,spring框架的主要优势之一就是分层架构,分层架构允许选择使用 ...
windbg符号
Symbol Server (Microsoft): srv*c:\mss*http://msdl.microsoft.com/download/symbols Symbol Server (Citr ...
jsAddress
demo.html <!DOCTYPE html><html><head> <title>纯JS省市区联动</title> <scri ...
who is the middle
Description FJ is surveying his herd to find the most average cow. He wants to know how much milk th ...
将html页改成jsp的两种方式
将html页改成jsp的两种方式作者: 字体:[增加减小] 类型:转载时间:2013-08-13 将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件.下面为大 ...
CodeForces 742B Batch Sort
B. Batch Sort time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
Monte Carlo 数值积分
var amount = 0.0d; var hitTheTargetCount = 0.0d; var M = 2.0d; var rnd=new Random(); ; i < ; i++) ...
Exception in thread "http-apr-8080-exec-2"
设置了catalina.bat.catalina.sh都不起作用MyEclipse中选择菜单Windows---preferences---MyEclipse---Servers---Tomcat-- ...
JQuery学习(选择器-基本-*)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
CentOS系统下Hadoop 2.4.1集群安装配置（简易版）
安装配置 1.软件下载 JDK下载:jdk-7u65-linux-i586.tar.gz http://www.oracle.com/technetwork/java/javase/downloads ...

JQ选择器逐一测试

JQ选择器逐一测试的更多相关文章

随机推荐

热门专题