Fork me on GitHub

jQuery基础知识学习总结

发表于 | 分类于 |
本文共计: 3,574 | 阅读耗时 ≈ 16

jQuery基础知识学习总结

什么JQuery:

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

使用jQuery完成页面定时弹出广告

定时器: 

setInterval     clearInterval

setTimeout    clearTimeout

显示: img.style.display = “block”

隐藏: img.style.display = “none”

img 对象

style属性:  style对象

使用jQuery完成表格的隔行换色

获得所有的行

table.rows[]

修改行的颜色

row.bgColor ="red"

row.style.backgroundColor = "black"

row.style.background = "red"

"background-color:red"

"background:red"

使用jQuery完成复选框的全选效果

checked属性

如何获取所有复选框:

document.getElementsByName   get Elements  By Name  数据库里面

使用jQuery完成省市联动效果

JS中的数组:  ["城市"]

new Array()

DOM树操作:

    创建节点:  document.createElement

    创建文本节点: document.createTextNode

    添加节点:  appendChild

使用jQuery完成下列列表左右选择

select下拉列表

multiple 允许多选

ondblclick : 双击事件

for循环遍历,一边遍历一边移除出现的问题

使用jQuery完成表单的校验(扩展)

事件:

获得焦点事件: onfocus

失去焦点事件: onblur

按键抬起事件: onkeyup

鼠标移入:  onmouseenter

鼠标移出: onmouseout

JS引入外部文件 : script

使用jQuery完成页面定时弹出广告

JQ的入门

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
<script>
			//js文档加载完成的事件
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  简写成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最简单的写法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>

【JQ中根据ID查找元素】

1
2
3
4
全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")

【JQ和JS之间的转换】

  • JQ对象,只能调用JQ的属性和方法
  • JS对象 只能调用JS的属性和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function changeJS(){
				var div = document.getElementById("div1");
//				div.innerHTML = "JS成功修改了内容"
				//将JS对象转成JQ对象
				$(div).html("转成JQ对象来修改内容")
			}
			
			$(function(){
				//给按钮绑定事件
				$("#btn2").click(function(){
					//找到div1
//					$("#div1").html("JQ方式成功修改了内容");
					//将JQ对象转成JS对象来调用
					var $div = $("#div1");
//					var jsDiv = $div.get(0);
					var jsDiv = $div[0];
					jsDiv.innerHTML="jq转成JS对象成功";
				});
			});

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

1
2
3
4
5
1. 导入JQ相关的文件
2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素

显示和隐藏 img.style.display

【JQ中的动画效果】

1
2
3
4
5
6
7
show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定义动画

步骤分析：

  1. 导入JQ的文件
  2. 编写JQ的文档加载事件
  3. 启动定时器 setTimeout(“”,3000);
  4. 编写显示广告的函数
  5. 在显示广告里面再启动一个定时器
  6. 编写隐藏广告的函数

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    //显示广告
    function showAd(){
        $("#img1").slideDown(2000);
        setTimeout("hideAd()",3000);
    }
    //隐藏广告
    function hideAd(){
        $("#img1").slideUp(2000);
    }
    $(function(){        //文档加载完成才这么做
        setTimeout("showAd()",3000);
    });
</script>

jQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器
  • ID选择器 : #ID的名称
  • 类选择器: 以 . 开头 .类名
  • 元素选择器: 标签的名称
  • 通配符选择器: *
  • 选择器,选择器: 选择器1,选择器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
31
32
33
34
<!--
		- ID选择器 :     #ID的名称
		- 类选择器:     以 . 开头  .类名
		- 元素选择器:    标签的名称
		- 通配符选择器:   * 
		- 选择器,选择器:  选择器1,选择器2
	-->
	<script>
		//文档加载事件,页面初始化的操作
		$(function(){
			//初始化操作: 给按钮绑定事件
			$("#btn1").click(function(){
				$("#two").css("background-color","palegreen");					
			});
			
			//找出mini类的所有元素
			$("#btn2").click(function(){
				$(".mini").css("background-color","palegreen");					
			});
			$("#btn3").click(function(){
				$("div").css("background-color","palegreen");					
			});
			$("#btn4").click(function(){
				$("*").css("background-color","palegreen");
				
			});
			/*选择器分组*/
			
			//找出mini类 和 span元素
			$("#btn5").click(function(){
				$(".mini,span").css("background-color","palegreen");
			});
		});
	</script>
JQ中的层级选择器
  • 子元素选择器: 选择器1 > 选择器2
  • 后代选择器: 选择器1 儿孙
  • 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
  • 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    //文档加载事件,页面初始化的操作
    $(function(){
        //初始化操作: 给按钮绑定事件
        //找出body下面的子div   
        $("#btn1").click(function(){
            $("body > div").css("background-color","palegreen");					
        });
        //找出body下面的所有div
        $("#btn2").click(function(){
            $("body div").css("background-color","palegreen");					
        });
        $("#btn3").click(function(){
            $("#one+div").css("background-color","palegreen");					
        });
        $("#btn4").click(function(){
            $("#two~div").css("background-color","palegreen");					
        });

    });
</script>
JQ中的基本过滤器
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
<script>
    $(function(){
        /<script>
        //文档加载事件,页面初始化的操作
        $(function(){

            //初始化操作: 给按钮绑定事件
            //过滤出所有div中第一个元素
            $("#btn1").click(function(){
                $("div:first").css("background-color","palegreen");					
            });

            //过滤出所有div中偶数位的div
            $("#btn2").click(function(){
                $("div:even").css("background-color","palegreen");					
            });
            $("#btn3").click(function(){
                $("div:odd").css("background-color","palegreen");					
            });
            $("#btn4").click(function(){
                $("div:gt(2)").css("background-color","palegreen");					
            });

        });
</script>
JQ中的属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
//找到有name属性的input
	$("#btn1").click(function(){
		$("input[name]").attr("checked",true);
	});
	$("#btn2").click(function(){
		$("input[name='accept']").attr("checked",true);
	});
	$("#btn3").click(function(){
		$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
	});
});
JQ中的表单过滤器
1
2
3
4
5
6
<script>
  //1.文档加载事件	
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>

使用JQ完成表格的隔行换色

步骤分析:

  1. 导入JQ的包
  2. 文档加载完成函数: 页面初始化
  3. 获得所有的行 : 元素选择器
  4. 根据行号去修改颜色

代码实现:

1
2
3
4
5
6
7
8
9
	$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});

使用JQ完成省市联动效果

技术分析:

  1. 准备工作 : 城市信息的数据

  2. 添加节点 : appendChild (JS)

    1. append : 添加子元素到末尾
    2. appendTo : 给自己找一个爹,将自己添加到别人家里
    3. prepend : 在子元素前面添加
    4. after : 在自己的后面添加一个兄弟

  3. 遍历的操作:

步骤分析:

  1. 导入JQ的文件
  2. 文档加载事件:页面初始化
  3. 进一步确定事件: change事件
  4. 函数: 得到当前选中省份
  5. 得到城市, 遍历城市数据
  6. 将遍历出来的城市添加到城市的select中

代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
				$("#province").change(function(){
//					alert(this.value);
					//得到城市信息
					var cities = provinces[this.value];
					//清空城市select中的option
					/*var $city = $("#city");
					//将JQ对象转成JS对象
					var citySelect = $city.get(0)
					citySelect.options.length = 0;*/
					
					$("#city").empty();  //采用JQ的方式清空
					//遍历城市数据
					$(cities).each(function(i,n){
						$("#city").append("<option>"+n+"</option>");
					});
				});
			});

使用JQ完成下拉列表左右选择

步骤分析

1
2
3
4
5
1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 :　点击事件　onclick
4. 事件触发函数
1. 移动被选中的那一项到右边

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
	$(function(){
		$("#a1").click(function(){
			//找到被选中的那一项
			//将被选中项添加到右边
			$("#rightSelect").append($("#leftSelect option:selected"));
		});
		
		//将左边所有商品移动到右边
		$("#a2").click(function(){
			$("#rightSelect").append($("#leftSelect option"));
		});
	});
</script>

使用JQ完成表单的校验(扩展)

技术分析

  • trigger
  • triggerHandler
  • is()

步骤分析

  1. 首先给必填项,添加尾部添加一个小红点
  2. 获取用户输入的信息,做相应的校验
  3. 事件: 获得焦点, 失去焦点, 按键抬起
  4. 表单提交的事件

代码实现

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css" />
		<title></title>
		<!--
			1. 首先给必填项,添加尾部添加一个小红点
			2. 获取用户输入的信息,做相应的校验
			3. 事件: 获得焦点, 失去焦点, 按键抬起
			4. 表单提交的事件
			
			Jq的方式来实现:
				1. 导入JQ的文件
				2. 文档加载事件: 在必填项后天加一个小红点
				3. 表单校验确定事件: blur focus keyup
				4. 提交表单 submit
		-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			
			$(function(){  //默认做一些页面初始化
				//动态在必填项后面添加小红点
				$(".bitian").after("<font class='high'>*</font>");
				
				//给必填项绑定事件
				$(".bitian").blur(function(){
					//首先获取用户当前输入的值
					var value = this.value; //123
					//清空上一次提示的信息
					$(this).parent().find(".formtips").remove();
					
					//判断当前的值是哪一项输入的值
					if($(this).is("#username")){  //判断是否是用户名输入项
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					
					if($(this).is("#password")){  //判断是否是密码输入项
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				})
				
				
				
				//给表单提交绑定事件
				$("form").submit(function(){
					//触发所有必填项的校验
					$(".bitian").trigger("focus");
					//找到错误信息的个数
					if($(".onError").length > 0){
						return false;
					}
					return true;
				});
			});
			
		/*	
			$(function(){
				// 在所有必填项后天加一个小红点 *
				$(".bitian").after("<font class='high'>*</font>");
				
				//事件绑定
				$(".bitian").blur(function(){
//					var value = this.value;
					var value = $(this).val();
					//清空当前必填项后面的span 
//					$(".formtips").remove();
					$(this).parent().find(".formtips").remove();
					//获得当前事件是谁的
					if($(this).is("#username")){
						//校验用户名
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
						}
					}
					
					if($(this).is("#password")){
						//校验密码
						if(value.length < 3){
							$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				});
				
//				$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

				//给表单绑定提交事件
				$("form").submit(function(){
					//触发必填项的校验逻辑
					$(".bitian").trigger("focus");
					
					var length = $(".onError").length
					if(length > 0){
						return false;
					}
					return true;
				});
			});*/
			
		</script>
	</head>
	<body>
		<form action="../index.html">
			<div>
				用户名:<input type="text" class="bitian" id="username" />
			</div>
			<div>
				密码:<input type="password"  class="bitian" id="password" />
			</div>
			<div>
				手机号:<input type="tel" />
			</div>
			<div>
				<input type="submit" />
			</div>
		</form>
	</body>
</html>

使用JQuery发送请求局部刷新页面

数据交换格式:

json

xml

  • 什么是JSON

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

  • JSON格式

    JSON对象

    1
    2
    { key1:value}   
    {"username":"zhangsan","password":"123"}
    JSON数组

    1
    [{ key1:value},{ key1:value},{ key1:value}]

内容总结:

定时器

动画效果: show hide slideDown slideUp fadeIn fadeOut animate

基本选择器:

ID选择器: #ID名称

类选择器: .类名

元素选择器: 元素/标签名称

通配符选择器:  *  找出所有页面元素 包含页面上所有的标签

选择器分组 :   选择器1, 选择器2      [选择器1,选择器2]

层级选择器:

后代选择器:  选择器1 选择器2  找出所有的后代,儿子孙子曾孙

子元素选择器: 选择器1 >选择器2  找出所有儿子

相邻兄弟选择器:  选择器1+选择器2  : 找出紧挨着自己那个弟弟

兄弟选择器 :　　　选择器1~选择器2  :  找出所有的弟弟

属性选择器:

选择器[属性名称]

1
2
选择器[属性名称][属性名名]
选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']

表单选择器:

:input   找出所有的输入项 : 不单单找出input  textarea select 

:text  找出type类型为 text

:password

基本过滤器:

:even

:odd

:gt

:lt

:eq

:first

:last

表单对象属性:

:selected

:checked

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function)  : 文档加载完成的事件
css()  : 	修改css样式
prop() :    修改属性/ 获取属性
html() :    修改innerHTML

append : 	给自己添加子节点
appendTo :  将自己添加到别人家,给自己找一个爹
prepend :   在自己最前面添加子节点
after	:   在自己后面添加一个兄弟
empty	:   清空所有子节点

$(cities).each(function(i,n){
  	
})

$.each(arr,function(i,n){
  
});

本文标题:jQuery基础知识学习总结

文章作者:WilsonSong

发布时间:2018年08月19日 - 17:08

最后更新:2018年08月19日 - 17:08

原始链接:https://songwell1024.github.io/2018/08/19/jQuery/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------