jQuery基本概念

一、jQuery

1、简介：是一个对JavaScript进行了封装的库，简化了用户使用javascript

2、特点：写的少、做的多

3、使用方法：

（1）在页面中引入jQuery库：引入外部的js文件

（2）’$’：是jQuery的全局对象，代表jQuery

（3）$(function(){ })：jQuery代码的入口函数。原始的写法：

$(document).ready(function(){ }) —— window.onload

简写为：

$(function(){ })

二、jQuery的选择器：是jQuery的灵魂

1、基本选择器

（1）id选择器：$(‘#id’)

（2）类选择器：$(‘.class’)

（3）标签名选择器：$(‘标签名’)

（4）通配符选择器：$(‘*’)

（5）合并选择器：$(‘#id ，.class’)

强调：css()函数的作用：是jQuery中用于设置元素CSS样式的函数

a、css(‘样式属性名’,’属性值’) ：设置单个样式

b、css({属性名1:属性值1，属性名2:属性值2……})

eq(index)：匹配一个给定索引值的元素。页面中元素的索引值从0开始

2、过滤选择器：是通过特定的过滤规则来筛选出所需的 DOM 元素。以”：“开头

2.1、基本过滤选择器

（1）:first —— 选择第一个元素

（2）:last —— 选择最后一个元素

（3）:not(selector) ——- 去除所有与给定选择器相匹配的元素

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

（5）:odd ——- 匹配所有索引值为奇数的元素，从索引0 开始计数

（6）:eq(index) —- 匹配一个给定所有值的元素

（7）:gt(index) ——- 匹配所有大于给定索引值的元素

（8）:lt(index) —— 匹配所有小于给定索引值的元素

2.2、内容过滤选择器

（1）:contains(text) ——- 匹配包含给定文本的元素

（2）:empty —— 匹配所有不包含子元素或者文本的空元素

（3）:has(selector) ——- 匹配含有选择器所匹配的元素的元素

（4）:parent —— 匹配含有子元素或者文本的元素

val() ： jQuery的函数，若不带参数表示获取input标签的value属性值

val(参数)：带上参数，就是将参数值赋给input标签的value属性

2.3、可见性选择器

（1）:hidden ———— 匹配所有不可见元素，或者type为hidden的元素。不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 ()和 visible:hidden 之类的元素

（2）:visibale ————— 匹配所有的可见元素

2.4、属性过滤选择器

（1）[attribute]：匹配包含给定属性的元素

（2）[attribute=value]：匹配给定的属性是某个特定值的元素

（3）[attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

（4）[attribute^=value]：匹配给定的属性是以某些值开始的元素

（5）[attribute$=value]：匹配给定的属性是以某些值结尾的元素

（6）[attribute*=value]：匹配给定的属性是以包含某些值的元素

3、子元素选择器：索引值从1开始

（1）:first-child ——- 匹配第一个子元素

（2）:last-child ——- 匹配最后一个子元素

（3）:nth-child

a、:nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

b、:nth-child(2): 能选取每个父元素下的索引值为 2 的元素

c、:nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

4、表单选择器

（1）:text —- 单行文本框

（2）:password —— 密码框

三、jQuery的属性：操作标签的属性

1、操作属性

（1）attr(name)：获取属性值。参数name是属性名

（2）attr(key,fn)：修改属性值

参数key：代表元素的属性名

参数fn：是一个函数，将函数的返回值作为key属性的值

（3）attr(key,value)：修改属性值。将value的值赋给key

（4）removeAttr(name)：删除指定的属性

2、操作样式

（1）css(key,value)：css({'属性名1':'属性值1'，'属性名2':'属性值2'})

（2）addClass(class|fn)：为匹配的元素添加指定的类名

（3）removeClass(class|fn)：从所有匹配的元素中删除全部或者指定的类

参数可以是类名，也可以是函数（将函数的返回值作为类名）

（4）toggleClass(class|fn)：如果所匹配的元素存在某个类就删除，不存在就添加

3、操作元素的宽度和高度

（1）width()：获取元素的宽度

（2）width(value)：设置元素的密度

（3）height()：获取元素的高度

（4）height(value)：设置元素的高度

4、操作元素的内容

（1）html()：获取匹配元素的内容（底层使用的元素innerHTML属性）

（2）html(val)：设置匹配元素的内容（可以识别标签）

（3）text()：获取匹配元素的文本（底层使用的元素innerText属性）

（4）text(val)：设置匹配元素的文本（不能识别标签）

5、操作值

（1）val()：获取匹配元素的value属性值

（2）val(args)：设置匹配元素的value属性值

6、查找

（1）find(exp)：搜索所有与指定表达式匹配的元素

（2）first()：获取第一个元素

（3）last()：获取最后一个元素

（4）hasClass(class)：检查当前的元素是否含有某个特别的类，如果有，则返回true

强调：在jQuery代码中使用this的方法---$(this)代表当前的元素

四、jQuery元素的筛选

1、children()：获取所有的子元素

2、find(exp)：查找与给定表达式匹配的元素

3、next(exp)：获取匹配元素的紧邻的同辈元素

4、nextAll(exp)：查找匹配元素的所有同辈元素

5、parent(exp)：取得一个包含着所有匹配元素的唯一父元素的元素集合

6、parents(exp)：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

7、prev([exp])：取得匹配元素的紧邻的上一个同辈元素

8、prevAll([expr])：获取匹配元素之前的所有同辈元素

9、siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

五、jQuery的自定义动画

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

params：一组包含作为动画属性和终值的样式属性和及其值的集合

speed：三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

六、jQuery的对象访问

index([selector|element])：获取页面元素的索引值。索引值从0开始

七、jQuery的事件处理：

1、事件绑定：

bind(type,[data],fn)：给匹配元素的事件绑定事件处理程序

参数type：事件类型

参数data：作为event.data传递事件处理程序的数据对象

参数fn：事件处理程序

2、模拟鼠标悬停事件：当鼠标悬停到目标对象上方、离开目标对象时触发

hover(over,out)

参数over：是一个函数，鼠标悬停到目标对象上方时触发

参数out： 是一个函数，鼠标离开目标对象时触发

强调：在jQuery的应用中如果某个对象同时会触发mouseove、mouseout事件，建议使用hover模拟鼠标悬停事件

3、one(type,[data],fn)：为匹配的元素绑定一个一次性的事件处理函数

4、unbind(type,[data|fn]])：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。

5、on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数

参数events：一个或多个用空格分隔的事件类型

6、off(events,[selector],[fn])：在选择元素上移除一个或多个事件的事件处理函数。

7、事件类型：

（1）click：鼠标单击

（2）blur：失去焦点

（3）focus：获得焦点

（4）change：当元素的值发生改变时，会发生 change 事件。

八、jQuery的动画

1、显示 / 隐藏：

show() ：显示

hide()：隐藏

toggle(speed)：交替显示和隐藏，若匹配的元素显示了就隐藏，若隐藏了就显示

2、向上收缩 / 向下展开：通过高度变化来显示和隐藏元素

slideUp([speed,[easing],[fn]])：向上收缩

slideDown([speed],[easing],[fn])：向下展开

slideToggle([speed],[easing],[fn])：交替收缩、展开

3、淡入淡出：通过改变透明度来显示和隐藏元素

fadeIn([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡入效果。

fadeOut([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡出效果。

fadeToggle([speed,[easing],[fn]])：交替实现元素的淡入和淡出