JQuery语法Word下载.docx

JQuery语法Word下载.docx

《JQuery语法Word下载.docx》由会员分享，可在线阅读，更多相关《JQuery语法Word下载.docx（24页珍藏版）》请在冰豆网上搜索。

//用于选择表单下的所有后代元素并对其边框样式进行设置。

forminput"

2pxdottedblue"

3紧邻同辈元素选择器

用于选择紧跟给定元素之后的那个同辈元素。

<

form>

label>

用户名：

/label>

inputname="

name"

/>

fieldset>

<

Email:

email"

/fieldset>

/form>

none"

//选择紧跟标签后面的input元素，并设置其文本颜色和值。

label+input"

color"

red"

）.val（"

紧跟标签后的同辈！

）

4相邻同辈元素选择器

用于选择某元素后面的所有同辈元素。

div>

div<

br/>

位于#prev之前,故不匹配<

/div>

spanid="

prev"

span<

#prev<

/span>

div同辈<

div的侄子<

span>

span同辈不是div<

//选择在span#prev元素后面的所有同辈div元素并对其进行设置。

#prev~div"

3pxgroovegreen"

表单域选择器

1:

input选择器

用于选择所有input,textarea,select和button元素。

:

input"

2:

text选择器

选择所有单行文本框（<

inputtype="

text"

）.

3:

password选择器

选择所有密码框（<

password"

4:

radio选择器

选择所有单选按钮（<

radio"

5:

checkbox选择器

选择多有复选框（<

checkbox"

6:

file选择器

选择所有文件域（<

file"

7:

image选择器

选择所有图片域（<

image"

8:

hidden选择器

选择所有不可见元素（CSSdisplay属性为none）以及隐藏域（<

hidden"

9:

button选择器

选择所有按钮（<

button"

）和<

button>

....<

/button>

.

10:

submit选择器

选择所有提交按钮（<

submit"

11:

reset选择器

选择所有重置按钮（<

reset"

过滤选择器

jQuery简单过滤选择器

first选择器

对当前jQuery集合进行过滤并选择出第一个匹配的元素。

table>

tr>

td>

第一行<

/td>

/tr>

第二行<

第三行<

/table>

//选择表格中的第一行并将单元格文本颜色设置为红色。

tr:

first"

last选择器

对当前jQuery集合进行过滤并选择出最后一个匹配的元素。

//选择表格中最后一行，并将单元格背景颜色设置为蓝色而且加粗显示。

last"

）.css（{backgroundColor:

blue"

fonWeight:

bolder"

}）;

odd选择器

选择索引为奇数（从0开始计数）的所有元素。

tableborder="

1"

索引为0的行<

索引为1的行<

索引为2的行<

索引为3的行<

//从表格中选择奇数行并对其背景颜色进行设置。

odd"

backgrount-color"

even选择器

选择索引为偶数（从0开始计数）的所有元素。

//从表格中选择偶数行并对其背景颜色进行设置.

even"

eq（）选择器

从匹配的集合中选择索引索引等于给定值的元素。

TD#0<

TD#1<

TD#2<

TD#3<

TD#4<

TD#5<

TD#6<

TD#7<

TD#8<

//想将包含TD#3的单元格文本设置为红色，可使用下面的代码。

td:

eq（3）"

gt（）选择器

用于从匹配的集合中选择索引大与给定值的所有元素。

//选择出索引高于5的单元格并对其文本添加删除线。

gt（5）"

text-decoration"

line-through"

it（）选择器

用于从匹配的集合中选择索引小与给定值的所有元素。

//查找出索引大于3且小于6的所有元素。

it（6）,td:

gt（3）"

not（）选择器

用于从匹配的集合中去除所有与给定选择器匹配的元素。

第1行<

第2行<

第3行<

第4行<

//从表格中选择第一行和最后一行之外的所有行并对其背景颜色进行设置。

not（:

first,:

last）"

background"

header选择器

用于选择所有诸如h1,h2,h3之类的标题元素。

header"

animated选择器

选择所有正在执行动画效果的元素。

jQuery内容过滤选择器

contains（）选择器

用于选择包含给定文本的所有元素。

//选择包含Jack的div元素并对其文本添加下划线。

div:

contains（"

Jack"

）"

underline"

has（）选择器

用于选择含有给定子元素的元素。

//选择包含span元素的div元素并对其背景颜色进行设置。

has（span）"

background-color"

skyblue"

empty选择器

用于选择不包含子元素和文本的所有空元素。

//查找空白单元格并设置其文本

empty"

）.text（"

空白单元格"

parent选择器

用于选择包含子元素和文本的所有元素。

//查找非空白单元格并对文本内容和背景颜色进行设置。

parent"

非空单元格"

yellow"

jQuery属性过滤选择器

包含属性选择器

用于选择包含给定属性的所有元素。

//选中属性中包含id的元素

div[id]"

属性等于选择器

用于选择给定属性等于某特定值的所有元素。

//选中名称为inputname的元素。

input[name=inputname]"

）.attr（"

checked"

true）;

属性包含选择器

用于选择指定属性值包含给定子字符串的所有元素。

//用于选择名称中包含"

man"

的文本框并对其值进行设置。

input[name*=man]"

hasmaninit"

属性包含单词选择器

用于选择指定属性值中包含给定单词（有空格分隔）的元素。

input[name~=man]"

mrmanisinit"

属性不等于选择器

不包含指定属性，或者包含指定属性但该属性不等于某个值的所有元素。

//选择没有name属性或者名称中不包含"

newsletter"

的单选按钮，并在紧跟其后的span元素中添加一些文本。

varcontent="

名称中不包含newsletter"

;

input[name!

=newsletter]+span"

）.append（content）;

属性开始选择器

用于选择给定属性是以某特定值开始的所有元素。

//选择名称以"

news"

为开始的文本框并对其值进行设置。

input[name^=news]"

名称以news开始"

属性结尾选择器和属性开始选择器相反。

input[name$=letter]"

名称以letter结尾）

复合属性选择器

用于选择同时满足多个条件的的所有元素。

input[id][title]"

符合条件"

jQuery子元素过滤选择器

first-child选择器

选择是其父级的第一个子元素的所有元素。

John,<

Sam<

Glen,<

David<

//文本John,Glen被添加了下划线。

divspan:

first-child"

last-child选择器

选择是其父级的最后一个子元素的所有元素。

//文本Sam,David被添加了下划线。

last-child"

nth-child（）选择器

用于选择父元素下的第N个子元素或奇偶元素。

//无序列表中的第二项的背景颜色和文本颜色发生了变化。

ulli:

nth-child

（2）"

）.css（{background:

color:

only-child选择器

用于选择某元素的唯一子元素。

//查找只含有h3作为子元素的div元素。

divh3:

only-child"

jQuery表单域属性过滤选择器

checked选择器

用于选择所有被选中的表单域。

radio:

disabled选择器

用于选择所有被禁用的表单域。

input:

disabled"

enabled选择器

用于选择所有可哟哦那个的表单域。

input.enabled"

selected选择器

用于从列表框选择所有选中的option元素。

p>

select>

option>

Flowers<

/option>

optionselected="

selected"

Shrubs<

Trees<

Bushes<

Grass<

/select>

/p>

vara=[];

selectoption:

）.each（function（）{

a[a.length]=$（this）.text（）;

}）;

）.text（a.join（'

'

'

））;

二：

遍历DOM元素

2.1：

按索引筛选元素

1：

eq（）方法

此方法从匹配的元素集合中获取具有指定索引值的单个元素。

2：

first（）方法

从匹配的集合中获取第一个元素，并返回包含该元素的jQuery对象。

3：

last（）方法

从匹配的集合中获取最后一个元素，并返回包含该元素的jQuery对象。

4：

slice（）方法

从匹配的元素集合中获取索引值位于指定范围的元素子集。

2.2：

筛选方法

.filter（）方法

（1）当传入一个表达式时，可以从匹配元素集合中筛选出复合该表达式的元素集合，并返回jQuery对象。

//把所有的div元素的背景色改变，然后对应用middle类的div元素的边框改为红色。

）.filter（"

.middle"

border-color"

（2）当返回一个函数时，可以从匹配元素集合中筛选出与函数返回值匹配的元素，并返回由这个元素子集包装的jQuery对象。

//设置所有div的背景色，然后从这些div中筛选出索引值为1或属性为id=three的元素，并设置边框属性

#b3b0da"

）.filter（function（index）{returnindex==1||$（this）.attr（"

id"

）=="

three"

}）.css（"

2.3：

检查元素

is（selector）方法

使用指定的选择器selector来检查匹配元素的集合，其返回值是一个Boolean值，若集合中至少有一个元素与选择器selector匹配，则is（）方法返回ture,若没有则返回flase.

//检查单选按钮是否被选中，若已经选中则弹出一个对话框。

if（"

input#radio1"

）.is（"

）alert（"

这个单选按钮已被删除。

2.4：

数组映射

.map（）方法

将当前匹配的元素集合中的每个元素传入一个回调函数中，生成并返回一个新的jQuery对象，其中包含回调函数的返回值，可以是一组值，属性，css值，DOM元素，jQuery对象或者是

其它特殊的列表。

.map（）方法可用于获取或设置一个集合中每个元素的值。

//下列实例代码将文档中的div元素映射为一组字符串，即"

div1"

div2"

div3"

等，然后在段落中显示这些字符串。

varvalues=$（"

）.map（function（index）{

return"

+（index+1）;

}）.get（）.join（"

$（"

p"

）.html（values）;

2.5：

移除元素

.not（）方法

从匹配元素集合中移除符合表达式的所有元素，并返回剩下的元素包装成的jQuery对象。

//一下5行语句的作用都是相同的，即从所有段落中移除id为p3的段落，然后对剩下的段落添加dimo类。

）.not（"

#p3"

）.addClass（"

demo"

//以选择器为参数

）.not（$（"

））.addClass（"

//以jQuery对象为参数

）[0]）.addClass（"

//以DOM元素为参数

）.not（document.getElementById（"

p3"

//以DOM元素作为参数

）.not（function（）{return（this.id=="

）}）.addClass（"

//以回调函数作为参数

2.6：

搜索父元素

.parents（）方法

获取当前匹配元素集合中每个元素的祖先元素，根据需要还可以使用一个选择器进行筛选。

em>

Myparentsare:

/em>

//显示Myparentsare:

SPAN,P,DIV,HTML

varparentsEls=$（"

em"

）.parents（）.map（function（）{returnthis.tagName;

）.append（parentEls）;

.parentsUntil（）方法

获取当前匹配元素集合中每个元素的祖先元素，直至给定的选择器匹配的元素（但不包含该元素）

level-i>

liclass="

item-i>

i<

/li>

item-ii>

ii

level-2"

<

item-a"

a<

item-b"

b

<

level-3"

item-1"

1<

item-2"

2<

item-3"

3<

/ul>

li>

//下列代码用于查找<

元素的祖先元素直至<

level-1"

并且为找到的元素添加红色背景色。

li.item-a"

）.parentsUntil（"

.level-i"

#F99"

.parent（）方法

该方法用于获取当前匹配元素集合中的每个元素的父元素。

与.parents（）方法类似，只不过只遍历了DOM树中的一个层级。

查找并并显示<

的父元素。

td"

）.append（"

b>

+$（"

）.parent（）[0].tagName+"

/b>

.closest（）方法

次方法从当前元素开始向上遍历DOM树并获取与选择器匹配的第一个元素。

.closest（）开始与当前元素，.parents（）则开始与父元素。

//执行一下语句时，将改变<

元素的背景色。

）.closest（"

ul"

，“#AFA"

//执行下列语句时，将只改变<

#AFA"

2.7搜索同辈元素

1.next（）方法

此方法用于获取紧跟在每个匹配元素之后的单个同辈元素，根据需要还可以指定一个选择器对同辈元素进行筛选。

//查找每个被禁用的按钮后面的同辈元素，并将其文本该为thisbuttonisdisabled.

button[disabled]）.next（）.text（"

thisbuttonisdisabled"

2.nextAll（）方法

用于搜索跟在每个匹配元素之后的所有同辈元素。

//下列语句可以查找第3项后面的条目并将其背景色改为红色。

li.third-item"

）.nextAll（）.css（"

3.nextUntil（）方法

用于获取跟在每个匹配元素后面的同辈元素直至匹配给定选择器的元素（但不包括该元素）,如果没有提供参数或无法找到匹配的元素，这与未提供筛选选择器的nextAll（）方法相同。

dl>

dt>

term1<

dd>

definition1-a<

/dd>

definition1-b<

dtid="

term-2"

term2<

definition2-a<

definition2-b<

definition2-c<

term3<

/dt>

definition3-a<

definition3-b<

/dl>

//可以选择第二个术语下面的3个定义项并对其添加蓝色背景色。

#term-2"

）.nextUntil（"

dt"

#99F"

4.prev（）方法

此方法用于搜索紧