jQuery温习篇 强大的JQuery选择器

在jQuery出世以来，它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架，它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果，轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点，它已经被微软官方认可加入VS IDE中拥有强大的智能提示，并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本。

1：首先是JavaScript的DOM 和 jQuery包装集的区分

1.1:在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有：

1: document.getElementById("ID")：根据ID获取DOM对象。

2：document.getElementsByName("name")：根据HTML标记name属性获取一个DOM数组。

3：document.getElementsByTagName("Tag")：根据HTML的Tag获取一个DOM数组。

1.2：jQuery相对DOM则提供了许多可用的方法和属性。

jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式，它的书写方式和css3.0相似 id用#，class（css）用.，HTMl Tag则直接书写。关于jquery的选择器在下面讲述，这里不急。

1.3:JavaScript的DOM对象转可以化为jQuery包装集：通过$(element)赴会就为jQuery包装集。

2：jQuery最强大的就是提供了一个万能的属性选择器。


2.1基本选择器



























选择表达式

说明

举例

#id

根据给定的ID匹配一个元素用#

$("#testDiv2")  获取ID为testDiv2的元素

.class

根据给定的类匹配元素(也就是取class的值)用.

$(".myDiv")    获取class为myDiv的一组元素

element

根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)

$("div")    获取所有的div元素

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开

$("#testDiv2,p")

$("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素

*

选择所有的元素

$("*")

2.2简单选择器














































选择表达式

说明

举例

:first

匹配找到的第一个元素

$("div:first")

:last

匹配找到的最后一个元素

$("div:last")

:eq(index)

匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始

$("div:eq(1)")

:gt(index)

匹配所有大于给定索引值的元素

$("div:gt(0)")    查找第1个以后的元素

:lt(index)

匹配所有小于给定索引值的元素

$("div:lt(2)")     查找第一行和第二行的元素

:even

匹配所有索引值为偶数的元素，从 0 开始计数

$("div:even")
查找第1,3,5个div

:odd

匹配所有索引值为奇数的元素，从 0 开始计数

$("div:odd")
查找第2,4个div

:not(selector)

去除所有与给定选择器匹配的元素
selector为表达式,可以是属性里面的一个值

$("input:not(:checked)")
查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到]

:header

匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");
添加样式

:animated

匹配所有正在执行动画效果的元素

暂无例子

3.3：内容选择器






















选择表达式

说明

举例

:contains(text)

匹配包含给定文本的元素,只要里面出现即可

$("p:contains('段落')")
找带有段落字样的p元素

:empty

匹配所有不包含子元素或者文本的空元素

$("div:empty")

:has(selector)

匹配含有选择器所匹配的元素的元素

$("div:has('p')")

:parent

匹配含有子元素或者文本的元素

$("div:parent")

4.4子元素选择器


























选择器

说明

举例

:first-child

匹配第一个子元素

$("ul li:first-child")//在每个 ul 中查找第一个 li

:last-child

匹配最后一个子元素

$("ul li:last-child")//在每个 ul 中查找最后一个 li

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)//偶数行

:nth-child(odd)//奇数行
:nth-child(3n)
:nth-child(2)//索引为2的
:nth-child(3n+1)
:nth-child(3n+2)

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

$("ul li:only-child")//在 ul 中查找是唯一子元素的 li

4.5：可见性选择器














选择器

说明

举例

:hidden

匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

$("div:hidden")

:visible

匹配所有的可见元素

$("div:visible")//元素来匹配

$(".divH:visible")//根据class来匹配

例子就不用多讲了，大家对于jQuery应该都有一定的见地了。呵呵…

赞 (0)

相关推荐

  • Jquery选择器中使用变量实现动态选择例子

    例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

  • JQuery中$之选择器用法介绍

    1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • jquery选择器排除某个DOM元素的方法（实例演示）

    jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码 代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数 复制代码 代码如下: $('#phpernote

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

  • jQuery四种选择器使用及示例

     jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • jQuery温习篇 强大的JQuery选择器

    在jQuery出世以来,它取得很大的成就和认同.JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右.它能让你方便简洁的写出漂亮的动画效果.实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为.它的优点在于轻量级.简单易学.易扩展.跨浏览器和网上拥有大量的jQuery插件使用.由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本. 1:首先是

  • 详解强大的jQuery选择器之基本选择器、层次选择器

    jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单--jQuery插件的机制及实战).正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器. jQuery选择器类型 jQuery选择器主要分为四类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表

  • JQuery 无废话系列教程(二) jquery实战篇上

    我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址http://www.jb51.net/books/17812.html 好了,进入正题. 再次申明JQuery很简单,take easy!     从那开始呢? 最好的切入地方就从 ready 函数开始! 定义 read

  • 推荐40款强大的 jQuery 导航插件和教程(上篇)

    推荐40款强大的 jQuery 导航插件和教程(上篇)

    在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容.在下面的集合中,你会发现很多便利的 jQuery 导航插件和有用的教程,帮助你实现充满吸引力的网站导航,让你网站更有组织性和交互性. A Stylish Navigation Menu With jQuery ( 演示 | 下载 ) Making a Fresh Content Accord

  • jquery事件机制扩展插件 jquery鼠标右键事件。

    jquery事件机制扩展插件 jquery鼠标右键事件。

    jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种

  • JQuery中attr属性和jQuery.data()学习笔记【必看】

    用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

  • jquery事件机制扩展插件 jquery鼠标右键事件

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • 不定义JQuery插件 不要说会JQuery

    一.导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二.普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuer

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • jquery命令汇总,方便使用jquery的朋友

    jQuery 选择器 选择器                  实例                                   选取 *                          $("*")                                 所有元素 #id                        $("#lastname")                     id="lastname" 的元素 .c

随机推荐