jQuery知识框架总结思维导图模板_ProcessOn思维导图、流程图

jQuery描述

主要学习如何来使用jQuery操作DOM,当中主要封装的是API方法，所以要加（）

使用步骤

1、引包

2、入口函数

原生js的入口函数window.onload，是在所有的文件资源加载完成后才执行（页面文档，外部的js文件、css文件、图片等）且只能出现一次，重复出现会覆盖

jQuery的入口函数，可以出现任意多次，不会覆盖。在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作dom了，不用等所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行

jQuery对象是一个数组，数组中包含着原生js中的dom对象

js命名规范容许出现的字符有：数字，字符，下划线，$

js命名规范容许作为变量名开头的字符有：字符，下划线，$

$=jQuery

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

2、$(function(){})

3、$(window).ready(function(){}) 所有加载完成后，再执行

3、功能实现代码（事件处理）

特点

1、链式编程

2、隐式迭代

JS和jquery的相互转换

js转成jquery

$(js对象)

jquery转成js

jquery对象[索引值]

jquery对象.get(索引值)

选择器

基本选择器

id选择器 #

类选择器 .

标签选择器

通配符选择器 *

层级选择器

并集选择器，

后代选择器空格

子代选择器>

基本过滤选择器

:odd 奇数

:even 偶数

:eq(index)

筛选选择器

.find() 后代查找

.parent() 查父元素

.children() 子代查找

.siblings() 所有的兄弟元素

.eq(index) 相等查找

.prev() 查找前一个兄弟元素

.next() 查找后一个兄弟元素

操作dom

样式操作

样式属性操作 .css()

设置样式属性

.css(属性，值)

.css(json)

获取样式属性

.css(属性)

类操作

addClass（）添加类

removeClass（）删除类

hasClass（）判断类是否存在

toggleClass（）切换类

动画操作

隐藏显示动画

通过改变宽高和不透明度实现的---display：none

show（）显示动画

1、无参，默认是400ms

2、带参：毫秒值

3、带参：fast normal slow

4、带参（毫秒值，回调函数）

hide（）隐藏动画

toggle（）切换动画

滑入滑出动画

通过高度的改变实现的---display：none

slideDown（）滑入

slideUp（）滑出

slideTaggle（）切换

淡入淡出动画

通过不透明度的改变实现---display：none

fadeIn（）淡入

fadeOut（）淡出

fadeToggle（）切换

fadeTo（）

参数1：时长，必须带有

参数2：透明度0-1

参数3：回调函数

自定义动画

animate（json，speed，callback）

停止动画

stop（）

参数1：后续动画是否要执行

true：后续动画不执行

false：后续动画执行

参数2：当前动画是否执行

true：立即执行完成当前动画

false：立即停止当前动画

默认参数都为false

节点操作

动态创建元素

$()

.html()

添加元素

append（）在盒子的最末尾添加一个元素

.appendTo（）

.prepend（）在盒子最前面添加元素

.prependTo（）

after（）放在元素之后

before（）放在元素之前

清空元素

empty（）

.html（“”）

删除元素

remove（）

复制元素

.clone（）

属性操作

.attr（属性，值）设置属性

.attr（属性）获取属性

.remove（属性）移除属性

注意：checked，selected，disabled要使用.prop（）方法，prop方法通常用来影响dom元素的动态状态，而不是改变HTML属性

实例：input.prop("checked",true) $("input:checkbox") $("input:checked")

值和内容

.val（）

获取或设置表单元素input,select,textarea的value值

.text（）

获取或设置双闭合标签的中的文本值，不识别标签

.html（）

获取或设置双闭合标签的文本值，识别标签

尺寸位置操作

高度和宽度操作

高度

node.height()

获取和设置高度，返回值是number类型

宽度

node.width()

获取和设置宽度，返回值是number类型

坐标值操作

offset（）

获取或设置元素相对于文档的位置

返回值为json类型：{left:num, top:num}

设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

position()

获取相对于最近的定位的父元素的位置

只能获取，不能设置

返回值为json类型：{left:num, top:num}

获取的就是定位值，和margin/padding无关

scrollTop()

获取或设置元素垂直方向滚动的位置

scrollLeft()

获取或设置元素水平方向滚动的位置

事件机制

事件绑定

简单事件绑定

click(handler) 单击事件 blur(handler) 失去焦点事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件 dbclick(handler) 双击事件 change(handler) 改变事件，如：文本框值改变，下来列表值改变等 focus(handler) 获得焦点事件 keydown(handler) 键盘按下事件

不会出现层叠

bind事件

bind(事件类型，事件处理程序)

可以同时绑定多个事件

delegate事件

$(.parentbox).delegate(后代元素，事件，事件驱动程序)

可以同时绑定多个事件

支持动态创建的元素

on事件

$(.parentbox).on(多个事件空格隔开，后代元素，json，事件处理程序)

json中的属性数据，事件触发时使用 event.data.属性调用

事件解绑