事件
bind() 方法为被选元素添加一个或多个事件处理程序, 并规定事件发生时运行的函数.
语法
$(selector).bind(event,data,function)
当元素失去焦点时发生 blur 事件.
blur() 函数触发 blur 事件, 或者如果设置了 function 参数, 该函数也可规定当发生 blur 事件时执行的代码.
语法
$(selector).blur()
当元素的值发生改变时, 会发生 change 事件.
$(selector).change()
当点击元素时, 会发生 click 事件.
语法
$(selector).click()
当双击元素时, 会发生 dblclick 事件.
语法
$(selector).dblclick()
delegate() 方法为指定的元素 (属于被选元素的子元素) 添加一个或多个事件处理程序, 并规定当这些事件发生时运行的函数.
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素).
语法
$(selector).delegate(childSelector,event,data,function)
参数 | 描述 |
---|---|
childSelector | 必需。规定要附加事件处理程序的一个或多个子元素。 |
event | 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 |
data | 可选。规定传递到函数的额外数据。 |
function | 必需。规定当事件发生时运行的函数。 |
die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序.
语法
$(selector).die(event,function)
当元素遇到错误 (没有正确载入) 时, 发生 error 事件.
语法
$(selector).error()
显示鼠标指针的位置:
- $(document).mousemove(function(e){
- $("span").text("X:" + e.pageX + ", Y:" + e.pageY);
- });
亲自试一试
定义和用法
pageX() 属性是鼠标指针的位置, 相对于文档的左边缘.
语法
event.pageX
pageY() 属性是鼠标指针的位置, 相对于文档的上边缘.
语法
event.pageY
preventDefault() 方法阻止元素发生默认的行为(例如, 当点击提交按钮时阻止对表单的提交).
语法
event.preventDefault()
result 属性包含由被指定事件触发的事件处理器返回的最后一个值, 除非这个值未定义.
语法
event.result
实例
显示哪个 DOM 元素触发了事件:
- $("p, button, h1, h2").click(function(event){
- $("div").html("Triggered by a" + event.target.nodeName + "element.");
- });
亲自试一试
定义和用法
target 属性规定哪个 DOM 元素触发了该事件.
语法
event.target
参数 | 描述 |
---|---|
event | 必需。规定需要检查的事件。这个 event 参数来自事件绑定函数。 |
.Event 对象代表事件的状态, 比如事件在其中发生的元素, 键盘按键的状态
完整的 key press 过程分为两个部分: 1. 按键被按下; 2. 按键被松开.
当按钮被按下时, 发生 keydown 事件.
语法
$(selector).keydown()
当按钮被松开时, 发生 keyup 事件. 它发生在当前获得焦点的元素上.
bind 与 live 和 delegate 的区别;
bind 选中当前存在的元素;
live 选中当前存在的元素和未来出项的元素;
delegate 选中当前被选元素的子元素和未来的子元素;
当指定的元素 (及子元素) 已加载时, 会发生 load() 事件.
该事件适用于任何带有 URL 的元素(比如图像, 脚本, 框架, 内联框架).
语法
$(selector).load(function)
当鼠标指针移动到元素上方, 并按下鼠标按键时, 会发生 mousedown 事件.
语法
$(selector).mousedown()
当鼠标指针穿过元素时, 会发生 mouseenter 事件.
语法
$(selector).mouseenter()
当鼠标指针离开元素时, 会发生 mouseleave 事件.
语法
$(selector).mouseleave()
当鼠标指针在指定的元素中移动时, 就会发生 mousemove 事件.
语法
$(selector).mousemove()
当鼠标指针从元素上移开时, 发生 mouseout 事件.
语法
$(selector).mouseout()
不论鼠标指针离开被选元素还是任何子元素, 都会触发 mouseout 事件.
只有在鼠标指针离开被选元素时, 才会触发 mouseleave 事件.
当鼠标指针位于元素上方时, 会发生 mouseover 事件
与 mouseenter 事件不同, 不论鼠标指针穿过被选元素或其子元素, 都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时, 才会触发 mouseenter 事件
语法
$(selector).mouseover()
当在元素上放松鼠标按钮时, 会发生 mouseup 事件.
语法
$(selector).mouseup()
与 click 事件不同, mouseup 事件仅需要放松按钮, 而 click 只能是鼠标左键, mouseup 不管是什么键只要按住后松开了就激活了
one() 方法为被选元素附加一个或多个事件处理程序, 并规定当事件发生时运行的函数.
当使用 one() 方法时, 每个元素只能运行一次事件处理器函数.
$(selector).one(event,data,function)
*** 当 DOM(文档对象模型) 已经加载, 并且页面 (包括图像) 已经完全呈现时, 会发生 ready 事件.
ready() 函数规定当 ready 事件发生时执行的代码.
ready() 函数仅能用于当前文档, 因此无需选择器.
允许使用以下三种语法:
语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
当调整浏览器窗口的大小时, 发生 resize 事件.
语法
$(selector).resize()
当用户滚动指定的元素时, 会发生 scroll 事件.
scroll 事件适用于所有可滚动的元素和 Windows 对象(浏览器窗口).
语法
$(selector).scroll()
当 textarea 或文本类型的 input 元素中的文本被选择时, 会发生 select 事件.
select() 方法触发 select 事件, 或规定当发生 select 事件时运行的函数.
语法
$(selector).select()
当提交表单时, 会发生 submit 事件.
语法
$(selector).submit()
toggle() 方法用于绑定两个或多个事件处理器函数, 以响应被选元素的轮流的 click 事件.
该方法也可用于切换被选元素的 hide() http://www.w3school.com.cn/jquery/effect_hide.asp 与 show() http://www.w3school.com.cn/jquery/effect_show.asp 方法.
实例
切换不同的背景色:
- $("p").toggle(
- function(){
- $("body").CSS("background-color","green");},
- function(){
- $("body").CSS("background-color","red");},
- function(){
- $("body").CSS("background-color","yellow");}
- );
亲自试一试
语法
$(selector).toggle(function1(),function2(),functionN(),...)
trigger() 方法触发被选元素的指定事件类型.
语法
$(selector).trigger(event,[param1,param2,...])
参数 | 描述 |
---|---|
event | 必需。规定指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。 |
triggerHandler() 方法触发被选元素的指定事件类型. 但不会执行浏览器默认动作, 也不会产生事件冒泡.
效果
animate() 方法执行 CSS 属性集的自定义动画.
$(selector).animate(styles,speed,easing,callback)
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值(提供实例):注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。 |
speed | 可选。规定动画的速度。默认是 "normal"。可能的值:毫秒 (比如 1500)"slow""normal""fast" |
easing | 可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数:swinglinear 扩展插件中提供更多 easing 函数。 |
callback | 可选。animate 函数执行完之后,要执行的函数。如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 |
语法 2
$(selector).animate(styles,options)
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值(同上)。 |
options | 可选。规定动画的额外选项。可能的值:speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数 |
clearQueue() 方法停止队列中所有仍未执行的函数.
与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队的函数(通过 .queue() 方法添加到通用 jQuery 队列的任何函数).
语法
$(selector).clearQueue(queueName)
fadeIn() 方法使用淡入效果来显示被选元素, 假如该元素是隐藏的.
语法
$(selector).fadeIn(speed,callback)
fadeOut() 方法使用淡出效果来隐藏被选元素, 假如该元素是隐藏的.
语法
$(selector).fadeOut(speed,callback)
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值.
语法
$(selector).fadeTo(speed,opacity,callback)
show()如果被选的元素已被显示, 则隐藏该元素.
语法
$(selector).hide(speed,callback)
slideDown() 方法通过使用滑动效果, 显示隐藏的被选元素.
语法
$(selector).slideDown(speed,callback)
slideToggle() 方法通过使用滑动效果 (高度变化) 来切换元素的可见状态.
如果被选元素是可见的, 则隐藏这些元素, 如果被选元素是隐藏的, 则显示这些元素.
语法
$(selector).slideToggle(speed,callback)
slideUP()通过使用滑动效果, 隐藏被选元素, 如果元素已显示出来的话.
语法
$(selector).slideUp(speed,callback)
stop() 方法停止当前正在运行的动画.
语法
$(selector).stop(stopAll,goToEnd)
toggle() 方法切换元素的可见状态.
如果被选元素可见, 则隐藏这些元素, 如果被选元素隐藏, 则显示这些元素.
语法
$(selector).toggle(speed,callback,switch)
文档操作
addClass() 方法向被选元素添加一个或多个类.
该方法不会移除已存在的 class 属性, 仅仅添加一个或多个 class 属性.
提示: 如需添加多个类, 请使用空格分隔类名.
语法
$(selector).addClass(class)
参数 | 描述 |
---|---|
class | 必需。规定一个或多个 class 名称。 |
after() 方法在被选元素后插入指定的内容. 在后面添加新标签
语法
$(selector).after(content)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
append() 方法在被选元素的结尾 (仍然在内部) 插入指定内容.
提示: append() 和 appendTo() 方法执行的任务相同. 不同之处在于: 内容的位置和选择器.
语法
$(selector).append(content)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(可包含 HTML 标签)。 |
attr() 方法设置或返回被选元素的属性值.
返回属性值
返回被选元素的属性值.
语法
$(selector).attr(attribute)
before() 方法在被选元素前插入指定的内容.
语法
$(selector).before(content)
clone() 方法生成被选元素的副本, 包含子节点, 文本和属性.
语法
$(selector).clone(includeEvents)
detach() 方法移除被选元素, 包括所有文本和子节点.
这个方法会保留 jQuery 对象中的匹配的元素, 因而可以在将来再使用这些匹配的元素.
detach() 会保留所有绑定的事件, 附加的数据, 这一点与 remove() 不同.
语法
- $(selector).detach()
- $("button").click(function(){
$("body").append($("p").detach()); append($("p").detach() == p 标签原来的所以元素和 绑定事件
});
empty() 方法从被选元素移除所有内容, 包括所有文本和子节点.
语法
$(selector).empty()
hasClass() 方法检查被选元素是否包含指定的 class.
语法
$(selector).hasClass(class)
HTML() 方法返回或设置被选元素的内容 (inner HTML).
如果该方法未设置参数, 则返回被选元素的当前内容.
返回元素内容
当使用该方法返回一个值时, 它会返回第一个匹配元素的内容.
语法
$(selector).HTML()
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素.
注释: 如果该方法用于已有元素, 这些元素会被从当前位置移走, 然后被添加到被选元素之后.
语法
$(content).insertAfter(selector)
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素.
注释: 如果该方法用于已有元素, 这些元素会被从当前位置移走, 然后被添加到被选元素之前.
语法
$(content).insertBefore(selector)
prepend() 方法在被选元素的开头 (仍位于内部) 插入指定内容.
提示: prepend() 和 prependTo() 方法作用相同. 差异在于语法: 内容和选择器的位置, 以及 prependTo() 无法使用函数来插入内容.
语法
$(selector).prepend(content)
prependTo() 方法在被选元素的开头 (仍位于内部) 插入指定内容.
提示: prepend() 和 prependTo() 方法作用相同. 差异在于语法: 内容和选择器的位置, 以及 prepend() 能够使用函数来插入内容.
语法
$(content).prependTo(selector)
remove() 方法移除被选元素, 包括所有文本和子节点.
该方法不会把匹配的元素从 jQuery 对象中删除, 因而可以在将来再使用这些匹配的元素.
但除了这个元素本身得以保留之外, remove() 不会保留元素的 jQuery 数据. 其他的比如绑定的事件, 附加的数据等都会被移除. 这一点与 detach() 不同.
语法
$(selector).remove()
removeAttr() 方法从被选元素中移除属性.
语法
$(selector).removeAttr(attribute)
removeClass() 方法从被选元素移除一个或多个类.
注释: 如果没有规定参数, 则该方法将从被选元素中删除所有类.
语法
$(selector).removeClass(class)
参数 | 描述 |
---|---|
class | 可选。规定要移除的 class 的名称。如需移除若干类,请使用空格来分隔类名。如果不设置该参数,则会移除所有类。 |
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素.
提示: replaceAll() 与 replaceWith() 作用相同. 差异在于语法: 内容和选择器的位置, 以及 replaceWith() 能够使用函数进行替换.
语法
$(content).replaceAll(selector)
参数 | 描述 |
---|---|
content | 必需。规定替换被选元素的内容。可能的值: HTML 代码 - 比如 (" ") 新元素 - 比如 (document.createElement("div")) 已存在的元素 - 比如 ($(".div1")) 已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
selector | 必需。规定要替换的元素。 |
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素.
提示: replaceWith() 与 replaceAll() 作用相同. 差异在于语法: 内容和选择器的位置, 以及 replaceAll() 无法使用函数进行替换.
语法
- $(selector).replaceWith(content)
- $(selector).replaceWith(function())
text() 方法方法设置或返回被选元素的文本内容.
我认为差异几乎是不言自明的. 测试它是非常重要的.
jQuery.HTML()将字符串视为 HTML,jQuery.text()将内容视为文本
toggleClass() 对设置或移除被选元素的一个或多个类进行切换.
该方法检查每个元素中指定的类. 如果不存在则添加类, 如果已设置则删除之. 这就是所谓的切换效果.
不过, 通过使用 "switch" 参数, 您能够规定只删除或只添加类.
语法
$(selector).toggleClass(class,switch)
unwrap() 方法删除被选元素的父元素.
语法
$(selector).unwrap()
val() 方法返回或设置被选元素的值.
元素的值是通过 value 属性设置的. 该方法大多用于 input 元素.
如果该方法未设置参数, 则返回被选元素的当前值.
语法
$(selector).val(value)
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中. 变成这个被选元素的父元素
语法
$(selector).wrap(wrapper)
参数 | 描述 |
---|---|
wrapper | 必需。规定包裹被选元素的内容。可能的值: HTML 代码 - 比如 (" ") 新元素 - 比如 (document.createElement("div")) 已存在的元素 - 比如 ($(".div1")) 已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
实例
在
中包裹所有段落:
- $(".btn1").click(function(){
- $("p").wrapAll("<div></div>");
- });
亲自试一试
定义和用法
wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素.
语法
$(selector).wrapAll(wrapper)
wrapInner() 方法使用指定的 HTML 内容或元素, 来包裹每个被选元素中的所有内容 (inner HTML).
语法
$(selector).wrapInner(wrapper)
参数 | 描述 |
---|---|
wrapper | 必需。规定包围在被选元素的内容周围的内容。可能的值: HTML 代码 - 比如 (" ") 新的 DOM 元素 - 比如 (document.createElement("div")) 已存在的元素 - 比如 ($(".div1")) 已存在的元素不会被移动,只会被复制,并包裹被选元素。 |
CSS 操作
CSS()
设置
元素的颜色:
- $(".btn1").click(function(){
- $("p").CSS("color","red");
- });
亲自试一试
定义和用法
CSS() 方法返回或设置匹配的元素的一个或多个样式属性.
返回 CSS 属性值
返回第一个匹配元素的 CSS 属性值.
注释: 当用于返回一个值时, 不支持简写的 CSS 属性(比如 "background" 和 "border").
$(selector).CSS(name)
参数 | 描述 |
---|---|
name | 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。 |
height() 方法返回或设置匹配元素的高度.
返回高度
返回第一个匹配元素的高度.
如果不为该方法设置参数, 则返回以像素计的匹配元素的高度.
语法
$(selector).height()
offset() 方法返回或设置匹配元素相对于文档的偏移(位置).
返回偏移坐标
返回第一个匹配元素的偏移坐标.
该方法返回的对象包含两个整型属性: top 和 left, 以像素计. 此方法只对可见元素有效.
语法
$(selector).offset()
offsetParent() 方法返回最近的祖先定位元素.
position() 方法返回匹配元素相对于父元素的位置(偏移).
该方法返回的对象包含两个整型属性: top 和 left, 以像素计
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置.
滚动条的水平位置指的是从其左侧滚动过的像素数. 当滚动条位于最左侧时, 位置是 0.
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置.
scroll top offset 指的是滚动条相对于其顶部的偏移.
如果该方法未设置参数, 则返回以像素计的相对滚动条顶部的偏移.
width() 方法返回或设置匹配元素的宽度.
add() 方法将元素添加到匹配元素的集合中.
语法 1
.add(selector)
参数 | 描述 |
---|---|
selector | 字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。 |
children() 方法返回返回被选元素的所有直接子元素.
语法
.children(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
closest() 方法获得匹配选择器的第一个祖先元素, 从当前元素开始沿 DOM 树向上.
语法
.closest(selector)
contents() 方法获得匹配元素集合中每个元素的子节点, 包括文本和注释节点.
语法
.contents()
如果给定表示 DOM 元素集合的 jQuery 对象,.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点, 并用匹配元素构造新的 jQuery 对象..contents() 和 .children() 方法类似, 不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素.
each() 方法规定为每个匹配元素规定运行的函数.
提示: 返回 false 可用于及早停止循环.
语法
$(selector).each(function(index,element))
eq() 方法将匹配元素集缩减值指定 index 上的一个.
语法
.eq(index)
find() 方法获得当前元素集合中每个元素的后代, 通过选择器, jQuery 对象或元素来筛选.
语法
.find(selector)
first() 将匹配元素集合缩减为集合中的第一个元素.
语法
.first()
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集.
语法
.has(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
is() 根据选择器, 元素或 jQuery 对象来检测匹配元素集合, 如果这些元素中至少有一个元素匹配给定的参数, 则返回 true.
语法
.is(selector)
last() 将匹配元素集合缩减为集合中的最后一个元素.
语法
.last()
not() 从匹配元素集合中删除元素.
语法 1
.not(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
实例
从包含所有段落的集合中删除 id 为 "selected" 的段落:
$("p").not("#selected")
亲自试一试
实例
查找每个段落的带有 "selected" 类的父元素:
$("p").parent(".selected")
亲自试一试
定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素, 使用选择器进行筛选是可选的.
.parent(selector)
向元素附加数据, 然后取回该数据:
- $("#btn1").click(function(){
- $("div").data("greeting", "Hello World");
- });
- $("#btn2").click(function(){
- alert($("div").data("greeting"));
- });
亲自试一试
定义和用法
data() 方法向被选元素附加数据, 或者从被选元素获取数据.
从元素返回数据
从被选元素中返回附加的数据.
语法
$(selector).data(name)
dequeue() 方法为匹配元素执行序列中的下一个函数.
语法
.dequeue(queueName)
removeData() 方法删除之前通过 data() 方法设置的数据.
语法
$(selector).removeData(name)
参数 | 描述 |
---|---|
name | 可选。规定要删除的数据的名称。如果没有规定名称,该方法将从被选元素中删除所有已存储的数据。 |
get() 方法获得由选择器指定的 DOM 元素.
语法
$(selector).get(index)
参数 | 描述 |
---|---|
index | 可选。规定获取哪个匹配元素(通过 index 序列)。 |
index() 方法返回指定元素相对于其他指定元素的 index 位置.
这些元素可通过 jQuery 选择器或 DOM 元素来指定.
注释: 如果未找到元素, index() 将返回 -1.
第一个匹配元素的 index, 相对于同胞元素
获得第一个匹配元素相对于其同胞元素的 index 位置.
语法
$(selector).index()
亲自试一试
size() 方法返回被 jQuery 选择器匹配的元素的数量.
语法
$(selector).size()
toArray() 方法以数组的形式返回 jQuery 选择器匹配的元素.
语法
$(selector).toArray()
来源: https://www.cnblogs.com/benjieming421/p/10075172.html