jQuery选择器汇总

原创 2015年11月19日 19:39:32
首先介绍一下prototype
Prototyppe
是最早成型的js库之一,对js的内置对象(String对象、Array对象等)做了大量的扩展。现在还有很多项目使用Prototype 。
Prototype可以看做是把很多有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时把极端代码抽出来放进自己的脚本里

现在总结使用jQuery语法
jQuery选择器(基本、表单、层次、过滤)

基本选择器  通过id class 和标签名来查找DOM元素。

#id    .class     element      *       selector1,selector2,...selectorN




过滤选择器  过滤规则选择DOM元素(与CSS中的伪类选择器语法相同,都以:开头)

:first                    $("div:first")                           选取所有<div>元素中第一个<div>元素
:last                     $("div:last")                            选取所有<div>元素中最后一个<div>元素      
:not(selector)   $("input:not(.myclass)")     选取class不是myclass的<input>元素          
:even                  $("input:even")                     选取索引是偶数的<input>元素
:odd                    $("input:odd")                       选取索引是奇数的<input>元素
:eq(index)         $("input:eq(1)")                     选取索引等于1的<input>元素
:gt(index)          $("input:gt(1)")                     选取索引大于1的<input>元素
:lt(index)           $("input:lt(1)")                       选取索引小于1的<input>元素
:header              $(":header" )                          选取网页中所有的<h1> <h2>....
:animated         $("div:animated")                 选取正在执行动画的div元素
:focus                 $(":focus")                               选取当前获取焦点的元素                
:hidden              $(":hidden")                            选取所有不可见的元素
:visible                $("div:visible")                       选取所有可见的div元素
:contains            $("div:contains('wo')")
:empty                $("div:empty")
:has(selector)    $("div:has(p)")
:parent                $("div:parent")

属性过滤选择器
[attribute]                        拥有属性            
[attribute=value]           等于
[attribute!=value]          不等于
[attribute^=value]         以开始
[attribute$=value]          以结束
[attribute*=value]          包含
[attribute|=value]           等于或为前缀
[attribute~=value]         用空格分隔的值中包含 
[attribute1][attribute2][attributeN]


子元素过滤选择器  p44
:nth-child(index/even/odd/equation)    每个父元素下第index个子元素或者奇偶元素
:first-child                                                       每个父元素的第一个子元素
:last-child                                                        每个父元素的最后一个子元素
:only-child                                                      父元素中只有一个元素的





表单选择器  选择表单的某个或某类型的元素
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
:enabled
:disabled
:checked
:selected


层次选择器  通过层次关系获取元素

$("ancestor descendant")      选取ancestor元素里面的descendant(后代)元素
$("parent>child")                     选取parent元素下的child(子)元素
$("prev+next")                          选取紧接在prev元素后的next元素。等价next()          $(".one+div")=$(".one").next("div")
$("prev~siblings")                    选取prev元素之后的所有siblings元素
$("#prev~div")=$("#prev").nextAll("div")                     







相关文章推荐

jQuery选择器探究:正则表达式汇总

jQuery选择器正则表达式是jQuery选择器框架Sizzle的基础。Sizzle正则表达式集中在Expr对象的match对象属性中,这里定义的RE是基础的、按照功能分类的。另一个核心RE是变量ch...
  • warhin
  • warhin
  • 2016年04月17日 18:27
  • 3094

jQuery--选择器--汇总

1)基本选择器://语法 类型 返回值 $("#ID"); //id选择器 单个元素 $("标签"); //...

汇总jQuery的61种选择器及示例

汇总jQuery的61种选择器及示例

Jquery选择器汇总

一、基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () {  ...

jQuery常用选择器汇总

一、基本选择器 aaaaaaaaaaa bbbbbbbbb ccccccccc ...

JQuery的使用方法汇总(2)——无敌的选择器

本文转载至http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("...

jquery选择器整理

  • 2017年11月10日 10:52
  • 17KB
  • 下载

jQuery日期选择器控件

  • 2017年04月24日 15:01
  • 25.41MB
  • 下载

12个很棒的jQuery选择器扩展(翻译)

我最近开始编写自己的jQuery选择器,我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式,而以往我使用的是迭代器。 这些选择器中如果不是你一直在寻找的,你也许根本将不会碰到。所以我决...
  • joliny
  • joliny
  • 2012年03月14日 15:51
  • 9996

jQuery_选择器与属性方法

  • 2014年04月02日 13:08
  • 28KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery选择器汇总
举报原因:
原因补充:

(最多只允许输入30个字)