JQuery

一、概述

1、jQuery 是一个 JavaScript 函数库。它是轻量级的js库，这是其它的js库所不及的，它兼

容CSS3，还兼容各种浏览器。

2、优势

（1）轻量级 （Lightweight）

（2）强大的选择器

（3）出色的DOM操作封装

（4）可靠的事件处理机制

（5）出色的浏览器兼容性

3、jQuery 库特性

（1）HTML元素选取

（2）HTML元素操作

（3）CSS操作

（4）HTML事件函数

二、jQuery选择器（5）javaScript特效和动画

1、id选择器

2、class选择器

3、标签选择器

4、属性选择器

（1）[属性名]    -->    匹配包含给定属性的元素

（2）[属性名=属性值]   -->    匹配给定的属性是某个特定值的元素

（3）[属性名],[属性名]   -->    可匹配多个

5、基本过滤选择器

选择器	说明
:eq(index)	匹配一个给定索引值的元素，索引值从 0 开始计数
:gt(index)	匹配所有大于给定索引值的元素，索引值从 0 开始计数
:lt(index)	匹配所有小于给定索引值的元素，索引值从 0 开始计数
:first(index)	获取匹配的第一个元素
:last(index)	获取匹配的最后一个元素
:not(selector)	去除所有与给定选择器selector匹配的元素
:even()	匹配所有索引值为偶数的元素，索引值从 0 开始计数
:odd()	匹配所有索引值为奇数的元素，索引值从 0 开始计数
:header	匹配标题元素
:animate()	用于创建自定义动画
:focus	选取当前获取焦点的元素

6、可见性过滤器

过滤器	说明
visible()	选取所有可见的元素
hide()	选取所有隐藏的元素
show()	显示所有隐藏的元素

三、jQuery中的DOM操作

1、样式操作

语法	说明
css(name,value)	设置或返回样式属性
$(selector).addClass(class)	增加样式
$(selector).removeClass("class") ;	移除样式
toggleClass()	切换样式
$(selector). hasClass(class)	判断是否包含指定的样式

2、内容操作

（1）html代码操作

   ① 获取元素中的html代码

$("div.left").html();

  ② 设置元素中的html代码

$("div.left").html("<div class='content'>…</div>");

（2）标签内容操作

  ① 获取元素中的文本内容

$("div.left").text(); 

  ② 设置元素中的文本内容

 $("div.left").text("<div class='content'>…</div>");

html( ) 和text( )方法的区别：

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

（3）属性值操作

  ① 获取元素的value属性值

$(this).val();

  ② 设置元素的value属性值

$(this).val(value); 

3、节点操作

（1）创建节点：var $newNode=$("<li></li>");

（2）元素内部插入子节点

语法	功能
append(content)	$(A).append(B)  表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)  表示把A追加到B中 如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)  表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)  表示将A前置插入到B中 如：$newNode1. prependTo ("ul");

（3）元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)  表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)  表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)  表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)  表示将A插入到B之前 如：$newNode1.insertBefore("ul");

（4）删除节点

  ① remove()：删除整个节点

  ② empty()：清空节点内容

  ③ detach()：删除整个节点，保留元素的绑定事件，附加的数据

（5）替换节点

replaceWith( )和replaceAll( )用于替换某个节点

（6）复制节点

clone()用于复制某个节点

4、属性操作

（1）获取与设置元素属性（attr）

  ① 获取属性值

$(selector).attr([name]);

  ② 设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]});

（2）删除元素属性

$(selector).removeAttr(name) ;

5、节点遍历

（1）遍历子元素

$(selector).children();

（2）遍历同辈元素

语法	说明
next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("classA");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("classA");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("classA");

show().slibings.hide()：点击谁让谁显示，其他兄弟节点全部隐藏

（3）遍历前辈元素

语法	说明
parent()	获取元素的父级元素
parents()	元素元素的祖先元素（也是父级）

（4）each()遍历方法

$(selector).each(function(index,element)) ;

Index：选择器的位置

Element：当前的元素

示例：

$("ul").click(function(){ 
    $("li").each(function(){
        var str=$(this).text()+"<br>"; 
        $("section").append(str); 
    })   
});

四、jQuery动画

1、隐藏和显示：hide() 和 show()

2、切换：toggle()：使用hide()或show()函数来切换HTML元素的可见状态，隐藏显示的元素，显示隐藏的元素

3、滑动

方法	说明
slideDown()	向下滑动元素
slideUp()	向上滑动元素
slideToggle()	如果元素向下滑动，则让它向上滑动

4、淡入淡出

方法	说明
fadeIn()	淡入被选元素
fadeOut()	淡出被选元素
fadeTo()	把被选元素淡出为给定的不透明度

5、创建自定义动画：animate()

五、事件函数

1、鼠标事件

事件函数	说明
click()	鼠标单击左键事件
dblclick()	鼠标双击左键事件
mousedown()	鼠标按下事件
mouseenter()	鼠标指针穿过（进入）指定元素时触发事件
mouseleave()	鼠标指针离开指定元素时触发事件
mousemove()	鼠标指针在被选元素内移动时触发事件
mouseout()	鼠标指针离开被选元素时触发事件
mouseover()	鼠标指针位于元素上方时触发事件
mouseup()	鼠标指针移到元素上方并松开鼠标左键时触发事件
hover()	鼠标指针悬停在被选元素上时触发事件

2、键盘事件

事件函数	说明
keypress()	当键盘按键被按下时触发事件（键被按下）
keydown()	当键盘按键被按下时触发事件（键按下的过程）
keyup()	当键盘按键被松开时触发事件（键被松开）

3、表单事件

事件函数	说明
submit()	当表单提交时触发事件
change()	当元素的值被改变时触发事件
focus()	当元素获得焦点时触发事件
blur()	当元素失去焦点时触发事件

4、窗口事件

事件函数	说明
load()	当指定元素已加载时触发
resize()	当调整浏览器窗口大小时触发
scroll()	当用户滚动指定的元素时触发
unload()	当用户离开页面时触发

5、多事件绑定

（1）on/bind()：方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

（2）unbind()：移除绑定事件，不带参数时，表示移除绑定的全部事件

（3）toggleClass()：连续点击事件