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

核心

write less do more ：写得少做得多

入口函数，区分跟window，onload加载的区别

jsDOM对象和jquery对象的转化

将js对象转换成jquery对象

$(js对象)

将jquery对象转化成js对象

$('.box')[0]

大家心里一定要明白jquery是一个库，它是有js封装过来的，所以js是包含jquery的

jquery内部遍历

jquery每次调用完方法之后，会返回一个jquery对象，所以我们可以使用链式编程

jquery是一个高效，精简并且功能丰富的JavaScript工具库，他提供的API易于使用且兼容众多，如html文档遍历和操作、事件处理、动画和ajax操作更加简单

选择器

jquery的基本选择器

高级选择器

后代选择器（空格表示）

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

子代选择器（>）

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

基本过滤选择器

:eq(index)

index是从0开始的一个数字，选择序号为index的元素

:gt(index)

选择序号大于index的元素

:lt(index)

选择小于index的元素

:odd

选择所有序号为技术的元素

:even

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

:first

选择匹配第一个元素

:last

选择匹配的最后一个元素

筛选方法

find(selector)

查找指定元素的所有后代元素（包括子子孙孙）

children()

查找指定元素的直接元素（亲儿子）

siblings()

查找所有的兄弟元素（不包括自己）

使用它做选项卡

parent()

查找父级元素（亲的）

eg(index)

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

动画

普通动画

show()

无参数，表示让指定的元素直接显示出来，其实这个方法底层就是通过display属性实现的

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

hide()

根show反之

开关式的显示和隐藏动画

toggle(3000,fn)

滑入和滑出，卷帘门效果

slideDown()

下拉动画，显示

slideUP()

上拉动画，隐藏

slideToggle()

开关式切换

淡入淡出

fadeIn(3000,callback)

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

fadeOut(3000,callback)

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

fadeToggle(3000,callback)

通过改变透明度，切换匹配元素的显示或隐藏状态

自定义动画

语法：$(selector).animate(params),speed,callback

第一个参数表示：要执行动画的CSS属性（必选）

第二个参数表示：执行动画时长（可选）

第三个参数表示：动画执行完后，立即执行的回调函数

停止动画

语法：$(select).stop(true,false);默认是(false,false)

记得：玩动画要先停止动画在开启动画

html值的操作

html()

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

如果有参数表示设置值，如果没有参数表示获取值，下面方法一样效果

text()

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

val()

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

html标签属性操作

attr(key,value)

设置单个属性值

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

对标签设置多个属性值

attr(key)

获取属性值

该操作只对标签中属性操作，比如id，src，href，title等等

removeAttr()

删除某个属性

html对象属性操作

prop()

对于JSDOM对象属性操作，比如id，src，href，title等等

removeAttr()

移除JSDOM对象属性

jquery的事件

加载DOM

.ready()

将函数绑定到文档的就绪事件（当文档完成加载时）

jquery事件的绑定

.bind(type,[data],fn)

移除事件

.unbind(type,fn)

合成事件

hover事件

鼠标悬停事件.hover(handlerIn,handlerOut)

事件对象的常见属性

e.type

获取事件的类型

e.target

获取事件发生的DOM对象

e.pageX和e.pageY

获取到光标相对于页面的x坐标和y的坐标

e.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘的事件中获取键盘的按键，了解

事件冒泡

阻止事件冒泡

e.stopPropagation()方法

注意

1.return false在jquery中是既阻止事件冒泡又阻止默认行为

2.jquery不支持事件捕获

阻止默认行为

e.preventDefault()方法

鼠标事件

click

鼠标单击触发事件，参数可选（data，fn）

dbclick

双击触发，同上

mousedown（）/up()

鼠标按下弹起触发事件

mouseover/out()

鼠标移入移出事件

鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件

mouseenter()/leave()

鼠标进入/离开触发事件*

鼠标指针只在穿过/离开被选元素触发事件

focus()/blur()

鼠标聚焦/失去焦点触发事件（不支持冒泡）

keydown/up()

键盘按键按下/弹起触发

表单事件

change()

表单元素发生改变时触发事件

此事件仅限于<input>元素，<textarea>框和<select>元素

对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件，但对其他元素类型，事件将延迟到元素失去焦点

select()

文件元素发生改变时触发事件

此事件仅限于input type类型为text和textarea表单元素

submit()

表单元素发生改变时触发事件

form表单 有默认的submit行为，当对input type=submit按钮进行点击的时候会触发form的默认action行为，此时可以调用jquery的submit方法通过e.preventDefault()来阻止默认时间，这样我们就能动态的跟服务端来发送数据了

DOM操作

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

父.append(子)

子.appendTo(父)

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

prepend

prependTo

兄弟之间

兄弟.after（要插入的兄弟）

要插入的兄弟.insertAfter(兄弟)

before

inserBefore

替换操作

$(selector).replaceWith(content);

replacrAll：替换所有

$('<p>哈哈哈</p>').replaceAll('h2');

删除操作

remove

删除节点后，事件也删除

detach

删除节点后，事件会保留

empty

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

ajax技术

对类的操作

addClass

removeClass

位置信息