jquery方法总结

目录

显示、隐藏、切换

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元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值