目录
显示、隐藏、切换
hide(): 隐藏 HTML 元素
show(): 显示 HTML 元素
toggle() 切换hide()和show()
淡入淡出
fadeIn(): 用于淡入已隐藏的元素。
fadeOut(): 用于淡出可见的元素
fadeToggle(): fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo(): 允许渐变为给定的不透明度(值介于 0 与 1 之间)
滑动
slideDown(): 用于向下滑动元素。
slideUp(): 用于向上滑动元素
slideToggle(): 在 slideDown() 与 slideUp() 方法之间进行切换
动画
animate(): 用于创建自定义动画。
jQuery 效果方法
jQuery 事件方法
添加/移除 事件处理
鼠标事件
JQ事件对象
键盘事件
HTML / CSS 方法
class
插入的位置
设置或获取元素
返回
移除
替换
包裹
遍历方法
选择器分类笔记
1.基本选择器
2.层次选择器
3.过滤选择器(重点)
4.表单选择器
选择器
显示、隐藏、切换
hide(): 隐藏 HTML 元素 语法:$(selector).hide(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 show(): 显示 HTML 元素 语法:$(selector).show(speed,callback); toggle() 切换hide()和show() 语法:$(selector).toggle(speed,callback); |
淡入淡出
fadeIn(): 用于淡入已隐藏的元素。 语法:$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。 fadeOut(): 用于淡出可见的元素 语法:$(selector).fadeOut(speed,callback); fadeToggle(): fadeIn() 与 fadeOut() 方法之间进行切换 语法:$(selector).fadeToggle(speed,callback); fadeTo(): 允许渐变为给定的不透明度(值介于 0 与 1 之间) 语法:$(selector).fadeTo(speed,opacity,callback);
speed和opacity必须写eg.(0,0.5) |
滑动
slideDown(): 用于向下滑动元素。 语法:$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。 slideUp(): 用于向上滑动元素 语法:$(selector).slideUp(speed,callback); slideToggle(): 在 slideDown() 与 slideUp() 方法之间进行切换 语法:$(selector).slideToggle(speed,easing,callback); |
动画
animate(): 用于创建自定义动画。 语法:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
#注意
1.默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
2.当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
**使用相对值**:
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=。eg. $("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
**使用预定义的值**
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
eg. $("div").animate({
height:'toggle'
});
});
**使用队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow"); }); |
appendTo():
jQuery 效果方法
下面的表格列出了所有用于创建动画效果的 jQuery 方法。
方法 | 描述 |
---|
—————— | |
animate() | 对被选元素应用"自定义"的动画 |
clearQueue() | 对被选元素移除所有排队函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 移除下一个排队函数,然后执行函数 |
fadeIn() | 逐渐改变被选元素的不透明度,从隐藏到可见 |
fadeOut() | 逐渐改变被选元素的不透明度,从可见到隐藏 |
fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
fadeToggle() | 在 fadeIn() 和 fadeOut() |
finish() | 对被选元素停止、移除并完成所有排队动画 |
hide() | 隐藏被选元素 |
queue() | 显示被选元素的排队函数 |
show() | 显示被选元素 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | slideUp() 和 slideDown() 方法之间的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
stop() | 停止被选元素上当前正在运行的动画 |
toggle() | hide() 和 show() 方法之间的切换 |
jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。
方法 | 描述 |
---|
———— | |
添加/移除 事件处理 | |
bind() | 向元素添加事件处理程序 |
unbind() | 从被选元素上移除添加的事件处理程序 |
off() | 移除通过 on() 方法添加的事件处理程序 |
on() | 向元素添加事件处理程序 |
one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
blur() | 添加/触发失去焦点事件 |
change() | 添加/触发 change 事件 |
focus() | 添加/触发 focus 事件 |
trigger() | 触发绑定到被选元素的所有事件(触发默认行为) |
triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数(不会触发默认行为) |
鼠标事件 | |
click() | 添加/触发 click 事件 |
dblclick() | 添加/触发 double click 事件 |
hover() | 添加两个事件处理程序到 hover 事件 |
mousedown() | 添加/触发 mousedown 事件 |
mouseup() | 添加/触发 mouseup 事件 |
mouseenter() | 添加/触发 mouseenter 事件 |
mouseleave() | 添加/触发 mouseleave 事件 |
mouseover() | 添加/触发 mouseover 事件 |
mouseout() | 添加/触发 mouseout 事件 |
mousemove() | 添加/触发 mousemove 事件 |
delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
JQ事件对象 | |
event.originalEvent | 从JQ事件中获取到JS的事件对象 |
event.currentTarget | 在事件冒泡阶段内的当前 DOM 元素 |
event.target | 返回哪个 DOM 元素触发事件 |
event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 |
event.delegateTarget | 返回当前调用的 jQuery 事件处理程序所添加的元素 |
event.isDefaultPrevented() | 返回指定的 event 对象上是否调用了 event.preventDefault() |
event.isImmediatePropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() |
event.isPropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopPropagation() |
event.namespace | 返回当事件被触发时指定的命名空间 |
event.pageX | 返回相对于文档左边缘的鼠标位置 |
event.pageY | 返回相对于文档上边缘的鼠标位置 |
event.keyCode | 键盘按键代码 |
event.preventDefault() | 阻止事件的默认行为 |
event.relatedTarget | 返回当鼠标移动时哪个元素进入或退出 |
event.result | 包含由被指定事件触发的事件处理程序返回的最后一个值 |
event.stopImmediatePropagation() | 阻止其他事件处理程序被调用 |
event.stopPropagation() | 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知 |
event.timeStamp | 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 |
event.type | 返回哪种事件类型被触发 |
event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 |
event.metaKey | 事件触发时 META 键是否被按下 |
focusin() | 添加事件处理程序到 focusin 事件 |
focusout() | 添加事件处理程序到 focusout 事件 |
键盘事件 | |
keydown() | 添加/触发 keydown 事件 |
keyup() | 添加/触发 keyup 事件 |
keypress() | 添加/触发 keypress 事件 |
live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
$.proxy() | 接受一个已有的函数,并返回一个带特定上下文的新的函数 |
ready() | 规定当 DOM 完全加载时要执行的函数 |
resize() | 添加/触发 resize 事件 |
scroll() | 添加/触发 scroll 事件 |
select() | 添加/触发 select 事件 |
submit() | 添加/触发 submit 事件 |
undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
contextmenu() | 添加事件处理程序到 contextmenu 事件 |
$.holdReady() | 用于暂停或恢复.ready() 事件的执行 |
HTML / CSS 方法
方法 | 描述 | 备注 |
---|
—————— | 一个都没有是全部。一个是获取{"a"},两个是设置{"a","b"} | |
class | | |
addClass() | 向被选元素添加一个或多个类名 | |
removeClass() | 从被选元素移除一个或多个类 | |
toggleClass() | 在被选元素中添加/移除一个或多个类之间切换 | |
hasClass() | 检查被选元素是否包含指定的 class 名称 | |
插入的位置 | | |
before() | 在被选元素前插入内容 | |
after() | 在被选元素后插入内容 | |
append() | 在被选元素的结尾插入内容 | |
appendTo() | 在被选元素的结尾插入 HTML 元素 | |
prepend() | 在被选元素的开头插入内容 | |
prependTo() | 在被选元素的开头插入 HTML 元素 | |
insertAfter() | 在被选元素后插入 HTML 元素 | |
insertBefore() | 在被选元素前插入 HTML 元素 | |
设置或获取元素 | | |
attr() | 设置或返回被选元素的属性/值 | |
| 语法——返回属性的值:$(selector).attr(attribute) | 设置属性和值:$(selector).attr(attribute,value) 使用函数设置属性和值:$(selector).attr(attribute,function(index,currentvalue))设置多个属性和值:$(selector).attr({attribute:value, attribute:value,...}) |
prop() | 设置或返回被选元素的属性/值 | 语法——同上attr(),两者不同之处是input获取attr("checked")时永远返回checked,prop("checked")返回trur/false |
height() | 设置或返回被选元素的高度 | 有参数表示设置,没有参数表示获取。没有带单位px |
width() | 设置或返回被选元素的宽度 | 同上 |
html() | 设置或返回被选元素的内容 | html(""):清空/html()获取/html("html文本内容"):设置 |
offset() | 设置或返回被选元素的偏移坐标(相对于文档) | 返回一个对象{left:x,top:y}。获取:offset().left/offset().top。设置:offset({left:"100"}),不加单位。注意如果元素没有设置position,它会自动为该元素添加一个position:relative |
scrollLeft() | 设置或返回被选元素的水平滚动条位置 | |
scrollTop() | 设置或返回被选元素的垂直滚动条位置 | |
text() | 设置或返回被选元素的文本内容 | text("文本"):设置 |
val() | 设置或返回被选元素的属性值(针对表单元素) | |
clone() | 生成被选元素的副本 | jq的浅克隆就是JS的深克隆。jq的深克隆clone(true),会把事件也克隆过去 |
css() | 为被选元素设置或返回一个或多个样式属性 | |
返回 | | |
innerHeight() | 返回元素的高度(包含 padding,不包含 border) | |
innerWidth() | 返回元素的宽度(包含 padding,不包含 border) | |
offsetParent() | 返回第一个定位的祖先元素 | |
outerHeight() | 返回元素的高度(包含 padding 和 border) | |
outerWidth() | 返回元素的宽度(包含 padding 和 border) | |
position() | 返回元素的位置(相对于父元素) | 不能进行设置,只能进行获取操作。 |
移除 | | |
detach() | 移除被选元素(保留数据和事件) | |
empty() | 从被选元素移除所有子节点和内容 | |
清空节点 | remove() 自杀、html("") 清空、empty()清空 | |
remove() | 移除被选元素(包含数据和事件) | 同js |
removeAttr() | 从被选元素移除一个或多个属性 | |
removeProp() | 移除通过 prop() 方法设置的属性 | |
替换 | | |
replaceAll() | 把被选元素替换为新的 HTML 元素 | |
replaceWith() | 把被选元素替换为新的内容 | |
unwrap() | 移除被选元素的父元素 | |
包裹 | | |
wrap() | 在每个被选元素的周围用 HTML 元素包裹起来 | |
wrapAll() | 在所有被选元素的周围用 HTML 元素包裹起来 | |
wrapInner() | 在每个被选元素的内容周围用 HTML 元素包裹起来 | |
$.escapeSelector() | 转义CSS选择器中有特殊意义的字符或字符串 | |
$.cssHooks | 提供了一种方法通过定义函数来获取和设置特定的CSS值 | |
遍历方法
方法 | 描述 |
---|
———— | |
add() | 把元素添加到匹配元素的集合中 |
addBack() | 把之前的元素集添加到当前集合中 |
andSelf() | 在版本 1.8 中被废弃。addBack() 的别名 |
children() | 返回被选元素的所有直接子元素 |
closest() | 返回被选元素的第一个祖先元素 |
contents() | 返回被选元素的所有直接子元素(包含文本和注释节点) |
each() | 为每个匹配元素执行函数 |
map() | 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象 |
end() | 结束当前链中最近的一次筛选操作,并把匹配元素集合返回到前一次的状态 |
eq() | 返回带有被选元素的指定索引号的元素 |
filter() | 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
find() | 返回被选元素的后代元素 |
first() | 返回被选元素的第一个元素 |
has() | 返回拥有一个或多个元素在其内的所有元素 |
is() | 根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true |
last() | 返回被选元素的最后一个元素 |
next() | 返回被选元素的后一个同级元素 |
nextAll() | 返回被选元素之后的所有同级元素 |
nextUntil() | 返回介于两个给定参数之间的每个元素之后的所有同级元素 |
not() | 从匹配元素集合中移除元素 |
offsetParent() | 返回第一个定位的父元素 |
parent() | 返回被选元素的直接父元素 |
parents() | 返回被选元素的所有祖先元素 |
parentsUntil() | 返回介于两个给定参数之间的所有祖先元素 |
prev() | 返回被选元素的前一个同级元素 |
prevAll() | 返回被选元素之前的所有同级元素 |
prevUntil() | 返回介于两个给定参数之间的每个元素之前的所有同级元素 |
siblings() | 返回被选元素的所有同级元素 |
slice() | 把匹配元素集合缩减为指定范围的子集 |
选择器分类笔记
1.基本选择器 |
---|
$("#id") //ID选择器 |
$("div") //元素选择器 |
$(".classname") //类选择器 |
$(".classname,.classname1,#id1") //组合选择器 |
2.层次选择器 |
---|
$("#id>.classname ") //子元素选择器 |
$("#id .classname ") //后代元素选择器 |
$("#id + .classname ") //紧邻下一个元素选择器 |
$("#id ~ .classname ") //兄弟元素选择器 |
3.过滤选择器(重点) |
---|
$("li:first") //第一个li |
$("li:last") //最后一个li |
$("li:even") //挑选下标为偶数的li |
$("li:odd") //挑选下标为奇数的li |
$("li:eq(4)") //下标等于4的li |
$("li:gt(2)") //下标大于2的li |
$("li:lt(2)") //下标小于2的li |
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li |
3.2内容过滤选择器 |
---|
$("div:contains('Runob')") // 包含 Runob文本的元素 |
$("td:empty") //不包含子元素或者文本的空元素 |
$("div:has(selector)") //含有选择器所匹配的元素 |
$("td:parent") //含有子元素或者文本的元素 |
3.3可见性过滤选择器 |
---|
$("li:hidden") //匹配所有不可见元素,或type为hidden的元素 |
$("li:visible") //匹配所有可见元素 |
3.4属性过滤选择器 |
---|
$("div[id]") //所有含有 id 属性的 div 元素 |
$("div[id='123']") // id属性值为123的div 元素 |
$("div[id!='123']") // id属性值不等于123的div 元素 |
$("div[id^='qq']") // id属性值以qq开头的div 元素 |
$("div[id$='zz']") // id属性值以zz结尾的div 元素 |
$("div[id*='bb']") // id属性值包含bb的div 元素 |
$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素 |
3.5状态过滤选择器 |
---|
$("input:enabled") // 匹配可用的 input |
$("input:disabled") // 匹配不可用的 input |
$("input:checked") // 匹配选中的 input |
$("option:selected") // 匹配选中的 option |
4.表单选择器 |
---|
$(":input") //匹配所有 input, textarea, select 和 button 元素 |
$(":text") //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同 |
$(":password") //所有密码框 |
$(":radio") //所有单选按钮 |
$(":checkbox") //所有复选框 |
$(":submit") //所有提交按钮 |
$(":reset") //所有重置按钮 |
$(":button") //所有button按钮 |
$(":file") //所有文件域 |
选择器
选择器 | 实例 | 选取 |
---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | class="intro" 的所有元素 |
.class,.class | $(".intro,.demo") | class 为 "intro" 或 "demo" 的所有元素 |
element | $("p") | 所有 p 元素 |
el1,el2,el3 | $("h1,div,p") | 所有 h1,div 和 p 元素 |
:first | $("p:first") | 第一个 p 元素 |
:last | $("p:last") | 最后一个 p 元素 |
:even | $("tr:even") | 所有偶数 tr 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 |
:odd | $("tr:odd") | 所有奇数 tr 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 |
:first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 p元素 |
:first-of-type | $("p:first-of-type") | 属于其父元素的第一个p 元素的所有 p 元素 |
:last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有p 元素 |
:last-of-type | $("p:last-of-type") | 属于其父元素的最后一个 p 元素的所有 p元素 |
:nth-child(n) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 p 元素 |
:nth-last-child(n) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有p 元素,从最后一个子元素开始计数 |
:nth-of-type(n) | $("p:nth-of-type(2)") | 属于其父元素的第二个p 元素的所有 p元素 |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 p 元素的所有 p 元素,从最后一个子元素开始计数 |
:only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 p元素 |
:only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 p 元素 |
parent > child | $("div > p") | div 元素的直接子元素的所有 p 元素 |
parent descendant | $("div p") | div元素的后代的所有 p 元素 |
element + next | $("div + p") | 每个 div 元素相邻的下一个 p 元素 |
element ~ siblings | $("div ~ p") | div元素同级的所有 p 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 值从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的输入元素 |
:header | $(":header") | 所有标题元素 h1, h2 ... |
:animated | $(":animated") | 所有动画元素 |
:focus | $(":focus") | 当前具有焦点的元素 |
:contains(text) | $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 |
:has(selector) | $("div:has(p)") | 所有包含有 p 元素在其内的 div 元素 |
:empty | $(":empty") | 所有空元素 |
:parent | $(":parent") | 匹配含有子元素或者文本的元素。 |
:hidden | $("p:hidden") | 所有隐藏的 p 元素 |
:visible | $("table:visible") | 所有可见的表格 |
:root | $(":root") | 文档的根元素 |
:lang(language) | $("p:lang(de)") | 所有带有以 "de" 开头的 lang 属性值的p 元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='default.htm']") | 所有带有 href 属性且值等于 "default.htm" 的元素 |
[attribute!=value] | $("[href!='default.htm']") | 所有带有 href 属性且值不等于 "default.htm" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 |
[attribute | =value] | $("[title |
[attribute^=value] | $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" 开头的元素 |
[attribute~=value] | $("[title~='hello']") | 所有带有 title 属性且值包含单词 "hello" 的元素 |
[attribute*=value] | $("[title*='hello']") | 所有带有 title 属性且值包含字符串 "hello" 的元素 |
[name=value][name2=value2] | $( "input[id][name$='man']" ) | 带有 id 属性,并且 name 属性以 man 结尾的输入框 |
:input | $(":input") | 所有 input 元素 |
:text | $(":text") | 所有带有 type="text" 的 input 元素 |
:password | $(":password") | 所有带有 type="password" 的 input 元素 |
:radio | $(":radio") | 所有带有 type="radio" 的 input 元素 |
:checkbox | $(":checkbox") | 所有带有 type="checkbox" 的 input 元素 |
:submit | $(":submit") | 所有带有 type="submit" 的 input 元素 |
:reset | $(":reset") | 所有带有 type="reset" 的 input 元素 |
:button | $(":button") | 所有带有 type="button" 的 input 元素 |
:image | $(":image") | 所有带有 type="image" 的 input 元素 |
:file | $(":file") | 所有带有 type="file" 的 input 元素 |
:enabled | $(":enabled") | 所有启用的元素 |
:disabled | $(":disabled") | 所有禁用的元素 |
:selected | $(":selected") | 所有选定的下拉列表元素 |
:checked | $(":checked") | 所有选中的复选框选项 |
.selector | $(selector).selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 |
:target | $( "p:target" ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的p元素 |