jQuery内容回顾思维导图模板_ProcessOn思维导图、流程图

基本内容

javascript类库

目的：简化javascript开发

作用：预封装很多对象和函数

特点

兼容各大浏览器

Web 2.0特性

高难度的富客户端页面

举例

jQuery

Prototype

Dojo

jQuery

是一个优秀的轻量级javascript类库

是由John Resig在2006年1月创建的开源项目

兼容CSS 3及各大浏览器

注意

jQuery 2.x版本不再支持IE 8及之前版本

使用步骤

在HTML页面中引入jQuery文件

使用jQuery的选择器定位HTML页面元素

使用jQuery提供的API方法完成需求

jQuery对象

DOM对象

通过DOM获取到的HTML元素就是DOM对象

jQuery对象

通过jQuery包装DOM对象后产生的对象

jQuery底层还是DOM对象

jQuery对象转换为DOM对象

使用get(index)方法

jQuery对象是类数组对象

DOM对象转换为jQuery对象

$(DOM对象)

约定

通过jQuery所得到的对象，使用“$”符号标识

在jQuery中，“$”符号等同于“jQuery”

选择器

基本内容

用法

类似于CSS选择器

作用

定位HTML页面元素

特点

将HTML页面中的内容与行为分离

注意

jQuery选择器是jQuery内容的根本

优势

简洁的写法

兼容CSS样式

完善的处理机制

Ajax操作

链式操作

隐式迭代

子主题

工厂函数

写法

$( )

作用

使用选择器

包装DOM

基本选择器

ID选择器

用法

$("#id")

说明

返回HTML页面中id属性值的元素

类选择器

用法

$(".className")

说明

返回HTML页面中class属性值为className的元素

元素选择器

用法

$("elementName")

说明

返回HTML页面中元素名为elementName的元素

通配符选择器

用法

$("*")

说明

返回HTML页面中所有元素

合并选择器

用法

$("selector1, selector2, ...")

说明

返回每个选择器匹配的元素合集

注意

每一个选择器之间使用“,”隔开

该选择器返回的结果为并集

层次选择器

祖先与后代选择器

用法

$("selector1 selector2")

说明

返回selector1元素中后代为selector2的元素

父与子选择器

用法

$("selector1 > selector2")

说明

返回selector1元素中子元素为selector2的元素

下一个兄弟选择器

用法

$("selector1 + selector2")

说明

返回selector1元素的下一个兄弟元素为selector2的元素

注意

该选择器返回的是指定一个元素，但格式为类数组

后面所有兄弟选择器

用法

$("selector1 ~ selector2")

说明

返回selector1元素后面为selector2的兄弟元素

注意

该选择器返回的是指定元素的后面指定元素

过滤选择器

基本内容

作用

通过指定过滤规则过滤指定范围内的元素

特点

过滤选择器的前缀为“:”

基本过滤选择器

:first

返回第一个元素

:last

返回最后一个元素

:even

返回索引值为偶数的元素

:odd

返回索引值为奇数的元素

:eq(index)

返回索引值为index的元素

:gt(index)

返回索引值大于index的元素

:lt(index)

返回索引值小于index的元素

:not(selector)

返回不包含指定选择器匹配的元素

内容过滤选择器

:contains(text)

返回文本内容包含text的元素

:empty

返回不包含子元素或文本元素的元素

:parent

返回包含子元素或文本元素的元素

:has(selector)

返回包含指定选择器匹配的元素的元素

可见性过滤选择器

:hidden

返回不可见的元素

:visible

返回可见的元素

属性过滤选择器

[attribute]

返回具有attribute属性的元素

[attribute=value]

返回具有attribute等于value的元素

[attribute!=value]

说明

返回具有attribute不等于value的元素

注意

该选择器包含没有该属性的元素

[attribute^=value]

返回具有attribute是以value开始的元素

[attirbute$=valule]

返回具有attribute是以value结束的元素

[attribute*=value]

返回具有attribute包含value的元素

[selector1][selector2]...

说明

返回同时匹配所有属性过滤选择器的元素

注意

该选择器的结果为交集

子元素过滤选择器

:nth-child(index)

说明

返回指定元素的第index个子元素

注意

index值是从 1 开始

:first-child

返回指定元素的第一个子元素

:last-child

返回指定元素的最后一个子元素

:only-child

如果指定元素只有一个子元素，则返回该子元素

注意

子元素过滤选择器的用法，必须要在其前面增加空格

子元素过滤选择器可以使用层级选择器+基本过滤选择器完成

表单对象属性过滤选择器

:enabled

返回可用的元素

:disabled

返回不可用的元素

:checked

返回单选框或复选框被选中的元素

:selected

返回下拉列表中被选中的元素

表单选择器

:input

返回input、select、textarea和button元素

:text

返回单行文本框

:password

返回密码框

:radio

返回单选框

:checkbox

返回复选框

:submit

返回提交按钮

:image

返回图像按钮

:reset

返回重置按钮

:button

返回所有按钮

:file

返回上传域

DOM操作

基本操作

html()

读取或修改指定元素的HTML内容

类似于innerHTML属性的作用

text()

读取或修改指定元素的文本内容

类似于textContent属性的作用

attr()

读取或修改指定元素的属性值

removeAttr()

删除指定元素的属性值

val()

读取或修改指定元素的value属性值

样式操作

attr("class", className)

读取或修改指定元素的class属性值

addClass(className)

为指定元素追加样式

removeClass()

删除指定元素的所有样式

removeClass(className)

删除指定元素的指定样式

toggleClass(className)

在没有样式与指定样式之间切换

hasClass(className)

判断是否包含指定className样式

返回Boolean值

css()

css(attrName)

获取指定属性名的值

css(attrName, attrValue)

只能设置一个CSS属性

css( {key : value} )

可以设置多个CSS属性

遍历操作

children()

返回指定元素的所有子元素

children(selector)

返回指定元素的指定selector的所有子元素

next()

返回指定元素的下一个兄弟元素

next(selector)

返回指定元素的下一个指定selector的兄弟元素

prev()

返回指定元素的上一个兄弟元素

prev(selector)

返回指定元素的上一个指定selector的兄弟元素

siblings()

返回指定元素的所有兄弟元素

siblings(selector)

返回指定元素的所有指定selector的兄弟元素

注意

所有兄弟元素包含前面和后面的元素

find(selector)

返回指定元素的指定selector的后代元素

parent()

返回指定元素的父级元素

创建节点

通用方式

$(HTML代码)

节点方式

元素节点

$("")

文本节点

text(textContent)

属性节点

attr(attrName, attrValue)

插入节点

内部插入

append()

append后面的元素插入在append前面的元素的后面

prepend()

prepend后面的元素插入在prepend前面的元素的前面

appendTo()

appendTo前面的元素插入在appendTo后面的元素的后面

prependTo()

prependTo前面的元素插入在prependTo后面的元素的前面

外部插入

after()

after后面的元素插入在after前面的元素的后面

before()

before后面的元素插入在before前面的元素的前面

insertAfter()

insertAfter前面的元素插入在insertAfter后面的元素的后面

insertBefore()

insertBefore前面的元素插入在insertBefore后面的元素的前面

删除节点

remove()

删除自身元素及后代元素

empty()

删除后代元素，但保留自身元素

替换节点

replaceWith()

replaceWith前面的元素被替换为replaceWith后面的元素

replaceAll()

就是颠倒了的replaceWith()

复制节点

jQuery

clone(Boolean)

参数表示是否复制事件

DOM

cloneNode(Boolean)

参数表示是否复制后代元素

事件

页面加载

ready()

用法

$(document).ready(function(){})

$().ready(function(){})

$(function(){})

作用

类似于window.onload的作用

ready与onload的区别

ready()

具有简写语法

等待DOM元素加载完毕后再执行该方法

一个HTML页面允许编写多个ready()

onload

没有简写语法

等待HTML页面内所有内容加载完毕后再执行

一个HTML页面允许编写一个onload

与其他JS库共存

先引入jQuery

将“$”符号的使用权移交

jQuery.noConflict()

jQuery代码改写

不能使用“$”符号，而使用jQuery

jQuery( function($){ } )

( function($){ } )( jQuery )

后引入jQuery

不能使用“$”符号，而使用jQuery

事件绑定与解绑

单事件绑定与解绑

bind(事件名称, function( event ){ } )

unbind()

解绑所有事件

unbind(事件名称)

解绑指定事件

多事件绑定与解绑

bind(" 事件名称1 事件名称2 ... ", function( event ){ } )

unbind()

解绑所有事件

unbind(事件名称1)

解绑指定事件1

unbind(" 事件名称1 事件名称2 ")

解绑指定多事件

简化事件方式

元素.事件名称( function( event ){ } )

事件冒泡

子元素的事件会依次抛给父元素

取消事件冒泡

event.stopPropagation（）

事件对象

target

事件源对象

x/pageX/clientX/screenX/offsetX

鼠标的X坐标轴

y/pageY/clientY/screenY/offsetY

鼠标的Y坐标轴

keyCode/charCode

键盘按键对应的值

returnValue

是否阻止事件默认行为

模拟操作

trigger(事件名称)

动画效果

显示与隐藏

基本效果

显示

show()

无动画效果

show( speed )

有动画效果

speed表示动画时长

隐藏

hide()

无动画效果

hide( speed )

有动画效果

speed表示动画时长或速度

滑动效果

slideDown( speed )

向下滑动

slideUp( speed )

向上滑动

淡入淡出

fadeIn( speed )

淡入

fadeOut( speed )

淡出

自定义动画

animate(params, [duration], [easing], [callback])

params

一组包含作为动画的属性

duration

设置动画时长或速度

callback

回调函数

animate(params, options)

params

一组包含作为动画的属性

options

duration

设置动画时长或速度

complete

回调函数

queue

设置此动画是否进入动画队列

排队与并发

排队效果

说明

通过多次调用animate()方法，按照调用的先后顺序执行

用法

元素.animate( ).animate( ).animate( )...

并发效果

说明

设置多个动画属性，并同时被执行

用法

元素.animate( { attrName1 : attrValue1, attrName2 : attrValue2, ... }, duration )

元素.animate( { attrName1 : attrValue1 }, duration ).animate( { attrName2 : attrValue2 }, { duration, true } ).animate( )...

类数组操作

类数组

jQuery对象封装了多个DOM对象

jQuery提供了独特的类似于数组的操作

属性

length

获取当前jQuery对象所封装的DOM对象的数量

方法

eq( index )

返回当前jQuery对象中索引值为index的DOM对象

index( obj )

返回DOM对象或jQuery对象在当前类数组中的索引值

get( index )

返回当前jQuery对象中索引值为index的DOM对象

遍历

$( selector ).each( function( index, domEle ){ } )

说明

获取元素集进行遍历

callback

index

索引值

domEle

DOM对象

$.each( obj, function( index, domEle ){ } )

插件机制