[JavaScript知识库]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、基本过滤选择器

6、可见性过滤器

三、jQuery中的DOM操作

1、样式操作

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(?)方法的区别：

（3）属性值操作

? ① 获取元素的value属性值

$(this).val();

? ② 设置元素的value属性值

$(this).val(value); 

3、节点操作

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

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

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

（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）遍历同辈元素

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

（3）遍历前辈元素

（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、滑动

4、淡入淡出

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

五、事件函数

1、鼠标事件

2、键盘事件

3、表单事件

4、窗口事件

5、多事件绑定

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

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

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