写在前面:


 

经过系统的学习了原生JS之后,会发现其具有以下三个特点:

1、是一种解释性脚本语言(代码不进行预编译)。
2、主要用来向 HTML 页面添加交互行为。
3、可以直接嵌入 HTML 页面,但写成单独的js文件有利于结构和行为的分离。

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

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

1. jQuery 作为 JavaScript 的代码库,自然是使用 JavaScript 语言编写的。
2. jQuery 的代码非常规范,执行效率也很高,是 JavaScript 编码的优秀范例。
3. 很多情只要使用 jQuery 的方法就可以实现大部分的 JavaScript 功能。

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

 


一、jQuery基础语法 


1、适应JQuery、必须要先导入JQuery。x.x.x.js文件。

 2、JQuery中的选择器: $("选择器").函数();
① $是JQuery的缩写形式,即也可以使用JQuery("选择器").函数();
② 选择器,可以是任何CSS支持的选择符;
3、文档就绪函数:防止文档在未完全加载之前,运行JQuery代码;
 $(document).ready(function() {
 //JQuery代码
 });
 简写形式如下:
 $(function(){});

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

① window.onload必须等到网页中的所有内容(包括图片视频)加载完成后才能执行代码;
文档就绪函数只需要在 网页DOM结构加载完成之后,就可以执行代码;
② window.onload只能写一个,写多个之后只会执行最后一个;
文档就绪函数可以写多个,而且不会覆盖。
4、原生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 () {}; √
5、 由于其其他的库也可能使用$作为自身标识,导致其他的JS库与JQuery冲突。
① 要解决冲突,可以放弃使用$,直接使用JQuery对象。
 
 !function ($) {
 $()//函数之中,就可以使用$代替JQuery对象。
 }(jQuery); 

② [jQuery.noConflict();]

运行这个函数将变量$的控制权让渡给第一个实现它的那个库
在运行这个函数后,就只能使用jQuery变量访问jQuery对象。

二、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异同】
1、相同点:
① 都会把当前标签,以及当前标签的所有子节点,全部删除;
② 都可以在删除时,把当前节点返回。并可以使用变量接受返回的节点,以便后期恢复;

2、 不同点:

使用接受的节点,恢复原节点时。
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)。

三、JQuery 事件及动画


 

【绑定事件的方式】
1、绑定事件的快捷方式。
$("button").eq(0).click(function () {
alert("快捷绑定!");
})

缺点:绑定的事件无法取消!

2、使用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(){});
>>>作用:
不使用事件委派的绑定方式,只能将事件绑定到初始化时的子元素标签上,
当页面新增同类型标签时,这些新增的标签上,没有之前绑定的事件。
而 使用 事件委派时 ,当页面新增更同类型标签时,这些新增的事件也具有之同类型前标签所绑定的事件!
 
3、off()取消事件绑定
$("p").off("click"):取消单事件绑定
$("p").off("click mouseover dbclick"):取消多事件绑定
$(document).off("click","p"):取消委派事件绑定
$("p").off()取消所有的事件绑定
4、使用.one()绑定的事件,只能执行一次;
eg:
$("button").one("click",function () {
alert("one做的 只能点一次!")
})
5、.trigger()自动 触发某元素事件;
第一个参数:是需要触发的事件类型;
第二个参数:(可选)数组格式,表示传递给事件函数的参数;
>>>传递进来的参数,可以在事件函数中,定义形参进行获取
(形参第一个必须是event事件,所以从第二个开始为所传递的参数!)
>>> 也可以直接在函数中,使用arguements对象数组,读取参数;
 
6、.triggerHandler():功能同上,区别如下:
① .triggerHandler()不能触发浏览器默认的HTML事件,如submit等;
② .trigger()可以触发页面中所有匹配元素的事件;
而.triggerHandler()只能触发第一个匹配元素的事件;
③ .trigger()的返回值,返回的是调用当前函数的对象,符合JQuery的可链式语法;
.triggerHandler()返回的是事件函数的返回值,如果事件函数没有返回值,则返回的是Undefined;
 JQuery动画
 1、.show() 让隐藏的元素显示,效果为同时修改元素的宽度、高度、opacity属性;
① 不传参数:直接显示,不进行动画;
② 传参: 参数为时间毫秒数,表示动画多少时间结束;
③ 传入(时间,函数)表示动画完成之后,执行回调函数;
.hidde() 让显示的元素隐藏,与show相反;
 
2、.slideDown() 让隐藏的元素显示,效果为从上往下,逐渐增加高度;
.slideUp() 让显示的元素隐藏,效果为从下往上,逐渐减少高度;
.slideToggle():让显示的元素隐藏,让隐藏的元素显示;
 
3、.fadeIn() 让隐藏的元素淡入显示。
.fadeOut() 让显示的元素淡入隐藏。
.fadeToggle() 让隐藏的元素淡入显示,让显示的元素淡入隐藏。
.fadeTo(动画总时间,结束时透明度,函数)接受的第二个参数,表示最终达到的透明度;
 
4、animate: ({最终的样式属性,键值对对象},
动画事件,动画效果("linear","swing"),
动画执行完后的回调函数)
自定义动画的注意事项:
① 参数一的对象中,链必须使用驼峰法命名。{fontSzie:"18px"}
② 只有数值类型的属性可以使用动画效果。
 

四、JQuery 高级  Ajax


 

台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网、百度搜索等等。
 
 
二、AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准,并且联合使用它们:
  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式,现在基本上被淘汰了,大多数情况下使用JSON数据格式
  AJAX应用程序与浏览器和平台无关的!
三、AJAX的应用函数:
1、.load() 载入远程 HTML 文件代码并插入至 DOM 中。
可以只传入一个参数,表示加载一个静态的HTML代码片段。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
eg:
$("#div1").load("load.html",{参数},function () {对参数进行函数处理});
 
2、$.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 - 内部服务器错误!
3、 $.get(); $.post(); 这两个函数,是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求;
 
接受四个参数:
① 请求的URL路径。 相当于$.ajax()里面的url;
② 向后台传递的数据。 相当于$.ajax()里面的data;
③ 请求成功的回调函数。 相当于$.ajax()里面的success;
④ 预期返回的数据类型。 相当于$.ajax()里面的dataType;
4、 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请求完成(不管成功失败,都会死乞白赖出来)")
})

 


5、 序列化表单数据的一些操作:
①、 序列化表单数据为一个字符串
$("#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(){
 
})
})

 


2、序列化表单数据为一个数组
$("#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);
});
3、 $.parseJSON(str) 将JSON字符串转为JSON对象
标准的JSON字符串,键必须用双引号包裹。
var str = '{"age":12}'
var obj = $.parseJSON(str);
console.log(obj);
4、 .trim() 去除掉字符串两端空格
var str1 = " 123 ";
console.log(str1.trim());
5、 用户遍历数组和对象
遍历数组时,函数的第一个参数是下标,第二个参数是值;
遍历对象时,函数的第一个参数是键,第二个参数是值
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);
});

 


五、JQuery插件 plugin


 1、fullpage插件


1、fullpage插件简介:

 

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
2、引入文件
fullPage.js必须在JQuery.js文件之后导入!

 

3、htm基本样式:

 

在fullPage中,class为section表示一个屏幕。
section不能执行包裹在body中,必须使用一个div包裹所有的section。
section中的每一个slide表示一个横向幻灯片,可在当前屏中左右横向切换。
3、CSS样式写法无差别
4、JavaScript:

 

5、属性配置:
①、选项:
 
 
2、回调函数
① 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 () {
 
}

 


二、move插件
1、插件简介:
Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。
2、使用方法:
<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>

 


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

3、

 
4、使用示范
$(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格式错误!",
}
}
})
})
5、特殊用法
 
 

 
 
posted on 2017-09-18 06:28  卡尔西法calcifer  阅读(1114)  评论(2编辑  收藏  举报