JQuery 思维导图模板_ProcessOn思维导图、流程图

背景知识

目的：简化JavaScript开发

特点

写得少，做得多（Write less Do More）

兼容各大浏览器（Chrome、Firefox、Safari、IE8.0）

能完成较高难度的富客户端页面

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

历史

曾经是一个优秀的轻量级JavaScript类库

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

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

使用步骤

在head中放置单独的JS脚本

在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"

若冲突可以用语义释放

var jQ = jQuery.noConflict();

选择器

基本内容

用法

类似于CSS选择器

作用

定位HTML页面元素

特点

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

注意

JQuery选择器是JQuery内容的根本

优势

简介的写法

兼容CSS样式

完善的处理机制

AJAX操作

链式操作

工厂函数

写法

$0

作用

使用选择器

包装DOM

基本选择器

id

用法

$("#test").hide()

说明

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

class

用法

$(".test").hide()

说明

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

元素（标签）

用法

$("p").hide()

说明

返回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开始的元素

[attribute$=value]

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

[attribute*=value]

返回具有attribute包含value的元素

[selector1][selector2]...

说明

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

注意

该选择器的结果为交集

表单对象属性过滤

:enabled

返回可用的元素

:disabled

返回不可用的元素

:checked

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

:selected

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

表单选择器

:input

返回input、select、textarea和button元素

:text

返回单行文本框

:password

返回密码框

:radio

返回单选框

:checkbox

返回复选框

:submit

返回提交按钮

:image

返回图像按钮

:reset

返回重置按钮

:button

返回所有按钮

:file

返回上传域

DOM

基本操作

内容操作

text()

用法

$("#test").text();

$("text1").text(Hello world!);

说明

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

类似于textContent属性的作用

html()

用法

$("#test").html();

$("#test2").html("<b>Hello world!</b>");

说明

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

类似于innerHTML属性的作用

val()

用法

$("#test").val();

$("#test3").val("Dolly Duck");

说明

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

属性操作

attr()

用法

$("#test").attr("href");

$("#w3s").attr("href","https://www.baidu.com");

说明

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

removeAttr()

用法

$("#test").removeAttr("href");

说明

删除指定元素的属性值

样式操作

$("p").css({"background-color":"yellow","font-size":"200%"})

attr

语法

attr("class",className)

说明

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

addClass

语法

addClass(className)

说明

为指定元素追加样式

removeClass

语法

removeClass(className)

说明

删除指定元素的指定样式

注意

removeClass()
删除指定元素的所有样式

toggleClass

语法

toggleClass(className)

说明

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

hasClass

语法

hasClass(calssName)

说明

判断是否包含ClassName样式（返回Boolean指）

css

语法1

css(attrName)

说明：只能设置一个CSS属性

语法2

css(attrName,attrValue)

说明：只能设置一个CSS属性

语法3

css( {key:value} )

说明：可以设置多个CSS属性

节点操作

创建节点

通用方式

$(HTML代码)

节点方式

元素节点

$("")

文本节点

text(textContent)

属性节点

attr(attrName,attrValue)

插入节点

$("img").after("Some text after");

$("img").before("Some text before");

append()

用法

$("p").append("Some appended text.");

说明

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

prepend()

用法

$("p").prepend("Some prepended text.");

说明

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

appendTo()

用法

$("p").appendTo("Some appendTo text.");

说明

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

prependTo()

用法

$("p").prependTo("Some prependTo text.");

说明

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

删除元素

$("p").remove(".italic");

删除自身元素及后代元素

$("#div").empty()

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

遍历

祖先

$("span").parent();

返回指定元素的父级元素（一个）

$("span").parents("ul");

返回指定元素的所有父级元素（多个）

$("span").parentsUntil("div");

返回span的父级元素（包括本身），截止到div标签（中间的）

后代

$("div").children();

返回指定元素的直接子元素（一级）

$("div").children("p.1");

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

$("div").find("span");

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

同胞

上一个同胞

prev()

返回上一个兄弟元素

prevAll()

返回上面所有的兄弟元素

下一个同胞

$("h2").next();

返回下一个兄弟元素

$("h2").nextAll();

返回下线全部兄弟元素

$("h2").nextUntil("h6")

返回下一个兄弟元素直到h6

上下同胞

$("h2").siblings();

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

$("h2").siblings("p");

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

过滤

$("div p")first();

$("div p").last();

$("p")eq(1);

$("p").filter(".intro");

$("p").not(".intro");

事件

鼠标事件

click

dbclick

mouseenter

mouseleave

mousemove

hover

键盘事件

keydown

keyup

keypress

其他事件

focus

blur

change

submit

页面加载

ready()

用法

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

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

$(function(){})

作用

类似于JS的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(事件名称, fucntion( event ){ } )

unbind()

解绑所有事件

unbind(事件名称)

解绑指定事件名称

多事件绑定与解绑

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

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

解绑指定多事件

事件冒泡

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

取消事件冒泡

event.stopPropagation ()

return false;

事件对象

target

事件源对象

event.target

等同于取元素第一个[0]

x/pageX/clientX/screenX/offsetX

鼠标的X坐标轴

y/pageY/clientY/screenY/offsetY

鼠标的Y坐标轴

keyCode/charCode

键盘按键对应的值

returnValue

是否阻止事件默认行为

模拟操作

trigger(事件名称)

动画

隐藏/显示

显示show

示例

$(selector).show(speed,callback);

说明

显示选择器元素，speed表示动画时长，callback回调方法

隐藏hide

示例

$(selector).hide(speed,callback);

说明

隐藏选择器元素，speed表示动画时长，callback回调方法

淡入淡出

淡入fadeIn

$(selector).fadeIn(speed,callback);

淡出fadeOut

$(selector).fadeOut(speed,callback);

复合方法fadeToggle

示例

$(selector),fadeToggle(speed,callback);

说明

可以在 fadeIn() 与 fadeOut() 方法之间进行切换

淡出到fadeTo

示例

$(selector).fadeTo(speed,opacity,callback);

说明

允许渐变为给定的不透明度

滑动

向下滑动（slideDown）

$(selector).slideDown(speed,callback);

向上滑动（slideUp）

$(selector).slideUp(speed,callback);

复合方法（slideToggle）

$(selector).slideToggle(speed,callback);

动画

$(selector).animate({params},speed,callback);

params

一组包含作为动画的属性

speed

设置动画时长或者速度

callback

Callback 函数在当前动画 100% 完成之后执行

队列动画功能

用法

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

说明

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

停止stop

示例

$(selector).stop(stopAll,goToEnd);

说明

在动画或效果完成前对它们进行停止

chaining链式

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

AJAX（异步加载）

背景

前后端分离

数据交互（AJAX+JSON）

前端

手机版

安卓

苹果

iPad

后端

请求的服务器是一样的

产生数据

什么是AJAX

全名

Asynchronous JavaScript and XML

ajax使用异步的方式从浏览器端发送请求，请求服务器资源，并获取到内容的一种技术

同步与异步

同步

网址会改变，页面会被重新加载

缺点对用户不友好

异步

网址不会改变，页面不会重新加载，可以拿到新的数据

原生JS+AJAX

JQuery+AJAX语法介绍

$get()

代码

各参数说明

url

请求的网络地址

data

请求的参数

支持类型

对象Object

{'a':"b"}

字符串String

a=1&b=2

success

请求成功的回调方法

function(){}

datatype

请求数据类型

支持值

json

xml

html

使用场景：从服务端拿数据

$.post()

代码

各参数说明与get一致

url

请求的网络地址

data

请求的参数

支持类型

对象Object

{'a':"b"}

字符串String

a=1&b=2

success

请求成功的回调方法

function(){}

datatype

请求数据类型

支持值

json

xml

html

使用场景：往服务器存储或修改数据

$.getJSON()

与get一致

使用场景：明确返回的数据就是JSON

$.ajax()

代码

参数

async

true同步(默认)

false异步

type

用于区分请求的类型

支持类型

get(获取)

post(修改)

delete(删除)

put(添加)

url

请求的地址，绝对网络地址，也可以写相对路径

data

请求的参数，有些地址没有参数

支持类型

字符串类型a=1&b=2

对象类型{a:1,b:2}

dataType

JSON

XML

Text

HTML（默认返回）

success

请求成功的回调函数，当请求成功后处理的事件都写在这里

error

请求失败的回调函数，当请求失败后处理的事件都写在这里

注意问题

跨域

需要服务端进行解决

代码如下

其他常用操作

属性

length

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

方法

eq( index )

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

index( obj )

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

get( index )

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

遍历

each

用法

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

index

索引值

domEle

DOM对象

说明

获取元素进行遍历