公告

JQuery

Posted on 2022-03-19 15:11 夜雨初凉阅读(384) 评论(0) 编辑收藏举报

一、预备

本内容需要具备的基础知识：

html、css、javascript

若js基础知识不牢固，稍做复习，顺带了解下ES6

1、javascript组成

JavaScript的实现包括以下3个部分：

核心（ECMAScript）：描述了JS的语法和基本对象。

文档对象模型（DOM）：处理网页内容的方法和接口。

针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

DOM 有什么用？就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：document.title = '我的标题';

浏览器对象模型（BOM）：与浏览器交互的方法和接口。

window对象

BOM的核心对象是window，他表示浏览器的一个实例。他既是通过JavaScript访问浏览器窗口的一个接口，又是ECMScript规定的Global对象。

location对象

location最有用的对象之一；既是window对象的属性又是document对象的属性

window.location == document.location ,他们两个指向的是同一个对象

navigator对象

检测显示网页的浏览器类型；常用的是检测是否安装了特定插件

srceen对象

用处不大，用于站点分析

history对象

history对象保存着用户上网的历史记录

DOM和BOM最大区别

DOM 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

2、函数

具名函数

//一般写法
function 名字(){

}
//特殊写法，很少见，了解即可
var a = function b(){

}
//上面的特殊写法可以看成（注意:仅仅只能说是看成，这样方便理解）
var a = function(){
  b();
  function b(){

  }
}

匿名函数

var f = function(){

}

3.1、new function 和 fuction区别

new function：当函数无返回值，或返回值基本类型时，会忽略掉返回值，并构造一个对象返回，并将函数内的this指向构造出来的对象

let fuc1 = function(){
    this.name = '张三';
    this.age = 18;
    return "基本类型的字符串";
}

let o1 = new fuc1();
//对象值为：{name: '张三', age: 18}
console.info(o1);


let fuc2 = function(){
    this.name = '张三';
    this.age = 18;
    //无返回值
}
let o2 = new fuc2();
//对象值为：{name: '张三', age: 18}
console.info(o2);

new function:当函数有返回值，且返回值为对象或数组时，同样也会构造一个对象，并将函数内的this指向构造出来的对象，但是返回的对象或数组会替换掉构造出来的对象返回出去

let fuc1 = function(){
    this.name = '张三';
    this.age = 18;
    return new Array(1,2,3);
}
let o1 = new fuc1();
//打印：[1, 2, 3] ，因为返回数组，替换掉了构造出来的对象
console.info(o1);

let fuc2 = function(){
    this.name = '张三';
    this.age = 18;
    return {
        sex:"男"
    }
}
let o2 = new fuc2();
//打印：{sex: '男'}，因为返回对象，替换掉了构造出来的对象
console.info(o2);

直接调用function: 若函数不作为对象值存在，那么函数归属window对象，即：其内部this指向window对象

function fuc1(){
   console.info('fuc1 this:',this);//此this指向window对象
   function fuc2(){
       console.info('fuc2 this:',this);//此this指向window对象
   }
   fuc2();
}
//正常调用,注：这里没有使用new 去调用它的构造函数
fuc1();
//同学们可以猜想一下，我调用下面这行代码 fuc1 和 fuc2的this分别指向的是谁？
//new fuc1();

直接调用funciton：若函数作为对象值存储，那么函数归属此对象，即：其内部this指向该对象

let obj = {
    fuc2 : function(){
        //此函数归属于obj对象，所以this指向的是obj对象
        console.info('fuc2 this:',this);
    }
}
obj.fuc2();

3、js预解析

同学们可以理解ES5中有2种变量

var 可以装任意类型的值，包括函数

function 变量的值只能装函数，且在预解析时不能被var变量覆盖

JS代码，人看到的和机器看到的是不一样，JS引擎在执行JS代码时，不是一上来就执行，而是做些准备工作：

扫描代码，并且找var 和function关键字，并且把他们提升到作用域顶部（预解析）

对待变量，只管声明，不管赋值

对待函数，整体提升到顶部

逐行解读代码（从上到下、从左到右，即人看到的代码）

预解析题目1：下面代码分别打印什么

console.log(a);
var a=10;
console.log(a);

function myFun(){
    var b;
    console.log(b); 
    var b=20;
    console.log(b);
}
myFun();

预解析题目2：下面代码分别弹出什么

alert(a); 
var a=1;
alert(a);
function a(){
	alert("222");
}

var a=3; 
alert(a);
function a(){
	alert("444");
}
alert(a);
a();

预解析题目3：下面代码分别弹出什么

alert(n);
fn();
if(false){
    var n = 10;
    function fn(){
        alert('hello');
    }
}

预解析题目4：下面代码分别打印什么

console.log(f1); 
console.log(f2); 
function f1() {
    return "f1";
}
var f2 = function() {return "f2"}

预解析题目5：下面代码分别弹出什么

alert(a); 
a++;
alert(a);   
var a = '我是变量';
function a(){ alert('我是函数') }
alert(a)

5、ES6新增内容

5.1、新增的声明变量的方式

var-缺点：支持不声明就使用，没有块级作用域，允许重复声明等
let -- 代替var,解决了var的缺点
- 是块级作用域，无论在哪里声明，都只能在所包含的作用域内访问，比如函数和代码块（{}这种形式）都可以形成块级作用域
- 在同级作用域内，不能重复声明，多个层级嵌套，只在最接近的{}内有效
- 没有变量提升，也就是没有预解析，必须要先声明再使用（即所谓的暂死区，变量没执行时是不会被扫描到的，必须执行到才会将变量释放并可用）
const--常量完整单词： constant
- 特点同let，唯一区别就是声明后就要赋值，且不可修改

示例：

var a=1;
var a=2;

// 以上let不可以
// 不允许重复声明
let b=1;
var b=2;

const PI=3.14;
// 不允许修改值
PI=5;
console.log(PI)

5.2、解构赋值

批量声明变量

//批量声明变量
// var a=1;
// var b=2;
// var c=3;
// var d=4;

// 优化：
// 将左边的数组按照一定的模式解开用将右边的值赋值给它
var [a,b,c,d]=[function(){},2,'啊哈哈',true];
console.log(a);//1
a();

// 1、可以左右的数量不一样
// 不影响
var [a,b]=[function(){},2,'啊哈哈',true];
// 2、c,d则变undefined
var [a,b,c,d]=[function(){},2];

// 3、给默认值
var [a,b,c=1,d=10]=[function(){},2];

对象解构赋值

//对象解构赋值
var {a,b,c}={
    a:"bar",
    c:function(){},
    b:"foo"
};

函数参数解构赋值

// 函数参数的解构赋值
function fun([a,b]){
    console.log(a+b);
}
fun([1,2]);

function fun({name,age}){
    console.log(name+age);
}
fun({name:"张三",age:20});

5.3、模板字符串

加强版的“”

注：jsp中使用若要使用模板字符串需要禁用el表达式，因为el表达式取值方式与模板字符串中的取值方式有冲突

示例：

//非模板字符串
var a=1;
var html="<div>"+a+"</div>";

// 模板字符串
var html2=`
<div>${a}</div>
<div>002</div>
<div>003</div>
`;

5.4、对象的简洁表示法

如果属性名和属性值一样，则可以简写为1个

对于方法可以省略:function关键字

//正常写法
var obj={
    a:1,
    b:2,
    c:function(){
        alert(1)
    }
}


// 对于对象：
// 1.如果属性名和属性值一样，，则可以简写为1个
// 2.对于方法可以省略:function关键字
var a=1;

var obj={
    //名称和变量a一样
    a,
    b:2,
    //function可省略
    c(){
        alert(1)
    }
}

5.5、扩展运算符

作用：深度合并数组或对象

用法：...变量名

对数组使用扩展运算符

var a=[1,2]
var b=[4,5]

//合并a+b为一个数组
//如果用传统方式
// var c=a.concat(b);
// 扩展运算符
var c=[...a,...b];

console.log(c)

对对象使用扩展运算符

var a={
    name:"张三",
    age:17
}

var b={
    age:18
}


// 原来：合并需要用for-in循环，一个个挑出来放到新对象中
// 现在：
var c={...a,...b}
console.log(c)

5.6、箭头函数-重要的

箭头函数指的是用箭头定义的函数。任何普通函数都可以改为箭头函数。

3条规则：

省略function关键字和函数名，然后（）和{}之间用=>连接

如果只有1个参数，则()可以省略

如果只有一条语句，而且还是return语句，则{}也可以省略

区别：

不能当做构造函数，即前面不能加new

普通函数的this若不作为对象属性值存在,并且在调用时不加new，那么它的this指向window，若作为对象值存在它的this指向对象

箭头函数的this始终指向上一个作用域的this

示例1：

let fuc = a=>"你好:"+a;
let s = fuc('张三');
console.info(s);

示例2:仔细观察this对象

普通函数，若不作为对象的属性值存在或不调用它的构造函数，那么它始终归属于window对象，其this也是指向window对象

function fuc1(){
   console.info('fuc1 this:',this);//此this指向window对象
   function fuc2(){
       console.info('fuc2 this:',this);//此this指向window对象
   }
   fuc2();
}
//正常调用,注：这里没有使用new 去调用它的构造函数
fuc1();

调用箭头函数，其this始终指向上一个作用域的this

let obj = {
    fuc1 : () =>{
        //指向上一作用域的this
        //由于上一个作用域是obj，此obj在window对象中，所以this指向的是window对象
        console.info('fuc1 this:',this);
    },
    fuc2 : function(){
        //此函数归属于obj对象，所以this指向的是obj对象
        console.info('fuc2 this:',this);
    }
}
obj.fuc1();
obj.fuc2();

调用箭头函数，其this始终指向上一个作用域的this

let obj = {
    fuc1 : function(){
        //此函数归属于obj对象，所以this指向的是obj对象
        console.info('fuc1 this:',this);
        let fuc2 = () =>{
            //指向上一作用域的this
            //由于上一个作用域的函数归属obj对象，所以this指向的是obj对象
            console.info('fuc2 this:',this);

            let fuc3 = ()=>{
                //指向上一个作用域this
                console.info('fuc3 this:',this);
            }
            fuc3();
        }
        fuc2();
    }
}
obj.fuc1();

二、jquery

1、jquery是什么？

jQuery 是一个 JavaScript 库（或JavaScript框架）。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。

优点：

jQuery 极大地简化了 JavaScript 编程。

完善的ajax以及浏览器兼容性

对页面html代码侵入性小

jQuery 很容易学习。

2、jquery选择器

2.1、基础语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

提示：jQuery 选择器使用的语法是 XPath 与 CSS 选择器语法的组合。

示例：

$("p").hide() //隐藏所有段落
$(".test").hide() //隐藏所有 class="test" 的所有元素
$("#test").hide()  //隐藏所有 id="test" 的元素

2.2、等待html页面加载完毕才调用的函数

$(document).ready(function(){

//当html页面渲染完毕后将执行此函数

});

如果你在html页面没有渲染完毕之前就行操作，可能会有很多问题，如：

元素还没渲染出来你就去获取并操作它

图片还没下载完毕你就去获取它的高宽

...

示例：

这种情况是无法获取到id为 name的元素的

<!-- 引入jquery脚本库 -->
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    //获取id 为name的元素
    let el = document.getElementById("name");
    //打印一下看看能不能获取到
    console.info("el",el)
</script>
<body>
    姓名：<input id="name"/>
</body>

将上面的代码修改一下，运用jquery中的 $(document).ready 函数就能获取到了

<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    //获取id 为name的元素
    //let el = document.getElementById("name");
    //打印一下看看能不能获取到
    //console.info("el",el)
    /**
		* $(document).ready(func) 
		* func:回调函数
		* 作用：当页面渲染完毕后，将执行 func 这个回调函数
		*/
    $(document).ready(function(){
        //获取id 为name的元素
        //原生js写法
        let el = document.getElementById("name");
        //利用jquery获取元素,注意：获取到的元素对象是 jquery的元素类型，并非document中的 元素类型 
        let jqEl = $("#name");
        console.info("el:",el)
        console.info("jqEl:",jqEl)
        //如果要将 jquery的元素类型转换为 document中的元素类型，如下
        let el2 = jqEl[0];
        //如果要将 document中的元素类型转换为 jquery元素类型，如下
        let jqEl2  = $(el);
    });
</script>
<body>
    姓名：<input id="name"/>
</body>

2.3、下面常见的选择器写法给同学们示例一下

语法	描述
$(this)	当前 HTML 元素
$("p")	所有元素
$("p.intro")	所有 class="intro" 的元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个的第一个元素
`$("[href$='.jpg']")`	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的元素中的所有 class="head" 的元素

2.4、选择器参考手册

元素元素

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个元素
:last	$("p:last")	最后一个元素
:even	$("tr:even")	所有偶数
:odd	$("tr:odd")	所有奇数

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 -
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	`$("[href$='.jpg']")`	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有元素
:text	$(":text")	所有 type="text" 的元素
:password	$(":password")	所有 type="password" 的元素
:radio	$(":radio")	所有 type="radio" 的元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的元素
:submit	$(":submit")	所有 type="submit" 的元素
:reset	$(":reset")	所有 type="reset" 的元素
:button	$(":button")	所有 type="button" 的元素
:image	$(":image")	所有 type="image" 的元素
:file	$(":file")	所有 type="file" 的元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

3、jquery操作html

3.1、获取 text()、html()以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

示例1：通过 jQuery text() 和 html() 方法来获得内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

示例2：通过 jQuery val() 方法获得输入字段的值：

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

3.2、设置内容和属性

3.1、设置内容---text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值****

示例：

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

3.2、属性操作

3.2.1、设置属性---attr()

示例：改变（设置）链接中 href 属性的值

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

3.2.1、移出属性 --- removeAttr('name')

示例：

$("#formStart").removeAttr("id");

3.3、添加元素

添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3.3.1、append()

实例

$("p").append("Some appended text.");

3.3.2、prepend()

实例

$("p").prepend("Some prepended text.");

3.3.3、after()、before()

实例

$("img").after("Some text after");

$("img").before("Some text before");

3.4、删除元素

删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 删除被选元素中的子元素

3.4.1、remove()

实例

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

3.4.2、empty()

实例

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

3.5、操作css

jQuery 拥有很多操作CSS的方法。我们只讲下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例样式表

下面的样式表将用于本页的所有例子：

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

3.5.1、addClass()

实例:添加单个class

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

实例：添加多个class

$("button").click(function(){
  $("#div1").addClass("important blue");
});

3.5.2、removeClass()

实例：删除指定的class

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

3.5.3、toggleClass()

实例

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

3.5.4、css()

语法：

返回第一个匹配元素的 CSS 属性值。

$(selector).css(name)

参数	描述
name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

示例：取得第一个段落的 color 样式属性的值：

$("p").css("color");

设置所有匹配元素的指定 CSS 属性。

$(selector).css(name,value)

参数	描述
name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。
value	可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。如果设置了空字符串值，则从元素中删除指定属性。

示例：将所有段落的颜色设为红色

$("p").css("color","red");

3.6、尺寸

jQuery 提供多个处理尺寸的重要方法：

width() ：设置/获取元素宽度（不包括内边距、外边距）
height()：设置/获取元素高度（不包括内边距、外边距）
innerWidth()：设置/获取元素宽度（包括内边距）
innerHeight()：设置/获取元素高度（包括内边距）
outerWidth()：设置/获取元素宽度（包括边框和内边距）
outerHeight()：设置/获取元素高度（包括边框和内边距）

示例：太简单了,懒得写了

4、jquery事件

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

示例：

进入页面就点击按钮

<!-- 引入jquery脚本库 -->
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	//定义了一个匿名函数，并将这个函数保存到了 fuc 这个变量中
	let fuc = function(){
		//获取按钮这个元素	
		let jqEl = $("button.btn");
		
		//jquery对 jqEl元素的点击事件的处理
		jqEl.click(
			//当jqEl这个元素被点击后,将调用该函数
			//event:事件的相关信息都在此对象中
			function(event){
				//打印
				console.info("*** jquery:你点我干啥。。。")
			}
		);
		//触发点击事件
		jqEl.click();
	}

	$(document).ready(
		//页面渲染完毕后，将调用fuc这个函数
		fuc
	);
	
	//定义了一个函数，用于处理原生的 点击事件
	function protoClick(){
		//打印一下
		console.info("***原生：你点我干啥。。。")
	}
	
	
</script>
<body>
  <button class="btn" onclick="protoClick()">按钮</button>
</body>

4.1、事件所有函数

选几个常用的给同学们演示一下

方法	描述
通用事件绑定相关
bind()	向匹配元素附加一个或更多事件处理器
live()	为当前或未来的匹配元素添加一个或多个事件处理器。1.7版本之后被弃用
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
解除绑定事件相关
unbind()	从匹配元素移除一个被添加的事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
单独绑定相关
blur()	触发、或将函数绑定到指定元素的 blur(聚焦) 事件
focus()	触发、或将函数绑定到指定元素的 focus(失焦) 事件
change()	触发、或将函数绑定到指定元素的 change(内容被改变) 事件
click()	触发、或将函数绑定到指定元素的 click（单击）事件
dblclick()	触发、或将函数绑定到指定元素的 double click（双击）事件
error()	触发、或将函数绑定到指定元素的 error 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
事件触发相关
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
加载/渲染相关
ready()	文档就绪事件（当 HTML 文档就绪可用时）
load()	触发、或将函数绑定到指定元素的 load （元素被加载/渲染完毕）事件
unload()	触发、或将函数绑定到指定元素的 unload（用户离开页面时，如：点击某个离开页面的链接、在地址栏中键入了新的 URL、使用前进或后退按钮、关闭浏览器、重新加载页面）事件
按键相关
keydown()	触发、或将函数绑定到指定元素的 key down（按键被按下：能捕获所有按键，包括删除键、组合键、切换到中文输入法状态下的输入中文时的按键）事件
keypress()	触发、或将函数绑定到指定元素的 key press （按键被按下：只能捕获产生ascii码的按键，如：回删键、切换到中文输入法状态下输入中文时的按键就不能捕获）事件
keyup()	触发、或将函数绑定到指定元素的 key up（按键弹起）事件
鼠标相关
mousedown()	触发、或将函数绑定到指定元素的 mouse down（按下鼠标按键时）事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up（松开鼠标按键时）事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter( 鼠标移动到元素上时) 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件（鼠标移动到元素上时，和mouse enter事件的区别在于在移动到其内的子元素上会再次触发mouse over事件，而mouse enter则不会）
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave( 鼠标指针离开元素时 ) 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out( 鼠标指针离开元素时，和mouse leave的区别在于哪怕是鼠标离开这个元素的内的子元素，就会触发mouse out事件，而mouse leave则不会 ) 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move（鼠标移动时）事件
其他
resize()	触发、或将函数绑定到指定元素的 resize（当调整窗口或元素大小时触发）事件
scroll()	触发、或将函数绑定到指定元素的 scroll（滚动）事件
select()	触发、或将函数绑定到指定元素的 select（ textarea 或文本类型的 input 元素中的文本被选择时）事件
submit()	触发、或将函数绑定到指定元素的 submit（当提交表单时）事件。该事件只适用于表单元素。

笔记中我就列几个可能稍微没那么容易理解的事件绑定

4.1.1、通用事件绑定相关

4.1.1.1、bind()--单个、live()、one()

语法：

//bind 单个
$(selector).bind(event,data,function)
//live
$(selector).live(event,data,function)
//one
$(selector).one(event,data,function)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

示例bind()：

<script type="text/javascript">
	$(document).ready(function() {
		//找到button元素，并给它绑定click事件
		$("button").bind("click", function() {
			//显示 和 隐藏的动画
			$("p").slideToggle();
		});
	});
</script>
<body>
	<p>这是一个段落。</p>
	<button>请点击这里</button>
</body>

示例live():

<script type="text/javascript">
	$(document).ready(function() {
		//给所有的 p元素,注意：包括未来添加的p元素，添加绑定事件
		$("p").live("click", function() {
			//显示/隐藏动画
			$(this).slideToggle();
		});
		//给按钮添绑定一个点击事件
		$("button").click(function() {
			//在button元素后面插入一段段落
			$("<p>This is a new paragraph.</p>").insertAfter("button");
		});
	});
</script>
<body>
	<p>这是一个段落。</p>
	<p>点击任意 p 元素会令其消失。包括本段落。</p>
	<button>在本按钮后面插入新的 p 元素</button>
	<p>
		<b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。
	</p>
</body>

4.1.1.2、bind() --多个

语法bind(),绑定多个事件：

$(selector).bind({event:function, event:function, ...})

示例bind()绑定多个事件：

<script type="text/javascript">
	$(document).ready(function() {
		//给所有的button绑定如下事件
		$("button").bind({
			//点击事件
			click : function() {
				//来个显示个隐藏的动画
				$("p").slideToggle();
			},
			//鼠标移动到这个按钮上的事件
			mouseover : function() {
				//给body背景色设置为红色
				$("body").css("background-color", "red");
			},
			//鼠标移出这个按钮区域
			mouseout : function() {
				//给body背景色 设置为白色
				$("body").css("background-color", "#FFFFFF");
			}
		});
	});
</script>
<body>
	<p>This is a paragraph.</p>
	<button>请点击这里</button>
</body>

4.1.1.3、delegate()

语法：

$(selector).delegate(childSelector,event,data,function)

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

示例：

<script type="text/javascript">
	$(document).ready(function() {
		//找到div这个元素，给div下的所有buttion元素都绑定 click事件
		$("div").delegate("button", "click", function() {
			//显示 和 隐藏的动画
			$("p").slideToggle();
		});
	});
</script>
</head>
<body>
<div style="background-color:red">
	<p>这是一个段落。</p>
	<button>请点击这里</button>
</div>

4.1.2、解除绑定事件相关

4.1.2.1、unbind()、die()

注意：

unbind 移除的是通过 bind函数绑定的事件

die 移除的是通过live函数绑定的事件

语法 unbind()、die()移除事件

//unbind
$(selector).unbind(event,function)
//die
$(selector).die(event,function)

参数	描述
event	[可选]。规定要移除的一个或多个事件处理程序。由空格分隔多个事件值。必须是有效的事件。
function	可选。规定要移除的特定函数。

示例 die()，unbind就不示例了,和die差不太多

<script type="text/javascript">
	//更改字体大小的函数
	function changeSize() {
		/*
		* animate() 方法执行 CSS 属性集的自定义动画。
		* 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
		* 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
		*/ 
		//字体大小注解 加大,总计 加 3个像素
		$(this).animate({
			fontSize : "+=3px"
		});
	}
	//更改字符间距的函数
	function changeSpacing() {
		//字符间距逐渐加宽,总计 加2个像素
		$(this).animate({
			letterSpacing : "+=2px"
		});
	}
	$(document).ready(function() {
		//使用live函数给 p元素绑定了 changeSize 函数
		$("p").live("click", changeSize);
		//使用live函数给 p元素绑定了 changeSpacing 函数
		$("p").live("click", changeSpacing);
		
		//给按钮绑定点击事件
		$("button").click(function() {
			//移出所有p元素的 所有通过 live() 绑定的事件
			//$("p").die();
			//移出所有p元素的 所有通过 live() 绑定的click事件
			//$("p").die("click");
			//移出所有p元素的 所有通过 live() 绑定的 click-> changeSize 的事件
			$("p").die("click",changeSize);
		});
	});
</script>
</head>
<body>
	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>
	<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
	<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
</body>

4.1.2.2、undelegate()

语法：

$(selector).undelegate(selector,event,function)

参数	描述
selector	可选。规定需要删除事件处理程序的选择器。
event	可选。规定需要删除处理函数的一个或多个事件类型。
function	可选。规定要删除的具体事件处理函数。

示例：

<script type="text/javascript">
	//更改字体大小函数
	function changeSize() {
		//逐渐增加,总量为3px
		$(this).animate({
			fontSize : "+=3px"
		});
	}
	//更改字符间距函数
	function changeSpacing() {
		//逐渐增加 ，总量为2px
		$(this).animate({
			letterSpacing : "+=2px"
		});
	}

	$(document).ready(function() {
		//给body下的 所有 p子元素 绑定 事件
		$("body").delegate("p", "click", changeSize);
		$("body").delegate("p", "click", changeSpacing);
		//给按钮绑定的点击事件
		$("button").click(function() {
			//移除body下所有子元素通过 delegate() 绑定的事件
			//$("body").undelegate();
			
			//移除 body下 所有p子元素 click -> changeSize 这个事件
			$("body").undelegate("p", "click", changeSize);
		});
	});
</script>
</head>
<body>
	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>
	<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>
	<button>从 p 元素删除由 delegate() 方法添加的事件处理器 changeSize()</button>
</body>

4.1.3、单独绑定相关

4.1.3.1、blur() 、focus()、error()

语法：

blur()

$(selector).blur(function)

参数	描述
function	可选。规定当 blur 事件发生时运行的函数。

focus()

$(selector).focus(function)

参数	描述
function	可选。规定当发生 focus 事件时运行的函数。

error()

$(selector).error(function)

参数	描述
function	可选。规定当发生 error 事件时运行的函数。

示例：blur、focus:

<script type="text/javascript">
	$(document).ready(function() {
		//给所有input元素绑定 聚集焦点事件
		$("input").focus(function() {
			//给所有input元素设置背景色
			$("input").css("background-color", "#FFFFCC");
		});
		//给所有input元素绑定失去焦点事件
		$("input").blur(function() {
			//给所有input元素设置背景色
			$("input").css("background-color", "#D6D6FF");
		});
	});
</script>
<body>
	Enter your name:<input type="text" />
	<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>

示例：error：

<script type="text/javascript">
	$(document).ready(function() {
		//给所有的img元素绑定一个 出错时的事件
		$("img").error(function() {
			//如果发生错误，将执行此函数
			//将当前img元素 替换为 “图片为加载！” 这么一段文本
			$(this).replaceWith("<p><b>图片未加载！</b></p>");
		});
	});
</script>
<body>
	<!-- 我这里先给一个错误的路径,肯定加载不了图片 -->
	<img src="XXXX" />
	<!-- 在准备一个正确的图片 -->
	<img src="./blhx.jpg" />
	
	<p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>
</body>

4.1.3.2、change()、click()、dblclick()

语法，这些都差不太多，一块讲了，就不做示例了：

//change 内容被改变
$(selector).change(function)
//click 单击
$(selector).click(function)
//dbclick 双击
$(selector).dblclick(function)

参数	描述
function	可选。规定当发生事件时运行的函数。

4.1.3.3、toggle()

语法1：

$(selector).toggle(function1(),function2(),functionN(),...)

参数	描述
function1()	必需。规定当元素在每偶数次被点击时要运行的函数。
function2()	必需。规定当元素在每奇数次被点击时要运行的函数。
functionN(),...	可选。规定需要切换的其他函数。

示例1：

<script type="text/javascript">
$(document).ready(function(){
	//绑定轮流点击时间	
	$("button").toggle(
		//这里面总共绑定了3个函数
		//当点击次数能被3整除时调用该函数
		function(){
			//设置body背景色为绿色
			$("body").css("background-color","green");
		},
		//当点击次数除3余1时调用该函数
		function(){
			//设置body背景色为红色
	  		$("body").css("background-color","red");
		},
		//当点击次数除3余2时调用该函数
		function(){
			//设置body背景色为黄色
	  		$("body").css("background-color","yellow");
		}
	);
});
</script>
<body>
	<button>请点击这里，来切换不同的背景颜色</button>
</body>

4.1.4、事件触发相关

4.1.4.1、trigger()

语法：

$(selector).trigger(event,[param1,param2,...])

参数	描述
event	必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]	可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

示例：

触发 input 元素的 select 事件：

$("button").click(function(){
  $("input").trigger("select");
});

4.1.4.2、triggerHandler()

triggerHandler() 方法与 trigger() 方法类似，都是触发事件。trigger() 方法相比的不同之处

它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

语法：

$(selector).triggerHandler(event,[param1,param2,...])

参数	描述
event	必需。规定指定元素要触发的事件。
[param1,param2,...]	可选。传递到事件处理程序的额外参数。

示例：

触发表单提交按钮的click事件，注意：仅仅只是触发点击事件，不会触发提交事件

$("button").click(function(){
    //触发表单提交按钮的 点击事件
    $("input[type='submit']").triggerHandler("click");
});

4.1.5、加载/渲染相关

4.1.5.1、ready()

语法1：

$(document).ready(function)

语法2：

$().ready(function)

语法3：

$(function)

示例：

$(document).ready(funciton(){
    //做事情
});

或

$().ready(funciton(){
    //做事情
});

或

$(funciton(){
    //做事情
});

4.1.5.2、load()

注：亲测，此函数在 1.8.3 版本中已失效

语法：

//load 元素被加载/渲染完毕
$(selector).load(function)

参数	描述
function	可选。规定当发生事件时运行的函数。

4.1.5.3、unload()

语法：

//触发、或将函数绑定到指定元素的 unload（ 用户离开页面时，如：点击某个离开页面的链接、在地址栏中键入了新的 URL、使用前进或后退按钮、关闭浏览器、重新加载页面） 事件
event.unload(function)

示例：

$(window).unload(function(){
  alert("Goodbye!");
});

4.1.6、按键相关

4.1.6.1、keydown()、keypress()、keyup()

语法：

//keydown 按键被按下：能捕获所有按键，包括删除键、组合键、切换到中文输入法状态下的输入中文时的按键
$(selector).keydown(function)
//按键被按下：只能捕获产生ascii码的按键，如：ctrl、回删键、切换到中文输入法状态下输入中文时的按键就不能捕获
$(selector).keypress(function)
//keyup 按键弹起
$(selector).keyup(function)

参数	描述
function	可选。规定当发生事件时运行的函数。

4.1.7、鼠标相关

4.1.7.1、mousedown()、mouseup()、mouseenter()、mouseover()、mouseleave()、mouseout()

语法：

//mousedown 按下鼠标按键时
$(selector).mousedown(function)
//mouseup 松开鼠标按键时
$(selector).mouseup(function)
//mouseenter 鼠标移动到元素上时
$(selector).mouseenter(function)
//mouseover 鼠标移动到元素上时，和mouse enter事件的区别在于在移动到其内的子元素上会再次触发mouse over事件，而mouse enter则不会
$(selector).mouseover(function)
//mouseleave 鼠标指针离开元素时
$(selector).mouseleave(function)
//mouseout 鼠标指针离开元素时，和mouse leave的区别在于 哪怕是鼠标离开这个元素的内的子元素，就会触发mouse out事件，而mouse leave则不会
$(selector).mouseout(function)
//mousemove 鼠标移动时
$(selector).mousemove(function)

参数	描述
function	可选。规定当发生事件时运行的函数。

4.1.7.2、mousemove()

语法：

$(selector).mousemove(function)

参数	描述
function	可选。规定当发生 mousemove 事件时运行的函数。

示例：

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

4.1.8、其他

4.1.8.1、resize()、scroll()、select()、

注意:

resize ,注:目前chrome 96.0.4664.45 64位版本的浏览器中此函数只能作用window（窗口）上有效

scroll ,注:目前chrome 96.0.4664.45 64位版本的浏览器中此函数只能作用window（窗口）、textArea上有效

语法：

//resize 当调整窗口或元素大小时触发 
$(selector).resize(function)
//scroll 滚动时触发
$(selector).scroll(function)
//select textarea 或文本类型的 input 元素中的文本被选择时触发
$(selector).select(function)

参数	描述
function	可选。规定当发生事件时运行的函数

示例：resize

//目前chrome 96.0.4664.45  64位版本的浏览器中此事件只能作用window（窗口）上有效
$(window).resize(function(){
    console.info("window 大小被改变，width:",$(this).width())
})

示例：scroll

//目前chrome 96.0.4664.45  64位版本的浏览器中此事件只能作用window（窗口）、textArea上有效
$(window).scroll(function(){
    console.info("*** 滚动条被滚动")
})

4.1.8.2、submit()

注意：

如果你不传递函数，那么它的功能是提交表单

如果你传递函数，它的功能是当你表单提交时，会执行函数内的代码

语法：注意--该事件只适用于表单元素。

$(selector).submit(function)

参数	描述
function	可选。规定当发生 submit 事件时运行的函数。

示例：

<script type="text/javascript">
	$(document).ready(function() {
		//给form元素绑定submit事件处理函数
		$("form").submit(function(e) {
			//弹个框
			alert("Submitted");
			//返回false 会阻止表单提交，返回true将让提交通过
			return false;
		});
	});
</script>
<body>
	<!-- 表单 -->
	<form name="input" action="" method="get">
		姓名: <input type="text" name="name" value="Mickey" size="20"> <br />
		<input type="submit" value="Submit">
	</form>
</body>

4.1.9、chrome浏览器查看元素绑定事件

7、原生Ajax 及其原理

7.1、什么是 AJAX？

AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

7.2、AJAX如何工作

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

7.3、Ajax 的核心 XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

7.3.1、创建XMLHttpRequest 对象

所有现代浏览器（Chrome、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是：

let variable = new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：

let variable = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有浏览器，包括 IE5 和 IE6，要检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

var xhttp;
if (window.XMLHttpRequest) {
	xhttp = new XMLHttpRequest();
} else {
	//IE6, IE5 创建XMLHttpRequest对象
	xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

7.4、发送请求

向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

//打开请求
xhttp.open("GET", "ajax_info.txt", true);
//开始请求并发送数据
xhttp.send();

方法	描述
open(method, url, async)	规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）
setRequestHeader(key,value)	设置请求头

示例：

<body>
	<h1>XMLHttpRequest 对象</h1>
	<p id="demo">让 AJAX 更改这段文本。</p>
	<button type="button" onclick="loadDoc()">更改内容</button>
	
	<script>
		function loadDoc() {
			//创建XMLHttpRequest对象
			var xhttp = new XMLHttpRequest();
			//get 同步的方式 打开请求
			xhttp.open("GET", "http://localhost:8080/js/ajax-test.txt", false);
			//发送数据
			xhttp.send();
			//获取响应的文本内容
			let txt = xhttp.responseText;
			//将文本内容更新到页面
			document.getElementById("demo").innerHTML = txt;
		}
	</script>
</body>

7.5、响应数据

通过XMLHttpRequest对象中如下3个属性，我们便能监听到响应的数据

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: "OK" 403: "Forbidden" 404: "Page not found" 如需完整列表，自己百度找一找吧
statusText	返回状态文本（例如 "OK" 或 "Not Found"）
responseText	当服务器响应成功后，响应结果会存入此属性中

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

当 readyState 为 4，status 为 200 时，响应就绪：

示例：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    //监听响应状态发生变化的函数
    xhttp.onreadystatechange = function() {
        //如果readyState==4(请求完成) 且  status == 200(响应正常)
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            //响应的内容
            this.responseText;
       }
    };
    //get 异步方式 打开请求
    xhttp.open("GET", "http://localhost:8080/js/ajax-test.txt", true);
    //发送数据
    xhttp.send(); 
}

8、jquery使用Ajax 以及 js 对象与json串互转

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着你必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

8.1、jquery使用ajax

8.1.1、load()

load() 方法从服务器加载数据

语法：

$(selector).load(URL,data,callback);

参数：

URL 参数必需的，规定你希望加载的 URL。
data 可选的参数，规定与请求一同发送的查询字符串键/值对集合。
callback 可选的参数，是 load() 方法完成后所执行的函数名称。

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

示例1：

<script>
	$(document).ready(function() {
		$("button").click(function() {
			$("#div1").load(
				"http://localhost:8080/js/ajax-test.txt", 
				function(responseTxt, statusTxt, xhr) {
					//success ：请求并响应成功
					if (statusTxt == "success"){
						//控制台打印看看响应内容
						console.info("外部内容加载成功！");
						console.info("responseTxt:",responseTxt);
						//改变这个div里面的文本内容
						$(this).text(responseTxt);
					}
					//error：请求或响应时 出错了
					if (statusTxt == "error"){
						console.info("Error: " + xhr.status + ": " + xhr.statusText);					
					}
				}
			);
		});
	});
</script>
<body>
	<div id="div1">
		<h2>使用 jQuery AJAX 来改变文本</h2>
	</div>
	<button>获得外部内容</button>
</body>

8.1.2、get()、post()

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据

8.1.2.1、$.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

参数：

URL 参数必需的，规定你希望加载的 URL。
callback 可选的参数，是 load() 方法完成后所执行的函数名称。

示例：

$("button").click(function() {
    //使用jquery发送 ajax get请求
    $.get(
        //请求路径
        "http://localhost:8080/js/ajax-test.txt",
        //请求执行完毕后的回调函数 
        function(data, status) {
            console.info("Data: " + data + "\nStatus: " + status);
        }
    );
});

8.1.2.2、$.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,data,callback);

参数：

URL 参数必需的，规定你希望加载的 URL。
data 可选的参数，规定与请求一同发送的查询字符串键/值对集合。
callback 可选的参数，是 load() 方法完成后所执行的函数名称。

$("button").click(function() {
    //使用jquery发送post请求
    $.post(
        //请求路径
        "http://localhost:8080/ajaxTest",
        //请求参数 --可以是js对象,也可以是字符串
        {
            name : "Donald Duck",
            city : "Duckburg"
        },
        //请求完毕后执行的回调函数
        function(data, status) {
            alert("Data: " + data + "\nStatus: " + status);
        }
    );
});

8.1.2.3、$.ajax()

ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。

语法

jQuery.ajax([settings])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数

options

类型：Object

可选。AJAX 请求设置。所有选项都是可选的。
async

类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)

类型：Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache

类型：Boolean

默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。
complete(XHR, TS)

类型：Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。
contentType

类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context

类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样：
```
$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});
```
data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter

类型：Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- "json": 返回 JSON 数据。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- "text": 返回纯文本字符串
error

类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。
global

类型：Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified

类型：Boolean

仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
jsonpCallback

类型：String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
password

类型：String

用于响应 HTTP 访问认证请求的密码
processData

类型：Boolean

默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset

类型：String

只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。
traditional

类型：Boolean

如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
timeout

类型：Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url

类型：String

默认值: 当前页地址。发送请求的地址。
username

类型：String

用于响应 HTTP 访问认证请求的用户名。
xhr

类型：Function

需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

回调函数

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。

beforeSend

在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。

error

在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）

dataFilter

在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。

success

当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete

当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串

数据类型

通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML，还可以指定 html、json、jsonp、script 或者 text。

其中，text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。

简单示例：

$.ajax(
    //options对象
    {
        //请求路径
        url:"http://localhost:8080/js/ajax-test.json",
        //请求方式
        type:"get",
        //请求参数
        data:{
            name:"张三"
        },
        //响应的数据类型
        dataType:"json",
        //请求出错时,将执行此回调函数
        error:function(){
            console.info("***请求出错啦....")
        },
        //请求出错时,将执行此回调函数
        success:function(respData){
            console.info("***请求成功啦,我们看看这个数据：",respData)
        }

    }
);

刷新页面返回顶部

夜雨初凉

公告

JQuery

一、预备

1、javascript组成

2、函数

3.1、new function 和 fuction区别

3、js预解析

5、ES6新增内容

5.1、新增的声明变量的方式

5.2、解构赋值

5.3、模板字符串

5.4、对象的简洁表示法

5.5、扩展运算符

5.6、箭头函数-重要的

二、jquery

1、jquery是什么？

2、jquery选择器

2.1、基础语法

2.2、等待html页面加载完毕才调用的函数

2.3、下面常见的选择器写法给同学们示例一下

2.4、选择器参考手册

-

3、jquery操作html

3.1、获取 text()、html()以及 val()

3.2、设置内容和属性

3.1、设置内容---text()、html() 以及 val()

3.2、属性操作

3.2.1、设置属性---attr()

3.2.1、移出属性 --- removeAttr('name')

3.3、添加元素

3.3.1、append()

3.3.2、prepend()

3.3.3、after()、before()

3.4、删除元素

3.4.1、remove()

3.4.2、empty()

3.5、操作css

3.5.1、addClass()

3.5.2、removeClass()

3.5.3、toggleClass()

3.5.4、css()

3.6、尺寸

4、jquery事件

4.1、事件所有函数

4.1.1、通用事件绑定相关

4.1.1.1、bind()--单个、live()、one()

4.1.1.2、bind() --多个

4.1.1.3、delegate()

4.1.2、解除绑定事件相关

4.1.2.1、unbind()、die()

4.1.2.2、undelegate()

4.1.3、单独绑定相关

4.1.3.1、blur() 、focus()、error()

4.1.3.2、change()、click()、dblclick()

4.1.3.3、toggle()

4.1.4、事件触发相关

4.1.4.1、trigger()

4.1.4.2、triggerHandler()

4.1.5、加载/渲染相关

4.1.5.1、ready()

4.1.5.2、load()

4.1.5.3、unload()

4.1.6、按键相关

4.1.6.1、keydown()、keypress()、keyup()

4.1.7、鼠标相关

4.1.7.1、mousedown()、mouseup()、mouseenter()、mouseover()、mouseleave()、mouseout()

4.1.7.2、mousemove()

4.1.8、其他

4.1.8.1、resize()、scroll()、select()、

4.1.8.2、submit()

4.1.9、chrome浏览器查看元素绑定事件

7、原生Ajax 及其原理

7.1、什么是 AJAX？

7.2、AJAX如何工作

7.3、Ajax 的核心 XMLHttpRequest 对象

7.3.1、创建XMLHttpRequest 对象

7.4、发送请求

7.5、响应数据

8、jquery使用Ajax 以及 js 对象 与json串互转

8、jquery使用Ajax 以及 js 对象与json串互转