JQuery

Jquery是一个 js 函数库，又常常被叫做 jq 里面代码很多，但是用的时候代码很少，是目前 js 的主流框架。

引用

• 下载地址：两个版本，开发测试用的，实际网站用的（都一样）http://jquery.com/

然后在代码里面引入后用 ：<script src=" 文件路径 "></script>

• CDN（内容分发网络）

不下载也可以通过CDN：内容分发网络引用（就是有的网站服务器存的有 jquery 库，填好 CDN 地址直接让用户把它加载到浏览器缓存以后就可以随时使用），就是以下两条：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

$( )、jQuery( )等自定义名字

全局函数，jQuery 快捷名为 $

1）自定义名字

var jq = $.noConflict();
var obj = jq("div"); // 得到所有的div标签

2）$() 查询

$() 方法有两个参数：第一个参数可以使选择器，可以是对象

第二个参数可选默认是document。就是在全文档下查找，表范围

3）$()方法的返回值

$()返回的是一个 jq对象，jq对象是一个类数组。比如：

$("div") 返回值是一个装有所有（大于等于0）div标签的类数组

$(document) 返回值是一个装有当前 document对象的类数组

4）jq 对象

属性：（$()方法返回的 jq对象有四个属性）

length：返回的元素个数

selector：创建 jq对象（不是DOM对象）的选择器字符串（前提是创建时有选择器的字符串）

context：上下文，元素所在document对象

jquery：jq的版本号，是否存在，主要为了跟其他类库作区分

5）元素属性 attr()

更改：传对象或者下面第二种方式，按照键值对更改，类数组中所有元素都更改

获取：只传属性名，没有设置过获得的是 undefined，只获取类数组中第一个元素

获取和更改：

// 回调函数：第一杆参数是属性，index代表所选多个标签的第几个，oldValue代表获取的旧值，newValue代表设置的新值

6）元素样式 css( )

跟attr()方法类似，不过这个方法作用于css样式，而不是元素的html属性

获取：只获取类数组中第一个元素，获取数值时会转化为有单位的字符串

设置：设置类数组中所有元素，可以设置复合样式，一个样式可直接写样式名和值

7）元素内容

val()：获取：类数组第一个元素的value值

设置：设置所有元素的value值（参数为值或者函数）

html()：获取：类数组第一个元素的 HTML内容，包括子元素的标签名

设置：设置所有元素的 HTML内容，标签会被解析，跟DOM中的innerHTML一样会格式化替换调内部的内容( jq里就是用的它实现的)

例如：

text()：获取：获取类数组中所有元素的所有子孙文本节点的纯文本内容

设置：设置所有元素的文本内容，内容内部的标签不会被解析

8）遍历

长辈：

• parent() //爸爸
• parents() //爸爸爷爷...
• parentsUntil() //爸爸爷爷..到某个标签结束

晚辈：

children() //儿子

同胞：

• siblings() //所有同胞元素
• next() //下一个同胞元素
• nextAll() //下一个和后面所有同胞元素
• nextUntil(“元素1”) //到元素1之间的所有同胞

9）盒子尺寸

（不用带px）

10）盒子位置

• offset() // 获取或设置坐标值(相对文档)设置值后变成相对定位,返回一个坐标对象,设置也传对象属性是left和top //offset().top    offset({left:100})
• position() // 获取坐标值(相对父亲)只能读取不能设置，readOnly
• scrollTop() // 设置或获取元素滚动条垂直卷去的距离：设置scrollTop(100)
• scrollLeft() // 设置或获取元素滚动条水平卷去的距离

11）data( )

data()方法可以给 jq 元素设置和获取数据，以键值对的方式：

12）修改文档结构

• append() //在被选元素的结尾插入n个元素:$(‘#div’).append(‘你好’,’666’)
• prepend() //在被选元素的开头插入n个元素
• after() //在被选元素之后插入n个元素
• before() //在被选元素之前插入n个元素
• replaceWith() //把被选元素替换掉
• remove() //删除被选元素和他的后代
• empty() //删除被选元素的后代
• clone() //克隆元素(包括后代),返回的对象不在文档中//var cp1=$(‘#p1’)
• clone(true) //浅克隆----深克隆

13）事件

（return false阻止冒泡）

鼠标：

• click   单击对象(按下松开)
• dblclick   双击对象
• mousedown 在对象上按下时
• mouseup   按下,在对象上松开时
• mousemove 鼠标在对象上移动时
• mouseover 鼠标指针穿过被选元素区域触发,穿过其子元素区域也触发
• mouseout 鼠标指针离开被选元素或者子元素区域
• mouseenter 鼠标指针穿过被选元素区域
• mouseleave 鼠标指针离开被选元素区域

键盘：

焦点在哪里哪个控件的键盘事件才触发

• keypress 键盘按键被按下并松开。
• keydown 键盘按键被按下。
• keyup   键盘按键被松开。

表单：

• focus 节点获得焦点后触发
• blur 节点失去焦点后触发 
• focusin 将要获得焦点时触发，发生在focus事件之前
• focusout 将要失去焦点时触发，发生在blur事件之前
• change 内容改变时

//input

• reset 表单重置时
• submit 表单提交时

加载（图片文档等）：

• load 完成加载   
• abort 加载被中断
• error 加载发生错误

悬浮：

• hover   //注:hover(fn1,fn2)  hover事件要求有两个回调函数,分别是移入和移除,只写一个回调函数时,两个状态都触发同一个函数

14）事件对象

事件触发时会传入回调函数一个事件对象，这个对象的属性包含了事件触发时的一些信息

鼠标：

• altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
• ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
• metaKey  鼠标事件发生时，是否按下windows/commond键,返回一个布尔
• shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
• clientX，clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素
• screenX，screenY 返回鼠标位置相对于屏幕左上角的坐标，单位为像素

键盘：

• altKey，ctrlKey，metaKey，shiftKey 返回一个布尔值，表示是否按下对应的键
• key 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号 键，则返回符号键的键名。比如，按下Ctrl+a，则返回a。如果无法识别键名，则返回字符串Unidentified

15）绑定事件

mouseleave(fn)

回调函数返回值为false时阻止冒泡

• jq(“button”).click(fn)

jq(“button”).mouseenter(fn)

jq(“button”).

jq(“button”).click(fn).mouseenter(fn).mouseleave(fn)

• bind(“events”,fn); //多事件用空格隔开

jq(“button”).bind(“click  mouseenter mouseleave”,fn) 

• 不同的事件想触发不同的方法,传一个对象进去

jq(“button”).bind({“click”:fn,”mouseenter ”:fm,”mouseleave”:fo})

• 触发一次one(“event”,fn)

jq(“button”).one(“click”:fn)

16）多元素绑定事件

• 原始的 // 每个 li 都绑定了一个事件

jq(“li”).bind(“click”,function(){alert(jq(this).html())})

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

• 代理//只给ul(一定要绑父亲)绑定了事件(冒泡)

jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})

• 前面所有的方式都忘掉,用这种:on(“events”,”selector”,fn)

jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())})

//ul 是on方法第二个参数li的爸爸,on第一个参数是事件,第二个参数是选择器,第三个参数是回调,回调里面的this关键字是个指针,指向触发click事件的对象.

17）事件解绑

对应的unbind   undelegate   off

例子:jq(“ul”).on(“click  mouseenter”,”li”,function(){alert(jq(this).html())})

     jq(“ul”).off(“click”)

现象:鼠标移入触发，点击却不触发

18）事件触发

事件的触发有两种方式：

• 真事件触发：真的用鼠标点了

事件名调用时不传参数(不传回调函数)：$(‘#div’).click()

• 假事件触发：用代码让事件触发

$(‘#div’).trigger(‘click’)）

19）动画

隐藏：

• hide(sd，fn) 隐藏元素
• show(sd，fn) 显示元素
• toggle(sd，fn) 隐藏显示开关（来回调用）

//参数都是可选的，sd 是速度可填slow fast normal或数字（ms），fn是回调函数

淡入淡出：

• fadeIn(sd，fn) 淡入已经隐藏的元素
• fadeOut(sd，fn) 淡出已经显示的元素
• fadeToggle(sd，fn) 淡出入开关
• fadeTo(sd，alpha，fn) 自定义透明度

//参数都是可选的，sd 是速度可填slow fast normal或数字（ms），alpha是透明度，fn是回调函数

滑动隐藏：

• slideUp(sd，fn) 向上滑动隐藏
• slideDown(sd，fn) 向下滑动隐藏
• slideToggle(sd，fn) 上下滑动显示开关

//参数都是可选的，sd 是速度可填slow fast normal或数字（ms），fn是回调函数

自定义//帧动画，补间动画：

• animate( {属性}，sd，fn) 动画

//要让元素实现动画，必须设置定位

//参数：{ }必填，sd 可选动画时间，fn可选回调函数

例如：

动画队列，队列按照顺序依次执行：

停止属性改变：

• jq( ".div ").stop( bool，bool )   // 停止动态改变的属性的现象

//参数：都可选布尔值，第一个是否停止所有队列，第二个是否立即执行完所有效果