JQuery自己总结.docx

JQuery自己总结.docx

《JQuery自己总结.docx》由会员分享，可在线阅读，更多相关《JQuery自己总结.docx（41页珍藏版）》请在冰点文库上搜索。

JQuery自己总结

选择器：

4

1.基础选择器Basics5

选择器：

$（"id名"）：

返回一个dom对象；

等同于：

document.getElementById（"id名"）;

//根据ID获取jQuery包装集

varjQueryObject=$（"#testDiv"）;

//$是jQuery对象的引用:

varjQueryObject=jQuery（"#testDiv"）;

1.基础选择器Basics

名称

说明

举例

#id

根据元素Id选择

$（"divId"）选择ID为divId的元素

element

根据元素的名称选择,

$（"a"）选择所有

.class

根据元素的css类选择

$（".bgRed"）选择所用CSS类为bgRed的元素

*

选择所有元素

$（"*"）选择页面所有元素

selector1,

selector2,

selectorN

可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.

$（"#divId,a,.bgRed"）

2.层次选择器Hierarchy

名称

说明

举例

ancestordescendant

使用"forminput"的形式选中form中的所有input元素.即ancestor（祖先）为from,descendant（子孙）为input.

$（".bgReddiv"）选择CSS类为bgRed的元素中的所有

元素.

parent>child

选择parent的直接子节点child.child必须包含在parent中并且父类是parent元素.

$（".myList>li"）选择CSS类为myList元素中的直接子节点

对象.

prev+next

prev和next是两个同级别的元素.选中在prev元素后面的next元素.

$（"#hibiscus+img"）选在id为hibiscus元素后面的img对象.

prev~siblings

选择prev后面的根据siblings过滤的元素

注:

siblings是过滤器

$（"#someDiv~[title]"）选择id为someDiv的对象后面所有带有title属性的元素

3.基本过滤器BasicFilters

名称

说明

举例

:

first

匹配找到的第一个元素

查找表格的第一行:

$（"tr:

first"）

:

last

匹配找到的最后一个元素

查找表格的最后一行:

$（"tr:

last"）

:

not（selector）

去除所有与给定选择器匹配的元素

查找所有未选中的input元素:

$（"input:

not（:

checked）"）

:

even

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

查找表格的1、3、5...行:

$（"tr:

even"）

:

odd

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

查找表格的2、4、6行:

$（"tr:

odd"）

:

eq（index）

匹配一个给定索引值的元素

注:

index从0开始计数

查找第二行:

$（"tr:

eq

（1）"）

:

gt（index）

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

注:

index从0开始计数

查找第二第三行，即索引值是1和2，也就是比0大:

$（"tr:

gt（0）"）

:

lt（index）

选择结果集中索引小于N的elements

注:

index从0开始计数

查找第一第二行，即索引值是0和1，也就是比2小:

$（"tr:

lt

（2）"）

:

header

选择所有h1,h2,h3一类的header标签.

给页面内所有标题加上背景色:

$（":

header"）.css（"background","#EEE"）;

:

animated

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

只有对不在执行动画效果的元素执行一个动画特效:

$（"#run"）.click（function（）{

$（"div:

not（:

animated）"）.animate（{left:

"+=20"},1000）;

}）;

4.内容过滤器ContentFilters

名称

说明

举例

:

contains（text）

匹配包含给定文本的元素

查找所有包含"John"的div元素:

$（"div:

contains（'John'）"）

:

empty

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

查找所有不包含子元素或者文本的空元素:

$（"td:

empty"）

:

has（selector）

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

给所有包含p元素的div元素添加一个text类:

$（"div:

has（p）"）.addClass（"test"）;

:

parent

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

查找所有含有子元素或者文本的td元素:

$（"td:

parent"）

5.可见性过滤器VisibilityFilters

名称

说明

举例

:

hidden

匹配所有的不可见元素

注:

在1.3.2版本中,hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSSvisibility属性让其不显示但是占位,则不输入hidden.

查找所有不可见的tr元素:

$（"tr:

hidden"）

:

visible

匹配所有的可见元素

查找所有可见的tr元素:

$（"tr:

visible"）

6.属性过滤器AttributeFilters

名称

说明

举例

[attribute]

匹配包含给定属性的元素

查找所有含有id属性的div元素:

$（"div[id]"）

[attribute=value]

匹配给定的属性是某个特定值的元素

查找所有name属性是newsletter的input元素:

$（"input[name='newsletter']"）.attr（"checked",true）;

[attribute!

=value]

匹配给定的属性是不包含某个特定值的元素

查找所有name属性不是newsletter的input元素:

$（"input[name!

='newsletter']"）.attr（"checked",true）;

[attribute^=value]

匹配给定的属性是以某些值开始的元素

$（"input[name^='news']"）

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

查找所有name以'letter'结尾的input元素:

$（"input[name$='letter']"）

[attribute*=value]

匹配给定的属性是以包含某些值的元素

查找所有name包含'man'的input元素:

$（"input[name*='man']"）

[attributeFilter1][attributeFilter2][attributeFilterN]

复合属性选择器，需要同时满足多个条件时使用。

找到所有含有id属性，并且它的name属性是以man结尾的:

$（"input[id][name$='man']"）

7.子元素过滤器ChildFilters

名称

说明

举例

:

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）

:

nth-child（3n+1）

:

nth-child（3n+2）

在每个ul查找第2个li:

$（"ulli:

nth-child

（2）"）

:

first-child

匹配第一个子元素

':

first'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

在每个ul中查找第一个li:

$（"ulli:

first-child"）

:

last-child

匹配最后一个子元素

':

last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

在每个ul中查找最后一个li:

$（"ulli:

last-child"）

:

only-child

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

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

在ul中查找是唯一子元素的li:

$（"ulli:

only-child"）

8.表单选择器Forms

名称

说明

解释

:

input

匹配所有input,textarea,select和button元素

查找所有的input元素:

$（":

input"）

:

text

匹配所有的文本框

查找所有文本框:

$（":

text"）

:

password

匹配所有密码框

查找所有密码框:

$（":

password"）

:

radio

匹配所有单选按钮

查找所有单选按钮

:

checkbox

匹配所有复选框

查找所有复选框:

$（":

checkbox"）

:

submit

匹配所有提交按钮

查找所有提交按钮:

$（":

submit"）

:

image

匹配所有图像域

匹配所有图像域:

$（":

image"）

:

reset

匹配所有重置按钮

查找所有重置按钮:

$（":

reset"）

:

button

匹配所有按钮

查找所有按钮:

$（":

button"）

:

file

匹配所有文件域

查找所有文件域:

$（":

file"）

9.表单过滤器FormFilters

名称

说明

解释

:

enabled

匹配所有可用元素

查找所有可用的input元素:

$（"input:

enabled"）

:

disabled

匹配所有不可用元素

查找所有不可用的input元素:

$（"input:

disabled"）

:

checked

匹配所有选中的被选中元素（复选框、单选框等，不包括select中的option）

查找所有选中的复选框元素:

$（"input:

checked"）

:

selected

匹配所有选中的option元素

查找所有选中的选项元素:

$（"selectoption:

selected"）

Js和jquery函数

增删节点：

使用dom添加节点：

varselect=document.createElement（"select"）;

select.options[0]=newOption（"加载项1","value1"）;

select.options[1]=newOption（"加载项2","value2"）;

select.size="2";

varobject=testDiv.appendChild（select）;

使用innerHTML添加节点：

document.getElementById（"testDiv"）.innerHTML="动态创建的div";

jQuery内部使用document.createElement创建元素:

$（"

"）.css（"border","solid1px#FF0000"）.html（"动态创建的div"）.appendTo（testDiv）;

jQuery内部使用innerHTML创建元素:

$（"动态创建的div"）.appendTo（testDiv）

jQuery使用动态创建的$（document）.ready（function）方法

$（document）.ready（

function（）{testDiv.innerHTML="

使用动态创建的$（document）.ready（function）方法

";}

或者使用简便语法:

//jQuery使用$（function）方法

$（

function（）{testDiv.innerHTML+="

使用$（function）方法

";}

）;

使用jQuery操作元素的属性与样式

操作"元素属性"

名称

说明

举例

attr（name）

取得第一个匹配元素的属性值。

通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。

如果元素没有相应属性，则返回undefined。

返回文档中第一个图像的src属性值:

$（"img"）.attr（"src"）;

attr（properties）

将一个“名/值”形式的对象设置为所有匹配元素的属性。

这是一种在所有匹配元素中批量设置很多属性的最佳方式。

注意，如果你要设置对象的class属性，你必须使用'className'作为属性名。

或者你可以直接使用.addClass（class）和.removeClass（class）.

为所有图像设置src和alt属性:

$（"img"）.attr（{src:

"test.jpg",alt:

"TestImage"}）;

attr（key,value）

为所有匹配的元素设置一个属性值。

为所有图像设置src属性:

$（"img"）.attr（"src","test.jpg"）;

attr（key,fn）

为所有匹配的元素设置一个计算的属性值。

不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

把src属性的值设置为title属性的值:

$（"img"）.attr（"title",function（）{returnthis.src}）;

removeAttr（name）

从每一个匹配的元素中删除一个属性

将文档中图像的src属性删除:

$（"img"）.removeAttr（"src"）;

1.修改CSS类

名称

说明

实例

addClass（classes）

为每个匹配的元素添加指定的类名。

为匹配的元素加上'selected'类:

$（"p"）.addClass（"selected"）;

hasClass（class）

判断包装集中是否至少有一个元素应用了指定的CSS类

$（"p"）.hasClass（"selected"）;

removeClass（[classes]）

从所有匹配的元素中删除全部或者指定的类。

从匹配的元素中删除'selected'类:

$（"p"）.removeClass（"selected"）;

toggleClass（class）

如果存在（不存在）就删除（添加）一个类。

为匹配的元素切换'selected'类:

$（"p"）.toggleClass（"selected"）;

toggleClass（class,switch）

当switch是true时添加类,

当switch是false时删除类

每三次点击切换高亮样式:

varcount=0;

$（"p"）.click（function（）{

$（this）.toggleClass（"highlight",count++%3==0）;

}）;

注意addClass（class）和removeClass（[classes]）的参数可以一次传入多个css类,用空格分割,比如:

$（"#btnAdd"）.bind（"click",function（event）{$（"p"）.addClass（"colorRedborderBlue"）;}）;

removeClass方法的参数可选,如果不传入参数则移除全部CSS类:

$（"p"）.removeClass（）

2.修改CSS样式

名称

说明

实例

css（name）

访问第一个匹配元素的样式属性。

取得第一个段落的color样式属性的值:

$（"p"）.css（"color"）;

css（properties）

把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

将所有段落的字体颜色设为红色并且背景为蓝色:

$（"p"）.css（{color:

"#ff0011",background:

"blue"}）;

css（name,value）

在所有匹配的元素中，设置一个样式属性的值。

数字将自动转化为像素值

将所有段落字体设为红色:

$（"p"）.css（"color","red"）;

3.宽和高相关HeightandWidth

名称

说明

举例

height（）

取得第一个匹配元素当前计算的高度值（px）。

获取第一段的高:

$（"p"）.height（）;

height（val）

为每个匹配的元素设置CSS高度（hidth）属性的值。

如果没有明确指定单位（如：

em或%），使用px。

把所有段落的高设为20:

$（"p"）.height（20）;

width（）

取得第一个匹配元素当前计算的宽度值（px）。

获取第一段的宽:

$（"p"）.width（）;

width（val）

为每个匹配的元素设置CSS宽度（width）属性的值。

如果没有明确指定单位（如：

em或%），使用px。

将所有段落的宽设为20:

$（"p"）.width（20）;

innerHeight（）

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

见最后示例

innerWidth（）

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

见最后示例

outerHeight（[margin]）

获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

见最后示例

outerWidth（[margin]）

获取第一个匹配元素外部宽度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

见最后示例

4.位置相关Positioning

名称

说明

举例

offset（）

获取匹配元素在当前窗口的相对偏移。

返回的对象包含两个整形属性：

top和left。

此方法只对可见元素有效。

获取第二段的偏移:

varp=$（"p:

last"）;

varoffset=p.offset（）;

p.html（"left:

"+offset.left+",top:

"+offset.top）;

position（）

获取匹配元素相对父元素的偏移。

返回的对象包含两个整形属性：

top和left。

为精确计算结果，请在补白、边框和填充属性上使用像素单位。

此方法只对可见元素有效。

获取第一段的偏移:

varp=$（"p:

first"）;

varposition=p.position（）;

$（"p:

last"）.html（"left:

"+position.left+",top:

"+position.top）;

scrollTop（）

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

获取第一段相对滚动条顶部的偏移:

varp=$（"p:

first"）;

$（"p:

last"）.text（"scrollTop:

"+p.scrollTop（））;

scrollTop（val）

传递参数值时，设置垂直滚动条顶部偏移为该值。

此方法对可见和隐藏元素均有效。

设定垂直滚动条值:

$（"div.demo"）.scrollTop（300）;

scrollLeft（）

获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

获取第一段相对滚动条左侧的偏移:

varp=$（"p:

first"）;

$（"p:

last"）.text（"scrollLeft:

"+p.scrollLeft（））;

scrollLeft（val）

传递参数值时，设置水平滚动条左侧偏移为该值。

此方法对可见和隐藏元素均有效。

设置相对滚动条左侧的偏移:

$（"div.demo"）.scrollLeft（300）;

jQuery事件与事件对象

document.getElementById（"testDiv2"）.onclick=showMsg;

等效于:

!

!

"）;">单击事件1