一款特好用的JavaScript框架 JQuery_H5之家 - 中国HTML5教程资源分享第一站

本文将为关注织梦者的朋友提供的是的一款特好用的JavaScript框架 JQuery相关教程，具体实例代码请看下文:

了解了解

　 jQuery是一个快速，小巧，功能丰富的JavaScript库。它使诸如HTML文档遍历和操纵，事件处理，动画和Ajax等事情变得简单得多，而且易于使用的API可以在多种浏览器中使用。

一、什么是JQuery？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。　　

jQuery 的功能概括

　　1、html 的元素选取

　　2、html的元素操作

　　3、html dom遍历和修改

　　4、js特效和动画效果

　　5、css操作

　　6、html事件操作

　　7、ajax异步请求方式

二、 JQuery基础中的基础

2-1JQuery基本语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

首先，在使用JQuery之前要先导入JQuery文件。

注意：

　　① $是JQuery的缩写，即可以使用JQuery("选择器").函数()；

　　② 选择器，可以是任何的CSS支持的选择符；

小实例：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有的 <p> 元素

$("#test").hide() - 隐藏所有的元素

2-2文档就绪函数

文档就绪函数就是指防止在文档未完全加载完成之前，运行JQuery代码；

$(document).ready(function(){ // JQuery 代码... });

它的简写形式：

$(function(){ // JQuery 代码... }); 文档就绪函数和window.onload的区别[还是比较重要的！！]

① window.onload必须等到网页中的所有内容加载完成之后，才会执行代码(包括图片、视频等资源)；

　文档就绪函数，只需要在网页DOM结构加载完成之后，就可以执行代码；

② window.onload只能写一个，写多个只会执行最后一个；

　文档就绪函数，可以写多个，并且不会被覆盖；

三、 JQuery中的常用函数 JQuery中的函数实在是太多，在这就不一一解释了，我在下面列举了一些常用的，后面都跟着一个小例子，非常简单，各位博友们一看就懂~~~ 内部插入

append：将创建好的节点，插入到指定位置

$("#div1").append("<p>这是被插入的p标签</p>");　　　　//在#div1内部的最后，直接插入一个节点。

appendTo：把所有匹配的元素追加到另一个指定的元素元素集合中

$("<p>这是被插入的p标签</p>").appendTo("#div1");　　　　//把新节点插入到#div1中

prepend：把每个匹配的元素插入到指定元素的开头

$("#div1").prepend("<p>这是被插入的p标签</p>");　　　　//在#div1内部的开头，直接插入一个节点。外部插入

after：在每个匹配的元素之后插入内容

$("#div1").after("<p>这是被插入的p标签</p>");　　　　//在div1后面插入一个新节点

insertBefore：把所有匹配的元素插入到另一个、指定的元素元素集合的前面

$("<p>这是被插入的p标签</p>").insertBefore("#div1");　　　　//把p标签插入到div1前面包裹

wrap：把所有匹配的元素用其他元素的结构化标记包裹起来

$("p").wrap("<div></div>");　　　　//把每个p标签外面，都包裹一层div

wrapAll：将所有匹配的元素用单个元素包裹起来

$("p").wrapAll("<div></div>");　　　　//把所有的p标签，包裹在同一个div中

wrapInner：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$("#div1").wrapInner("<div></div>");　　　　//把#div1里面的所有子元素，用<div>包裹起来替换

replaceWith：将所有匹配的元素替换成指定的HTML或DOM元素

$("p").replaceWith("<span>111</span>");　　　　//将所有匹配的p标签，全部换为span标签

replaceAll：用匹配的元素替换掉所有 selector匹配到的元素

$("<span>111</span>").replaceAll("p");　　　　//用span元素，替换掉所有p标签删除

empty：删除匹配的元素集合中所有的子节点

$("#div1").empty();　　　　//删除#div1中的所有子元素。但是#div1依然保留空标签

remove：从DOM中删除所有匹配的元素

$("#div1").remove();　　　　//直接从DOM中，删除#div1以及所有子元素

detach：从DOM中删除所有匹配的元素

$("#div1").detach();　　　　//直接从DOM中，删除#div1以及所有子元素 remove和detach的异同点

1、相同点

　　① 都会把当前标签，以及当前标签的所有子节点，全部删除；

　　② 都可以在删除时，把当前节点返回。并可以使用变量接受返回的节点，以便后期恢复；

2、不同点

　　使用接受的节点，恢复原节点时

　　remove只能恢复节点的内容，但是事件绑定，不能再恢复；

　　detach不但恢复节点的内容，还能再恢复事件的绑定；

复制（克隆）

clone：克隆匹配的DOM元素并且选中这些克隆的副本

$("#div1").clone(true).empty().insertBefore("button:eq(0)");

JS中.cloneNode() 和 JQ中 .clone()的区别

　　两者都接受传入true/false的参数。

　　.cloneNode() 不传参数或传入参数false，表示只克隆当前节点，而不克隆子节点。传入true表示可隆全部子节点。

　　.clone() 无论传入哪个参数，都会克隆所有子节点。但是，不传参数或者传入false，表示只克隆节点，不克隆节点绑定的事件。传入true表示同时克隆及诶单绑定的事件。

四、JQuery中的事件

4-1绑定事件的方式 1、事件绑定的快捷方式 $("button").eq(0).click(function(){
　　　　alert(1); }); 2、使用on()绑定事件

　　① 使用on进行单事件绑定

$("button:eq(0)").on("click",function(){ 　　　　alert(1); });

　　② 使用on，一次性给同一节点添加多个事件执行同一函数，多个事件之间空格分隔

$("button:eq(0)").on("click mouseover dblclick", function(){ 　　　　console.log("触发了事件"); });

　　③ 一次性给同一节点添加多个事件，分别执行不同函数

$("button:eq(0)").on({ 　　　　"click":function(){ 　　　　　　　　console.log("执行了click事件"); 　　　　}, 　　　　"mouseover":function(){ 　　　　　　　　console.log("执行了mouseover事件"); 　　　　} });