JQuery笔记
jQuery 的功能概括:
- html的元素选取
- html的元素操作
- html dom遍历和修改
- js特效和动画效果
- css操作
- html事件操作
- ajax异步请求方式
jQuery 版本 2 以上不支持 IE6,7,8 浏览器。如果需要支持 IE6/7/8,那么请选择1.9。你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->
编写JS的流程:
- 布局:HTML+CSS
- 属性:确定要修改哪些属性
- 数据:确定要修改哪些显示数据
- 事件:确定用户做哪些操作
- 编写JS:在事件中,用JS来修改页面元素的样式和显示的数据
jQuery 选择器
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$(“p.intro”) | 选取 class 为 intro 的 <p> 元素 |
$(“p:first”) | 选取第一个 <p> 元素 |
$(“ul li:first”) | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$(“ul li:first-child”) | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 <a> 元素 |
$(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 <a> 元素 |
$(":button") | 选取所有 type=“button” 的 <input> 元素 和 <button> 元素 |
$(“tr:even”) | 选取偶数位置的 <tr> 元素 |
$(“tr:odd”) | 选取奇数位置的 <tr> 元素 |
jQuery 效果方法
下面的表格列出了所有用于创建动画效果的 jQuery 方法。
方法 | 描述 | 参数说明 |
---|---|---|
show(speed,easing,callback) | 显示被选元素 | speed :可选。规定隐藏效果的速度。可能的值:毫秒、“slow”、"fast" easing :可选。规定在动画的不同点上元素的速度。默认值为 “swing”。可能的值:“swing” - 在开头/结尾移动慢,在中间移动快;“linear” - 匀速移动 callback :可选。hide() 方法执行完之后,要执行的函数。 |
hide(speed,easing,callback) | 隐藏被选元素 | |
toggle(speed,easing,callback) | hide() 和 show() 方法之间的切换 | |
fadeIn(speed,easing,callback) | 逐渐改变被选元素的不透明度,从隐藏到可见 | |
fadeOut(speed,easing,callback) | 逐渐改变被选元素的不透明度,从可见到隐藏 | |
fadeTo(speed,opacity,easing,callback) | 把被选元素逐渐改变至给定的不透明度 | speed :必需。 opacity :必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。 |
fadeToggle(speed,easing,callback) | 在 fadeIn() 和 fadeOut() 方法之间进行切换 | |
slideDown(speed,easing,callback) | 通过调整高度来滑动显示被选元素 | |
slideUp(speed,easing,callback) | 通过调整高度来滑动隐藏被选元素 | |
slideToggle(speed,easing,callback) | slideUp() 和 slideDown() 方法之间的切换 | |
animate({styles},speed,callback) | 对被选元素应用"自定义"的动画 | styles :必需。规定产生动画效果的一个或多个 CSS 属性/值。注意: 当与 animate() 方法一起使用时,该属性名称必须是驼峰写法: 您必须使用 paddingLeft 代替 padding-left,marginRight 代替 margin-right,依此类推。同时,色彩动画并不包含在核心 jQuery 库中。 |
clearQueue(queueName) | 对被选元素移除所有排队函数(仍未运行的) | queueName :可选。规定队列的名称。默认是 “fx”,标准效果队列。 |
delay(speed,queueName) | 对被选元素的所有排队函数(仍未运行)设置延迟 | |
dequeue(queueName) | 移除下一个排队函数,然后执行函数 | |
finish(queueName) | 对被选元素停止、移除并完成所有排队动画 | |
queue(queueName) | 显示被选元素的排队函数 | |
stop(stopAll,goToEnd) | 停止被选元素上当前正在运行的动画 | stopAll :可选。布尔值,规定是否停止被选元素的所有加入队列的动画。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 goToEnd :可选。布尔值,规定是否立即完成当前的动画。默认是 false。 |
animate()可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”:
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery HTML/CSS 方法
下面用于处理 HTML 和 CSS 的 jQuery 方法适用于 HTML 和 XML 文档。除了:html() 方法。
HTML操作
- html():设置所有匹配元素或返回第一个匹配元素的内容(包括 HTML 标记)。
- 返回内容:
$(selector).html()
- 设置内容:
$(selector).html(content)
- 使用函数设置内容:
$(selector).html(function(index,currentcontent))
- index - 返回集合中元素的 index 位置
- currentcontent - 返回被选元素的当前 HTML 内容。
- 返回内容:
- text():设置或返回所有匹配元素的文本内容(返回内容时会删除 HTML 标记)。语法同html()。
- val() : 设置所有匹配元素或返回第一个匹配元素的属性值(针对表单元素)。语法同html()。
- after() : 在被选元素后插入内容
- 设置内容:
$(selector).after(content)
- 使用函数设置内容:
$(selector).after(function(index,currentcontent))
- 设置内容:
- before() : 在被选元素前插入内容。语法同after()。
- append() : 在被选元素的结尾插入内容。语法同after()。
- prepend() : 在被选元素的开头插入内容。语法同after()。
- appendTo() | 在被选元素的结尾插入 HTML 元素
语法:$(content).appendTo(selector)
- content : 必需。规定要插入的内容(必须包含 HTML 标签)。
**注意:**如果 content 是已存在的元素,它将从当前位置被移除,并在被选元素的结尾被插入。 - selector : 必需。规定把内容追加到哪个元素上。
$("<span></span>").appendTo("p");
执行的结果为
<p><span></span></p>
- content : 必需。规定要插入的内容(必须包含 HTML 标签)。
- prependTo() : 在被选元素的开头插入 HTML 元素。语法同appendTo()。
- insertAfter() : 在被选元素后插入 HTML 元素。语法同appendTo()。
$("<span></span>").insertAfter("p");
执行的结果为
<p></p><span></span>
- insertBefore() : 在被选元素前插入 HTML 元素。语法同appendTo()。
- replaceAll() : 把被选元素替换为新的 HTML 元素。语法同appendTo()。
- replaceWith() : 把被选元素替换为新的内容。语法同after()。
- clone() : 生成被选元素的副本,包含子节点、文本和属性
语法:$(selector).clone(true|false)
- true : 规定需复制事件处理程序。
- false : 默认。规定不复制事件处理程序。
- wrap() : 在每个被选元素的周围用 HTML 元素包裹起来。语法同after()。
$("p").wrap("<div></div>");
执行的结果为
<div><p></p></div>
- wrapAll() : 在所有被选元素的周围用 HTML 元素包裹起来
语法:$(selector).wrapAll(wrappingElement)
- wrapInner() : 在每个被选元素的内容周围用 HTML 元素包裹起来。语法同after()。
$("p").wrapInner("<b></b>");
执行的结果为
<p><b></b></p>
- unwrap() : 移除被选元素的父元素
语法:$(selector).unwrap()
- empty() : 从被选元素移除所有子节点和内容。语法同unwrap()。
- detach() : 移除被选元素(保留数据和事件)。该方法会保留移除元素的副本,允许它们在以后被重新插入。语法同unwrap()。
- remove() : 移除被选元素(包含数据和事件)。语法同unwrap()。
属性操作
- attr() : 设置所有匹配元素或返回第一个匹配元素的属性/值。
- 返回属性的值:
$(selector).attr(attribute)
- 设置属性和值:
$(selector).attr(attribute,value)
- 使用函数设置属性和值:
$(selector).attr(attribute,function(index,currentvalue))
- 设置多个属性和值:
$(selector).attr({attribute:value, attribute:value,...})
- 返回属性的值:
- removeAttr() : 从被选元素移除一个或多个属性。
语法:$(selector).removeAttr(attribute)
attribute : 必需。规定要移除的一个或多个属性。如需移除若干个属性,请使用空格分隔属性名称。 - prop() : 设置或返回被选元素的属性/值。语法同attr()。
注意: prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。 - removeProp() : 移除通过 prop() 方法设置的属性。
注意:不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。
语法:$(selector).removeProp(property)
property : 规定要移除的属性的名称。
尺寸与位置
- height() : 设置所有匹配元素或返回第一个匹配元素的高度。当设置高度时,单位为 px、em、pt 等。默认单位是 px。语法同html()。
- innerHeight() : 返回第一个匹配元素的内部高度(包含 padding,不包含 border)
语法:$(selector).innerHeight()
- outerHeight() : 返回第一个匹配元素的外部高度(包含 padding 和 border)
语法:$(selector).outerHeight(includeMargin)
includeMargin : 可选。布尔值,规定是否包含 margin。默认false,不包含 margin。 - width() : 设置所有匹配元素或返回第一个匹配元素的宽度。语法同height()。
- innerWidth() : 返回第一个匹配元素的内部宽度(包含 padding,不包含 border)。语法同innerHeight()。
- outerWidth() : 返回第一个匹配元素的外部宽度(包含 padding 和 border)。语法同outerHeight()。
- offset() : 设置所有匹配元素或返回第一个匹配元素的偏移坐标(相对于文档)。当用于返回偏移时,返回的是一个带有两个属性(以像素为单位的 top 和 left 位置)的对象。
- 返回偏移坐标:
$(selector).offset()
- 设置偏移坐标:
$(selector).offset({top:value,left:value})
- 使用函数设置偏移坐标:
$(selector).offset(function(index,currentoffset))
- 返回偏移坐标:
- offsetParent() : 返回第一个定位的祖先元素
语法:$(selector).offsetParent()
- position() : 返回第一个匹配元素的位置(相对于父元素),该方法返回一个带有两个属性(以像素为单位的 top 和 left 位置)的对象。
语法:$(selector).position()
- scrollLeft() : 设置所有匹配元素或返回第一个匹配元素的水平滚动条位置。当滚动条位于最左侧时,位置是 0。
返回水平滚动条位置:
$(selector).scrollLeft()
设置水平滚动条位置:
$(selector).scrollLeft(position)
position : 规定以像素为单位的水平滚动条位置。 - scrollTop() : 设置所有匹配元素或返回第一个匹配元素的垂直滚动条位置。当滚动条位于最顶部时,位置是 0。语法同scrollLeft()。
CSS操作
- css() : 设置所有匹配元素或返回第一个匹配元素的一个或多个样式属性。语法同attr()。
当用于返回属性时,简写的 CSS 属性(比如 “background” 和 “border”)不被完全支持,且当用于返回属性值时,在不同的浏览器中有不同的结果。 - hasClass() : 检查被选元素是否包含指定的 class 名称
语法:$(selector).hasClass(classname)
- addClass() : 向被选元素添加一个或多个类名,使用空格分隔类名。该方法不会移除已存在的 class 属性。
- 添加若干类名:
$(selector).after(classname)
- 使用函数添加类:
$(selector).after(function(index,currentclass))
- 添加若干类名:
- removeClass() : 从被选元素移除一个或多个类。如需移除若干个类,请使用空格分隔类名称。语法同addClass()。
注意: 如果参数为空,则将移除所有类名称。 - toggleClass() : 在被选元素中添加/移除一个或多个类之间切换。该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。然而,通过使用 “switch” 参数,您能够规定只删除或只添加类。
- 添加若干类名:
$(selector).after(classname,switch)
- 使用函数添加类:
$(selector).after(function(index,currentclass),switch)
switch : 可选。布尔值,规定是否仅仅添加(true)或移除(false)类。
- 添加若干类名:
- [
.
e
s
c
a
p
e
S
e
l
e
c
t
o
r
(
)
]
(
h
t
t
p
:
/
/
w
w
w
.
r
u
n
o
o
b
.
c
o
m
/
j
q
u
e
r
y
/
h
t
m
l
−
e
s
c
a
p
e
S
e
l
e
c
t
o
r
.
h
t
m
l
)
:
转
义
C
S
S
选
择
器
中
有
特
殊
意
义
的
字
符
或
字
符
串
。
此
方
法
对
于
一
个
C
S
S
类
名
或
一
个
I
D
包
含
的
字
符
在
C
S
S
中
具
有
特
殊
含
义
的
情
况
下
非
常
有
用
,
如
点
或
分
号
。
语
法
:
‘
.escapeSelector()](http://www.runoob.com/jquery/html-escapeSelector.html) : 转义CSS选择器中有特殊意义的字符或字符串。此方法对于一个CSS类名或一个ID包含的字符在CSS中具有特殊含义的情况下非常有用,如点或分号。 语法:`
.escapeSelector()](http://www.runoob.com/jquery/html−escapeSelector.html):转义CSS选择器中有特殊意义的字符或字符串。此方法对于一个CSS类名或一个ID包含的字符在CSS中具有特殊含义的情况下非常有用,如点或分号。语法:‘.escapeSelector( selector )`
selector : Selector类型 一个包含选择器表达式的字符串,用来转义。 - $.cssHooks : 提供了一种方法通过定义函数来获取和设置特定的CSS值
jQuery 遍历方法
- first() : 返回被选元素的第一个元素
语法:$(selector).first()
- last() : 返回被选元素的最后一个元素。语法同first()。
- contents() : 返回被选元素的所有直接子元素(包含文本和注释节点)。语法同first()。
- find() : 返回被选元素的后代元素
语法:$(selector).find(filter)
filter : 必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。**注意:**如需返回多个后代,请使用逗号分隔每个表达式。 | - children() : 返回被选元素的所有直接子元素。该方法不会返回文本节点。
语法:$(selector).children(filter)
filter : 可选。规定缩小搜索子元素范围的选择器表达式。 - siblings() : 返回被选元素的所有同级元素。语法同children()。
- parent() : 返回被选元素的直接父元素。语法同children()。
- next() : 返回被选元素的后一个同级元素。语法同children()。
- prev() : 返回被选元素的前一个同级元素。语法同children()。
- closest() : 返回被选元素的第一个祖先元素
返回使用 DOM context 查找的 DOM 树中的第一个祖先元素:
$(selector).closest(filter,context)
context : 可选。在其内可以找到匹配元素的 DOM 元素。 - parents() : 返回被选元素的所有祖先元素
语法:$(selector).parents(filter)
filter : 可选。规定缩小搜索祖先元素范围的选择器表达式。**注意:**如需返回多个祖先,请使用逗号分隔每个表达式。 - parentsUntil() : 返回介于两个给定参数之间的所有祖先元素
语法:$(selector).parentsUntil(stop,filter)
- stop : 可选。表示在哪里停止搜索匹配的祖先元素的选择器表达式、元素、jQuery 对象。
- filter : 可选。规定缩小搜索介于 selector 与 stop 之间的祖先元素范围的选择器表达式。**注意:**如需返回多个祖先元素,请使用逗号分隔每个表达式。 |
- prevAll() : 返回被选元素之前的所有同级元素。语法同parents()。
- prevUntil() : 返回介于两个给定参数之间的每个元素之前的所有同级元素。语法同parentsUntil()。
- nextAll() : 返回被选元素之后的所有同级元素。语法同parents()。
- nextUntil() : 返回介于两个给定参数之间的每个元素之后的所有同级元素。语法同parentsUntil()。
- [
.
c
o
n
t
a
i
n
s
(
)
]
(
h
t
t
p
:
/
/
w
w
w
.
r
u
n
o
o
b
.
c
o
m
/
j
q
u
e
r
y
/
m
i
s
c
−
c
o
n
t
a
i
n
s
.
h
t
m
l
)
:
判
断
另
一
个
D
O
M
元
素
是
否
是
指
定
D
O
M
元
素
的
后
代
语
法
:
‘
.contains()](http://www.runoob.com/jquery/misc-contains.html) : 判断另一个DOM元素是否是指定DOM元素的后代 语法:`
.contains()](http://www.runoob.com/jquery/misc−contains.html):判断另一个DOM元素是否是指定DOM元素的后代语法:‘.contains( container, contained )`
container : Element类型,指定可能包含其他元素的祖辈容器元素。
contained : Element类型,指定可能被其他元素包含的后代元素。 - eq() : 返回带有被选元素的指定索引号的元素,索引号从 0 开头。
语法:$(selector).eq(index)
index : 必需。规定元素的索引。可以是整数或负数。**注意:**使用负数将从被选元素的结尾开始计算索引。 - has() : 返回拥有匹配指定选择器的一个或多个元素在其内的所有元素
语法:$(selector).has(element)
element : 必需。规定匹配元素的选择器表达式或元素。**提示:**如需选取拥有多个元素在其内的元素,请使用逗号分隔 - is() : 根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true
选择器表达式判断:
$(selector).is(selectorElement)
函数判断:
$(selector).is(function(index,element))
- index() : 返回指定元素相对于其他指定元素的 index 位置。如果未找到元素,index() 将返回 -1。
语法:$(selector).index(element)
element : 可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。 - add() : 把元素添加到匹配元素的集合中。该方法把元素添加到整个文档上,如果规定了 context 参数则只添加到上下文元素内部。
语法:$(selector).add(element,context)- element : 必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。 |
- context : 可选。规定选择器表达式在文档中开始进行匹配的位置。
- addBack() : 把之前的元素集添加到当前集合中
- not() : 从匹配元素集合中移除元素。该方法让您规定一个条件。不符合条件的元素将从选择中返回,符合条件的元素将被移除。
使用选择器表达式:
$(selector).not(criteria)
criteria : 可选。规定要从被选元素组合中移除的选择器表达式、jQuery 对象、一个或多个元素。**提示:**如需规定多个条件,请使用逗号分隔。
使用函数:
$(selector).not(function(index,element))
function(index,element) : 可选。为组合中的每个元素规定要运行的函数。如果返回 true,则移除元素,否则元素将被保留。注意: this 是当前的 DOM 元素。 - filter() : 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。语法同not()。
- slice() : 把匹配元素集合缩减为指定范围的子集
语法:$(selector).slice(start,stop)
- start : 必需。规定开始选取元素的位置。
- stop : 可选。规定结束选取元素的位置。如果省略,则选取范围会在集合末端结束。
索引号从 0 开始。**注意:**如果参数是负数,则表示从被选元素的末端开始选取元素,而不是从头开始。
- each() : 为每个匹配元素执行函数
语法:$(selector).each(function(index,element))
**提示:**返回 false 可用于及早停止循环。 - map() : 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象
- end() : 结束当前链中最近的一次筛选操作,并把匹配元素集合返回到前一次的状态
数据操作方法
方法 | 描述 |
---|---|
$.type(obj ) | 确定JavaScript内置对象的类型,返回的是小写形式的类型名称。 |
$.isNumeric(value ) | 判断指定参数是否是一个数字值 |
$.isArray(obj ) | 判断指定参数是否是一个数组 |
$.isFunction(obj ) | 判断指定参数是否是一个函数 |
$.isEmptyObject(obj ) | 检查对象是否为空(不包含任何属性) |
$.isPlainObject(obj ) | 判断指定参数是否是一个纯粹的对象 |
$.isWindow(obj ) | 判断指定参数是否是一个窗口 |
$.isXMLDoc(node ) | 判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档 |
$.now() | 返回当前时间 |
$.trim(str ) | 去除字符串两端的空白字符 |
$.parseHTML( htmlString [, context ] [, keepScripts ] ) | 将HTML字符串解析为对应的DOM节点数组 htmlString : String类型,需要解析并转为DOM节点数组的HTML字符串 context : Element类型,指定在哪个Document中创建元素,默认为当前文档的document keepScripts : Boolean类型,指定传入的HTML字符串中是否包含脚本,默认为false |
$.parseJSON( json ) | 将符合标准格式的JSON字符串转为与之对应的JavaScript对象 |
$.parseXML( xmlString) | 将字符串解析为对应的XML文档 |
$.inArray( value, array [, fromIndex ]) | 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) |
$.grep( array, function(currentValue,index) [, invert ]) | 过滤并返回满足指定函数的数组元素 invert:默认值为false,指定是否反转过滤结果。如果参数invert为true,则结果数组将包含function返回false的所有元素。 |
$.merge( firstArray, secondArray ) | 合并两个数组内容到第一个数组 |
$.uniqueSort( array ) | 对DOM元素数组进行排序,并移除重复的元素 |
$.each( array/obj, function(index/key,value) ) | 遍历指定的对象和数组 |
$.map( array/obj, function(value, index/key) ) | 指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。 |
$.makeArray( obj ) | 将一个类似数组的对象转换为真正的数组对象 |
$.fn.extend( obj ) | 为jQuery扩展一个或多个实例属性和方法 |
$.extend() | 将一个或多个对象的内容合并到目标对象 |
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意:
- 如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。
- 如果多个对象具有相同的属性,则后者会覆盖前者的属性值。
语法
$.extend( target [, object1 ] [, objectN ] )
指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )
警告:不支持第一个参数传递 false 。
参数 | 描述 |
---|---|
deep | 可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。 |
target | Object类型 目标对象,其他对象的成员属性将被附加到该对象上。 |
object1 | 可选。 Object类型 第一个被合并的对象。 |
objectN | 可选。 Object类型 第N个被合并的对象。 |