jquery 基础笔记 - 代码天地

事件

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 事件。

扫描二维码关注公众号，回复： 4390917 查看本文章

语法

$(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 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

语法

$(selector).scroll()

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。

语法

$(selector).select()

当提交表单时，会发生 submit 事件。

语法

$(selector).submit()

toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

该方法也可用于切换被选元素的 hide() 与 show() 方法。

实例

切换不同的背景色：

$("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 函数

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()