JQuery

一、简介

• 目前最流行的JavaScript函数库之一，对JavaScript进行了封装。

• 并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

• 扩展: 目前jQuery有三个大版本

  • 1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

  • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

  • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

二、使用

• $是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。 作用1：$(function(){})

  • 相当于 window.onload=function(){}，功能比window.onload更强大

  • window.onload一个页面只能写一个，但是可以写多个$() 而不冲突

  • window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

  • 完整形式是$(document).ready(…….);

    jQuery(document).ready(…….);

  作用2： $(selector)

  • 选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍

• jQuery的基本语法：$(selector).action

  获取页面内容:$(selector)

  操作页面的内容：action

  • 控制页面样式

  • 访问和操作DOM元素

  • 事件处理功能

  • 动画功能

  • Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

三、JQuery对象和DOM对象

DOM对象和jQuery对象分别拥有一套独立的属性和函数：

• DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value

• jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()

互相转换：

• DOM对象转换成jQuery对象 $(DOM对象)

• jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

四、JQuery选择器

回顾JavaScript获取元素节点

• getElementById( ) ：返回一个元素节点对象

• getElementsByName( )：返回多个元素节点（节点数组）

• getElementsByClassName( ) ：返回多个元素节点对象（节点数组）

• getElementsByTagName( ) ：返回多个元素节点对象（节点数组）

1. 基础选择器

1. 标签选择器 $("a")

2. ID选择器 $("#id") $("p#id")

3. 类选择器 $(".class") $("h2.class")

4. 通配选择器 $("*")

5. 并集选择器$("elem1， elem2， elem3")

6. 后代选择器$(ul li)

7. 父子选择器 $(ul > li)

8. 后面第一个兄弟元素节点 prev + next

9. 后面所有的兄弟元素节点 prev ~ next

2. 属性选择器

1. [attribute] 匹配包含给定属性的元素

2. [attribute1][attribute2] 复合属性选择器，需要同时满足多个属性

3. [attribute=value] 匹配给定的属性是某个特定值的元素

4. [attribute!=value] 匹配所有属性不等于特定值的元素

5. [attribute^=value] 匹配给定的属性是以某些值开始的元素

6. [attribute$=value] 匹配给定的属性是以某些值结尾的元素

7. [attribute*=value] 匹配给定的属性是以包含某些值的元素

3. 位置选择器

针对整个页面而言的位置选择器

1. :first 获取第一个元素

2. :last 获取最后一个元素

3. :odd 匹配所有索引值为奇数的元素，从 0 开始计数

4. :even匹配所有索引值为偶数的元素，从 0 开始计数

5. :eq(n) 匹配一个给定索引值的元素，从0开始计数

6. :gt(n) 匹配所有大于给定索引值的元素

7. :lt(n) 匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

1. :first-child 匹配第一个子元素

2. :last-child 匹配最后一个子元素

3. :nth-child(n) 匹配其父元素下的第N个子元素

4. :nth-child(odd|even) 匹配其父元素下的奇偶元素

4. 表单选择器

关于表单项的选择器

1. :text :password :radio :checkbox :hidden :file :submit

2. :input 匹配所有 input， textarea， select 和 button 元素

注意：$("input")和$(":input")的区别

1. $("input")：标签选择器，只匹配input标签

2. $(":input")： 匹配所有 input， textarea， select 和 button 等元素

关于表单项状态的选择器

1. :selected :checked :disabled

五、JQuery事件机制

事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.

注意：

1. 使用jQuery给元素绑定事件时，要写在页面加载完事件内。

2. 这里的事件可以是 click、blur、focus等等。不要写on，因为之前在js中我们写的是onClick。

六、JQuery动画

1. 显示和隐藏动画

实现显示动画效果方法：show()

实现隐藏动画效果方法：hide()

实现切换显示和隐藏动画效果方法：toggle()

可以设置参数，单位是毫秒，代表在该时间内完成隐藏/显示

2. 滑动动画

实现向下滑动动画效果方法：slideDown()

实现向上滑动动画效果方法：slideUp()

实现滑动切换效果方法：slideToggle()

可以设置参数，单位是毫秒，代表在该时间内完成滑动动画

3. 淡入淡出动画

实现淡入动画效果方法：fadeIn()

实现淡出动画效果方法：fadeOut()

实现淡入淡出切换效果方法：fadeToggle()

实现淡入到指定透明度效果方法：fadeTo() 有两个参数，第一个是时间，第二个是透明度（0~1）

七、操作DOM

1. 操作文本

• html() 相当于innerHTML

  • html() 获取文本节点（标签+文本）

  • html(标签) 添加标签，会覆盖原有的所有内容

• text() 相当于innerText

  • text() 获取文本节点（文本）

  • text(文本内容) 添加文本，会覆盖原有的所有内容

2. 操作属性

• attr(属性名) 获取属性值

• attr(属性名, 属性值) 设置属性值

• removeAttr(属性名) 移除属性

• prop(属性名) 获取属性值

• prop(属性名, 属性值) 设置属性值

  • jQuery 1.6新增加prop()方法。如checked, selected、readonly、disabled 使用prop()时，返回值是true或者false，更加方便处理。

• val() 获取value属性值

• val(值) 设置value属性值

3. 操作元素

• append()、appendTo() 添加子元素节点（末尾）

  • 父元素节点.append(新的子元素节点)

  • 新的子元素节点.appendTo(父元素节点)

• prepend()、prependTo() 添加子元素节点（前置）

• before() 、insertBefore() 添加平级元素节点（前面）

• after()、insertAfter() 添加平级元素节点（后面）

• parent() 获取父元素节点

• remove() 删除元素节点

• empty() 删除子元素节点

八、操作CSS

1. 直接操作CSS

• css(css)

• css(css,val)

• css({css1:val1,css2:val2,…..})

总结：

• 本质上是修改指定元素的style属性的值。

• 缺点是会涉及多个css样式的修改，稍显繁琐。可以将多个css样式定义为class类样式，直接操作class属性值即可。

2. 操作类样式

• addClass(值)   追加类属性值，而不是覆盖

• removeClass(值)   移除属性值

• toggleClass(值)   不存在，添加。存在，移除

总结：

• 本质是修改指定元素的class属性值。

• addClass()只负责追加，而不是覆盖，所以必要时需要和removeClass()结合使用