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-9种选择器

jQuery 9种选择器   1、基本选择器-5个    1 html> 2 head> 3 meta http-equiv="content-type" conte...
  • zfs592645357
  • zfs592645357
  • 2014年10月30日 16:20
  • 1191

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017年07月25日 18:19
  • 377

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1133

jQuery与CSS3的选择器

jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结。 注:本文以jQuery1.9.1版本和CSS3为例进行说明,CSS在选择器方面存在兼容问题,请自行分辨。1 jQuery的版本 ...
  • aiolos1111
  • aiolos1111
  • 2016年08月02日 16:52
  • 1837

jquery 孩子和兄弟选择器

Jquery 孩子和兄弟选择器分为4类,1 后代选择器(A B) ;2 孩子选择器(A>B) ;3相邻兄弟选择器(A+B); 一般兄弟选择器(A~B). 以下让我们通过一个例子来理解它们的不同。  ...
  • taiyb
  • taiyb
  • 2014年10月30日 23:16
  • 9151

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...
  • tangdou5682
  • tangdou5682
  • 2016年12月01日 10:40
  • 544

javascript 原生 模仿 jquery 选择器 代码

使用这段代码可以简单的实现类似 $(“#tab_ul”) 选择器效果。当然,是基于原生的。 Array.prototype.each=function(f){ for(var ...
  • FungLeo
  • FungLeo
  • 2015年09月09日 14:36
  • 1433

详解jQuery选择器正则表达式

1、空白 whitespace = "[\\x20\\t\\r\\n\\f]", 在字符串中,斜杠是用于转义的,若想输出斜杠,必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示,如下: ...
  • mole
  • mole
  • 2015年02月02日 18:26
  • 3225

jquery选择器扩展之样式选择器

jquery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,但是喜欢思考的我们总得找点事,提问时间: 1.如何选择所有字体颜色为红色的元素 2.如何选择出背景颜色为为白色的元素 3.如...
  • duwen90
  • duwen90
  • 2016年01月23日 18:05
  • 1462

JQuery中的特殊选择器--this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下! this是JavaScript中的关键字,指的是当前的上下文对象,简单...
  • LHJBK
  • LHJBK
  • 2016年05月30日 21:16
  • 1133
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery选择器汇总
举报原因:
原因补充:

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