码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习之选择器

时间:2015-10-14 19:32:03      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

最近又看了下《锋利的jQuery》,想系统的再整理下jQuery的有关知识

选择器是jQuery的根基,事件处理,遍历DOM和Ajax操作都依赖于选择器,这次我们先从

选择器说起。

首先,现在的jQuery是支持CSS1到CSS3选择器  

这里一共包含四大类:基本选择器、层次选择器、过滤选择器、表单选择器

一,基本选择器

(1)#id 

(2).class

(3)element

(4)*

(5)selector1,selector2,......,selectorN(将每一个选择器匹配到的元素合并后返回)

   exp:$(“div,span,p.myClass”)选取所有<div>,<span>和拥有class为myClass的<p>标签中的一组元素

二,层次选择器

(1)$("ancestor descendant")

    exp:$("div span") 选取<div>中的<span>

(2)$("parent>child")

    exp:$("div>span") 选取<div>下名为<span>的元素

(3)$("prev+next")

   exp:$(".myClass+div")选取class名为"myClass"的下一个<div>同辈元素

(4)$("prev~sibilings")

  exp:$("#mine~div")选取id为“mine”元素后面所有的<div>同辈元素

三,过滤选择器(分为五种)

【1】基本过滤选择器

(1):first 

exp:$("div:first")选取所有<div>元素中的第一个<div>元素

(2):last

(3):not(selector) 去除所有与给定选择器匹配的元素

 exp:$("input:not(.myClass)") 选取class不是myClass的<input>

(4):even 选取索引是偶数的所有元素 索引从0开始

(5): odd   选取索引是奇数的所有元素

(6): eq(index)索引等于index的元素

(7): gt(index)索引大于index的元素

(8):lt(index)索引小于index的元素

(9):header 选取所有的标题元素

  exp:$(“:header”)选取网页中所有的<h1>,<h2>,<h3>

 (10):animated 选取正在执行动画的元素

 (11):focus 选取当前获取焦点的元素

 

【2】内容过滤选择器

(1) :contains(text)  选取含有文本内容为“text”的元素

exp:$("div:contains(‘me‘)")  选取含有文本"me"的<div>元素

(2):empty   选取不包含子元素或者文本的空元素

(3):has(selector)  选取含有选择器所有匹配元素的元素

exp:$("div:has(p)")  选取含有<p>元素的<div>元素

(4):parent  选取含有子元素或者文本的元素

 

【3】可见性过滤选择器

(1):hidden 选取所有不可见的元素

(2):visible 选取所有可见的元素

 

【4】属性过滤选择器

(1)[attr] 选取拥有此属性的元素

exp:$("div[id]")选取拥有id的div

 (2)[attr=val] 选取属性值等于val的元素

(3)[attr!=val]  没有该属性的元素也会不选择

(4)[attr^=val]选取属性值以val开始的元素

exp:$("div[title]^=test") 选取属性title以”test“开始的div元素

(5)[attr$=val]选取属性以val结尾的元素

(6)[attr*=val]选取属性值含有val的元素

(7)[attr|=val]选取属性等于给定字符串或以该字符串为前缀(该字符串后跟连字符”-“)的元素

exp:$(‘div[title|=”en“]’)选取属性title等于"en"或以”en“为前缀的元素

(8)[attr~=val]选取属性用空格分隔的值中包含一个给定的元素

exp:$(‘div[title~=”uk“]’)选取title用空格分隔的值中包含”uk“元素

(9)[attr1][attr2][attrN] 复合属性选择,每选择一次,缩小一次

 

【5】子元素过滤选择器

(1)nth-child(index/even/odd/equation)  索引从1开始

  • :nth-child(3n+1)选取每个父元素下所有是(3n+1)的元素

(2):first-child

(3):last-child

(4):only-child

 

【6】表单对象属性过滤选择器

(1):enabled 选取所有可用元素

(2):disable 选取所有不可用的元素

(3):checked

(4):  selected

 

四,表单选择器

(1) :input  选择所有<input> <textarea> <select> <button>元素

(2):text

(3):password

(4):radio

(5):chechbox

(6):submit

(7):image

(8):reset

(9):button

(10):file 

(11):hidden

 

注:

(1)属性值中包含”.“ ”、“ ”#“需要用”\\“进行转移,否则会报错

(2)如果使用了1.3.1一下的版本,属性选择器前需要加@

(3)选择器中的空格需要特别注意,

exp:$(‘.test :hidden‘) 选取class为”test“的元素里面隐藏的元素

        $(‘.test:hidden‘) 选取隐藏class为”test“的元素

jQuery学习之选择器

标签:

原文地址:http://www.cnblogs.com/fnncat/p/4878196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!