jQuery
一、jQuery介绍
二、jQUery的选择器
三、jQuery动画效果
四、jQuery的属性操作
五、jQuery的文档操作
六、jQuery的位置信息
七、js的事件流的概念（重点）
八、jQuery的事件操作 *****
九、事件绑定和解绑
十、轮播实现(各种)
十一、jQuery的ajex
十二、jquery内容补充
一、jQuery介绍
1. 为什么要用jQuery？
解决js代码的一些问题
- window.onload 事件有事件覆盖的问题，因此只能写一个事件。
- 代码容错性差。
- 浏览器兼容性问题。
- 书写很繁琐，代码量多。
- 代码很乱，各个页面到处都是。
- 动画效果很难实现。
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。学习jQuery，主要学习如何使用jQuery封装好的那些功API，在使用jQuery的API时，都是方法调用，加()调用
jQuery的第一个代码
用原生js来实现下面代码效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; margin-top: 20px; display: none; } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementsByTagName('button')[0]; var divArr = document.getElementsByTagName('div'); oBtn.onclick = function () { for (var i = 0; i < divArr.length; i++) { divArr[i].style.display = "block"; divArr[i].innerHTML = "赵云"; } } } </script> </head> <body> <button>操作</button> <div></div> <div></div> <div></div> </body> </html>
如果用 jQuery 来写，保持其他的代码不变，<script>部分的代码修改为：（需要提前引入 ）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; margin-top: 20px; display: none; } </style> </head> <body> <button>操作</button> <div></div> <div></div> <div></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 获取dom元素 var oBtn = $('button'); //根据标签名获取元素 var oDiv = $('div'); //根据标签名获取元素 oBtn.click(function(){ oDiv.show(1000);//显示盒子 oDiv.html('赵云'); // 设置内容 });//事件是通过方法绑定的 }) </script> </body> </html>
2. 两大特点
- 链式编程：比如.show()和.html()可以连写成.show().html()。
- 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
3. 使用jQuery的基本步骤
（1）引包
<script type="text/javascript" src="jquery-3.3.1.js"></script>
（2）入口函数
<script type="text/javascript"> $(document).ready(function(){}) 或$(function(){}) //文档加载完调用 或$(window).ready(function(){}) // 文档和图片都加载完调用
（3）功能实现代码（事件处理）
主要：导包的代码一定要放在js代码的最上面。
jQuery入口函数与js入口函数的区别：
区别一：书写个数不同：
- Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
- jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
- Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
4. js中的DOM对象 和 jQuery对象 比较（重点，难点）
（1）区别：
通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。
（2）DOM2级事件：
① 捕获阶段
② 处于目标阶段
③ 冒泡阶段（子代事件触发时会同时触发附带相同的事件）
需要阻止冒泡
- 所有的事件方法都会有一个事件对象：event
$('button').click(function(event){ event.stopPropagation(); //阻止冒泡 事件驱动})
（3）相互转换
① DOM 对象 转为 jQuery对象：
$(js对象);
② jQuery对象 转为 DOM 对象：
jquery对象[index]; //方式1（推荐）
jquery对象.get(index); //方式2
jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow'; $('div')[3].style.backgroundColor = 'green';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
举例：
隔行换色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <script> //入口函数 jQuery(function () { var jqLi = $("li"); for (var i = 0; i < jqLi.length; i++) { if (i % 2 === 0) { //jquery对象，转换成了js对象 jqLi[i].style.backgroundColor = "pink"; } else { jqLi[i].style.backgroundColor = "yellow"; } } }); </script> </head> <body> <ul> <li>小马哥</li> <li>小马哥</li> <li>小马哥</li> <li>小马哥</li> <li>小马哥</li> <li>小马哥</li> </ul> </body> </html>
效果如下
二、jQUery的选择器
1. 基本选择器
符号 说明 用法
$("#demo":) 选择id为demo的第一个元素 $("#demo").css("background","red");
$(".liItem") 选择所有类名为liItem $(".liItem").css("background","red");
$("div1") 选择所有标签名字为div的元素 $("div").css("background",red);
$("*") 选择所有元素 $("*").css("background","red")
$(".liItem,div") 选择多个元素（liItem和div元素） $(".liItem,div").css("background","red")
规律：$("selector").css("background","red");
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> <div id="box"></div> <div class="box"></div> <div class="box"></div> <div></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //入口函数 $(function(){ //三种方式获取jquery对象 var jqBox1 = $("#box"); var jqBox2 = $(".box"); var jqBox3 = $('div'); //操作标签选择器 jqBox3.css('width', '100'); jqBox3.css('height', 100); jqBox3.css('background-color', 'red'); jqBox3.css('margin-top', 10); //操作类选择器(隐式迭代，不用一个一个设置) jqBox2.css("background", "green"); jqBox2.text('哈哈哈') //操作id选择器 jqBox1.css("background", "yellow"); }) </script> </body> </html>
效果如图：
2. 层级选择器
符号 说明 用法
空格 后代选择器 $("div span").css("background","red")
> 子代选择器 $("div>span").css("background","red")
+ 紧邻选择器，选择紧挨着的下一个元素 $("div+p").css("background","red")
~ 兄弟选择器，选择后面的所有兄弟元素 $("div~p").css("background","red")
层级选择器选择了选择符后面那个元素，比如，div>p，选择的是>后面的p的元素
代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <script> $(function () { //获取ul中的li设置为粉色 //后代：儿孙重孙曾孙玄孙.... var jqLi = $("ul li"); jqLi.css("margin", 5); jqLi.css("background", "pink"); //子代：亲儿子 var jqOtherLi = $("ul>li"); jqOtherLi.css("background", "red"); }); </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> </ul> </body> </html>
效果如下：
3. 基本过滤选择器
符号 说明 用法
:eq(index) 选择序号为index的元素（从0开始） $("li:eq(1)").css("background","red")
:gt(index) 选择序号大于index的元素（从0开始） $("li:gt(2)").css("background","red")
:It(index) 选择序号小于index的元素（从0开始） $("li:It(2)").css("background","red")
:odd 选择所有序号为奇数行的元素 $("li:odd").css("background","red")
:even 选择所有序号为偶数行的元素 $("li:even").css("background","red")
:first 选择匹配第一个元素 $("li:first").css("background","red")
:last 选择匹配最后一个元素 $("li:last").css("background","red")
解释：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//获取第一个 :first ,获取最后一个 :last
//奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','green');
//选中索引值为1的元素 *
$('li:eq(1)').css('font-size','30px');
//大于索引值1
$('li:gt(1)').css('font-size','50px');
//小于索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
效果如下：
4. 属性选择器
符号 说明 用法
$("a[href]") 选择包含href属性的元素 $("a[href]").css("background","red")
$("a[href='luffy']") 选择href属性值为itcast的所有a标签 $("a[href='luffy']").css("background","red")
$("a[href!='baidu']") 选择所有href属性不等baidu包括没有href的元素 $("a[href!='baidu']").css("background","red")
$("a[href^='web']") 选择所有以web开头的元素 $("a[href^='web']").css("background","red")
$("a[href$='cn']") 选择所有以web开头的元素 $("a[href$='cn']").css("background","red")
$("a[href*='i']") 选择所有包含i这个自负的元素，可以是中英文 $("a[href*='i']").css("background","red")
$("a[href][title='我']") 选择所有符合指定属性规则的元素，都符合才会被选中 $("a[href][title='我']").css("background","red")
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');
//匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px');
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');
//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
})
</script>
</html>
效果如下：
5. 筛选选择器
符号（名称） 说明 用法
find(delector) 查找指定元素的所有后代元素（包含子子孙孙） $("#j_wrap").find("li").css("color","red")；
选择id为j_wrap的所有后代元素li
children() 查找指定元素的直接子元素（亲儿子元素） $("#j_wrap").children("ul").css("color","red")
选择id为j_wrap的所有子代元素ul
siblings() 查找所有兄弟元素（不包括自己） $("#j_liItem").siblings().css("color","red")
选择id为j_liItem的所有兄弟元素
parent() 查找父元素（亲的） $("#j_liItem").parent("ul").css("color","red")
选择id为j_liItem的父元素
eq(index) 查找指定元素的第index个元素，index是索引号，从0开始 $("li").eq(2).css("color","red")
选择所有li元素中的第二个
代码如下：
5. 筛选选择器 符号（名称） 说明 用法 find(delector) 查找指定元素的所有后代元素（包含子子孙孙） $("#j_wrap").find("li").css("color","red")； 选择id为j_wrap的所有后代元素li children() 查找指定元素的直接子元素（亲儿子元素） $("#j_wrap").children("ul").css("color","red") 选择id为j_wrap的所有子代元素ul siblings() 查找所有兄弟元素（不包括自己） $("#j_liItem").siblings().css("color","red") 选择id为j_liItem的所有兄弟元素 parent() 查找父元素（亲的） $("#j_liItem").parent("ul").css("color","red") 选择id为j_liItem的父元素 eq(index) 查找指定元素的第index个元素，index是索引号，从0开始 $("li").eq(2).css("color","red") 选择所有li元素中的第二个 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> </p> <button>按钮</button> </div> <ul> <li class="list">2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> //获取第n个元素 数值从0开始 $('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法 $('span').last().css('color','greenyellow'); $('span').first().css('color','greenyellow'); //查找span标签的父元素（亲的） $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'}); //选择所有的兄弟元素（不包括自己） $('.list').siblings('li').css('color','red'); //查找所有的后代元素 $('div').find('button').css('background','yellow'); //不写参数代表获取所有子元素。 $('ul').children().css("background", "green"); $('ul').children("li").css("margin-top", 10); </script> </html> 效果如下：
效果如下：
三、jQuery动画效果
1. 显示动画
① $("div").show() 解释：无参数，表示让指定的元素直接显示出来 ② $('div').show(3000); 解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。 ③ $("div").show("slow"); 参数可以是： - slow 慢：600ms - normal 正常：400ms - fast 快：200ms 解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。 ④ //show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); }); 解释：动画执行完后，立即执行回调函数。
总结：
上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
2. 隐藏动画
方式参照上面的show()方法的方式。如下：
$(selector).hide(); $(selector).hide(1000); $(selector).hide("slow"); $(selector).hide(1000, function(){});
3. 开关式显示隐藏动画
$('#box').toggle(3000,function(){});
toggle()方法就是先执行show()，再执行hide()
代码如下：
$('#btn').click(function(){ $('#box').toggle(3000,function(){ $(this).text('盒子出来了'); if ($('#btn').text()=='隐藏') { $('#btn').text('显示'); }else{ $('#btn').text('隐藏'); } }); })
4. 滑入和滑出
1）滑入和滑出效果（类似于生活中的卷帘门）
$(selector).slideDown(speed, 回调函数);
- 解释：下拉动画，显示元素。
- 注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
2）滑出动画效果：
$(selector).slideUp(speed, 回调函数);
- 解释：上拉动画，隐藏元素。
3）3、滑入滑出切换动画效果：
$(selector).slideToggle(speed, 回调函数);
- 滑入滑出切换动画效果代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]); $("div").slideDown(2000, function () { alert("动画执行完毕！"); }); }) //滑出动画 $("button:eq(1)").click(function () { //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]); $("div").slideUp(2000, function () { alert("动画执行完毕！"); }); }) $("button:eq(2)").click(function () { //滑入滑出切换（同样有四种用法） $("div").slideToggle(1000); }) }) </script> </head> <body> <button>滑入</button> <button>滑出</button> <button>切换</button> <div></div> </body> </html>
5. 淡入淡出动画
1）淡入动画效果：
$(selector).fadeIn(speed, callback);
- 作用：让元素以淡淡的进入视线的方式展示出来。
2）淡出动画效果：
$(selector).fadeOut(1000);
- 作用：让元素以渐渐消失的方式隐藏起来
3）淡入淡出切换动画效果：
$(selector).fadeToggle('fast', callback);
- 作用：通过改变透明度，切换匹配元素的显示或隐藏状态。
参数的含义同show()方法。
- 淡入淡出切换动画效果代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; display: none; /*透明度*/ opacity: 0.5; background-color: red; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function () { //点击按钮后产生动画 $("button:eq(0)").click(function () { // //淡入动画用法1: fadeIn(); 不加参数 $("div").fadeIn(); // //淡入动画用法2: fadeIn(2000); 毫秒值 // $("div").fadeIn(2000); // //通过控制 透明度和display //淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms // $("div").fadeIn("slow"); // $("div").fadeIn("fast"); // $("div").fadeIn("normal"); //淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]); // $("div").fadeIn(5000,function () { // alert("动画执行完毕！"); // }); }) //滑出动画 $("button:eq(1)").click(function () { // //滑出动画用法1: fadeOut(); 不加参数 $("div").fadeOut(); // //滑出动画用法2: fadeOut(2000); 毫秒值 // $("div").fadeOut(2000); //通过这个方法实现的：display: none; // //通过控制 透明度和display //滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms // $("div").fadeOut("slow"); // $("div").fadeOut("fast"); // $("div").fadeOut("normal"); //滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]); // $("div").fadeOut(2000,function () { // alert("动画执行完毕！"); // }); }) $("button:eq(2)").click(function () { //滑入滑出切换 //同样有四种用法 $("div").fadeToggle(1000); }) $("button:eq(3)").click(function () { //改透明度 //同样有四种用法 $("div").fadeTo(1000, 0.5, function () { alert(1); }); }) }) </script> </head> <body> <button>淡入</button> <button>淡出</button> <button>切换</button> <button>改透明度为0.5</button> <div></div> </body> </html>
6. 自定义动画
语法：
$(selector).animate({params}, speed, callback);
作用：执行一组CSS属性的自定义动画。
第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）
代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery-3.3.1.js"></script> <script> jQuery(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = { "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //自定义动画 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html>
7. 停止动画
$(selector).stop(true, false);
里面的两个参数，有不同的含义。
第一个参数：
true：后续动画不执行。
false：后续动画会执行。
第二个参数：
true：立即执行完成当前动画。
false：立即停止当前动画。
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-color: pink; } .wrap li { background-color: green; } .wrap > ul > li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style> <script src="jquery-3.3.1.js"></script> <script> //入口函数 $(document).ready(function () { //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 var jqli = $(".wrap>ul>li"); //绑定事件 jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script> </head> <body> <div class="wrap"> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">二级菜单1</a> <ul> <li><a href="javascript:void(0);">二级菜单2</a></li> <li><a href="javascript:void(0);">二级菜单3</a></li> <li><a href="javascript:void(0);">二级菜单4</a></li> </ul> </li> <li> <a href="javascript:void(0);">三级菜单1</a> <ul> <li><a href="javascript:void(0);">三级菜单2</a></li> <li><a href="javascript:void(0);">三级菜单3</a></li> <li><a href="javascript:void(0);">三级菜单4</a></li> </ul> </li> </ul> </div> </body> </html>
ps:
javascript:void(0); //跟javascript:;效果一样
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
四、jQuery的属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
1. html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
① attr() 设置属性值或者 返回被选元素的属性值
//获取值：attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id') //获取值 console.log(id) var cla = $('div').attr('class') console.log(cla) //设置值 $('div').attr('class','box') //1.设置一个值 设置div的class为box $('div').attr({name:'hahaha',class:'happy'}) //2.设置多个值，参数为对象，键值对存储
② removeAttr() 移除属性
//删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //删除多个属性 $('#box').removeAttr('name class');
2. DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
① prop() 设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
语法：
- 返回属性的值：
$(selector).prop(property)
- 设置属性和值：
$(selector).prop(property,value)
- 设置多个属性和值：
$(selector).prop({property:value, property:value,...})
当使用form表单里单选按钮时，获取checked的true和false值时用prop(),其他用attr()
② removeProp() 移除属性
3. 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
① addClass 添加多个类名
$('div').addClass("box");//追加一个类名到原有的类名 $('div').addClass("box box2");//追加多个类名
② removeClass 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')； // 移除指定的类（一个或多个） $('div').removeClass(); // 移除全部的类
可以通过添加删除类名，来实现元素的显示隐藏
代码如下：
var tag = false; $('span').click(function(){ if(tag){ $('span').removeClass('active') tag=false; }else{ $('span').addClass('active') tag=true; } })
③ toggleClass 如果存在（不存在）就删除（添加）一个类。
语法：toggleClass('box')
$('span').click(function(){ //动态的切换class类名为active $(this).toggleClass('active') })
4. 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
① html() 获取选中标签元素中得所有的内容
语法;
$('#box').html(); //html() 是获取选中标签元素中所有的内容
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
② text() 获取匹配元素的包含的文本内容
语法：
$('#box').text();
设置值：
设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
③ val() 用于表单控件中获取值，比如input textarea select等等
$('input').val('设置了表单控件中的值')； // 设置值：
五、jQuery的文档操作
1. 插入操作
①
父元素.append(子元素)
解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
代码如下：
var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app'));
PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
②
子元素.appendTo(父元素)
解释：追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
③
父元素.prepend(子元素)；
解释：前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
④
子元素.prependTo(父元素)；
解释：前置添加， 添加到父元素的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul')
⑤ 语法：
兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；
解释：在匹配的元素之后插入内容
$('ul').after('<h4>我是一个h3标题</h4>') $('<h5>我是一个h2标题</h5>').insertAfter('ul')
⑥ 语法：
兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；
解释：在匹配的元素之后插入内容
$('ul').before('<h3>我是一个h3标题</h3>') $('<h2>我是一个h2标题</h2>').insertBefore('ul')
2. 克隆操作
语法：
$(选择器).clone();
解释：克隆匹配的DOM元素
$('button').click(function() { // 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) $(this).clone(true).insertAfter(this); })
3. 修改操作
①
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string、js对象、jquery对象。
//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));
②
$('<p>哈哈哈</p>')replaceAll('h2');
解释：替换所有。将所有的h2标签替换成p标签。
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4. 删除操作
①
$(selector).remove();
解释：删除节点后，事件也会删除（简言之，删除了整个标签）
$('ul').remove();
②
$(selector).detach();
解释：删除节点后，事件会保留
var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)
③
$(selector).empty();
解释：清空选中元素中的所有后代节点
//清空掉ul中的子元素，保留ul $('ul').empty()
六、jQuery的位置信息
1. 宽度和高度 .width()和.height()
① .width()
获取宽度
- .css(width) 返回完整单位的字符串（例如，400px）
- width() 返回无单位的数值，可供计算
② .width(value) 给每个匹配的元素设置css宽度
③ .height() 获取匹配元素集合中第一个元素的当前计算高度值
④ .height(value) 设置每一个匹配元素的高度值
2. innerHerght()和innerWidth()
① 获取内部宽
.innerWidth()
- 描述：为匹配的元素集合中获取第一个元素的当前计算宽度值,内容+padding，但是不包括border。
- ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.width()代替。
② 设置内部宽
.innerWidth(value);
- 描述： 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px
③ 获取内部高
.innerHeight()
- 描述：为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
- ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.height()代替。
④ 设置内部高
.innerHeight(value);
- 描述： 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）
3.outWidth和outHeight()
① 获取外部宽
.outerWidth( [includeMargin ] )
- 描述：获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）
- includeMargin (默认: false)
类型： Boolean
一个布尔值，表明是否在计算时包含元素的margin值。
- 这个方法不适用于window 和 document对象，可以使用.width()代替
② 设置外部宽
.outerWidth( value )
- 描述： 为匹配集合中的每个元素设置CSS外部宽度。
③ 获取外部宽
.outerHeight( [includeMargin ] )
- 描述：获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）
- includeMargin (默认: false)
类型： Boolean
一个布尔值，表明是否在计算时包含元素的margin值。
- 这个方法不适用于window 和 document对象，可以使用.width()代替
④ 设置外部高
.outerHeight( value )
- 描述： 为匹配集合中的每个元素设置CSS外部高度。
4. 偏移
① .offset() 返回一个包含top 和 left属性的对象 ，坐标相对于文档
② .offset( coordinates ) 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。
例子：
$("p").offset({ top: 10, left: 30 });
5. 元素坐标
.position() 返回值： object{top,left}
获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )
当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。
6. 滚动距离
① 水平方向
.scrollLeft() //获取
描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）
.scrollLeft(value) //设置
描述：设置每个匹配元素的水平方向滚动条位置。
② 垂直方向
.scrollTop() //获取
描述：获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）
.scrollLeft( value ) //设置
描述：设置每个匹配元素的垂直方向滚动条位置。
七、js的事件流的概念（重点*****）
1. 事件流描述的是从页面中接收事件的顺序
- “DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
</body>
</html>
当我们点击这个btn的时候，看看页面都输出了什么：
在解释输出结果为什么是这样之前，还有几个知识点需要了解一下即可：
1）addEventListener
- addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
2）document、documentElement和document.body三者之间的关系：
- document代表的是整个html页面；
- document.documentElement代表的是<html>标签；
- document.body代表的是<body>标签；
接着我们就来聊聊上面的例子中输出的结果为什么是这样：
在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:
在DOM事件流中，实际的目标在捕获阶段不会收到事件，而是在“处于目标阶段”被触发，并在事件处理中被看成"冒泡阶段"的一部分，然后冒泡阶段发生，事件又传播回文档
八、jQuery的事件操作 *****1. 事件操作（熟记于心）
2. 事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件中函数的形参接收的是一个event对象
属性和方法：
target 返回触发此事件的元素（事件的目标节点）。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。
initEvent() 初始化新创建的 Event 对象的属性。
3. Event对象的一些兼容性写法（了解）
event || (event = window.event); //获得event对象兼容性写法 event.target||event.srcElement //获得target兼容型写法 event.preventDefault ? event.preventDefault() : (event.returnValue = false); //阻止浏览器默认行为兼容性写法 event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //阻止冒泡写法
九、事件绑定和解绑
1. 绑定事件
bind(type,data,fn)
描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
参数解释：
- type (String) : 事件类型
- data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
- fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
- 当每个p标签被点击的时候，弹出其文本
$("p").bind("click", function(){ alert( $(this).text() ); });
- 事件处理之前传递一些附加的数据。
function handler(event) { //event.data 可以获取bind()方法的第二个参数的数据 alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
- 通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
- 通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){ event.preventDefault(); });
2. 解绑事件
unbind(type,fn);
描述：
- bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
- 如果没有参数，则删除所有绑定的事件。
- 如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
参数解释：
- type (String) : (可选) 事件类型
- fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例：
- 把所有段落的所有事件取消绑定
$("p").unbind()
- 将段落的click事件取消绑定
$("p").unbind( "click" )
- 删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () { //绑定事件和解绑事件的事件处理函数 }; $("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件 $("p").unbind("click", foo); // 只解绑了p段落标签的click事件
3. 自定义事件
trigger(type,data);
描述：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。
参数解释：
- type (String) : 要触发的事件类型
- data (Array) : (可选)传递给事件处理函数的附加参数
示例：
- 给一个按钮添加自定义的事件
$('button').bind('myClick',function(ev,a,b){ //给button按钮添加的自定义事件myClick事件 })
- 然后通过trigger()触发自定义的事件
$('button').trigger('myClick',[1,2])
4. 补充 一次性事件
one(type,data,fn)
描述：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同
参数解释：
- type (String) : 事件类型
- data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
- fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
- 当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){ //只有第一次点击的时候才会触发，再次点击不会触发了 alert( $(this).text() ); });
5. 事件委托（事件代理）
① 原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
② 作用：
- 性能要好
- 针对新创建的元素，直接可以拥有事件
③ 使用情景：
- 为DOM中的很多元素绑定相同事件；
- 为DOM中尚不存在的元素绑定事件；
示例：
<body>
<ul>
<li class="luffy">路飞</li>
<li>路飞</li>
<li>路飞</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//通过on()方法
$('ul').on('click','#namei,.luffy',function(){
console.log(this);
})
//未来追加的元素
$('ul').append('<a id="namei">娜美</a>')
}
</script>
语法：
on(type,selector,data,fn);
描述：在选定的元素上绑定一个或多个事件处理函数
参数解释
- events( String) : 一个或多个空格分隔的事件类型
- selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
- data: 当一个事件被触发时，要传递给事件处理函数的event.data。
- fn:回调函数
十、轮播实现(各种)
无缝轮播实现（比较考验逻辑思维）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .slider-list{ width: 580px; overflow: hidden; margin: 100px auto; position: relative; } .slider-list .slider-wrapper{ height: 470px; } .slider-wrapper ul{ height: 100%; position: relative; } .slider-wrapper ul li{ float: left; width: 590px; height: 470px; } .slider-wrapper ul li a{ display: block; width: 100%; height: 100%; } .focus-img{ width: 590px; height: 470px; } button{ position: absolute; width: 24px; height: 40px; top: 50%; line-height: 40px; text-align: center; background-color: rgba(0,0,0,.2); color: white; font-size: 30px; border: 0; outline: none; cursor: pointer; z-index: 99; } button.next{ right: 0; } button.prev{ left: 0; } .slider-index{ position: absolute; bottom: 10px; left:250px; z-index: 2; } .slider-index span{ display: inline-block; width: 10px; height: 10px; border: 2px solid red; border-radius: 50%; } .slider-index span.active{ background-color: orange; } </style> </head> <body> <div class="slider-list"> <div class="slider-wrapper"> <ul> </ul> </div> <button class="next">></button> <button class="prev"><</button> <div class="slider-index"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 1.获取本地图片数据 590*470 var imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg']; // 获取图片的宽度 var imgWidth = 590; var len = $('span').length; // 2.遍历数据 将图片添加到ul中 for(let i = 0;i < imgArr.length;i++){ let width = i*imgWidth; $(`<li> <a href="javascript:;"> <img src=${imgArr[i]} alt=${i}> </a> </li>`).appendTo('.slider-wrapper ul').addClass('slider-item') } // 设置图片的类名 $('img').addClass('focus-img'); // 设置父盒子的总宽度 $('.slider-wrapper').width((imgArr.length+1)*imgWidth); $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth); // 初始化 // 默认显示第一张图片 init(); function init(){ $("ul").css("left",-imgWidth); } // 下一张 $('button.next').click(function(event) { next(); }); // 控制图片显示第几张 var count = 1; function next(){ if (count ==len+1) { count = 2; $("ul").css("left",-imgWidth); }else{ count++; } $('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200); // 控制轮播图索引改变颜色 if (count>len) { $("span").eq(0).addClass("active").siblings("span").removeClass("active"); }else{ $("span").eq(count-1).addClass("active").siblings("span").removeClass("active"); } } // 给小圆圈添加点击事件 $('span').click(function(){ //自己的样式 $(this).addClass("active").siblings("span").removeClass("active"); count = $(this).index()+1; $("ul").animate({"left":-count*imgWidth},200); }) setInterval(next,2000); }) </script> </body> </html>
模仿京东轮播图效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul,ol{ list-style: none;} .wrapper{ width: 580px; height: 240px; margin: 100px auto; /*overflow: hidden;*/ position: relative; } .wrapper ul{ width: 100%; height: 240px; overflow: hidden; } .wrapper ul li{ float: left; width: 580px; height: 240px; } ol{ position: absolute; right: 0; bottom: 10px; width: 190px; } ol li{ float: left; width: 20px; height: 20px; margin: 0 5px; text-align: center; border-radius: 50%; cursor: pointer; background-color: #abc; } ol li.current{ background-color: pink; } </style> <script type="text/javascript" src="./jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 根据ol下li的索引号，匹配ul下相对应li的索引号 $(".wrapper ol li").mouseenter(function () { $(this).addClass("current").siblings().removeClass("current"); $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut(); }); }); </script> </head> <body> <div class="wrapper"> <ul> <li><img src="./1.jpg" alt=""/></li> <li><img src="./2.jpg" alt=""/></li> <li><img src="./3.jpg" alt=""/></li> <li><img src="./4.jpg" alt=""/></li> <li><img src="./5.jpg" alt=""/></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
十一、jQuery的ajex
AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。通过AJAX方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。
1.jQuery的load()方法
jQuery load()方法是简单但强大的AJAX方法。
load()方法从服务器加载数据，并把返回的数据放入被选元素中。
- 第一种情况
$('#btn').click(function(){ //只传一个url，表示在id为#new-projects的元素里加载index.html $('#new-projects').load('./index.html'); })
- 第二种情况
- 第三种情况
//加载文件之后，会有个回调函数，表示加载成功的函数 $('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){ });
2. jquery的getJSON方法
jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中
语法:
$.getJSON(url,[data],[callback])
参数解释：
- url参数：为请求加载json格式文件的服务器地址
- 可选项data参数：为请求时发送的数据
- callback参数：为数据请求成功后执行的函数
$.getJSON("./data/getJSON.json", function (data) { var str = "";//初始化保存内容变量 $.each(data, function(index,ele) { $('ul').append("<li>"+ele.name+"</li>") }); })
3.jquery的$.get()方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法：
$.get(URL,callback);
- url参数：规定你请求的路径，是必需参数
- callback参数：为数据请求成功后执行的函数
$.get('./data/getJSON.json',function(data,status){ console.log(status); //success 200状态码 ok的意思 })
4.jquery的post()方法
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面
语法：
$.post(URL,data,callback);
- url参数：规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据
- 可选的callback参数：为数据请求成功后执行的函数
$.post('/index',{name:'张三'},function(data,status){ console.log(status); })
5.jquery的$.ajax()方法（重要）*****
1）经常使用的参数（后面讲django课程部分会详细讲ajax技术的原理）
- url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
- type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
- timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
- async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
- cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
- data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
- dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml： 返回XML文档，可用JQuery处理。
html： 返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script： 返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json： 返回JSON数据。
jsonp： JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text： 返回纯文本字符串。
- beforeSend： 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }
- complete： 要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }
- success： 要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等
- error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }
- contentType： 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
- dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }
- dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }
- global： 要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
- ifModified： 要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
- jsonp： 要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
- username： 要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
- password： 要求为String类型的参数，用于响应HTTP访问认证请求的密码。
- processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
-scriptCharset： 要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用
2）get方式
//get()方式 $.ajax({ url:'./data/index.txt', type:'get', dataType:'text', success:function(data){ $('p').html(data); }, error:function(error){ console.log(error) }
3）post方式
//post()方式 $.ajax({ url:'/index', type:'post', data:{name:'张三',age:12}, success:function(data){ $('p').html(data); }, error:function(error){ console.log(error) }
ps:
注意：以上所有操作,请在服务器上运行此代码，如果没有服务器，可以在本地搭建本地服务器。
好吧！！咱们还没学，我们可以使用PCCharm,WebStrom,HBuilder上运行此代码。但是post请求的方法 我们暂时没法演示，
后面在django部分讲到服务器的知识点后，会给大家详细演示get请求和post请求的处理。
4）XMLHttpRequest()对象补充
有如下概念：
1.Ajax能够是实现异步传输，所依赖的就是JavaScript中的XMLHttpRequest
2.XMLHttpRequest对象是XMLHttp组件的对象，它是一个抽象对象，允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端
3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互，不必每次刷新页面
4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件提供，后受到广泛应用
5.在使用XMLHttpRequest发送请求和处理相应之前需要先创建一个XMLHttpRequest对象
6.XMLHttpRequest不是W3C标准，可采用多种方法用JavaScript来创建XMLHttpRequest实例
7.在IE中XMLHttpRequest实现为一个ActiveX控件，而其他浏览器则实现为一个JavaScript内置对象
5）XMLHttpRequest对象属性（接收并显示当前状态）
1.readySate-记录返回请求的状态
。0-为初始化：对象已经建立，单位初始化，open方法还未调用；
。1-初始化：对象已经建立，但还未调用send方法发送请求；
。2-发送数据：send方法已调用，但HTTP头未知；
。3-数据传输中：已经接受部分数据，但响应不完全；
。4-完成：数据接受完成，此时才可以获取完整的返回数据
2.responseText-接收客户端的HTTP响应的文本内容
。只读
。当readySate为1/2，responseText值是一个空字符串；
。当readyState为3，响应信息正在接受还未完成；
。当readyState为4，表示可以响应信息已经接收完成
。xmlHttp默认响应数据编码为UTF-8
3.responseXML-在send（）执行后，将返回的信息格式化为XML Document对象
。Content-Type指定的MIME类型应该为text/HTML
。如果Content-Type不包含这种类型，responseXML在接收时将会得到一个null值
4.status-在send（）执行后，可使用status读取事物状态
。长整型数据
。返回当前请求的HTTP的状态码
。只有当readyState为3或4时才使用该属性，否则读取status会发生错误
。100-客户必须继续发送请求
。200-交易成功
。400-错误请求
。403-请求不允许
。404-没有发现文件、查询、URL
。500-服务器内部错误
。502服务器暂时不可使用
。505-服务器不支持或拒绝不支持请求头中的HTTP版本
5.statusText-send（）执行后，可通过statusText读取事物状态
。返回当前HTTP请求的状态行
。只有当readyState为3或4时才可使用该属性，否则读取state会发生错误
6.Onreadystatechange-readyState发生变化时所要执行的操作
。通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理
。在事件处理函数中根据readyState的状态值进行相应的处理
代码如下：
//1、先创建 XMLHttpRequest对象 var xhr = new XMLHttpRequest(); console.log(xhr.readyState); // 2.做出响应之后会调用此方法 状态机 xhr.onreadystatechange = function(){ // if (true) {} if (xhr.readyState===4) { console.log(xhr.responseText) document.getElementById('content').innerHTML = xhr.responseText } } document.querySelector('#btn').onclick = function(){ var username = document.getElementById('username').value; var pwd = document.getElementById('pwd').value; //3.初始化HTTP请求参数，但是并不发送请求。 //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步 xhr.open('GET',`http://localhost:3000/signin1?username=${username}&pwd=${pwd}`,true); //使用post方式发送数据 //xmlhttp.open("POST","http://localhost:3000/signin1",true); //post需要自己设置http的请求头 //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // http://localhost:3000/signin?username=chyingp&pw=123456 //发起请求 第一个参数 是请求的方式 大写 打开连接 //4，发送数据，开始和服务器进行交互 //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。 //中如果true, send这句话会立即执行 //如果是false（同步），send会在服务器数据回来才执行 xhr.send(null); //因为是get所以send中不需要内容 //xhr.send('name=' +username); }
十二、jquery内容补充
jquery除了咱们上面讲解的常用知识点之外，还有jquery 插件、jqueryUI知识点
jqueryUI 官网：
jqueryUI 中文网：
jquery插件内容包含
官网demo：
https://www.oschina.net/project/tag/273/jquery
里面包含了jquery插件效果和实现代码，大家可以好好的玩一下了！
