jquerybase.docx
- 文档编号:26115893
- 上传时间:2023-06-17
- 格式:DOCX
- 页数:23
- 大小:22.36KB
jquerybase.docx
《jquerybase.docx》由会员分享,可在线阅读,更多相关《jquerybase.docx(23页珍藏版)》请在冰豆网上搜索。
jquerybase
1课程名称:
JQuery
2知识点概述
2.1、上次课程
2.2、作业讲解
2.3、本次预备讲解的知识点
3、具体内容
Jquery是一个非常优秀的JavaScript库,其特定是在使用JQuery库之后,开发者操作的对象不再是原始的DOM元素,而是JQuery对象,使开发者无需理会不同浏览器处理DOM对象时的差异,而是直接以JQuery对象所支持的属性和方法操作DOM对象。
3.1、JQuery简介
3.1.2、理解JQuery的设计
示例代码:
理解:
JQuery动态更新HTML页面只需如下两步:
1、获取JQuery对象,jquery对象通常是对DOM对象的包装
2、调用JQuery对象的方法来改变自身。
当Jquery对象被改变时,jquery包装的DOM对象随之改变,HTML内容也就随之改变。
3.1.2、下载和安装JQuery
下载:
登陆JQuery的官方站点:
下载:
安装:
只需要在HTML页面中导入JQuery的javascript文件即可
3.2、获取JQuery对象
JQuery库中获取对象只要有如两种方式:
1、使用$()函数或用jQuery对象提供的,利用子父关系来返回的jQuery对象
2、jQuery对象的调用方法改变自身后将再次返回该jQuery对象
3.2.1、JQuery核心函数
jQuery()函数是获取jQuery对象的根本途径,主要有如下用法:
(详见API)
NO
函数
用法
1
jQuery(expression,[context])
获取expression对应的DOM对象包装成的jQuery对象
2
jQuery(html,[ownerDocument])
根据html参数创建一个/多个DOM包装成的jQuery对象
3
jQuery(elements)
将一个/多个DOM对象包装成jQuery对象
4
jQuery(callback)
是$(document).read()的缩写,其中callback指定一个函数,在页面加载完成时,ccallback函数被激发
注意:
expression支持CSS1-3选择器$(selector)
示例代码:
3.2.2、以CSS选择器方式访问DOM元素
每个CSS选择器可以对应一个或多个HTML元素,如果以CSS选择器作为参数,$(selector)将可以获取该选择器对应一个或多个HTML元素包装成的JQuery对象。
$()可支持如下几种参数形式:
NO
参数
说明
1
#id
返回指定id对应的XHTML元素包装成的jquery对象
2
tagName
返回所有tagName标签对应的所有HTML元素包装成的JQuery对象数组
3
tagName[attribute]
返回所有tagName标签生成的且包含attribute属性的所有HTML元素包装成的JQuery对象数组
4
tagName[attribute=value]
返回由tagName标签生成的且attribute属性等于value的所有HTML元素包装成的JQuery对象
5
tagName[attribute!
=value]
返回由tagName标签生成的且attribute属性不等于value的所有HTML元素包装成的JQuery对象
6
tagName[attribute^=value]
返回由tagName标签生成的且attribute属性以value开头的所有HTML元素包装成的JQuery对象
7
tagName[attribute$=value]
返回由tagName标签生成的且attribute属性以value结尾的所有HTML元素包装成的JQuery对象
8
tagName[attribute*=value]
返回由tagName标签生成的且attribute属性包含value的所有HTML元素包装成的JQuery对象
9
tagName[attributeFileter1]
[attributeFilter2]…
返回由tagName标签生成的且具有attributeFilter1、attributeFileter2等任意一个属性特征的所有HTML元素包装成的JQuery对象
10
.ClassName
返回class属性为ClassName的所有HTML元素包装成的JQuery对象
11
*
返回所有HTML元素包装成的JQuery对象
12
Seletor1、seletor2、…
同时指定多个选择器,返回匹配任何一个选择器的所有HTML元素包装成的JQuery对象
13
outerSelectorinnerSelector
返回outerSeletor选择器之内的所有innerSeletor(不管处于多少层之内)对应的HTML元素包装成的JQuery对象。
14
parentSelector>childSelector
返回直接位于parentSeletor选择器内第一层childSeletor对应的HTML元素包装成的JQuery对象。
15
preSelector+nextSelector
返回紧跟在preSelector之后的第一个nextSelector对应的HTML元素包装成的JQuery对象
16
PreSelector~siblingsSelector
返回位于prevSelector之后的所有siblingsSeleter对应的HTML元素包装成的JQuery对象
示例代码:
3.2.3、选择器的附加限定词
限定词通常会和选择器结合使用,选择器往往匹配一个以上的HTML元素,而限定词则用于增加额外的限制。
常见的限定词如下:
NO
限定词
说明
1
:
first
返回匹配指定选择器第一个HTML元素包装成的JQuery对象
2
:
last
返回匹配指定选择器最后一个HTML元素包装成的JQuery对象
3
:
not(selector)
返回匹配指定选择器但去除selector选择器匹配的所有HTML元素包装成的JQuery对象
4
:
event
返回匹配指定选择器的索引为奇数的HTML元素包装成的JQuery对象,元素索引是从0开始
5
:
odd
返回匹配指定选择器索引为偶数的HTML元素包装成的JQuery对象
6
:
eq(index)
返回匹配指定选择器的索引为index的HTML元素包装成的JQuery对象
7
:
gt(index)
返回匹配指定选择器的索引大于index的所有HTML元素包装成的JQuery对象
8
:
lt(index)
返回匹配指定选择器的索引小于index的所有HTML元素包装成的JQuery对象
9
:
header
返回配置指定选择器,且必须是h1,h2,h3之类的标题元素
10
:
animated
返回匹配指定选择器,且当前没有执行动画效果的HTML元素包装成JQuery对象
11
:
contains(text)
返回匹配指定选择器,且包含text文本的HTML元素包装成的JQuery对象
12
:
empty
返回匹配指定选择器,且不包含任何内容的HTML元素包装成的JQuery对象
13
:
has(selector)
返回匹配指定选择器,且包含selector对象HTML元素的所有HTML元素包装成的Jquery对象
14
:
parent
返回匹配指定选择器,且包含子元素或者文本的所有HTML元素包装成的JQuery对象
15
:
hidden
返回匹配指定选择器,且当前不可见的HTML元素包装成的JQuery对象
16
:
visible
返回配置指定选择器,其当前可见的HTML元素包装成的JQuery对象
17
:
first-child
返回匹配指定选择器的第一个HTML元素包装成的JQuery对象
18
:
last-child
返回匹配指定选择器的最后一个HTML元素包装成的JQuery对象
19
:
only-child
返回配置指定选择器且是父元素中唯一的HTML元素的元素(如该父元素下有多个子元素则不会被匹配)包装成的JQuery对象
20
:
nth-child(index)
返回匹配指定选择器的第index个HTML元素包装成的JQuery对象,n从1
21
:
nth-child(enen)
返回匹配指定选择器且索引为奇数的HTML元素包装成的JQuery对象
22
:
nth-child(odd)
返回匹配指定选择器且索引为偶数的HTML元素包装成的JQuery对象
23
:
nth-child(xn+m)
返回配置指定选择器且索引为xn+m的HTML元素包装成的JQuery对象
示例代码:
3.2.3、表单相关选择器
常用于匹配表单控件的选择器如下:
NO
选择器
说明
1
:
input
返回所有input、testarea、select和button元素包装成的JQuery对象
2
:
text
返回所有type=“text”的input元素包装成的JQuery对象
3
:
password
返回所有type=“password”的input元素包装成的JQuery对象
4
:
radio
返回所有type=“radio”的input元素包装成的JQuery对象
5
:
checkbox
返回所有type=“checkbox”的input元素包装成的JQuery对象
6
:
submit
返回所有type=“submit”的input元素包装成的JQuery对象
7
:
image
返回所有type=“image”的input元素包装成的JQuery对象
8
:
reset
返回所有type=“reset”的input元素包装成的JQuery对象
9
:
button
返回所有按钮元素包括type=“reset”的input元素包装成的JQuery对象
10
:
file
返回所有文件域包装成的JQuery对象
11
:
hidden
返回所有不可见元素以及指定了type=“hidden”的input元素包装成的JQuery对象,包括等元素
12
:
enabled
返回所有可用的表单控件(未指定disabled=disabled)包装成的JQuery对象
13
:
checked
返回所有指定了checked=’checked’的表单控件包装成的JQuery对象
14
:
selected
返回所有指定了selected=’selected’的表单控件包装的JQuery对象
示例代码:
3.3、JQuery的数组操作
3.3.1、操作数组的方法
很多时候,JQuery的$()函数都返回的一个类似数组的JQuery对象,JQuery提供如下常用方法来操作数组的JQuery对象。
NO
方法
说明
1
each(callback)
迭代函数,它使用callblack函数迭代处理JQuery里包含的每个元素
2
Length
返回JQuery里包含的DOM元素的个数
3
eq(position)
返回JQuery里包含的第position+1个DOM元素包装成的JQuery对象
4
get
返回JQuery里包含的所有DOM元素组成的数组
5
get(index)
返回JQuery里包含的第index+1个Dom元素
6
Index(subject)
返回JQuery里subject索引,subject即可以使DOM对象也可是JQuery对象
示例代码:
注意:
DOM对象转换为JQuery对象,使用$()/jquery()
JQuery对象转化为DOM对象,使用get()/get(index)
3.3.2、过滤的相关方法
对类似数组的JQuery对象进行过滤的方法,这些方法将会过滤掉JQuery对象里包含的部分DOM对象,使JQuery对象中包含的DOM对象个数减少。
NO
方法
说明
1
filter(expro)
从JQuery对象里删除所有不匹配expr的DOM对象,expr可是合法的选择器,限定词
2
filter(fn)
使用fu函数迭代处理Jquery里包含的每个元素
3
is(expr)
使用expr来检查该JQuery对象包含的元素集合。
如任意一个符合expr就返回true,否则返回fasle
4
map(callback)
用于将JQuery对象里包含的一系列DOM对象转化成其他元素
5
not(expr)
从JQuery对象里删除所有匹配expr的DOM对象
6
slice(star,end)
返回JQuery里索引从start开始,到end结束的DOM元素组成的JQuery对象
示例代码:
3.3.3、仿DOM导航的相关方法
在JQuery中可以使用如下方法,找到当前JQuery对象的兄弟节点,父节点,子节点对应的JQuery对象。
NO
方法
说明
1
add(expr)
添加新的DOM元素
2
children([expr])
查找当前JQuery对象之内的全部后代元素
3
contents()
查找当前JQuery对象之内全部内容
4
find(expr)
查找处于当前JQuery对象之内能匹配expr选择器的所有后代元素
5
next([expr])
查找紧跟当前JQuery对象之后的元素,且该元素匹配expr选择器
6
nextAll([expr])
查找紧跟当前JQuery对象之后的所有兄弟元素,且该元素匹配expr选择器
7
pre([expr])
查找紧跟当前JQuery对象之前的元素,且该元素匹配expr选择器
8
preAll([expr])
查找紧跟当前JQuery对象之前的所有兄弟元素,且该元素匹配expr选择器
9
siblings([expr])
查找紧跟当前JQuery对象前后的所有兄弟元素,且该元素匹配expr选择器
10
parent([expr])
查找当前JQuery对象的父元素,且该元素匹配expr选择器
11
Parents([expr])
查找当前JQuery对象的祖先元素,且该元素匹配expr选择器
示例代码:
3.3.4、连接的方法
过滤,导航等方法都会对原有的JQuery对象进行“破坏”---通常都会减去原JQuery对象中包含的部分DOM对象,以下方法则可以不同方式找到前一次“破坏”之前的JQuery对象。
NO
方法
说明
1
addSelf()
将查找之前的的结果和查找之后的结果混合在一起
2
end()
将JQuery对象恢复到上一次执行过滤,查找方法之前的状态
示例代码:
3.4、JQuery支持的方法
以但我们获取了JQuery对象,就可以直接调用JQuery方法来操作DOM了,JQuery提供了大量的方法来简化DOM的操作。
3.4.1、JQuery命名空间的方法
可发者可以直接使用jquery命名空间中的属性和方法如下:
NO
方法
说明
1
JQuery.brower
返回当前浏览器的相关信息
2
JQuery.browser.version
返回用户浏览器的版本号
3
JQuery.boxModel
如果页面使用W3CCSSBoxModel则返回true
4
JQuery.isFunction(obj)
测试obj是否为一个函数,如果是则返回true
操作字符串,数组,对象相关的方法
NO
方法
说明
1
JQuery.trim(str)
截取字符串前后的空格
2
JQuery.each(object,callback)
遍历JavaScript对象和数组
3
JQuery.extend(target,object1,objectN)
将object1,objectN的属性值合并到target对象里,相同覆盖,不同则添加
4
JQuery.grep(array,callback,[invert])
用于对array数组进行筛选
5
JQuery.makeArray(obj)
将数组对象转(HTMLCollection)化为真正的数组对象
6
JQuery.map(array,callback)
将array数组转化为另一个数组
7
JQuery.inArray(value,array)
返回value在array中出现的位置
8
JQuery.merge(first,second)
将两个数组的元素合并到新数组中,并不会删除重复值
9
JQuery.unique(array)
删除array数组中重复值。
该array通常是DOM对象
示例代码:
3.4.2、数据存储的方法
JQuery允许把JQuery对象当做一个临时的“数据存储中心”,开发者能以key-vaue对的形式将数据存储到JQuery对象里,也可从JQuery对象里取出之前存储的数据,也可删除之前存储的数据。
方法如下:
NO
方法名
说明
1
data(name)
获取JQuery对象里存储的Key为name的数据
2
data(name,value)
向JQuery对象里存储name-value的数据对
3
Remove
删除JQuery对象里存储的key为name的数据
示例代码:
3.4.3、操作属性的相关方法
详见API
NO
方法名
说明
1
att(name)
访问Jquery对象里第一个匹配元素的name属性值
2
att(properties)
用于为Jquery对象里德所有DOM对象同时设置多个属性值
3
att(key,vaue)
用于为Jquery对象里德所有DOM对象同时设置单个属性值
4
removeAttr(name)
删除jquery对象里德所有DOM对象里的name属性
示例代码:
3.4.4、操作CSS属性的相关方法
Jquery提供了操作DOM元素的CSS样式的方法,包括直接访问,修改DOM元素的class属性,访问、修改DOM元素的内联CSS属性值的方法,还包括修改DOM元素的大小位置等。
(详见API)
NO
方法
说明
1
.addClass(…)
2
.CSS()
3
.hasClass(…)
示例代码:
3.4.5、操作元素内容的相关方法
Jquery提供如下方法操作或设置DOM元素的内容,保存设置DOM元素的innerHTML属性,文本内容和value属性(详见API)
NO
方法
属性
1
html()
2
text()
3
val()
4
示例代码:
3.4.6、操作DOM节点的相关方法
DOM操作中最常见的就是对节点的操作,包括创建,复制,插入,删除节点等,jQuery也提供了相关支持.(详见API)
1、在指定节点内添加新节点
NO
方法
1
append(content)
2
appendTo(selector)
3
prepend(content)
4
prependTo(selector)
示例代码:
2、在指定节点内添加新节点
NO
方法
1
after(content)
2
before(content)
3
insertAfter(selector)
4
insertBefore(selector)
示例代码:
3、前后都添加开始/结束节点(包裹)
NO
方法
1
wrap(node)
2
wrapAll(node)
说明:
将当前JQuery对象里包含的DOM节点包裹起来,即在DOM节点之前插入开始标签,在之后插入结束标签。
示例代码:
4、替换
NO
方法
1
replaceWith(content)
2
replaceAll(selector)
5、删除
NO
方法
1
empty()
2
remove([expr])
6、复制
NO
方法
1
clone([true])
示例代码:
3.5、JQuery事件相关方法
Jquery简化了javascript的事件模型,提供了一致的事件模型,从而允许开发者以更简洁的方式进行事件编程。
Jquery为事件提供了如下方法:
(详见API)
NO
方法
说明
1
ready(fn)
2
bind(type,[data],fn)
3
one(type,data,fn)
4
tigger(type,[data])
5
triggerHandler(type,[data])
6
unbind([type],[fn])
7
hover(over,out)
8
Toggle(fn1,fn2…)
9
示例代码:
Jquery还提供了具体的事件属性相对应的方法
实例代码:
3.6、JQuery动画相关方法
Jquery提供了一些效果相关的方法,通过使用这些方法,可以非常方便的完成用户的交互操作。
NO
方法
说明
1
show()
2
show(speed,[callback])
3
hide()
4
hide(speed,[callback])
5
toggle()
6
toggle(speed,callback)
7
slideDown(speed,[callback])
8
sideUp(speed,[callback])
9
SiddToggle(speed,[callback])
10
fadeIn(speed,[callback])
11
fadeOut(speed,[callback])
12
fadeTo(speed,opacity,[callback])
示例代码:
较复杂的动画方法:
13
Animate(params[,duration[,easing][,callback]])
14
Animate(params,options)
15
Stop([clearQueue],[gotoend])
16
Queue()
17
Queue(callback)
18
Queue(queue)
19
Dequeye()
注意:
参数的详细信息(详见API)
示例代码:
3.7
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquerybase
![提示](https://static.bdocx.com/images/bang_tan.gif)