jQquery库详解.docx

jQquery库详解.docx

《jQquery库详解.docx》由会员分享，可在线阅读，更多相关《jQquery库详解.docx（27页珍藏版）》请在冰豆网上搜索。

jQquery库详解

jQquery库详解

一、下载安装Jquery

1．下载

使用：

在页面中引入下载的js即可

版本：

下载的版本大概分为两种一种是去除注释后的js，文件体积小，适用于日常开发

另一种是未压缩并保留注视的js文件，有兴趣研究jQuery的人员可以使用。

2．让jQuery与其他JavaScript库共存

为jquery替换$符号以避免冲突

varh=jQuery.noConflict（）;

h即可替代$

示例：

varh=jQuery.noConflict（）;

alert（h（"div"）.html（））;

h（"div"）.height（"300px"）.css（"background-color","red"）;

二、获取jQuery对象

1．jQuery核心对象

方法名

说明

jQuery（expression,[Context]）

该函数获取expression对应的DOM对象包装成的jQuery对象，expression支持css选择器也支持XPath语法，功能丰富。

context是一个可选参数，若指定该函数表示获取context的子元素。

jQuery（html,[ownDocument]）

该函数根据html参数（该参数是一个html字符串）创建一个或多个DOM对象，返回包装这这些DOM对象的jQuery对象，第二个参数是指定由ownDocument来创建DOM对象。

jQuery（elements）

将一个或多个DOM元素包装成jQuery对象，element既可以是单个DOM对象也可以是多个DOM对象。

返回包装了element节点的jQuery对象。

jQuery（callback）

这种用法是$（document）.ready（）的缩写，其中callback指定一个函数，在页面加载完成后被触发。

示例：

//页面加载后执行

$（function（）{init（）;}）;

functioninit（）

{

alert（"页面加载完成"）;

$（"#test"）.css（"backgroundColor","red"）;

$（""）.appendTo（document.body）;

vartextelement=document.getElementById（"test"）;

$（textelement）.css（"borderWidth","3px"）;

$（textelement）.css（"borderColor","yellow"）;

}

2．以css选择器访问DOM元素

$（）接受的参数形式

名称

说明

#id

通过元素的id选择元素

tagName

返回所有对应标签元素

tagName[attribute]

带有attribute属性且标签为tagName的元素

tagName[attribute=value]

带有attribute属性值为value且标签名是tagName的元素

tagName[attribute!

=value]

带有attribute属性值不为value且标签名是tagName的元素

tagName[attribute^=value]

带有attribute属性值以value开头且标签名是tagName的元素

tagName[attribute$=value]

带有attribute属性值以value结尾且标签名是tagName的元素

tagName[attribute*=value]

返回tagName标签且属性为attribute属性值中包含value的元素

tagName[attribute][attribute]…

返回tagName标签且有任意[]中的属性的元素的集合

.className

返回class属性为className的元素

*

返回由所有html标签包装成的jQuery对象

select1,select2,select3…

返回匹配任意一个选择器的元素

outerSelectinnerSelect

返回满足outSelect的元素中满足innerSelect选择器的元素（可嵌套多层）

parentSelector>childSelector

返回满足parentSelector的元素下的第一层chileSelect对应的元素，相当于css中的子元素选择器

preSelector+nextSelector

返回紧跟preSelector之后的第一个nextSelect对应的元素

preSelector~nextSelector

返回位于preSelecor之后的所有满足nextSelect对应的元素

3．选择器的附加限定词

名称

说明

:

first

返回匹配的第一个元素

:

last

返回匹配的最后一个元素

:

not（Selector）

返回匹配元素但去除Selector选择器的元素

注意：

去除Selector选择器的元素意思是匹配的元素不包含该选择器不是匹配元素的下级元素

:

even

返回匹配元素中索引为偶数的元素

:

odd

返回匹配元素中索引为奇数的元素

:

eq（index）

返回匹配元素中索引为index的元素

:

gt（index）

返回匹配元素中索引大于index的元素

:

lt（index）

返回匹配元素中索引小于index的元素

:

header

返回匹配元素且必须是像h1h2那样的标题元素

:

animated

返回匹配指定的选择器，且正在执行动画效果的元素

HTML元素包装成的jQuery对象

:

contains（text）

返回匹配指定的选择器且包含text文本的html元素包装成的jQuery对象。

:

empty

返回指定选择器，且不包含任何内容（包含字符串也不行）的html元素包装成的jQuery对象

:

has（selector）

返回指定选择器，且包含select对应html元素的所有html元素包装成的jQuery对象

注意：

返回的是含有selector匹配的元素的所有html元素不是满足selector的所有html元素

:

parent

返回匹配指定选择器，且包含子元素或者文本的所有html元素包装成的jQuery对象

:

hidden

返回匹配选择器，且当前不可见的所有html元素包装成的jQuery对象

:

visible

返回匹配选择器，且当前不可用的所有html元素包装成的jQuery对象

:

nth-child（index,even,odd,equation）

nth-child（index）返回指定选择器且是其父节点的第n个DOM节点的元素，n从1开始，索引从1开始

nth-child（even）返回指定选择器且是其父节点索引为偶数的选择器

nth-child（odd）返回指定选择器且是其父节点索引为奇数的选择器

nth-child（xn+m）返回指定选择器且索引为xn+m的选择器，xm可变n从0开始

注意：

在xn+m这种情况时n从0开始索引从1开始

:

first-child

返回匹配指定选择器，且是其父节点的第一个html元素的jQuery对象

:

last-child

返回匹配指定选择器，且是其父节点的最后一个html元素的jQuery对象

:

only-child

返回匹配指定选择器，且是其父节点的唯一一个子元素

4．表单相关的选择器

名称

说明

:

input

返回所有input，textarea,select,button元素包装的jQuery对象

:

text

返回所有type=”text”的input元素包装的jQuery对象

:

password

返回所有type=”password”的input元素包装的jQuery对象

:

radio

返回所有type=”radio”的input元素包装的jQuery对象

:

checkbox

返回所有type=”checkbox”的input元素包装的jQuery对象

:

submit

返回所有type=”submit”的input元素包装的jQuery对象

:

image

返回所有type=”image”的input元素包装的jQuery对象

:

reset

返回所有type=”reset”的input元素包装的jQuery对象

:

button

返回所有type=”button”的input元素包装的jQuery对象

:

file

返回所有type=”file”的input元素包装的jQuery对象

:

hidden

返回所有type=”hidden”的input元素包装的jQuery对象

注意：

hidden元素不仅匹配input标签中type=hidden的元素还匹配所有不可见元素

:

enabled

返回所有不可用的表单控件（设置了enabled=”enabled”）包装成的jQuery对象

注意若设置了enabled=””虽为空也会被认为设置了该属性

:

disabled

返回所有可用的表单控件（设置了disabled=”disabled”）包装成的jQuery对象

注意若设置了disabled=””虽为空也会被认为设置了该属性

:

checked

返回所有指定了checked=”checked”的表单元素控件包装成的jQuery对象

注意若设置了checked=””虽为空也会被认为设置了该属性

三、jQuery操作类数组的工具方法

1.数组操作方法

名称

说明

each（callback）

用于迭代类数组，回调函数中可以使用this关键字引用迭代的DOM对象（注意是DOM对象不是jQuery对象）若要将DOM对象再次转换成jQuery对象可以使用$（对象）方法

length

返回类数组的长度

eq（position）

返回jQuery里包含的第position+1个DOM元素包装成的jQuery对象

（第一个元素索引为0）

get（）

返回该类数组的所有元素组成的DOM数组

get（index）

返回该类数组中包含第index+1个DOM元素（第一个元素索引为0）

index（subject）

返回该对象在类数组中的位置

2.过滤相关方法

方法

说明

filter（选择器）

返回符合选择器的元素集合

filter（fn）

该方法是一个迭代函数，可以从函数中用this关键字引用迭代的当前对象，若该函数返回true则该函数被保留否则被删除

is（Expr）

用expr（选择器）检查该集合，如果其中任意一个元素符合则返回true

map（callback）

该方法用户将集合中的元素通过callback函数进行处理，每次函数的返回值将做为jQuery对象里的新元素

not（expr）

从jQuery对象里删除所有符合expr的DOM对象

slice（start,end）

返回jQuery里索引从start开始到end结束的DOM元素组成的jQuery对象（注意索引从0开始，取得的元素不包括end对应的元素）

3.仿DOM导航的相关方法。

方法名

说明

add（Expr）

为原来的jQuery对象添加新的DOM元素

children（[Expr]）

查看该jQuery对应的DOM元素的全部后代元素（子元素），expr可以添加限定条件

contents（）

返回当前jQuery内的全部内容（包括DOM元素和文本）

find（Expr）

查找当前对象之内能匹配expr的元素包装成的jQuery对象

next（[expr]）

查看紧跟当前对象的元素若有参数为紧跟当前对象的元素必须满足选择器。

nextAll（[expr]）

查找当前对象的所有兄弟元素，若有参数则查找匹配选择器的元素。

parent（[expr]）

查找当前元素的父元素若有参数则查找出来的父元素必须满足该选择器

parents（[expr]）

查找当前元素的所有祖先元素，若有参数则查出的内容还必须满足选择器

prev（[expr]）

查找紧跟当前元素的之前的对象，若有参数还有满足expr

prevAll（[expr]）

查找当前jQuery对象前的所有兄弟元素，若有参数还要满足选择器

siblings（[expr]）

查找当前元素的所有兄弟元素，若有参数还有满足参数

4.链接方法

方法名

说明

andSelf（）

将查找之前的节点和查找之后的结果混合在一起

注意：

相同对象是不会重复混合的

end（）

将jQuery对象回复到上一次执行过滤，查找方法之前的状态

四、jQuery支持的方法

1．jQuery命名空间支持的方法

方法名

说明

jQuery.brownser

返回当前浏览器的相关信息，返回值是一个json格式的对象

jQuery.browser.version

返回用户浏览器的版本号

jQuery.boxModel

如果用户浏览器当前浏览的页面使用的是W3CCSSBoxModel则返回true否则返回false

jQuery.isFunction（obj）

测试obj是否是一个函数，是就返回true

2．字符串、数组和对象相关工具方法

方法名

说明

jQuery.trim（str）

截断字符串前后的空白

jQuery.each（obj,callback）

用于遍历javascript对象或数组（不是遍历jQuery对象）回调参数1是索引，参数2是对象，若要停止回调returnfalse即可（其他的返回值将被忽略）

jQuery.extend（target,obj1,obj2…）

将obj1,obj…的属性合并到target对象里，重复就覆盖原有属性

jQuery.grep（array,callback,[invert]）

对array进行筛选，callback是一个形如 function（val,index）的方法，grep将依次将元素传入该方法中，返回true则留下此元素，返回其他就删除该元素，invert属性为true时正好相反，返回true时就删除该元素。

jQuery.makeArray（obj）

将类数组对象转换成数组对象

jQuery.map（array,callback）

该函数用于将array数组转换成令一个数组，callback参数1是值，参数2是索引，每次迭代的返回值将做为新数组的项。

jQuery.inArray（value,Array）

返回value在数组中出现的位置，如value不在此数组中返回-1

jquery.merge（first,second）

合并first，second两个数组，将两个数组的元素合并到新数组中，并不会删除重复项。

jQuery.unique（array）

删除数组中的重复项

注意（此方法仅对DOM对象数组起作用，若是普通字符串数组或数值型数组该函数不会有任何作用）

3．数据存储的相关方法

方法名

说明

data（name）

获取key为name的值

data（name,value）

向jQuery对象里存储name：

value的键值对

removeData（name）

删除jQuery对象里存储的key为name的数据

4．操作属性的相关方法

方法名

说明

attr（name）

访问元素中第一个匹配属性name的值，若没有返回undefined

attr（properties）

用于为jQuery对象里的所有DOM对象同时设置多个属性值，参数是一个对象{key:

value,key2:

value2}

attr（key,value）

用于为jQuery对象里的所有DOM对象设置单个属性值

attr（key,fn）

用于为jQuery对象里的所有DOM对象设置单个属性值,属性值通过函数计算，函数参数1是DOM元素在该jQuery对象中的索引

removeAttr（name）

删除jQuery对象里的所有DOM对象里的name属性值

5．操作css属性的相关方法

方法名

说明

addClass（class）

为对象添加类样式

hasClass（class）

只要该jQuery对象中有一个DOM元素含有该类则返回true

removeClass（class）

删除jQuery中的DOM元素的class类

toggleClass（class）

查看jQuery中的DOM元素的类样式，有就移除没有就添加

css（name）

返回jQuery对象中DOM元素的样式值

css（properties）

jQuery对象中DOM元素的样式批量赋值{key:

name,key1:

name1}

css（name,value）

为jQuery对象中DOM元素单个赋值

offset（）

返回jQuery对象中第一个DOM元素相对于文档的位置返回值如：

{left:

n,top:

m}

position（）

返回jQuery对象中第一个DOM元素相对于父元素的位置返回值如：

{left:

n,top:

m}

scrollTop（）

返回jQuery对象中第一个DOM元素scrollTop的值

scrollTop（val）

设置jQuery对象中的scrollTop的值

scrollLeft（）

返回jQuery对象中第一个DOM元素scrollLeft的值

scrollLeft（val）

设置jQuery对象中的scrollLeft的值

height（）

返回jQuery对象中第一个DOM元素height值

height（val）

设置jQuery对象中的height的值

width（）

返回jQuery对象中第一个DOM元素width值

width（val）

设置jQuery对象中的width的值

innerHeight（）

返回jQuery对象中第一个DOM元素innerHeight值

内部高度是该元素减去边框高度再减去垂直padding的大小（应注意浏览器版本，各版本浏览器对盒模型的定义不同）

innerWidth（）

返回jQuery对象中第一个DOM元素innerWidth值

内部宽度是该元素减去边框宽度再减去水平padding的大小（应注意浏览器版本，各版本浏览器对盒模型的定义不同）

outerHeight（options）

返回jQuery对象中第一个DOM元素outerHeight值

外部高度包括边框和默认的padding

如果options为true则元素的页边距也要算在外部高度里面（应注意浏览器版本，各版本浏览器对盒模型的定义不同）

outerWidth（options）

返回jQuery对象中第一个DOM元素outerWidth值

外部宽度包括边框和默认的padding

如果options为true则元素的页边距也要算在外部宽度里面（应注意浏览器版本，各版本浏览器对盒模型的定义不同）

6．操作元素内容的相关方法

方法名

说明

html（）

返回jQuery对象中第一个DOM元素的innerHTML值

不能在xml文档中使用

html（val）

设置jQuery对象中DOM元素的innerHTML的值

不能在xml文档中使用

text（）

返回jQuery对象中第一个DOM元素的文本内容

text（val）

设置jQuery对象中的文本内容

val（）

返回jQuery对象中第一个DOM元素的value值

val（Array）

用于设置jQuery对象中元素的value值主要用于复选框和允许多选的下拉框

7．操作DOM节点的相关方法

a）在指定节点内插入新节点

方法名

说明

append（context）

将jQuery对象所有DOM元素加入content，content可以是html字符串也可以是DOM元素，也可以是jQuery对象

appendTo（Select）

将当前jQuery对象包含的元素加入到所有select匹配的所有DOM的内部的尾端

prepend（content）

将jQuery对象包含的所有DOM节点内的顶部加入content所代表的内容

prependTo（selector）

将当前jQuery对象包含的DOM元素添加到selector匹配的所有DOM元素中

b）在制定节点外添加节点

方法名

说明

after（content）

将该jQuery对象包含的所有DOM节点之后添加content对应的内容

before（content）

将该jQuery对象包含的所有DOM节点之前添加content对应的内容

insertAfter（selector）

将当前jQuery对象包含的所有DOM节点插入到selector匹配的所有节点之后

insertBefore（selector）

将当前jQuery对象包含的所有DOM节点插入到selector匹配的所有节点之前

c）包裹

方法名

说明

wrap（node）

包裹当前jQuery对象包含的每个DOM元素

wrapAll（node）

将当前jQuery对象包含的所有DOM元素当成一个整体进行包裹

示例：

$（".a"）.wrap（"