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

对类的操作

addClass

removeClass

toggleClass

DOM操作

三步走

1.获取事件源

2.事件

3.事件驱动

父子之间

插入操作,插入到子元素的最后一个   --父子之间

父.append(子)

子.appendTo父()

插入操作, 插入到父元素的第一个元素

prepend

prependTo

兄弟之间

兄弟.after(要插入的兄弟元素)

要插入的兄弟元素.inserAfter(兄弟)

before

inserBefore

修改操作

$(selector).replaceWith(content);

replaceAll  替换所有

$('哈哈哈').replaceAll('h2');

删除操作

remove

删除节点后,事件也会删除

detach

删除节点后,事件会保留

empty

清空选中元素中所有的子元素

位置信息

width()

获取和设置宽度

height()

获取和设置高度

innerWidth()

获取内部宽,但不包括border

innerHeight()

outerWidth()

获取外部宽,包含所有

outerHeight()

offset()

获取(第一个元素)和设置元素的当前坐标

position()

获取匹配元素中的第一个元素的当前坐标

scrollLeft()

获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）

设置每个匹配元素的水平方向滚动条位置

scrollTop

获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）

设置每个匹配元素的垂直方向滚动条位置

对样式的操作

获取 : css('color')

设置 :  css('font-size','30');

设置多个 : css({键值对})

核心

Write less Do More  写的少做的多

入口函数 ,区分和 window.onload 加载的区别

$(document).ready(fn)

$(function(){})

jquery的入口函数和window.onload()区别

执行的时机不同，jQuery的入口，一旦我dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成；window.onload 的是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

jQuery入口函数可以书写多次 window.onload只能书写一次

js对象和jQuery对象的转化

将js对象转化成jQuery对象

$(js对象)

将jQuery对象转化成js对象

$(".box")[0]

jQuery是一个库,是由js封装过来的,所有js事包含jQuery的

选择器

基本选择器

ID选择器(#)

作用:选择ID为指定的第一个元素

类选择器(.)

作用 : 选择具有指定class类名的所有元素

标签选择器 (element)

作用 : 选择标签名为指定值得所有元素

通配符选择器 (*)

作用 : 选择所有元素

层级选择器

后代选择器  (空格表示)

作用 : 选择所有的后代元素

子代选择器  (>)

作用 : 选择所有的子代元素

基本过滤选择器

:eq(index)

index是从0开始的一个数字,选择序号是index的元素,选择第一个匹配的元素

$("li:eq(1)")

:gt(index)

选择序号大于index的元素

:lt(index)

选择小于index的元素

:odd

选择所有序号为奇数的元素

:even

选择所有序号为偶数的元素

:first

选择匹配第一个元素

:last

选择匹配的最后一个元素

筛选方法

find(selector)

查找指定元素的所有后代元素(包括孙子,重孙子.....)

$("#box").find("p")

children()

查找指定元素的直接子元素(亲儿子)

siblings()

查找所有兄弟元素(不包括自己)

使用它做选项卡

parent()

查找父元素(亲的)

eq(index)

查找指定元素的第index元素,index是索引

动画

普通动画(显示/隐藏)

show()

无参数 : 表示让指定的元素直接显示出来,(这个方法底层就是通过display:block,实现的)

show(2000) : 有参数,通过控制元素的宽高,透明度,display属性,逐渐显示,2秒后显示完毕

hide()

跟show() 相反

开关式的显示隐藏动画

toggle(3000,fn)

滑入/滑出,卷帘门效果

slideDown()

下拉动画,显示

slideUp()

上拉动画,隐藏

slideToggle()

开关式切换

淡入/淡出

fadeln(3000,callback)

让元素以淡淡的进入视线的方式展示出来

fadeOut(3000,callback)

让元素以渐渐消失的方式隐藏起来

fadeToggle(3000,callback)

开关式:通过改变透明度,切换匹配元素的显示或隐藏状态

自定义动画

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

第一个参数 : 表示执行动画的css属性(必选)

第二个参数 : 表示执行动画的时长(可选)

第三个参数 : 表示动画执行完毕后,立即执行的回调函数(可选)

停止动画

$(selector).stop(true,false);   默认是(false,false)

注意 : 玩动画,先停止动画,在开启动画

html值得操作

html()

innerHTML实现,对文本和标签进行渲染

如果有参数表示设置值, 如果没有参数表示获取值

text()

innerText实现,只对文本进行渲染

如果有参数表示设置值, 如果没有参数表示获取值

val()

value的实现,只对标签中有value属性的有效,比如 input ....

如果有参数表示设置值, 如果没有参数表示获取值

比如 : img的属性   :   src="./1.png"                                 key=src      value=1.png

html 标签属性操作

attr(key,value)

设置单个属性值

attr({key1:value,key2:value2})

对标签设置多个属性值

attr(key)

获取属性值

removeAttr()

删除某个属性

该操作只对标签中的属性操作,比如 ID , src , href , title.....

html 对象属性操作

prop()

对JS DOM对象属性操作,比如单选框中checked属性的设置

removeProp()

移除JSDOM对象属性

jQuery的事件

ajax 技术

jQuery的ajax技术是底层的XMLHttpRequest()对象封装过来的

1. 创建XHR对象  var xhr = new XMLHttpRequest()

2. 打开请求地址: open(请求方式,url,true)

请求方式必须大写,GET或者POST

url : 表示请求的api接口地址

true : 默认  表示异步

3. send() 发送请求体的数据,如果是get请求,拼接到url上. 如果是post请求,那么会在send()方法中当做实参传输

4. xhr.onreadyStateChange()

状态机方法

readyState

0

为初始化 : 对象已经建立,单位初始化,open方法还未调用

1

初始化 : 对象已经建立,但是还未调用send()方法发送请求

2

发送数据 : send 方法已经调用,但HTTP头未知

3

数据传输中 : 已经接受部分数据,但响应不完全

4

完成 : 数据接受完成,此时才可以获取完整的返回数据

responseText

接收响应的文本内容

jQuery的ajax方法

get请求

$.ajax({   url:'api接口地址',   type:'get',   dataDype:'json',   success:function(data){   },   error:function(err){   } })

post请求

$.ajax({    url:'api接口地址',    type:'post',    data:{name:'张三'},    dataType:'json',    success:function(data){    },    error:function(err){    } })