jQuery快速开发

1、jQuery概述

简单理解：就是一个快速、简洁的JavaScript库，为了快速方便的操作DOM，对原生JavaScript进行封装存放。

2、jQuery基本使用

2.1 DOM对象和jQuery对象

1. 用原生JS获取来的对象就是DOM对象
2. jQuery方法获取的元素就是jQuery对象
3. jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

2.2 DOM与jQuery的转换

1. DOM对象转换为jQuery对象
   $(‘选择器’）
2. jQuery对象转换为DOM对象
   $(’选择器‘)[index]——index是索引号
   $(‘选择器’).get(index)——index是索引号

3、jQuery常用API

3.1 jQuery选择器

1. jQuery基础选择器

格式：$(“选择器”)

名称	用法
ID选择器	$("#id")：获取指定ID的元素
全选选择器	$("*")：匹配所有元素
类选择器	$(".class")：获取同一类class的元素
标签选择器	$(“div”)：获取同一类标签的所有元素
并集选择器	$(“div,p,li”)：选取多个元素
交集选择器	$(“li.current”)：交集元素

2. jQuery层级选择器

名称	用法
子代选择器	$(“ul>li”)：使用>号，获取亲儿子层级的元素，并不会获取子孙层级的元素
后代选择器	$(“ul li”)：使用空格，获取ul下的所有li元素，包括子孙层级等

3. 隐式迭代（重点）

理解：把匹配的所有元素内部进行遍历循环（类似for），给每一个元素执行相应的方法。
例如：$(‘div’).css(‘属性’,‘值’)

4. jQuery筛选选择器

语法	用法
:first	$(“li:first”)：获取第一个li元素
:last	$(“li:last”)：获取最后一个li元素
:eq(index)	$(“li:eq(2)”)：获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)：获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)：获取到的li元素中，选择索引号为偶数的元素

5. jQuery筛选方法（重点）

语法	用法
parent()	$(“li”).parent()：查找父级
children(selector)	$(“ul”).children(“li”)：相当于 $(“ul>li”)，最近一级
find(selector)	$(“ul”).find(“li”)：相当于 $(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings(“li”)：查找兄弟节点，不包括自身本身
nextAll([expr])	$(".first").nextAll()：查找当前元素元素之后所有的同辈元素
prevAll([expr])	$(".last").prevAll()：查找当前元素之前所i有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)：检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)：相当于 $(“li:eq(2)”)，index从0开始

3.2 jQuery样式操作

1. 操作css方法

jQuery可以使用css方法来修改简单元素的样式；也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值
   例如： $(this).css(“color”);
2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
   例如：$(this).css(“color”,“red”);
3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
   例如：$(this).css({“color”:“white”,“font-size”:“20px”});

2. 设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类
   例如：$(“div”).addClass(“current”);
2. 移除类
   例如：$(“div”).removeClass(“current”);
3. 切换类
   例如：$(“div”).toggleClass(“current”);

3. 类操作与className区别

1. 原生JS中className会覆盖元素原先里面的类名；
2. jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

3.3 jQuery效果

1. 显示隐藏效果

1.1 语法规范

1. show([speed,[easing],[fn]])：显示
2. hide([speed,[easing],[fn]])：隐藏
3. toggle([speed,[easing],[fn]])：切换

1.2 参数

1. 参数可以省略，无动画直接显示；
2. speed：slow，normal，fast 或者 表示动画时长的毫秒数值(如：1000)；
3. easing：(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”；
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

2.1 语法规范

1. slideDown([speed,[easing],[fn]])：向下拉
2. slideUp([speed,[easing],[fn]])：向上拉
3. slideToggle([speed,[easing],[fn]])：切换

2.2 动画队列及其停止排队方法

1. 动画或效果队列
   动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2. 停止排队
   stop()
   stop()写在动画或者效果的前面，相当于停止结束上一次的动画。

3. 淡入淡出效果

3.1 语法规范

1. fadeIn([speed,[easing],[fn]])：淡入
2. fadeOut([speed,[easing],[fn]])：淡出
3. fadeToggle([speed,[easing],[fn]])：切换
4. fadeTo([speed,opacity,[easing],[fn]])：修改透明度opacity(必须写)，取值0~1之间

4. 自定义动画（重点）

4.1 语法

animate(params,[speed],[easing],[fn])

4.2 参数

params：要修改的样式属性，以对象形式传递，必须写。

3.4 jQuery属性

1. 设置或获取元素固有属性值

元素固有属性就是元素本身自带的属性，比如< a>元素里面的href，< input >元素里面的type。

1.1 获取属性语法

prop(“属性”)

1.2 设置属性语法

prop(“属性”，“属性值”)

2. 设置或获取元素自定义属性值 attr()

2.1 获取属性语法

attr(“属性”)，类似原生 getAttribute()

2.2 设置属性语法

attr(“属性”，“属性值”)，类似原生 setAttribute()

3. 数据缓存 data()

3.1 附加数据语法

data(“属性”,“属性值”)，向被选元素附加数据

3.2 获取数据语法

data(“属性”)，向被选元素获取数据
还可以读取HTML5自定义属性 data-index，得到的是数字型

3.5 jQuery文本属性值

1. 普通元素内容html()（相当于原生innerHTML）

html()：获取元素的内容
html(“内容”)：设置元素的内容

2. 普通元素文本内容text()（相当于原生innerText）

text()：获取元素的文本内容
text(“文本内容”)：设置元素的文本内容

3. 表单的值val()（相当于原生value）

val()：获取表单里的值
val(“内容”)：修改表单里的值

3.6 jQuery元素操作

1. 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历。

1.1 语法1

$(“div”).each(function(index，domEle) { xxx;})

1. each() 方法遍历匹配的每一个元素。主要用DOM处理
2. index 是每一个元素的索引号，demEle 是每个DOM元素对象，不是jQuery 对象，如果要使用jQuery方法，需要给dom元素转换为jQuery对象：$(domEle)

1.2 语法2

$.each(object,function(index,element) {xxx;} )

1. $.each() 方法可用于白能力任何对象，主要用于数据处理，比如数组，对象；
2. index 是每个元素的索引号，element 遍历内容

2. 创建元素

语法：$("< li>< /li>")
动态的创建一个< li>

3. 添加元素

3.1 内部添加

• element.append(“内部”)：把内容放入匹配元素内部最后面，类似原生 appendChild。
• element.preend(“内容”)：把内容放入匹配元素内部最前面
• 生成之后，是父子关系。

3.2 外部添加

• element.after(“内容”)：把内容放入目标元素后面
• element.before(“内容”)：把内容放在元素前面
• 生成之后，是兄弟关系。

4. 删除元素

• element.remove()——删除匹配的元素（本身）
• element.empty()——删除匹配的元素集合中所有的子节点
• element.html(" ")——清空匹配的元素内容

3.7 jQuery尺寸、位置操作

1. jQuery尺寸

语法	用法
width()/height()	只算width / height
innerWidth()/innerHieght()	包含padding
outerWidth()/outerHeight()	包含padding、border
outerWidth(true)/outerHeight(true)	包含padding、border、margin

2. jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

1. offset() 设置或获取元素偏移

• 设置或返回被选元素相当于文档的偏移坐标，跟父级没有关系
• 可以设置元素的偏移,例如：offset( { top:10,left:30 } );

2. position()只设置能获取不能设置

• 返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

4、jQuery事件

1. jQuery事件注册

语法：element.事件(function() { })

2. jQuery事件处理

1. 事件处理on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：element.on(events,[selector],fn)

• events：一个或多个用空格分隔的事件类型，如"click"或"keydown"；
  例如：$(“div”).on({mouseenter:function(){xxx1},click:function(){xxx2}});
  $(“div”).on(“mouseenter mouseleave”,function(){xxx});
• selector：元素的子元素选择器；
• 如果只想事件触发一次，使用one() 绑定事件。

2. 事件解绑off() 解绑事件

语法：element.off()
例如：

• $(“div”).off()：解绑div上所有的事件
• $(“div”).off(“click”)：解绑div上的点击事件
• $(“ul”).off(“click”,"li”)：解绑事件委托

3. 自动触发事件trigger()

• element.click()
• element.trigger(“type”)
• element.triggerHandler(type)：不会触发元素的默认行为

3. jQuery事件对象

事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) { })
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()

5、jQuery其他方法

1. jQuery拷贝对象

语法：$.extend([deep],target,object1,[objectN])

1. deep：如果设为true为深拷贝，默认为false 浅拷贝
2. target：要拷贝的目标对象
3. object1：待拷贝到第一个对象的对象
4. 浅拷贝是把被拷贝的对象复杂数据类型的地址拷贝给目标对象，修改目标对象会影响被拷贝对象；
5. 深拷贝是完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响被拷贝对象；
6. 深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起。

2. 多库共存

如果 $符号冲突

1. 把里面的$符号统一改为jQuery；
2. jQuery变量规定新的名称：$.noConflict()。

3. jQuery插件

jQuery插件常用网站：

1. jQuery插件库：http://www.jq22.com
2. jQuery之家：http://www.htmleaf.com/

jQuery插件使用步骤：

1. 引入相关文件
2. 复制相关html、css、js