jQuery学习笔记整理

将前段时间自己在慕课网上学习的jQuery笔记大概整理一下, 只是作为一段时间学习jQuery的总结, 当然也是最基础的入门阶段的知识点。 有很多错误和不足之处, 欢迎各位前辈指出, 谢谢。

1.jQuery样式篇

jQuery对象与DOM对象的转化

jQuery对象转化成DOM对象:

$("DOM中已经存在的某个或某类元素的标记")[下标索引]或者$("DOM中已经存在的某个或某类元素的标记").get(下标索引)得到的即是一个DOM对象, 还可以使用slice方法进行类似于Python的切片操作, 来选定一部分元素集合

DOM对象转化为jQuery对象: $("DOM元素对象")

jQurey选择器

id选择器 $("#id")

类选择器 $(".class")

元素选择器 $("element")

全选择器, 即选中所有元素 $("*")

层级选择器 用于处理子元素, 后代元素, 兄弟元素以及相邻元素

子选择器 $("parent > child")选择所有指定parent元素中指定的child直接子元素

后代选择器 $("ancestor descendant") 选择给定的祖先元素的所有后代元素

相邻兄弟选择器 $("prev + next") 选择所有紧接在"prev"元素后的next元素

一般兄弟选择器 $("prev ~ siblings") 匹配"prev"元素之后的所有兄弟元素

基本筛选选择器

$(":first") 匹配第一个元素 $(":last") 匹配最后一个元素

$(":not(selector)") 选择所有元素去除不匹配给定的选择器元素

$(":eq(index)") 在匹配的集合中选择索引值为index的元素

$(":gt(index)") 在匹配的集合中选择索引值大于index的元素

$(":lt(index)") 在匹配的集合中选择索引值小于index的元素

$(":even") 选择索引为偶数的元素, 下标从0开始

$(":odd") 选择索引为奇数的元素, 下表从0开始

$("header") 选择所有标题元素

$(":lang(language)") 选择指定语言的所有元素

$(":root") 选择该文档的根元素

$(":animated") 选择所有正在执行动画效果的元素

内容筛选器

$(":contains(text)") 选择所有包含指定文本的元素, 可以嵌套查找

$(":has(selector)") 选择元素至少包含指定选择器的元素, 可以嵌套查找

$(":parent") 选择所有含有子元素或者文本的元素, 相当于将此元素看作是拥有子元素的父元素

$(":empty") 选择没有子元素或者文本节点的元素, 相当于将此元素看作时没有子元素的父元素

可见性筛选选择器

$(":visible") 选择所有显示的元素, css中属性opacity值设置为0以及属性visibility的值设置为hidden, 以及表单type设置为hidden的元素, 均视为可见元素, 因为它们占用着文档中的一定空间

$(":hidden") 选择所有隐藏的元素, css中设置属性display为none, 以及设置属性长和宽均为为0的元素以及type属性为hidden的表单元素均视为隐藏元素

属性选择器

$("*[attribute]") 选择所有具有指定属性的元素, 该属性的值可以是任何值

$("*[attribute=vlaue]") 选择所有具有指定属性, 并且该属性值为value的元素

$("*[attribute^=value]") 选择所有具有指定属性, 并且该属性值为以value开始的字符串的元素

$("*[attribute$=value]") 选择所有具有指定属性, 并且该属性值为以value结尾的字符串的元素

$("*[attrbute!=value]") 选择所有具有指定属性, 并且该属性值不是为value的元素

$("*[attribute*=value]") 选择所有具有指定属性, 并且该属性值包含value字符串的元素

$("*[attribute|=value]") 选择所有具有指定属性, 并且该属性值是以value字符串开始的前缀的元素, 即是以value-开始的字符串元素, 如

, 则选择该元素使用$("p[name|=abc]")

$("*[attribute~=value]") 选择所有具有指定属性, 并且该属性值以空格相分割, 分割后的属性值合集中具有某一个属性值为value的元素

$(*[attribute][attribute]) 选择匹配所有属性筛选器的元素

子元素筛选器

$(":first-child") 选择所有父级元素下的第一个元素

$(":last-child") 选择所有父级元素下的最后一个元素

$(":only-child") 选择所有父级元素下的唯一子元素, 必须保证这个子元素在父元素中的唯一性, 此时也可以使用first-child或者last-child, 效果一样

(first-child会匹配层级关系中同一层不同部分的多个第一个元素, 而first只会匹配层级关系中同一层第一个部分的第一个元素)

$(":nth-child(索引值)") 选择他们所有父元素的的第n个子元素, 下标从1开始

$(":nth-last-child(索引值)") 选择他们所有父元素的第n个子元素, 下标从1开始, 但是从后往前计数

表单元素选择器

$(":input") 选择所有input标签元素, 可以匹配包括input标签中type为text, password, radio, checkbox, submit, image, reset, button, file, 也可以匹配单独的textarea和button标签等

$(":text") 匹配所有的文本框

$(":password") 匹配所有的密码框

$(":radio") 匹配所有的单选框

$(":checkbox") 匹配所有的复选框

$(":submit") 匹配所有提交的按钮

$("image") 匹配所有的图像域

$(":reset") 匹配所有的重置按钮

$(":button") 匹配所有的按钮

$(":file") 匹配所有的文件域

表单对象属性筛选选择器

$(":enabled") 选取可用的表单元素, 表单元素的默认disabled属性值就为enabled, 因此若想要设置表单元素不可用, 需要显示设置disabled属性值为disabled

$(":disabled") 选取不可用的表单元素

$(":checked") 选取被选中的input元素

$(:selected) 选取被选中的option元素

this是JS的关键字, 指的是当前上下文对象, 也就是方法和属性的所有者, 它可以动态地改变。this是一个html的上下文对象, 可以调用html对象所拥有的属性和方法, 而$(this), 则将这个this的html上下文对象转化为jQuery上下文对象, 从而可以使用jQuery的一系列方法和属性值

使用attr和removeAttr方法获取某个属性的属性值、设置某个属性的属性值和移除属性

$("DOM中已经存在的某个元素或某类元素的标记").attr("属性名")

$("DOM中已经存在的某个元素或某类元素的标记").attr("属性名", "属性值")

$("DOM中已经存在的某个元素或某类元素的标记").attr("属性名", "函数值") (这个函数有两个参数index和value, 即第一参数为当前的合集对象的索引值, 第二个参数为当前的对象的值)

$("DOM中已经存在的某个元素或某类元素的标记").attr({"属性名1": "属性值1", "属性名2": "属性值2", "属性名3": "属性值3"...}) // 传递的是多对属性名和属性值的对象

$("DOM中已经存在的某个元素或某类元素的标记").removeAttr("属性名")

Attribute为特性, DOM中的方法有: getAttribute, setAttribute以及removeAttribute, 是DOM节点自带的属性, 如id, class, title, align等等

Property为属性, 是这个DOM元素作为对象时附加的内容, 如tagName, nodeName, nodeType, defaultSelected以及defaultChecked等等, 对应的jQuery方法为prop, 并且只能查看, 不能修改, 如: $("#id").prop("nodeName")

使用html方法获取集合中第一个匹配元素的html内容或者设置每一个匹配元素的html内容, 内部使用DOM的innerHTML属性来处理, 因此这个操作是针对整个html内容的

$("DOM中已经存在的某个元素或某类元素的标记").html()

$("DOM中已经存在的某个元素或某类元素的标记").html("html字符串")

$("DOM中已经存在的某个元素或某类元素的标记").html(function(index, oldhtml))

使用text方法获取集合中所有匹配的元素的文本内容或者设置每一个匹配元素的文本内容, 内部使用DOM的innerText属性来处理, 只针对文本节点

$("DOM中已经存在的某个元素或某类元素的标记").text() (得到匹配元素集合中每个元素的合并文本, 包括他们的后代元素)

$("DOM中已经存在的某个元素或某类元素的标记").text("文本内容")

$("DOM中已经存在的某个元素或某类元素的标记").text(function(index, oldttext))

使用val方法处理表单元素的值

$("某个或某类表单元素的标记").val() 获取匹配的表单元素集合中第一个元素的当前值

$("某个或某类表单元素的标记").val(value) 设置匹配的表单元素集合中每个元素的值

$("某个或某类表单元素的标记").val(function(index, value)) 使用函数来设置表单元素集合中对应元素的值

使用addClass方法, 为某个或某类元素动态增加一个或多个类名, 它不会替换一个样式类名, 而只是添加一个样式类命到元素上

$("DOM中已经存在的某个或某类元素的标记").addClass("class")

$("DOM中已经存在的某个或某类元素的标记").addClass("class1 class2 class3 ...")

$("DOM中已经存在的某个或某类元素的标记").addClass(function(index, currentClass)) 返回一个或多个用空格隔开的要增加的样式类的类名

注意, 在原来的某个类中若包含设置了某个属性, 要添加的新样式类中仍然设置了某个属性, 那么可能这个值不会改变, 即样式不会发生变化

使用removeClass方法, 将某个或某类元素中删去全部或者指定的样式类名

$("DOM中已经存在的某个元素或某类元素的标记").removeClass() (删除所有类名)

$("DOM中已经存在的某个元素或某类元素的标记").removeClass("class1 class2 class3 ...") (删除指定的类名)

$("DOM中已经存在的某个元素或某类元素的标记").remove(function(index, class)) (返回一个或多个将要被删除的样式类名)

使用toggleClass为某个或某类元素动态添加或者删除一个或者多个样式类, 即如果一个样式类没有被设置, 则调用toggleClass将把这个样式类设置在元素上, 而如果这个样式类被设置, 则调用toggleClass将把这个样式类从元素上移除, 当然也可以一次性提供多个样式类名

$("DOM中已经存在的某个元素或某类元素的标记").toggleClass("class")

$("DOM中已经存在的某个元素或某类元素的标记").toggleClass("class1 class2 class3 ...")

$("DOM中已经存在的某个元素或某类元素的标记").toggleClass("class", switch) switch参数是一个布尔值, 用于判断样式类是否应该被添加或删除, 添加(true), 删除(false)

$("DOM中已经存在的某个元素或某类元素的标记").toggleClass(switch) 是否添加或删除当前已有的样式类

$("DOM中已经存在的某个元素或某类元素的标记").toggleClass(function(index, class, switch)) 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

使用css方法获取元素样式属性的计算值或者设置元素的css属性

$("DOM中已经存在的某个元素或某类元素的标记").css("propertyName")

$("DOM中已经存在的某个元素或某类元素的标记").css("[propertyName1, propertyName2, propertyName3, ...]")

$("DOM中已经存在的某个元素或某类元素的标记").css("propertyName", "value")

$("DOM中已经存在的某个元素或某类元素的标记").css(function(index, value)) 传入一个回调函数, 返回取到对应的值进行处理

$("DOM中已经存在的某个元素或某类元素的标记").css({"propertyName1": "value1", "propertyName2": "value2", "propertyName3": "value3", ...}) (获取颜色时, 返回其RGB值, css的方法支持驼峰写法与大小写混搭的写法, 当一个数作为属性的值看待时, jQuery会将其转化成字符串, 并在字符串的结尾处添加px)

addClass是通过添加事先在外部文件或者内部样式中定义好的类来改变样式的, 而css是通过内联样式的style属性设置来改变样式的, 因此css方法设置属性的优先级要高于addClass

使用data方法来进行数据的存储

$.data(element, key, value) 静态接口存数据

$.data(element, key) 静态接口取数据

$("DOM中已经存在的某个元素或某类元素的标记").data(key, value) 动态接口存数据

$("DOM中已经存在的某个元素或某类元素的标记").data(key) 动态接口取数据

2.jQuery操作DOM篇

添加新的DOM节点元素

JS: document.createElement 创建元素节点

document.createTextNode 创建文本节点

setAttribute 设置属性

appendChild 加入文档中

jQuery:

使用append和appendTo将元素追加到某个元素或某类匹配元素的内部最后的位置(父子关系)

$("DOM中已经存在的某个或某类元素标记").append("HTML标记部分作为一个新的节点")

$("HTML标记部分作为一个新的节点").appendTo("DOM中已存在的某个或某类元素标记")

使用prepend和prependTo将元素追加到某个元素或某类匹配元素的内部最前的位置(父子关系)

$("DOM中已经存在的某个或某类元素标记").prepend("HTML标记部分作为一个新的节点")

$("HTML标记部分作为一个新的节点").prependTo("DOM中已存在的某个或某类元素标记")

使用after,before以及insertAfter,insertBefore将元素追加到某个或某类元素的相邻的前面或后面的位置(兄弟关系)

$("DOM中已经存在的某个或某类元素标记").after("HTML标记部分作为一个新的节点")

$("DOM中已经存在的某个或某类元素标记").before("HTML标记部分作为一个新的节点")

$("HTML标记部分作为一个新的节点").insertAfter("DOM中已经存在的某个或某类元素标记")

$("HTML标记部分作为一个新的节点").insertBefore("DOM中已经存在的某个或某类元素的标记")

使用empty移除某个元素或某类元素的所有子节点, 无参数

$("DOM中已经存在的某个元素或某类元素的标记").empty()

使用remove, 无参数时, 移除这个或这类节点元素及其所有子节点元素, 有参数时, 移除这个或这类节点元素给定参数过滤后的节点元素

$("DOM中已经存在的某个元素或某类元素的标记").remove()

$("DOM中已经存在的某个元素或某类元素的标记").remove("相关的选择器表达式")

$("DOM中已经存在的某个元素或某类元素的标记").filter("相关的选择器表达式").remove()

使用detach方法临时删除某个或某类节点元素, 但保留这个元素的内存模型对象, 可以使用append方法将删除的元素追加到页面上

$("DOM中已经存在的某个元素或某类元素的标记").detach()

$("DOM中要追加的元素位置").append("使用detach方法临时删除的某个或某类元素的对象")

使用clone方法来复制某个或某类节点元素, 参数未指定或指定为false, 则匹配节点元素及所有子节点元素, 若参数指定为ture, 则还包括元素节点所绑定的事件和数据,clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容

浅复制: $("DOM中已经存在的某个元素或某类元素的标记").clone()

深复制: $("DOM中已经存在的某个元素或某类元素的标记").clone(true)

添加额外属性: $("DOM中已经存在的某个元素或某类元素的标记").clone().css("css样式设置")

使用replaceWith和replaceAll方法将已经存在的某个元素或某类元素替换为新的目标元素

$("DOM中已经存在的某个元素或某类元素的标记").replaceWith("新的目标元素作为父元素(可以时HTML字符串, DOM元素或者jQuery对象)")

$("新的目标元素").replaceAll("DOM中已经存在的某个元素或某类元素的标记")

使用wrap方法给已经存在的某个元素增加一个父元素或者给已经存在的某类元素分别增加一个父元素

$("DOM中已经存在的某个元素或某类元素的标记").wrap("新的目标元素作为父元素")

使用unwrap方法删除已经存在的某个或某类节点元素的父元素

$("DOM中已经存在的某个元素或某类元素的标记").unwrap()

使用wrapAll方法对已经存在的某类元素增加一个统一的父元素

$("DOM中已经存在的某个元素或某类元素的标记").wrapAll("新的目标元素作为父元素")

使用wrapperInner方法对已经存在的某个元素或某类元素的内部所有子元素增加或者分别增加一个父元素

$("DOM中已经存在的某个元素或某类元素的标记").wrapAll("新的目标元素作为父元素")

使用children方法, 查找某个元素或某类元素的第一级子元素

$("DOM中已经存在的某个元素或某类元素的标记").children()

$("DOM中已经存在的某个元素或某类元素的标记").children("选择器表达式")

使用find方法, 查找某个元素或某类元素的后代元素, 必须有参数, 可以是通配符*来匹配所有后代所有节点元素, 当然不包括自己

$("DOM中已经存在的某个元素或某类元素的标记").find("*")

$("DOM中已经存在的某个元素或某类元素的标记").find("选择器表达式")

使用parent方法, 查找某个元素或某类元素的父元素

$("DOM中已经存在的某个元素或某类元素的标记").parent()

$("DOM中已经存在的某个元素或某类元素的标记").parent("选择器表达式")

$("html").parent() // 返回一个包含document的集合

使用parents方法, 查找某个元素或某类元素的祖辈元素,开始于父元素，一直查找到文档根元素, 返回零个、一个或者多个元素的jQuery对象

$("DOM中已经存在的某个元素或某类元素的标记").parents() // 查找所有祖辈元素

$("DOM中已经存在的某个元素或某类元素的标记").parents("选择器表达式")

$("html").parents() // 返回一个空集合

使用closest方法, 查找某个元素或某类元素的祖辈元素, 开始于当前元素，查找到一个匹配元素就停止查找, 返回零个或者一个元素的jQuery对象

$("DOM中已经存在的某个元素或某类元素的标记").closest("选择器表达式")

$("DOM中已经存在的某个元素或某类元素的标记").closest("jQuery对象")

使用next方法，查找某个元素或某类元素的紧邻的后面同辈元素

$("DOM中已经存在的某个元素或某类元素的标记").next()

$("DOM中已经存在的某个元素或某类元素的标记").next("选择器表达式")

使用prev方法, 查找某个元素或某类元素的紧邻的前面同辈元素

$("DOM中已经存在的某个元素或某类元素的标记").prev()

$("DOM中已经存在的某个元素或某类元素的标记").prev("选择器表达式")

使用siblings方法, 查找某个元素或某类元素的同辈所有元素, 不包括自身

$("DOM中已经存在的某个元素或某类元素的标记").siblings()

$("DOM中已经存在的某个元素或某类元素的标记").siblings("选择器表达式")

使用add方法，为jQuery合集对象添加新的元素,这些元素若使用选择器表达式来获得, 则来自于html文档中, 若传递的是html字符串则默认为用户新创建的节点元素, 需要使用appendTO或者appendd等方法来将元素合集追加到DOM文档对象模型中，若使用DOM方法, 则可以是已经存在的元素也可以是新创建的元素, 根据实际的DOM方法来决定

$("DOM中已经存在的某个元素或某类元素的标记").add("选择器表达式或DOM元素或html字符串")

$("DOM中已经存在的某个元素或某类元素的标记").add(“html字符串”).appendTo()

使用each方法, 遍历jQuery合集对象, 相当于一个for循环迭代器, 同时传递一个函数, 包括当前元素的索引和合集对象中的遍历到的当前元素两个参数

$("DOM中已经存在的某个元素或某类元素的标记").each(function(index, element){可以是判断筛选等操作的JS代码或jQuery代码})

3.jQuery事件篇

使用click, dbclick方法, 为某个元素或某类元素绑定监听事件, click事件相当于mousedown事件和mouseup两个事件构成, dbclick事件也相当于两次click事件

$("DOM中已经存在的某个元素或某类元素的标记").click/dbclick() (不带参数的回调函数)

$("DOM中已经存在的某个元素或某类元素的标记").click/dbclick(handler(eventObject)) (带有一个事件的处理器函数, 可以针对事件的反馈来做各种操作, 方法中的this指向当前绑定事件的元素, 也就是事件的目标对象, 即this === eventObject.currentTarget

$("DOM中已经存在的某个元素或某类元素的标记").click/dbclick(eventData, function(handler)) (接收一个数据参数, 可以解决不同作用于下的数据传递问题, 可以使用eventObject.data在事件处理器函数中使用传入的数据)

使用mousedown和mouseup方法为某个或某类元素绑定鼠标按下事件或鼠标松开事件

$("DOM中已经存在的某个元素或某类元素的标记").mousedown/mouseup()

$("DOM中已经存在的某个元素或某类元素的标记").mousedown/mouseup(function(eventObject))

$("DOM中已经存在的某个元素或某类元素的标记").mousedown/mouseup(eventData, function(eventObject))

使用mousemove方法为某个元素或某类元素绑定鼠标移动事件, 相当于mouseover和mouseout方法的组合

$("DOM中已经存在的某个元素或某类元素的标记").mousemove()

$("DOM中已经存在的某个元素或某类元素的标记").mousemove(function(eventObject){...})

$("DOM中已经存在的某个元素或某类元素的标记").mousemove(eventData, function(eventObject))

使用mouseover和mouseout方法为某个元素或某类元素绑定鼠标移入移出事件, 会产生冒泡现象, 即如果子元素有绑定的事件, 在出发绑定的事件后, 会继续向上查找其父元素及其祖辈元素是否有相同的事件, 如果有也一并触发

$("DOM中已经存在的某个元素或某类元素的标记").mouseover/mouseout()

$("DOM中已经存在的某个元素或某类元素的标记").mouseover/mouseout(function(eventObject))

$("DOM中已经存在的某个元素或某类元素的标记").mouseover/mouseout(eventData, function(eventObject))

使用mouseenter和mouseleave方法为某个元素或某类元素绑定鼠标移入移除的事件, 不会产生冒泡现象, 即只会在绑定它的元素上被调用, 不会再后代节点上被触发

$("DOM中已经存在的某个元素或某类元素的标记").mouseenter/mouseleave()

$("DOM中已经存在的某个元素或某类元素的标记").mouseenter/mouseleave(function(eventObject))

$("DOM中已经存在的某个元素或某类元素的标记").mouseenter/mouseleave(eventData, function(eventObject))

使用hover方法为某个元素或某类元素绑定鼠标移入移出事件, 相当于mouseenter和mouseleave方法的组合, 不会产生事件的冒泡

$("DOM中已经存在的某个元素或某类元素的标记").hover(handlerIn(eventObject), handlerOut(eventObject)) (handlerIn为鼠标指针移入时所触发的事件函数, handlerOut为鼠标移出时所触发的事件函数)

使用foucsin方法来为某个元素或某类元素及其内部元素绑定获得焦点的事件, 支持冒泡处理

$("DOM中已经存在的某个元素或某类元素的标记").focusin()

$("DOM中已经存在的某个元素或某类元素的标记").focusin(handler(eventObject))

$("DOM中已经存在的某个元素或某类元素的标记").focusin(eventData, handler(eventObject))

使用focusout方法来为某个元素或某类元素及其内部元素绑定失去焦点的事件, 支持冒泡处理

$("DOM中方已经存在的某个元素或某类元素的标记").focusout()

$("DOM中方已经存在的某个元素或某类元素的标记").focusout(handler(eventObject))

$("DOM中方已经存在的某个元素或某类元素的标记").focusout(eventData, handler(eventObject))

使用focus与blur方法来为某个元素或某类元素及其内部元素绑定获得或失去焦点事件, 不知出冒泡处理

$("DOM中方已经存在的某个元素或某类元素的标记").focus()

$("DOM中方已经存在的某个元素或某类元素的标记").focus(handler(eventObject))

$("DOM中方已经存在的某个元素或某类元素的标记").focus(eventData, handler(eventObject))

$("DOM中方已经存在的某个元素或某类元素的标记").blur()

$("DOM中方已经存在的某个元素或某类元素的标记").blur(handler(eventObject))

$("DOM中方已经存在的某个元素或某类元素的标记").blur(eventData, handler(eventObject))

使用change方法监听表单元素的改变, 对于input元素和textarea元素监听value值的变化, 当有改变时, 失去焦点后将触发该事件, 对于radio和checkbox以及select下拉选择框在用户做出选择后立即触发该事件

$("DOM中已经存在的某个元素或某类元素的标记").change()

$("DOM中已经存在的某个元素或某类元素的标记").change(handler(eventObjecy))

$("DOM中已经存在的某个元素或某类元素的标记").change(eventData, handler(eventObject))

使用select方法绑定文本类型的input元素与textarea元素中的文本被选择时触发的事件

$("DOM中已经存在的某个元素或某类元素的标记").select()

$("DOM中已经存在的某个元素或某类元素的标记").select(handler(eventObjecy))

$("DOM中已经存在的某个元素或某类元素的标记").select(eventData, handler(eventObject))

使用submit方法绑定表单提交事件

$("DOM中已经存在的某个元素或某类元素的标记").submit()

$("DOM中已经存在的某个元素或某类元素的标记").submit(handler(eventObjecy))

$("DOM中已经存在的某个元素或某类元素的标记").submit(eventData, handler(eventObject)) (当要阻止表单提交事件时可以使用事件对象的preventDefault方法来阻止表单的默认提交, 在jQuery中直接使用return false即可)

使用keydown和keyup, keypress方法为某个元素或某类元素绑定键盘按下事件和键盘松开事件, 在每次键盘按下接收单个来自键盘的字符时, keydown会在按下下一个字符时触发该事件, 而keyup则在按下键盘输出字符到显示器上然后松开键盘的一瞬间就会立即触发该事件

$("DOM中已经存在的某个元素或某类元素的标记").keydown()

$("DOM中已经存在的某个元素或某类元素的标记").keydown(handler(eventObjecy))

$("DOM中已经存在的某个元素或某类元素的标记").keydown(eventData, handler(eventObject))$("DOM中已经存在的某个元素或某类元素的标记").keyup()

$("DOM中已经存在的某个元素或某类元素的标记").keyup(handler(eventObjecy))

$("DOM中已经存在的某个元素或某类元素的标记").keyup(eventData, handler(eventObject)) (keydown与keyup理论上能够绑定到任何元素上, 但只是发送到具有焦点的元素上, 而不同的浏览器获得焦点的元素略有不同, 但是表单元素是总能获得焦点的)

keypress方法同keydown方法相同, 但只能捕获单个字符, 不能捕获组合键, 无法相应系统功能键(如delete, backspace), 不区分小键盘和主键盘的数字字符, 但实际测试这些都可以使用

使用on方法可以为某个元素或某类元素绑定单个事件或多个事件, 还可以是自定义事件

$("DOM中已经存在的某个元素或某类元素的标记").on(event, handler(eventObject)) (绑定一个事件和一个事件处理器函数)

$("DOM中已经存在的某个元素或某类元素的标记").on("event1 event2 event3 ...", handler(eventObject)) (多个事件绑定同一个事件处理器函数)

$("DOM中已经存在的某个元素或某类元素的标记").on({event1: handler1(eventObject1), event2: handler(eventObject2), event3: handler(eventObject3), ...}) (使用对象为多个事件绑定不同的事件处理器函数)

$("DOM中已经存在的某个元素或某类元素的标记").on(event, eventData, handler(eventObject)) 将数据传递到事件处理器函数中

$("DOM中已经存在的某个元素或某类元素的标记").on(event, selector, eventData, handler(eventObject)) (此方法中有一个selector参数可以指定事件冒泡到的元素位置, 在不指定该选择器的情况下, 事件会一直从DOM中已经存在的某个元素或某类元素的子元素, 当然也是用户所触发事件的某个元素开始向上冒泡到被选定的元素, 即this, 指定该selector参数后, 就会只冒泡到这个selector选择器部分, 不再往上触发冒泡事件, 当然一般来说, 这个seletor要是this的子元素, 否则设置selector就没有什么用了) (关于this和event.target, this始终指向当前绑定事件的元素, 而event.target指向实际触发事件的元素)

通过off方法可以移除on方法的事件绑定

$("DOM中已经存在的某个元素或某类元素的标记").off("event") (移除某个事件绑定)

$("DOM中已经存在的某个元素或某类元素的标记").off("event1 event2 event3 ...") (移除多个事件绑定)

$("DOM中已经存在的某个元素或某类元素的标记").off() (移除所有事件绑定)

事件对象的属性和方法

eventObject.type 获取元素的事件类型

eventObject.pageX和eventObject.pageY获取鼠标当前相对于页面的坐标,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

eventObject.preventDefault() 阻止浏览器的默认行为

eventObject.stopPropagation 阻止事件的冒泡

event.which 获取鼠标单击时, 单击的鼠标是哪个键

event.currentTarget 冒泡前的当前触发事件的DOM对象, 等同于this.

使用trigger方法自动触发相关事件, 即不需要用户参与交互的过程, 还可以自定以事件, 当然首先需要使用on或者bind方法去为元素绑定好相应的事件, 可以是自定义事件, 然后再规定在何种情况下, 去触发相应的事件或自定义事件

$("DOM中已经存在的某个元素或某类元素的标记").on(event, handler(eventObject))

$("DOM中已经存在的某个元素或某类元素的标记").trigger("event")

$("DOM中已经存在的某个元素或某类元素的标记").trigger("event", param1, param2, param3, ...) 可以向事件传递参数, 但事件处理器函数的第一个参数是eventObject, 因此参数传递从第二个开始, 即param1会被传递给eventObject的后一个参数

关于bind和on方法绑定自定义事件, on支持一些情况下的阻断冒泡, 而bind不支持

另外, trigger方法所触发的事件也会在DOM树上冒泡, 所以要阻止冒泡的话就要调用jQuery的return false或原生JS事件处理方法的eventObject.stopPropagation

使用triggerHandler方法来触发用户自定义的事件, 它与trigger方法相比, 阻断了冒泡机制, 只影响匹配到的第一个元素, 并且不会触发浏览器的默认行为, 举例, 当用户自定义了一个focus事件, 往文本框中填写值hello, world, 在触发这个事件时, 由于浏览器中的偶人fous事件已经有了对应的让该文本框获得焦点的处理, 可能就不会再按照用户自定义的这个过程来处理, 因此此时使用triggerHandler方法, 就能够阻止浏览器的默认行为, 而去调用用户定义的处理过程

$("DOM中已经存在的某个元素或某类元素的标记").triggerHandler("event", param1, param2, param3, ...)

4.jQuery动画篇

使用hide方法来对元素进行隐藏

$("DOM中已经存在的某个元素或某类元素的标记").hide() (直接隐藏, 无动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").hide("fast/slow" / number) (fast为200ms动画, slow为600ms动画, 也可以指定一个具体的数值)

$("DOM中已经存在的某个元素或某类元素的标记").hide(duration, complete) (duration是动画持续时间, complete是动画执行完成后所调用的回调函数)

$("DOM中已经存在的某个元素或某类元素的标记").hide({duration: number, complete: function}) (可以传递一个JS对象来设置相应属性参数)

使用show方法来对元素进行显示

$("DOM中已经存在的某个元素或某类元素的标记").show() (直接显示, 无动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").show("fast/slow" / number)

$("DOM中已经存在的某个元素或某类元素的标记").show(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").show({duration: number, complete: function})

使用toggle方法来对元素进行显示与隐藏的互斥切换

$("DOM中已经存在的某个元素或某类元素的标记").toggle() (直接显示, 无动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").toggle("fast/slow" / number)

$("DOM中已经存在的某个元素或某类元素的标记").toggle(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").toggle({duration: number, complete: function})

使用slideDown方法为元素绑定下拉动画效果

$("DOM中已经存在的某个元素或某类元素的标记").slideDown() (400ms的动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").slideDown("fast/slow" / number) (fast为200ms动画, slow为600ms动画, 也可以指定一个具体的数值)

$("DOM中已经存在的某个元素或某类元素的标记").slideDown(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").slideDown({duration: number, complete: function})

使用slideUp方法为元素绑定上卷动画

$("DOM中已经存在的某个元素或某类元素的标记").slideUp() (400ms的动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").slideUp("fast/slow" / number) (fast为200ms动画, slow为600ms动画, 也可以指定一个具体的数值)

$("DOM中已经存在的某个元素或某类元素的标记").slideUp(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").slideUp({duration: number, complete: function})

使用slideToggle方法为元素绑定上卷下拉切换动画

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle()

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle("fast/slow" / number)

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle({duration: number, complete: function})

使用fadeOut方法为元素绑定一个淡出动画

$("DOM中已经存在的某个元素或某类元素的标记").fadeOut() (400ms的动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").fadeOut("fast/slow" / number)

$("DOM中已经存在的某个元素或某类元素的标记").fadeOut(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").fadeOut({duration: number, complete: function})

使用fadeIn方法为元素绑定一个淡入动画

$("DOM中已经存在的某个元素或某类元素的标记").slideIn() (400ms的动画效果)

$("DOM中已经存在的某个元素或某类元素的标记").slideIn("fast/slow" / number)

$("DOM中已经存在的某个元素或某类元素的标记").slideIn(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").slideIn({duration: number, complete: function})

使用fadeToggle方法为元素绑定一个淡入淡出切换动画

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle()

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle("fast/slow" / number)

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle(duration, complete)

$("DOM中已经存在的某个元素或某类元素的标记").slideToggle({duration: number, complete: function})

使用fadeTo方法为元素绑定淡入或淡出要达到的透明度效果

$("DOM中已经存在的某个元素或某类元素的标记").slideDown(duration, opacity, callback) (duration和opacity两个参数必须给出, 回调函数callback可定义也可不定义)

使用hide, show和toggle方法是针对css属性的display为none来设置的

使用slideDown, slideUp和slideToggle方法是针对css属性的height为0来设置的

使用fadeOut, fadeIn和fadeToggle方法是针对css属性的opacity为0来设置的

使用animate方法来设置复杂动画

$("DOM中已经存在的某个元素或某类元素的标记").animate(properties, duration, easing, complete) (properties是必须参数, 为一个JS对象, 传递一系列的css属性键值对, 用于表示动画最终要达到的效果, duration为可选参数, 是动画执行的时间, 默认为400ms, easing是规定过渡使用哪种easing缓动函数, 有swing和linear等等, complete为动画结束后所执行的回调函数)

$("DOM中已经存在的某个元素或某类元素的标记").animate(properties, options) (传递两个JS对象作为参数, 第一个对象包含css样式属性, 第二个对象包含可选的持续时间duration,easing动画缓动函数, 默认为swing, 也可以使用specialEasing参数代理easing从而设置一个对象包含width和height或者left和top缓动函数, step规定每个动画每一步完成之后要执行的函数, progress每一次动画调用的时候都会执行这个回调函数, 是一个进度的概念, 以及动画结束的回调函数complete)

这里详细解释一下step属性, step参数为每一个动画所执行的回调函数, 类似于将整个动画分解到原子层的一步步动画, 它的回调函数包括两个参数, 第一个参数now为元素执行到当前动画的数值, 第二个参数fx, 为执行到当前动画的元素对象, 同理progress的第一个参数是一个对象, 第二个参数包含了当前动画所执行的进度(从0到1)

使用stop方法停止动画

$("DOM中已经存在的某个元素或某类元素的标记").stop() 停止执行当前的动画,如果元素的效果队列中若存在多个动画, 则会继续执行下一个动画

$("DOM中已经存在的某个元素或某类元素的标记").stop(true) 停止执行当前元素效果队列中的所有动画

$("DOM中已经存在的某个元素或某类元素的标记").stop(true, true) 停止执行当前元素的动画, 并且将该元素上的css属性值立即修改成动画的目标值

使用jQuery的each方法遍历数组和对象

$.each(Array, function(index, value))

$.each(Object, function(property, value))

$("DOM中已经存在的某个元素或某类元素的标记").each(function(index, value)) 遍历jQuery对象合集中的每一个DOM元素

使用jQuery的inArray判断给定的元素是否在数组当中, 若在, 则返回元素在数组中的索引位置, 从0开始, 若不在则返回-1

$.inArray(value, array, [fromIndex]) fronIndex规定查找的起始值, 默认从下标0开始

使用jQuery的trim方法去除字符串两端的空格, 制表符以及换行符等等, 空格在字符串中间不会被去除

$.trim(string)

使用get方法通过下标索引来获取jQuery对象合集中的某一个DOM元素

$("DOM中已经存在的某个元素或某类元素的标记").get(一个数字下标索引), 正值下标索引从0开始, 负值下标索引从-1开始

使用index方法通过提供一个DOM元素或者一个jQuery选择器来对给懂的元素返回对应的下标, 找不到就返回-1

$("DOM中已经存在的某个元素或某类元素的标记").index() (无参数提供的情况下, 则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置)

$("DOM中已经存在的某个元素或某类元素的标记").index(DOM元素或者jQuery选择器)