【干货篇】步步为营，带你轻松掌握jQuery！

写在前面：

---

 

通过系统的学习了原生JS以后，会发现其具备如下三个特色：

一、是一种解释性脚本语言（代码不进行预编译）。
二、主要用来向 HTML 页面添加交互行为。
三、能够直接嵌入 HTML 页面，但写成单独的js文件有利于结构和行为的分离。

而接下来要讲的jQuery 就对原生javascript的一个扩展，封装，就是让javascript更好用，更简单。

换而言之，jquery就是要用更少的代码，漂亮的完成更多的功能。{Write less, Do more!}

1. jQuery 做为 JavaScript 的代码库，天然是使用 JavaScript 语言编写的。
2. jQuery 的代码很是规范，执行效率也很高，是 JavaScript 编码的优秀范例。
3. 不少情只要使用 jQuery 的方法就能够实现大部分的 JavaScript 功能。

因此说，程序员做为一种极懒的物种存在，势必想着要减小没必要要的代码劳动量，所以jQuery诞生了。

 

---

1、jQuery基础语法 

---

一、适应JQuery、必需要先导入JQuery。x.x.x.js文件。

  二、JQuery中的选择器： $("选择器").函数();

① $是JQuery的缩写形式，即也可使用JQuery("选择器").函数();

② 选择器，能够是任何CSS支持的选择符；

三、文档就绪函数：防止文档在未彻底加载以前，运行JQuery代码；

 $(document).ready(function() { //JQuery代码  })； 简写形式以下： $(function(){});

[文档就绪函数&window.onload的区别]

① window.onload必须等到网页中的全部内容(包括图片视频)加载完成后才能执行代码；

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

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

文档就绪函数能够写多个，并且不会覆盖。

四、原生JS对象与JQuery对象：

① 使用$("")选中的是JQuery对象，只能调用JQuery函数，而不能使用元素的JS事件与函数；

 $("#p").click() √
 $("#p").onclick = function(){}; ×

解释：

$("#p")是JQuery对象，.onclick是原生的JS事件。

同理，使用document.getElement系列获取的是原生JS对象，也不能使用JQuery相关函数。

② 原生的JS对象转为 JQuery对象

可使用$() 包裹便可以转为JQuery对象

var p = document.getElementsByTagName("p");

$("p").click(); √ 原生的JS对象已经转为 JQuery对象；

③ JQuery转为原生JS对象：

使用get(index)或者[index]

 $("#p").get(0).onclick() = function () {}; √ $("#p").[0].onclick() = function () {}; √

五、 因为其其余的库也可能使用$做为自身标识，致使其余的JS库与JQuery冲突。

① 要解决冲突，能够放弃使用$,直接使用JQuery对象。

 

 !function ($) { $()//函数之中，就可使用$代替JQuery对象。 }(jQuery); 

② [jQuery.noConflict();]

运行这个函数将变量$的控制权让渡给第一个实现它的那个库

在运行这个函数后，就只能使用jQuery变量访问jQuery对象。

---

2、02-JQueryDOM操做及其余函数

---

使用$()直接建立一个标签节点

将建立好的节点，插入到指定位置。

在#div1内部的最后，直接插入一个节点。

$("#div1").append("<p>这是被插入的p标签</p>");

把新节点插入到#div1中

$("<p>这是被插入的p标签</p>").appendTo("#div1");

在#div1内部的开头，直接插入一个节点。

$("#div1").prepend("<p>这是被插入的p标签</p>");
$("#div1").after("<p>这是被插入的p标签</p>");
$("<p>这是被插入的p标签</p>").insertBefore("#div1");

把每一个p标签外面，都包裹一层div

$("p").wrap("<div></div>");

/ 把全部的p标签，包裹在同一个div中

$("p").wrapAll("<div></div>");

把#div1里面的全部子元素，用<div>包裹起来

$("#div1").wrapInner("<div></div>");

删除元素的父标签

$("#p").unwrap();

将全部匹配的p标签，所有换为span标签

$("p").replaceWith("<span>111</span>");

用span元素，替换掉全部p标签

$("<span>111</span>").replaceAll("p");

删除#div1中的全部子元素。 可是#div1依然保留空标签

$("#div1").empty();

直接从DOM中，删除#div1以及全部子元素

$("#div1").remove();

直接从DOM中，删除#div1以及全部子元素

$("#div1").detach();

重点 【remove和detach异同】

一、相同点：

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

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

二、 不一样点：

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

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

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

 

案例 ↓

$("#div1").click(function(){ alert(1); }) var div1 = null; $("button:eq(0)").click(function(){ div1 = $("#div1").remove(); }) $("button:eq(1)").click(function(){ div1 = $("#div1").detach(); }) $("button:eq(2)").click(function(){ $("button:eq(2)").after(div1); });

重点 [JS中.cloneNode() 和 JQ中 .clone()区别]

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

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

.clone() 不管传入哪一个参数，都会克隆全部子节点。可是，不传参数或者传入false，表示只克隆节点，不克隆节点绑定的事件。 传入true表示同时克隆及诶单绑定的事件。

 

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

---

CSS和属性相关操做

使用attr()设置或者取到元素的某个属性。

 

//$("#div1").attr("class","cls1"); /*$("#div1").attr({ //使用attr一次性设置多个属性 "class" : "cls1", "name" : "name1", "style" : "color:red;" });*/ console.log($(".p").attr("id")); 删除元素属性 $("#div1").removeAttr("class"); 

prop与Attr区别。

对于checked/disabled等属性名等于属性值的属性，使用prop返回的将是true或false， 使用attr返回的将是属性名或者undefined

因此，对于属性名等于属性值，或者属性是true/false的特殊属性，一般使用prop选取。 其余的属性，一般使用attr选取。

console.log($("button:eq(2)").attr("disabled")); console.log($("button:eq(2)").prop("disabled"));

给元素添加class属性，与attr添加class的不一样是，使用addClass添加的新类名，将会保留原来已有的class名。

$("p").addClass("selected1 selected2");

删除掉元素指定的class

$("p").removeClass("selected1");

元素有指定class名，则删除； 元素没有指定class名，则新增。

$("p").toggleClass("selected1");

取到或设置元素里面的html，至关于innerHTML

console.log($("#div1").html());
$("#div1").html("<h1>我是新的h1</h1>"); 

取到或设置元素里面的文字内容，至关于innerText

console.log($("#div1").text());
$("#div1").text("<h1>我是新的h1</h1>");

获取或设置 元素的Value值

console.log($("input[type='text']").val());
$("input[type='text']").val("啧啧啧！");

给元素设置CSS样式属性 属于style行级样式表权限

$("#div1").css({
"color":"red", "user-select":"none", "text-stroke":"0.5px blue" }); var id = setInterval(function(){ $("#div1").css({ "width":function(index,value){ if(parseFloat(value)+10 >= 600){ clearInterval(id); } return parseFloat(value)+10+"px"; } }); },500);

 获取和设置元素的width和height属性

console.log($("#div1").height());
console.log($("#div1").width()); $("#div1").width("400px");

获取元素的内部宽度。 包括宽高和padding

console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());

获取元素的外部宽高。 包括宽高+padding+border

传入参数为true时，还要包括margin

 

console.log($("#div1").outerHeight(true)); console.log($("#div1").outerWidth()); 

offset():

获取元素，相对于浏览器窗口左上角的偏移位置。

这个位置，包括margin/position等。

返回的是一个对象，包含两个属性，分别是left和top

position():

获取定位元素，相对于父元素的偏移位置(父元素必须是定位元素)。

这个位置，只包括top/left等定位属性。 而margin将被视为当前元素的一部分，并不会视为偏移量范畴。

 

若是父元素有定位属性。则相对于父元素padding左上角定位；

若是父元素没有定位属性，则与offerSet同样 ，相对于浏览器左上角定位（可是，只是二者的定位原点都在浏览器左上角。 在计算偏移量时，offerSet会计算margin和top. 而position只计算top）。

---

3、JQuery 事件及动画

---

 

【绑定事件的方式】

一、绑定事件的快捷方式。

$("button").eq(0).click(function () { alert("快捷绑定！"); })

缺点：绑定的事件没法取消！

二、使用on()绑定事件 ：

① 使用on进行单事件绑定；

$("button：eq(0)").on ("click",(function () { alert("这是使用on绑定的事件！"); });

② 使用on，一次性给同一个节点，添加屡次事件；多个事件之间，用空格分隔！

$("button：eq(0)").on ("click dbclick",(function () { alert("这是使用on绑定的事件！"); });

③ 使用on，同一次给一个节点添加多个事件，分别执行不一样的函数。

$("button：eq(0)").on ({
"click"：function () { alert("执行了click事件！") }， "mouseover"：function () { alert("执行了mouseover事件！") } });

④ 调用函数时，同时给函数传入指定参数：

$("button：eq(0)").on ("click",{name:"wq",age:23}，(function (evn) { alert(evn); });

⑤ 使用on进行事件委派！！！ 重点问题！！！

 

>>>将本来须要绑定到子元素上的事件，绑定到其祖先节点乃至根节点上面，在委派给子元素节点，生效！

eg: $("p").on("click",function(){});

事件委派 以下：

$("document").on("click","p",function(){});

>>>做用：

不使用事件委派的绑定方式，只能将事件绑定到初始化时的子元素标签上，

当页面新增同类型标签时，这些新增的标签上，没有以前绑定的事件。

而 使用 事件委派时 ，当页面新增更同类型标签时,这些新增的事件也具备之同类型前标签所绑定的事件！

 

三、off()取消事件绑定

$("p").off("click"):取消单事件绑定
$("p").off("click mouseover dbclick"):取消多事件绑定 $(document).off("click"，"p"):取消委派事件绑定 $("p").off()取消全部的事件绑定

四、使用.one()绑定的事件，只能执行一次；

eg:
$("button").one("click",function () { alert("one作的 只能点一次！") })

五、.trigger()自动 触发某元素事件；

第一个参数：是须要触发的事件类型；

第二个参数：(可选)数组格式，表示传递给事件函数的参数；

>>>传递进来的参数，能够在事件函数中，定义形参进行获取

(形参第一个必须是event事件，因此从第二个开始为所传递的参数！)

>>> 也能够直接在函数中，使用arguements对象数组，读取参数;

 

六、.triggerHandler()：功能同上，区别以下：

① .triggerHandler()不能触发浏览器默认的HTML事件，如submit等；

② .trigger()能够触发页面中全部匹配元素的事件；

而.triggerHandler()只能触发第一个匹配元素的事件；

③ .trigger()的返回值，返回的是调用当前函数的对象，符合JQuery的可链式语法；

.triggerHandler()返回的是事件函数的返回值，若是事件函数没有返回值，则返回的是Undefined；

  JQuery动画

 一、.show() 让隐藏的元素显示，效果为同时修改元素的宽度、高度、opacity属性；

① 不传参数：直接显示，不进行动画；

② 传参： 参数为时间毫秒数，表示动画多少时间结束；

③ 传入(时间,函数)表示动画完成以后，执行回调函数；

.hidde() 让显示的元素隐藏，与show相反；

 

二、.slideDown() 让隐藏的元素显示，效果为从上往下，逐渐增长高度；

.slideUp() 让显示的元素隐藏，效果为从下往上，逐渐减小高度；

.slideToggle():让显示的元素隐藏，让隐藏的元素显示；

 

三、.fadeIn() 让隐藏的元素淡入显示。

.fadeOut() 让显示的元素淡入隐藏。

.fadeToggle() 让隐藏的元素淡入显示,让显示的元素淡入隐藏。

.fadeTo(动画总时间，结束时透明度，函数)接受的第二个参数，表示最终达到的透明度；

 

四、animate： ({最终的样式属性，键值对对象}，

动画事件，动画效果("linear","swing"),

动画执行完后的回调函数)

自定义动画的注意事项：

① 参数一的对象中，链必须使用驼峰法命名。{fontSzie:"18px"}

② 只有数值类型的属性可使用动画效果。

 

---

4、JQuery 高级  Ajax

---

 

台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着 能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）若是须要更新内容，必需重载整个网页面。

不少使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网、百度搜索等等。

 

 

2、AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，而且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (做为转换数据的格式，如今基本上被淘汰了，大多数状况下使用JSON数据格式

  AJAX应用程序与浏览器和平台无关的！

3、AJAX的应用函数：

一、.load() 载入远程 HTML 文件代码并插入至 DOM 中。

能够只传入一个参数，表示加载一个静态的HTML代码片断。

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

eg:

$("#div1").load("load.html",{参数},function () {对参数进行函数处理});

 

二、$.ajax() 经过 HTTP 请求加载远程数据。jQuery 最底层 AJAX 实现函数。

接受一个大的对象。对象里面的属性和方法，表示ajax请求的相关设置：

① url:被请求的远程文件的路径。

② Ajax请求的类型，可选值get/post.

•success： 请求成功的回调函数。接受一个参数data，表示后台返回的数据。

•dataType：预期服务器返回的数据类型。

"json": 返回 JSON 数据 。

"text": 返回纯文本字符串

•data：对象格式。向后台发送一个对象，表示传递的数据。

经常使用于type为post的请求方式。

若是type为get,可使用？直接追加载URL后面。

•error:请求失败时的回调函数

•statusCode:接受一个对象，对象的键值对是status状态码和对应的回调函数，

表示当请求状态码是对应数字时，执行具体的操做函数.

404 - 页面没有找到！

200 - 请求成功！

500 - 内部服务器错误！

三、 $.get(); $.post(); 这两个函数，是在$.ajax()的基础上进行封装而来。能够直接默认发送get请求或post请求；

 

接受四个参数：

① 请求的URL路径。 至关于$.ajax()里面的url；

② 向后台传递的数据。 至关于$.ajax()里面的data；

③ 请求成功的回调函数。 至关于$.ajax()里面的success；

④ 预期返回的数据类型。 至关于$.ajax()里面的dataType；

四、 AJax的各类监听事件：

ajaxStart--->ajaxSend--->ajaxSuccess/ajaxError/ajaxComplete--->ajaxStop

 
$(document).ajaxSend(function(){
alert("ajax请求发送") }); $(document).ajaxStop(function(){ alert("ajax请求中止") }) $(document).ajaxStart(function(){ alert("ajax请求开始") }) $(document).ajaxSuccess(function(){ alert("ajax请求成功") }) $(document).ajaxError(function(){ alert("ajax请求失败") }) $(document).ajaxComplete(function(){ alert("ajax请求完成(无论成功失败，都会死乞白赖出来)") })

 

五、 序列化表单数据的一些操做：

①、 序列化表单数据为一个字符串

$("#btn1").click(function(){ var str = $("#form1").serialize(); console.log(str); //str = name=jianghao&password=123&email=1234123 var arr = str.split("&"); console.log(arr); var obj = {}; for (var i=0; i<arr.length; i++) { var arr1 = arr[i].split("="); var keys = arr1[0]; var values = arr1[1]; obj[keys] = values; } console.log(obj); $.get("01-JQuery基础.html?"+str,obj,function(){ }) })

 

二、序列化表单数据为一个数组

$("#btn2").click(function(){ var arr = $("#form1").serializeArray(); console.log(arr); var obj = {}; for (var i=0; i<arr.length; i++) { var keys = arr[i].name; var values = arr[i].value; obj[keys] = values; } console.log(obj); });

三、 $.parseJSON(str) 将JSON字符串转为JSON对象

标准的JSON字符串，键必须用双引号包裹。

var str = '{"age":12}'
var obj = $.parseJSON(str); console.log(obj);

四、 .trim() 去除掉字符串两端空格

var str1 = " 123 "; console.log(str1.trim());

五、 用户遍历数组和对象

遍历数组时，函数的第一个参数是下标，第二个参数是值；

遍历对象时，函数的第一个参数是键，第二个参数是值

var arr = [1,2,3,4,5,6,7]; var obj = { name : "zhangsan", age : 12, sex : "nan" } $.each(obj,function(index,item){ console.log(index); console.log(item); });

 

---

5、JQuery插件 plugin

---

 一、fullpage插件

---

一、fullpage插件简介：

 

fullPage.js 是一个基于 jQuery 的插件，它可以很方便、很轻松的制做出全屏网站，主要功能有：

• 支持鼠标滚动
• 支持前进后退和键盘控制
• 多个回调函数
• 支持手机、平板触摸事件
• 支持 CSS3 动画
• 支持窗口缩放
• 窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

二、引入文件

fullPage.js必须在JQuery.js文件以后导入!

 

三、htm基本样式：

 

在fullPage中，class为section表示一个屏幕。

section不能执行包裹在body中，必须使用一个div包裹全部的section。

section中的每个slide表示一个横向幻灯片，可在当前屏中左右横向切换。

三、CSS样式写法无差异

四、JavaScript：

 

五、属性配置:

①、选项：

 

 

二、回调函数

① afterLoad:当一个页面加载完成以后触发
传递参数：
anchorLink：当前页面的锚连接
index：当前页面的序号，从1开始。
afterLoad:function (anchorLink,index) { console.log(anchorLink); console.log(index); }, //② onLeave:当页面离开时触发的函数： /* 接收 index、nextIndex 和 direction 3个参数： index 是离开的“页面”的序号，从1开始计算； nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动仍是往下滚动，值是 up 或 down */ onLeave:function (index,nextIndex,direction) { console.log(index); console.log(nextIndex); console.log(direction); }, // afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数，执行一次。 // 先执行afterRender 再执行afterLoad: afterRender:function () { console.log("页面初始化完成了！") }, /* afterSlideLoad：当幻灯片加载完成时执行的函数，接收四个参数 * >>>anchorLink：幻灯片所在的section的锚点 * >>>index：幻灯片所在的section的序号 * >>>slideAnchor：幻灯片自身的锚点（若是没有显示slideIdex） * >>>slideIdex：幻灯片自身的序号 */ afterSlideLoad:function (anchorLink,index,slideIndex,direction) { console.log(anchorLink); console.log(index); console.log(slideIndex); console.log(direction); } onSlideLeave 左右移动幻灯片加载以前执行的回调函数，与 onLeave 相似， // 接收 anchorLink、index、slideIndex、direction 4个参数 /* anchorLink：幻灯片所在的section的锚点 index：幻灯片所在的section的序号 slideIndex:当前幻灯片自身的index(从0开始) direction：幻灯片移动的方向left和right nextSlideIndex：即将显示的幻灯片的index */ onSlideLeave :function function_name () { }

 

2、move插件

一、插件简介：

Move.js 提供了建立 CSS3 动画的最简单的 JavaScript API。

二、使用方法：

<script type="text/javascript" src="js/move.js"></script> 
（move插件并非JQ插件，是原生插件，无需连接jq文件。）
<script type="text/javascript"> document.getElementById('playButton').onclick = function() { move('.box') .set("margin-left","300px") //设置css样式 .set("margin-top","300px") .add("margin-left", "200px")//add()方法用来增长其已经设置的属性值。该方法必须数值型值，以便用来增长。 //该方法必须有两个参数：属性值和其增量 .sub("margin-left", "200px") //sub()是add()的逆过程，他接受两个相同的参数，但其值将从属性值中减去。 .rotate(90)//该方法经过提供的数值做为参数来旋转元素。 //当方法被调用的时候经过附加到元素的 transform 属性上。  .skew(30, 40)//skew()用于调整一个相对于x和y轴的角度。 //该方法能够被分为skewX(deg)和skewY(deg)两个方法 .scale(3, 3) //该方法用于放大或压缩元素的大小，按照提供的每个值，将调用transform的scale方法 // .then()//用于分割动画为两个集合，并按顺序执行。动画将被分为两步，经过then()方法实现分割 .x(300) //设置X轴位置 .y(300) //设置Y轴位置 和添加margin值效果同样。  .delay(1000) //延时多少毫秒以后执行动画 .duration('5s')//设置动画的播放时间。 .end(function() { alert("Animation Over!"); }) //end()该方法用于Move.js代码片断的结束，他标识动画的结束。 //技术上，该方法触发动画的播放。该方法接受一个可选的callback回掉函数 }; </script>

 

 

3、validate插件

一、插件简介

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，知足应用程序各类需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。全部的捆绑方法默认使用英语做为错误信息，且已翻译成其余 37 种语言。

二、插件的使用：

三、

 

四、使用示范

$(function () { $("#commentForm").validate({ //rules对象 用于声明各个input的验证规则； rules:{ //选择每一个input时须要先选中该input的name，并对应一个对象设置多条验证规则； name:{ required:true, minlength:2 }, email:{ required:true, email:true }, url:{ url:true, } }, //messages对象 用于显示各个input验证不经过时的提示文字。 //messages对应的各个规则都会有默认的提示，若是没有特殊须要，无需单独设置。 messages:{ name:{ required:"这个内容是必填项！", minlength:"这里最少输入两个字符！" }, email:{ required:"这个内容是必填项！", email:"邮箱格式错误！" }, url:{ url:"url格式错误！", } } }) })

五、特殊用法