jQuery基础

一、jQuery简介

  • jQuery作者John Resig，于2006年发布第1个版本。后续版本陆续增加了大量新的API、并优化性能。
  • jQuery是一个轻量级的开源js库，拥有强大的选择器，出色的DOM操作，可靠的事件处理，完善的Ajax，出色的兼容性和链式操作。
  • write less,do more。加一句，learn more。
  • jQuery只建立一个名为jQuery的对象，别名用$表示，所有的函数方法都在这个对象之下，也可以随时交出控制权，不会污染其他的对象。

hello world

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
    <!-- 使用jquery需要引用js库 -->
    <script src="jquery.js"></script>
    <script>
        //传统onload，必须等到所有元素加载完毕才执行。只能执行一次
        window.onload =function(){
            alert("Hello World!");
        };

        //等同于window.onload
        // $(window).onload(function(){
        //     console.log("Hello World2!");
        // })

        //dom元素加载绘制完毕即可执行，可执行多次
        $(document).ready(function(){
            alert("Hello World3!");
        });

        // 可简写成 $()，为空代表默认参数为$(document)
        $().ready(function (){
            alert("Hello World4!");
        });

        // 也可简写成$(callback)，是$(document).ready(callback)的简写
        $(function(){
            alert("Hello World5!");
        });
    </script>
</head>
</html>

jQquery对象和DOM对象转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
            var $jQueryObj = $(domObj);  //jQuery对象
            alert("DOM对象："+domObj.innerHTML);
            alert("jQuery对象："+$jQueryObj.html());

            var $jQueryObj2=$("#cr"); //jQuery对象
            alert("jQuery2对象："+$jQueryObj2.html());

            var domObj2=$jQueryObj2.get(0);// Dom对象
            // var domObj2=$jQueryObj2[0];
            alert("DOM2对象："+domObj2.innerHTML);

        });
    </script>
</head>
<body>
<h3 id="cr">对象转换</h3>
</body>
</html>

二、jQuery选择器

  • jQuery支持CSS1到CSS3选择器。
  • 如出现特殊字符，如点、井号、括号等特殊字符，需要使用\\字符进行转义。
  • 选择器中含有空格和不含有空格是两个意义。比如带空格为后代选择器，不带空格为过滤选择器。

基本选择器

选择器 说明 返回 示例
#id 根据id匹配一个元素 单个元素 $(“#test”)
.class 根据类名匹配元素 集合元素 $(“.test”)
element 根据元素名匹配元素 集合元素 $(“p”)
* 匹配所有元素 集合元素 $(“*”)
selector1,selector2 将所有选择器的元素合并后一起返回 集合元素 $(“div,p.myClass”)

层次选择器

选择器 说明 返回 替代
$(“div span”) 选取div元素里所有span(后代)元素 集合元素
$(“div > span”) 选取div元素里所有span(子)元素 集合元素
$(“div + span”) 选取紧接在div元素后的下一个span(同辈)元素 集合元素 $(“div”).next(“span”)
$(“div ~ span”) 选取紧接在div元素后的所有span(同辈)元素 集合元素 $(“div”).nextAll(“span”)
选取div元素前后的所有span(同辈)元素 集合元素 $(“div”).siblings(“span”)

过滤选择器

包括基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。

选择器 说明 返回 示例
:first 选择第1个元素 单个元素 $(“div:first”)选取所有div元素中第一个div元素
:last 选择最后1个元素 单个元素 $(“div:last”)选取所有div元素中最后一个div元素
:not(selector) 去除所有与selector匹配的元素 集合元素 $(“div:not(.myClass)”)选取class不是myClass的div元素
:even 选取索引是偶数的所有元素，索引从0开始 集合元素 $(“div:even”)选取索引是偶数的div元素
:odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $(“div:odd”)选取索引是奇数的div元素
:eq(index) 选取索引等于index的元素 单个元素 $(“div:eq(1)”)选取索引是1的div元素
:gt(index) 选取索引大于index的元素 集合元素 $(“div:gt(1)”)选取索引大于1的div元素
:lt(index) 选取索引小于index的元素 集合元素 $(“div:lt(5)”)选取索引小于5的div元素
:header 选取所有标题元素 集合元素 $(“:header”)选取所有标题元素h1,h2,h3
:animated 选取所有正在执行动画的元素 集合元素 $(“div:animated”)选取所有执行动画的div元素
:focus 选取当前获取焦点的元素 集合元素 $(“:focus”)选取所有获取焦点的元素
:contains(text) 选取含有文本内容为text的元素 集合元素 $(“div:contains(‘test’)”)选取所有含有文本test的div元素
:empty 选取不包含子元素活文本的元素 集合元素 $(“div:empty”)选取不包含子元素的div元素
:has(selector) 选取含有选择器匹配的元素的元素 集合元素 $(“div:has(p)”)选取含有p元素的div元素
:parent 选取含有子元素活文本的元素 集合元素 $(“div:parent”)选取含有子元素的div元素
:hidden 选取所有不可见的元素 集合元素 $(“:hidden”)选取不可见的元素，包括input的type为hidden，display为none，visibility为hidden等
:visible 选取所有可见的元素 集合元素 $(“div:visible”)选取可见的div元素
[attribute] 选取拥有此属性的元素 集合元素 $(“div[id]”)选取拥有属性id的div元素
[attribute=value] 选取拥有此属性值为value的元素 集合元素 $(“div[title=’test’]”)选取拥有属性title为test的div元素
[attribute!=value] 选取拥有此属性值不等于value的元素 集合元素 $(“div[title!=’test’]”)选取拥有属性title不是test的div元素
[attribute^=value] 选取拥有此属性值以value开始的元素 集合元素 $(“div[title^=’test’]”)选取拥有属性title以test开始的div元素
[attribute$=value] 选取拥有此属性值以value结束的元素 集合元素 $(“div[title$=’test’]”)选取拥有属性title以test结束的div元素
[attribute*=value] 选取拥有此属性值含有value的元素 集合元素 $(“div[title*=’test’]”)选取拥有属性title含有test的div元素
[attribute|=value] 选取属性等于value或者value-开始的元素 集合元素 $(“div[title|=’test’]”)选取属性title为test或test-开始的div元素
[attribute~=value] 选取拥有属性值用空格分隔的值中包含value的元素 集合元素 $(“div[title~=’test’]”)选取拥有属性title用空格分隔的值中包含test的div元素
[attribute1][attribute2] 用属性选择器合并成一个复合选择器，同时满足多个条件 集合元素 $(“div[id][title$=’test’]”)选取拥有属性id，并且属性title以test结束的div元素
:nth-child(index/even/odd/equation) 选择每个父元素下的第index个子元素或者奇偶元素或者3n元素（index从1开始，n从1开始） 集合元素 :eq只返回单个元素，:nth-child为每个父元素匹配子元素。
:first-child 选择每个父元素下的第1个子元素 集合元素 :first只返回单个元素，:first-child为每个父元素匹配第1个子元素。
:last-child 选择每个父元素下的最后1个子元素 集合元素 :last只返回单个元素，:first-child为每个父元素匹配最后1个子元素。
:only-child 选择每个父元素下的唯一的子元素 集合元素 $(“ul li:only-child”)是在ul中选取是唯一子元素的li元素
:enabled 选取所有可用的元素 集合元素 $(“#form1:enabled”)选取id为form1的表单内的所有可用元素
:disabled 选取所有不可用的元素 集合元素 $(“#form1:disabled”)选取id为form1的表单内的所有不可用元素
:checked 选取所有被选中的元素(单选复选框) 集合元素 $(“input:checked”)选取所有被选中的元素
:selected 选取所有被选中的选项元素 集合元素 $(“select option:selected”)选取所有被选中的选项元素

表单选择器

| 选择器 | 说明 | 返回 |
| :input | 选取所有input、textarea、select和button元素 | 集合元素 |
| :text | 选取所有单行文本框 | 集合元素 |
| :password | 选取所有密码框 | 集合元素 |
| :radio | 选取所有单选框 | 集合元素 |
| :checkbox | 选取所有复选框 | 集合元素 |
| :submit | 选取所有提交按钮 | 集合元素 |
| :image | 选取所有图片按钮 | 集合元素 |
| :reset | 选取所有重置按钮 | 集合元素 |
| :button | 选取所有按钮 | 集合元素 |
| :file | 选取所有上传域 | 集合元素 |
| :hidden | 选取所有不可见元素 | 集合元素 |

三、jQuery的DOM操作

  • DOM（Document Object Model），文档对象模型，是一种与浏览器、平台、语言无关的接口，通过该接口进访问页面中的所有标准组件。
  • DOM分为DOM Core、HTML-DOM和CSS-DOM。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//DOM Core
document.getElementById("id")
document.getElementsByName("name")
document.getElementsByTagName("div")
element.getAttribute("src")
element.setAttribute()

//HTML-DOM
document.forms
element.src //获取某元素的src属性

//CSS-DOM
element.style.color="red"

插入节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function(){
		var $li = $("ul li:eq(1)"); // 获取ul下第2个<li>元素节点
		var ul_txt =  $li.attr("title");	// 获取该节点的属性title
		var li_txt =  $li.text();	   // 输出该节点的文本text
		var $li_4 = $("<li title='title4'>text4</li>"); // 创建一个<li>元素，包括元素节点和文本节点
		$("ul").append($li_4); // <ul>元素内部追加后置
		// $li_4.appendTo($("ul")); //等同于上一行
		var $li_0 = $("<li title='title0'>text0</li>"); // 创建一个<li>元素，包括元素节点和文本节点
		$("ul").prepend($li_0); // <ul>元素内部追加前置
		// $li_0.prependTo($("ul")); //等同于上一行
		var $p0 = $("<p>p0</p>");
		$("ul").after($p0); //元素后插入内容，可能是移动
		// $p0.insertAfter($("ul")); //等同于上一行

		var $p1 = $("<p>p1</p>");
		$("ul").before($p1); //元素前插入内容，可能是移动
		// $p1.insertBefore($("ul")); //等同于上一行
	});
  	//]]>
  	</script>
</head>
<body>
	<ul>
		<li title="title1">text1</li>
		<li title="title2">text2</li>
		<li title="title3">text3</li>
	</ul>
</body>
</html>

删除节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		$("ul li").click(function () {
			alert($(this).html());
		})

		var $li2 =$("ul li:eq(1)").remove(); //从DOM中删除所有匹配的元素，返回值指向已被删除的节点的引用
		$("ul").append($li2); //remove后重新追加元素，之前的绑定事件和数据丢失

		var $li3=$("ul li:eq(1)").detach(); //从DOM中删除所有匹配的元素，返回值指向已被删除的节点的引用
		$("ul").append($li3); // detach后重新追加元素，之前的绑定事件和数据保留

		$("ul li:eq(0)").empty(); // 清空元素中的所有后代节点，<li title="title1"></li>

	});
	//]]>
  	</script>
</head>
<body>
	<ul>
		<li title="title1">text1</li>
		<li title="title2">text2</li>
		<li title="title3">text3</li>
	</ul>
</body>
</html>

复制、替换节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		$("ul li:eq(0)").click(function (){
			$(this).appendTo("ul"); //点击后只是移动元素到追加位置
		})

		$("ul li:eq(1)").click(function (){
			$(this).clone().appendTo("ul"); //点击后复制元素到最后
		})

		$("ul li:eq(2)").click(function (){
			$(this).clone(true).appendTo("ul"); //注意参数true，代表复制时同时复制元素中绑定的事件
		})

		// $("p").replaceWith("<h2>p2</h2>") //用h2标签替换掉p标签
		$("<h2>p2</h2>").replaceAll("p"); //同上一行效果
	});
	//]]>
  	</script>
</head>
<body>
	<p title="p1" >p1</p>
	<ul>
		<li title="title1">text1</li>
		<li title="title2">text2</li>
		<li title="title3">text3</li>
	</ul>
</body>
</html>

包裹节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		// $("p").wrap("<h1></h1>"); // 每个元素单独包裹，<h1><p title="p1">p1</p></h1> <h1><p title="p2">p2</p></h1>
		$("p").wrapAll("<h1></h1>"); // 所有元素单独包裹，<h1><p title="p1">p1</p> <p title="p2">p2</p></h1>，中间元素会放到包裹元素之后
		$("li").wrapInner("<b></b>"); //将li标签的文本内容进行包裹，<li title="title1"><b>text1</b></li>
	});
	//]]>
  	</script>
</head>
<body>
	<p title="p1">p1</p>
	<div>middle</div>
	<p title="p2">p2</p>
	<ul>
		<li title="title1">text1</li>
		<li title="title2">text2</li>
		<li title="title3">text3</li>
	</ul>
</body>
</html>

属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		var p_txt = $("p").attr("title"); //获取title属性
		alert(p_txt);

		$("p").attr("title","p2"); //设置单个属性
		$("p").attr({"title":"p2","name":"p2"}); //设置多个属性

		$("ul li").removeAttr("title"); //删除单个属性
	});
	//]]>
  	</script>
</head>
<body>
	<p title="p1">p1</p>
	<ul>
		<li title="title1" name="title1">text1</li>
		<li title="title2" name="title2">text2</li>
		<li title="title3" name="title3">text3</li>
	</ul>
</body>
</html>

样式操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
	<style>
		.normal{
			font-weight:normal;
		}
		.red{
			color: red;
		}
		.bold{
			font-weight: bold;
		}
		.blue{
			color: blue;
		}
	</style>

	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		$("input:eq(0)").click(function(){
			$("li").toggleClass("blue"); //切换样式，如果有则删除，如果无则添加
		});

		var li_class = $("li").attr("class"); //获取class样式属性
		alert(li_class);

		alert($("li").hasClass("normal"));
		alert($("li").is(".normal"));

		$("li").attr("class","red"); //设置样式，会替换掉之前的normal样式
		$("li").addClass("bold"); //追加样式，不会删除red样式
		$("li").removeClass("bold"); //删除指定样式
		$("li").removeClass(); //删除全部样式
	});
	//]]>
  	</script>
</head>
<body>
	<ul>
		<li class="normal" name="title1">text1</li>
		<li class="normal" name="title2">text2</li>
		<li class="normal" name="title3">text3</li>
	</ul>

	<input type="button" value="toggle"/>
</body>
</html>

设置和获取HTML、文本和值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		console.log($("p[title=p1]").html()); //获取p标签的html内容，<strong>p1</strong>
		console.log($("p[title=p2]").html()); //获取p标签的html内容，为空
		$("p[title=p3]").html("<h1>p3</h1>"); //设置html内容

		console.log($("p[title=p1]").text()); //获取文本内容，p1
		$("p[title=p1]").text("p1 edit");

		console.log($("p[title=p1]").val()); //获取文本内容，p1
		$("p[title=p1]").text("p1 edit");

		$("#btn").click(function (){
			$("#btn").val("has got"); // 设置元素的值
			alert($("#addr").val()); // 获取元素的值
		})
	});
	//]]>
  	</script>
</head>
<body>
	<p title="p1"><strong>p1</strong></p>
	<p title="p2"><h1>p2</h1></p>
	<p title="p3">p3</p>
	<input id="addr" type="text" value="123"/>
	<input id="btn" type="button" value="get"/>
</body>
</html>

遍历节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		var $ul = $("ul").children();
		console.log( $ul.length );    // <ul>元素下有3个子元素
		for(var i=0;i< $ul.length;i++){
			console.log( $ul[i].innerHTML ); // 遍历完的元素是dom，使用dom的innerHTML方法
		}

		var $ul2= $("p").next(); //ul的下一个同辈元素
		console.log($ul2[0]); // 输出dom

		var $p= $("ul").prev(); //p的上一个同辈元素
		console.log($p[0]); // 输出dom

		var $li= $("li:eq(1)").siblings(); //li的所有同辈元素
		console.log($li[0],$li[1]); // 有2个，输出dom

		var $parent= $("li:eq(1)").parent(); //li的父级元素，找到则停止
		console.log($parent[0]); // 只有1个，输出dom

		var $parents= $("li:eq(1)").parents(); //li的祖先元素，找到父元素会继续向上找
		console.log($parents); // 找到了3个，分别是ul，body和html

		var $closest= $("li:eq(1)").closest("body"); //li的上级匹配元素，从该元素往上找，直到找到匹配选择器的元素
		console.log($closest); // 找到了3个，分别是ul，body和html
	});
	//]]>
  	</script>
</head>
<body>
	<p title="p1">p1</p>
	<ul>
		<li title="title1">text1</li>
		<li title="title2">text2</li>
		<li title="title3">text3</li>
	</ul>
</body>
</html>

CSS-DOM操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
	<style>
		.red{
			color: red;
		}
	</style>

	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
 	//<![CDATA[
	$(function (){
		console.log($("p").css("color")); //通过css方法获取元素的样式属性。rgb(255, 0, 0)
		$("p").css("font-weight","bold"); //设置元素的样式属性。<p title="p1" class="red" style="font-weight: bold;">p1</p>

		console.log($("p").width()); //获取元素宽度
		console.log($("p").height()); //获取元素高度
		console.log($("p").offset()); //获取元素在当前视窗的相对偏移
		console.log($("p").position()); //获取元素相对于最近一个position样式为relative或absolute的祖先节点的相对偏移
	});
	//]]>
  	</script>
</head>
<body>
	<p title="p1" class="red">p1</p>
</body>
</html>

三、jQuery的事件处理

点击事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8">
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("div1").onclick = function () {
                alert("click1");
                alert(this.innerText);
            }
        }

        function click2(obj) {
            alert("click2");
            alert(obj.innerText);
        }

        // bind方法可绑定的事件有：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,
        // mouseout,mouseenter,mouseleave,change,select,submit,keydown,keyup,error等，也可自定义名称
        $(function () {
            $("#div3").bind("click", function () {
                alert("click3");
                alert($(this).text());
            })

            $("#div4").click(function () {
                alert("click4");
                alert($(this).text());
            })
        })
    </script>
</head>
<body>
    <div id="div1">text1</div>
    <div id="div2" onclick="click2(this)">text2</div>
    <div id="div3">text3</div>
    <div id="div4">text4</div>
</body>

合成事件

  • 合成事件：jQuery有2个合成事件，hover()方法和toggle()方法。
  • hover模拟光标悬停事件，移动上去触发第1个函数，移出后触发第2个函数。
  • toggle方法，用于模拟鼠标连续点击事件，轮番调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
	<script src="jquery2.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function (){
		$("#p1").hover(function (){
			$(this).next().show();
		},function () {
			$(this).next().hide();
		})

		$("#p2").toggle(function (){
			$(this).prev().toggle();
		},function () {
			$(this).prev().toggle();
		})
	});
  	</script>
</head>
<body>
	<p id="p1">p1</p>
	<ul style="display: none">
		<li title="title1" name="title1">text1</li>
		<li title="title2" name="title2">text2</li>
		<li title="title3" name="title3">text3</li>
	</ul>
	<h1 id="p2">p2</h1>
</body>
</html>

事件冒泡

  • 页面上有多个事件，也可以多个元素相应同一个事件。每一个元素会按照向上冒泡的顺序响应click事件。
  • jQuery对事件进行了拓展和封装，可以通过event获取事件对象。
  • jQuery通过event.stopPropagation()方法来停止事件冒泡。
  • jQuery通过event.preventDefault()方法来阻止元素默认行为，如表单的提交行为。
  • 如需要同时对事件对象停止冒泡和默认行为，可以直接return false;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
    $(function (){
        $("a").click(function(event) {
            console.log(event.type);//获取事件类型
            console.log(event.which);//获取到鼠标点击事件中的按键，1代表左键，2代表中键，3代表右键
            console.log(event.target);//获取到触发事件的元素
            console.log("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
            event.preventDefault(); //阻止默认行为
            event.stopPropagation(); //阻止冒泡
            // return false;//阻止链接跳转，等同于上面2个
        });

        $("div").mousedown(function(event) {
            alert(event.which);//获取到鼠标点击事件中的按键，1代表左键，2代表中键，3代表右键
        });

        $("input").keyup(function(event) {
            alert(event.which);//获取到键盘按键，返回ascii值
        });
    });
</script>
</head>
<body>
<a href='http://iherr.cn'>click me</a>
<div>mouse</div>
<input type="text">
</body>
</html>

事件移除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
    $(function (){
        $("#btn").bind("click", myFun1 = function(){
            $('#test').append("<p>myFun1</p>");
        }).bind("click", myFun2 = function(){
            $('#test').append("<p>myFun2</p>");
        }).bind("click", myFun3 = function(){
            $('#test').append("<p>myFun3</p>");
        });

        $('#delTwo').click(function(){
            $('#btn').unbind("click",myFun2); // 删除某个绑定，不能是匿名函数
        });
        $('#delAll').click(function(){
            $('#btn').unbind("click"); //删除所有绑定
        });
        $('#clickOne').one("click",function(){ 
            alert("click one"); //只绑定一次，可使用one方法
        });

    });
</script>
</head>
<body>
	<button id="btn">点击我</button>
	<button id="delTwo">删除第二个事件</button>
	<button id="delAll">删除全部事件</button>
	<button id="clickOne">只绑定一次</button>
	<div id="test"></div>
</body>
</html>

模拟操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").bind("click", function(event,msg){ //通过msg区分是模拟点击还是用户主动点击
            $("#test").append("<p>click事件:"+msg+"</p>");
        });

        $("#btn").bind("myClick", function(){
            $("#test").append("<p>myClick自定义事件</p>");
        });
        $('#btn').trigger("click","模拟点击"); //使用trigger方法进行模拟操作
        $("#btn").click(); //等同于上面一行
        $('#btn').trigger("myClick"); //使用trigger方法进行模拟操作

        //可使用triggerHandler触发元素绑定的事件，取消浏览器默认操作
    })
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

四、jQuery的动画

常用动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
    <script src="jquery2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function (){
            $("#p1").toggle(function (){
                // $(this).next().show(); //无动画
                // $(this).next().show(500); // 可带时间，用500ms显示动画。同时修改高度、宽度和不透明度
                // $(this).next().fadeIn(); // 只改变元素的不透明度
                // $(this).prev().fadeTo(1000,1); //将不透明度以渐进方式调整到指定的值
                $(this).next().slideDown(); // 只改变元素的高度
            },function () {
                // $(this).next().hide();
                // $(this).next().hide(500);
                // $(this).next().fadeOut();
                // $(this).prev().fadeTo(1000,0);
                $(this).next().slideUp();
            })

            $("#p2").click(function () {
                // $("ul").toggle(); //切换元素可见状态，替代hide和show方法
                // $("ul").slideToggle(); //只改变高度切换元素可见状态，替代slideUp和slideDown
                $("ul").fadeToggle(); //只改变不透明度切换元素可见状态。替代fadeIn和fadeOut
            })
        });
    </script>
</head>
<body>
<p id="p1">p1</p>
<ul style="display: none">
    <li title="title1" name="title1">text1</li>
    <li title="title2" name="title2">text2</li>
    <li title="title3" name="title3">text3</li>
</ul>
<h1 id="p2">p2</h1>
</body>
</html>

自定义动画

  • 使用animate方法来自定义动画。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
	<meta charset="UTF-8" />
	<style>
		*{margin:0;padding:0;}
		#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
	</style>
	<script src="jquery.js"></script>
	<script>
		$(function(){

			$("#stopAni").click(function (){
				$("#panel").stop(true,true);//第1个clearQueue参数为true会清空尚未执行的动画队列，第2个gotoEnd参数为true会到达动画结束的状态
			})

			$("#getAni").click(function (){
				if ($("#panel").is(":animated")){
					alert(true);
				}//判断元素是否处于动画状态
			})

			$("#panel").click(function(){
				// $(this).animate({left: "500px"}, 1000); //简单动画

				// $(this).animate({left: "+=500px"}, 1000); // +=和-=为累加累减动画

				// $(this).animate({left: "500px",height:"200px"}, 1000); // 同时执行多个动画

				// $(this).animate({left: "500px"}, 1000)
				//     .animate({height: "200px",opacity: "0.5"}, 1000)
				//     .fadeOut("slow"); //按顺序执行动画


				// $(this).animate({left: "500px"}, 1000)
				// 		.animate({height: "200px"}, 1000)
				// 		.css("border","5px solid blue"); //css是非动画方法，未排队，动画开始就已执行

				// $(this).animate({left: "500px"}, 1000)
				// 		.animate({height: "200px"}, 1000)
				// 		.queue(function(next){
				// 			$(this).css("border","5px solid blue");
				// 			next(); //继续下一个动画
				// 		}).fadeOut("slow"); // css排队

				// $(this).animate({left: "500px"}, 1000)
				// 		.animate({height: "200px"}, 1000,function (){
				// 			$(this).css("border","5px solid blue"); //动画的回调函数，执行完成后对css非动画方法进行处理
				// 		});

				$(this).animate({left: "500px"}, 1000)
						.delay(1000)
						.animate({height: "200px"}, 1000)
						.delay(1000)
						.fadeOut("slow");


			})
		})
	</script>
</head>
<body>
<div id="panel"></div>
<button id="stopAni">停止动画</button>
<button id="getAni">查看动画状态</button>
</body>
</html>

五、jQuery与Ajax

  • Asynchronous JavaScript and XML（Ajax），异步JavaScript和XML，开启了无刷新更新页面的时代。
  • Ajax优势：不需要插件，优秀的用户体验，提高Web程序的性能，减轻服务器压力
  • Ajax不足：浏览器对XMLHTTPRequest对象的支持度不足，破坏浏览器前进后退，对搜索引擎支持不友好，开发和调试工具缺乏。
  • Ajax核心是XMLHTTPRequest对象，用来发送异步请求，接收响应和执行回调。

传统JS实现ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<meta charset="UTF-8">
<script>
//通过这个函数来异步获取信息
function ajax(){ 
	var xmlHttpReq = null;	//声明一个空对象用来装入XMLHttpRequest
	if (window.ActiveXObject){//IE6是以ActiveXObject的方式引入XMLHttpRequest的
		xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	} 
	else if (window.XMLHttpRequest){//除IE6外的浏览器XMLHttpRequest是window的子对象
		xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
	}
	if(xmlHttpReq != null){	//如果对象实例化成功 
		xmlHttpReq.open("GET","http://localhost:8080/test",true);	//调用open()方法并采用异步方式
		xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
		xmlHttpReq.send(null);	//因为使用get方式提交，所以可以使用null参调用
	}
	function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
		if(xmlHttpReq.readyState == 4){ //为0代表已创建，为1表示正在向服务端发送请求，值为2表示已经接收完全部响应数据，状态3表示正在解析数据，值为4表示数据解析完毕。
				if(xmlHttpReq.status == 200){
					//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
					document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
				}
		}
	}
}
</script>
</head>
<body>
<input type="button" id="" value="Ajax提交" onclick="ajax();" />
<div id="resText" ></div>
</body>
</html>

jQuery的load方法

用于远程载入HTML代码并插入DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script>
    $(function () {
        $("#send").click(function () {
            // $("#resText").load("http://localhost:8080/index"); //加载HTML内容
            // $("#resText").load("http://localhost:8080/index .para"); //筛选class为para的内容

            $("#resText").load("http://localhost:8080/index .para",function (responseText, textStatus, XMLHttpRequest){
                alert( $(this).html() );	//在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
                alert(responseText);       //请求返回的内容
                alert(textStatus);		    //请求状态：success，error
                alert(XMLHttpRequest);     //XMLHttpRequest对象
            });
        })
    })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取"/>
<div id="resText"></div>
</body>
</html>

jQuery的$.get()、$.post()、$.getJSON()和$.ajax()方法

  • 返回的数据格式可以是HTML片段，可以是XML格式，可以是JSON格式（常用）。ajax的dataType可以xml、html、script、json、jsonp、text等。
  • ajax提供表单的serialize和serializeArray方法，用于将表单DOM元素序列化为字符串或json格式，用于ajax请求。
  • ajax请求时会触发全局回调函数，用于jQuery元素绑定。如ajaxComplete、ajaxError、ajaxSend和ajaxSuccess等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script>
    $(function () {
        $("#send1").click(function () {
            $.get("http://localhost:8080/get", {
                    username :  encodeURI( $("#username").val() )
                }, function (data, textStatus){
                    $("#resText").html(  decodeURI(data) ); // 把返回的数据添加到页面上
                }
            );
        })

        $("#send2").click(function(){
            $.post("http://localhost:8080/post", {
                    username :  $("#username").val()
                }, function (data, textStatus){
                    $("#resText").html(data); // 把返回的数据添加到页面上
                }
            );
        })

        $('#send3').click(function() {
            $.getJSON('http://localhost:8080/json', function(data) {
                $('#resText').empty();
                var html = '<div><h6>' + data.username + '</h6><p>' + data.pwd + '</p></div>';
                $('#resText').html(html);
            })
        })

        $('#send4').click(function() {
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/json",
                dataType: "json",
                success : function(data){
                    $('#resText').empty();
                    var html = '<div><h6>' + data.username + '</h6><p>' + data.pwd + '</p></div>';
                    $('#resText').html(html);
                },
                error :function (xhr, textStatus, errorThrown){
                    alert("状态码："+xhr.status);
                    alert("状态:"+xhr.readyState); //当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                    alert("错误信息:"+xhr.statusText );
                    alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                    alert("请求状态："+textStatus);
                    alert(errorThrown);
                }
            });
        });
    })
</script>
</head>
<body>
<p>姓名: <input type="text" name="username" id="username" /></p>
<input type="button" id="send1" value="get"/>
<input type="button" id="send2" value="post"/>
<input type="button" id="send3" value="getJSON"/>
<input type="button" id="send4" value="Ajax getJSON"/>
<div id="resText"></div>
</body>
</html>

跨域问题

  • 因为浏览器的同源策略，非简单请求的Ajax可能存在跨域问题。
  • 简单请求是HEAD、GET和POST请求，且header字段为Accept、Accept-Language、Content-Language、Last-Event-ID、以及Content-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。在这个范围内的请求为简单请求。其他的为非简单请求

遇到跨域问题的浏览器报错如下：

  • No ‘Access-Control-Allow-Origin’ header is present on the requested resource。The response had HTTP status code 404。非简单请求需要发送options预检请求，后台无options接口则报错。
  • No ‘Access-Control-Allow-Origin’ header is present on the requested resource。The response had HTTP status code 405。非简单请求发送了options预检请求，但因后台options接口安全配置问题阻止了预检。
  • No ‘Access-Control-Allow-Origin’ header is present on the requested resource。The response had HTTP status code 200。非简单请求发送了options预检请求，后台options接口允许了预检，但可能header不匹配导致浏览器端报错。
  • header contains multiple values ‘,‘。响应头包含了多个Access-Control-Allow-Origin:*。为后台配置错误。

解决方案：

1、jsonp，利用script脚本拥有跨域能力来实现。需要前端添加script脚本向服务器发送请求，后台将数据包裹在一个函数里返回，前端执行该函数解析数据。只能是GET请求，基本不常使用了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<meta charset="UTF-8">
<script src="jquery.js"></script>

<script>
    function aa(data) {
        console.log(data.data.username);// 通过data.js回调方法aa
    }
</script>
<script src="http://localhost:8080/data.js"></script>
<script type="text/javascript">

    $(function () {
        $('#send').click(function () {
            $.ajax({
                url:'http://localhost:8080/data.js',//可以不是本地域名
                type:'get',
                dataType:'jsonp',  //jsonp格式访问
                jsonpCallback:'aa'  //获取数据的函数
            })
            .done(function (data) {
                alert(data.data.username);
            })
            .fail(function () {
                alert('服务器超时，请重试！');
            });
        });
    })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax jsonp"/>
<div id="resText"></div>
</body>
</html>

2、前端代理，常用于vue等开发环境。
3、后台配置，以java为例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig  implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

六、jQuery插件

常用插件

插件名称 说明
Validation 表单验证
Form 表单
SimpleModal 模态窗口
Cookie 管理Cookie
jQuery UI 交互、组件、效果库

编写插件

  • jQuery.fn.extend(object) 为拓展jQuery元素，提供新的方法。
  • jQuery.extend(object)为拓展jQuery元素本身，将函数添加到jQuery命名空间中。

1、jquery.color.js

1
2
3
4
5
6
7
8
//插件编写
;(function($) {
    jQuery.fn.extend({
        "color":function(value){
            return this.css("color",value);
        }
    });
})(jQuery);

2、使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .a {
            color: red;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.color.js"></script>
    <script type="text/javascript">

        //插件应用
        $(function () {
            $("div").click(function () {
                var color = $(this).text();
                $("div").color(color); //设置所有的div的字体颜色
            })
        })
    </script>

</head>
<body>
<div class="a">red</div>
<div style="color:blue">blue</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>
</body>
</html>

七、jQuery总结

性能优化

  • 使用最新的版本类库
  • 使用合适的选择器，优先使用id选择器，尽量给选择器指定上下文。
  • 缓存对象
  • 注意循环时的DOM操作开销
  • 尽量用数组方式（while或for）使用jQuery对象，而不是使用$.each()。
  • 事件代理，每个事件都会冒泡到父级节点，可以通过父级节点的一次绑定，来解决子元素多次绑定。
  • 将自己的代码封装成jQuery插件
  • 使用join拼接字符串，替代加号
  • 尽量使用原生的JS方法，有时你根本不需要使用jQuery。
  • 压缩JavaScript，使用Gzip，或者压缩版。

小技巧

  • 禁用页面的右键菜单，绑定事件contextmenu返回false
  • 新窗口打开页面，使用this.target=”_blank”
  • 判断浏览器类型，使用$.brower对象
  • 返回头部滑动动画，使用animate
  • 获取鼠标位置，使用mousemove的event的pageX和pageY
  • 判断元素是否存在，使用length属性
  • 设置div在屏幕中央，使用jQuery.fn.center进行拓展
  • 自定义选择器，$.extend拓展
  • 关闭所有动画效果，使用jQuery.fx.off
  • 检测鼠标左右键，使用mousedown的event的which
  • 回车提交表单，使用keyup事件。
  • 设置全局ajax参数，ajax的4个全局事件
  • 选择同辈元素，使用sliblings
  • 进行本地存储，使用localStorage
  • 进行Cookie管理，可使用jQuery插件，$.cookie(‘key’,’value’,{expires:7,path:’/‘})

jQuery概览

1、基础

  • 核心函数
  • 多库共存
  • 对象访问
  • 插件机制

2、选择器

  • 基本
  • 层级
  • 基本过滤器
  • 内容过滤器
  • 表单过滤器
  • 可见过滤器
  • 属性过滤器
  • 子元素过滤器
  • 表单

3、属性

  • 属性
  • 类
  • HTML
  • 文本
  • 值

4、筛选

  • 过滤
  • 查找
  • 串联

5、文档处理

  • 内部插入
  • 外部插入
  • 包裹
  • 替换
  • 删除
  • 复制

6、CSS

  • css
  • 定位
  • 高宽

7、事件

  • 页面载入
  • 事件绑定
  • 动态事件
  • 事件交互
  • 错误
  • 键盘事件
  • 鼠标事件
  • 窗口操作

8、动画效果

  • 基本
  • 滑动
  • 淡入淡出
  • 自定义
  • 设置

9、Ajax

  • Ajax请求
  • Ajax事件
  • 其他

10、其他实用项

  • 浏览器和特性检测
  • 数组和对象操作
  • 测试操作
  • 字符串操作
  • URLs
  • 数据功能
  • 事件对象

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true