JQ实现老黄历

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

  • 数据交换格式(服务器-客户端)：

1. json：

1
2
JSON对象：{key1:value}   ---例如：{"username":"zhangsan","password":"134560"}
JSON数组：[{key1:value}{key1:value}{key1:value}]

2. xml：

实现老黄历主要代码如下：

1
2
3
4
5
6
7
 1.使用get方法
    $.get(url,function(jsonArr){里面具体变换},json);
 2.写好一个数据json文件 用来去调用
 var url = "http://127.0.0.1:8848/day05-bootstrap/data.json";  
 3.寻找ul标签就是使用 ".good ul" //类加载器 标签(后代)
$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>")
//class使用外引入的css文件里面的类加载器

具体代码如下:

所引入的css和js文件都存在本代码文件夹内

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/laohuangli.css" />
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
		<script>
			//文档加载事件
			$(function(){

				//请求链接，动态显示数据ajax
				//JQ的get方法(url:待载入的页面，data:待发送key/value值，callback:载入成功回调函数，type：返回内容格式xml/html/script/json/text/_default)
				var url = "http://127.0.0.1:8848/day05-bootstrap/data.json";  //获取到那些临时刷新的数据
				
				//ajax 最简单异步请求网络
				$.get(url,function(jsonArr){  //存到数组去
					 var i=Math.floor(Math.random()*3+3);  //JS的方法 得到1/2/3这三个整数
					while(i>0){  //随机循环取几条数据	
						//随机去取一条数据
						var index=Math.floor(Math.random()*jsonArr.length);
						var obj=jsonArr[index];
						//适合干嘛
						$(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>");
						i--;
					}
					
					  var j = Math.floor(Math.random()*3+2) //
					while(j > 0){
						var index = Math.floor(Math.random()*jsonArr.length)
						var obj = jsonArr[index];
						//不适合干嘛
						$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>")
						j--;
					}	
				});
				
			});
		</script>
	</head>
	<body>
			<div class="container">
				<div class="title">
					程序员老黄历
				</div>
				<div class="good">
					<div class="title">
						<table>
							<tr><td>宜</td></tr>
						</table>
					</div>
					<div class="content">
						<ul>
								
								
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				
				<div class="split"></div>
				
				<div class="bad">
					<div class="title">
						<table>
							<tr><td>不宜</td></tr>
						</table>
					</div>
					<div class="content">
						<ul>
								
								
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</body>
</html>

代码结果如下：

JQ实现表单校验

一、trigger和triggerHandler区别

trigger:触发事件，将光标移入框内(比较好)
triggerHandler：仅仅触发事件所对应的函数

完整代码如下：

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>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
		
		<script>	
			$(function(){
				$("#username").focus(function(){
					console.log("text focus被触发了!"); //控制台输出一句话
				});
				
				$("#btn1").click(function(){  //第一个按钮的点击事件
					//触发一下text的focus
					$("#username").trigger("focus");	
				});
				
				$("#btn2").click(function(){  //第二个按钮的点击事件
					//触发一下text的focus			
					$("#username").triggerHandler("focus");
				});
				
			});
		
		</script>
	</head>
	<body>
		用户名：<input type="text" id="username"><br>
		<input type="button" value="triggerH触发一下focus" id="btn1">
		<input type="button" value="triggerHandler触发一下focus" id="btn2">
	</body>
</html>

代码结果如下：

二、JQ方式实现表单检验

步骤分析：

1.导入相关JQ文件
2.文档加载事件：必填项后加一个小红点
3.表单校验确定事件： blur onfoucs onkeyup
4.提交表单：sumbit

具体操作分析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1.进行导入相关JQ文件和css文件：
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>

2.放置好一个按钮和三个input然后去找css文件的high类给input的属性加红色*(利用after方法)
$(".bitian").after("<font class='high'>*</font>");

3.给两个input设置blur事件(keyup.focus事件链式(triggerHandler()方法触发))
$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){});

4.通过is()方法判断是密码还是用户名操作
&(this).is("#username"/"password")

5.判断之后提示使用append()方法输出(想要在*之后输出)
$(this).parent().append("<span class='formtips onError'>密码太短了!</span>");

6.输出之后如果不清空(remove()方法)就一直弹出

$(this).parent().find(".formtips").remove();

7.最后就是整个表单提交(JS是所有的true才能提交)，JQ是使用trigger("blur")去判断出错长度，出错少于0就成功
$(".bitian").trigger("blur");  //去blur测试会出现错误次数
  var length=$(".onError").length;

具体代码如下：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				
				//在后面加下红点*
				$(".bitian").after("<font class='high'>*</font>");  //调用css文件内的high类加载器变红色--在两个input后面加*
				
				//事件绑定
				$(".bitian").blur(function(){  //取消焦点事件
						var value=this.value;
						
						//清空当前必填项后面的span(不删除之前只要出错就弹出)
						$(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");
					});
											
				//给表单绑定提交事件
				$("form").submit(function(){
					//触发必选项的校验逻辑
						$(".bitian").trigger("blur");  //去blur测试会出现错误次数
						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>

代码结果如下：

Bootstrap

一、Bootstrap概述

　　是目前受欢迎的前端框架(CSS/HTML框架)，基于HTML、CSS、JAVASCRIPT的比较简单灵活。可以直接去调用类加载器！！！很方便！！！

参考文档：
file:///F:/%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6/%E4%BB%A3%E7%A0%81/%E8%B5%84%E6%96%99/Bootstrap3.3.4%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3/v3.bootcss.com/css/index.htm

以后写代码之前一定要引入的文件(head内)：

1
2
3
4
5
6
7
8
9
10
11
12

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
<!-先引入JQuery才可以引入Bootstrap文件-->
		<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
		
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

<!--为了保证适当的绘制和触屏缩放，需要在head之内添加viewport元数据标签-->
		<meta name="viewport" content="width=device-width, initial-scale=1">

二、布局容器(.container容器)

1. .container类—用于固定宽度并且支持响应式布局的容器

1
2
3
<div class="container">
	代码内容
</div>

2. .container-fluid类—用于100%宽度，占据全部视口(vewport)的容器

1
2
3
<div class="container">
	代码内容
</div>

完整代码如下：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
		<!--先引入JQuery才可以引入Bootstrap-->
		<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

		<!--为了保证适当的绘制和触屏缩放，需要在head之内添加viewport元数据标签-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	
	<body>
		<div class="container">  <!--使用外部引入的文件container类会给输出两边留一定的空白处 让页面更好看点-->
			我们去吃饭吧!我们去吃饭吧!我们去吃饭吧!我们去吃饭吧!我们
		</div>
	</body>
</html>

代码结果如下：

三、bootstrap栅格

　　Bootstrap提供一套响应式、移动设备优先的流式栅格系统，随着屏幕/视角尺寸的增加，一行会分配(最多12列)。

适应手机：.col-xs
适应平板：.col-sm
适应桌面：.col-md

主要是分区域：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
		<!--先引入JQuery才可以引入Bootstrap-->
		<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js"></script>

		<!--为了保证适当的绘制和触屏缩放，需要在head之内添加viewport元数据标签-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
	</head>
	
	<body>
		<div class="container">  <!--使用外部引入的文件container类会给输出两边留一定的空白处 让页面更好看点-->
			<div class="row">
							<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>  
							<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
							<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
							<div class="col-md-1 col-sm-2">.col-md-1</div>
							<div class="col-md-1 col-sm-2">.col-md-1</div>
							<div class="col-md-1 col-sm-2">.col-md-1</div>
							
							<div class="col-md-1">.col-md-1</div>
							<div class="col-md-1">.col-md-1</div>
							<div class="col-md-1">.col-md-1</div>
							<div class="col-md-1">.col-md-1</div>
							<div class="col-md-1">.col-md-1</div>
							<div class="col-md-1">.col-md-1</div>
			</div>
						<div class="row">
							<div class="col-md-8">.col-md-8</div>
							<div class="col-md-4">.col-md-4</div>
						</div>
						<div class="row">
							<div class="col-md-4">.col-md-4</div>
							<div class="col-md-4">.col-md-4</div>
							<div class="col-md-4">.col-md-4</div>
						</div>
						<div class="row">
							<div class="col-md-6">.col-md-6</div>
							<div class="col-md-6">.col-md-6</div>
						</div>
		
		</div>
	</body>
</html>

页面分布格局：

四、表格(class=”table”)

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.css" />  //调用css文件
	</head>
	<body >
		<table class="table">  //只需要给它一个table类
			<tr >
				<td>
					<input type="checkbox" />
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

使用其中的table：

五、bootstrap组件(font文件夹里面)

JQ实现商品左右选择

一、实现商品左右移动(只需要更改script代码)#

1.主要通过按钮事件加载文件事件
2.通过append()方法添加
3.leftSelect option：selected 之前学过用来选择当前选项

主要代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
		$("#a1").click(function(){ //>>这个选项
						
		//将被选中项添加到右边
			$("#rightSelect").append($("#leftSelect option:selected"));
									
		//将左边所有商品移动到右边
		$("#a2").click(function(){
			$("#rightSelect").append($("#leftSelect option"));
								});
			});	
	});

具体代码如下：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<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>
	</head>
	<body>			
			<table border="1px" width="400px">
				<tr>
					<td>分类名称</td>
					<td><input type="text" value="手机数码"/></td>
				</tr>
				<tr>
					<td>分类描述</td>
					<td><input type="text" value="这里面都是手机数码"/></td>
				</tr>
				<tr>
					<td>分类商品</td>
					<td>
						<!--左边-->
						<div style="float: left;">
							已有商品<br />
							<select multiple="multiple" id="leftSelect">
								<option>华为</option>
								<option>小米</option>
								<option>锤子</option>
								<option>oppo</option>
							</select>
							<br />
							<a href="#" id="a1" > >> </a> <br />
							<a href="#" id="a2"> >>> </a>
						</div>
						<!--右边-->
						<div style="float: right;"> 
							未有商品<br />
							<select multiple="multiple" id="rightSelect">
								<option>苹果6</option>
								<option>肾7</option>
								<option>诺基亚</option>
								<option>波导</option>
							</select>
							<br />
							<a href="#"> << </a> <br />
							<a href="#"> <<< </a>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="提交"/>
					</td>
				</tr>
			</table>			
		</body>
</html>

oppo右移之前：

选择oppo右移之后

JQ实现省市联动

一、JQ中增加节点操作

  1. append：添加子元素
    $("#div1").append("娘俩!");

  2. appendTo：给自己找个爹，将自己添加到别人家里
    $("啊哈哈哈").appendTo("#div1");

  3. prepend：在子元素前面添加
    ("#div1").prepend("娘俩!");

  4. after：在自己的后面添加一个兄弟
    $("#div1").after("来,互相伤害呀!");

代码具体如下:

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">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//文档加载完成时间
			$(function(){
				$("#btn1").click(function(){
					//$("#div1").append("娘俩!");
					//$("啊哈哈哈").appendTo("#div1");
					//("#div1").prepend("娘俩!");					
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="点我" id="btn1"><br>
		<div id="div1">
			这里添加内容
		</div>
	</body>
</html>

二、JQ遍历

  • JQ对象调用
1
2
3
$(数组名).each(function(下标,数组值){
				console.log(下标+"==="+数组值);  //控制台输出
			});
  • JQ函数调用
1
2
3
$.each(数组名,function(下标,数组值){
				console.log(下标+"==="+数组值);  //控制台输出
			});

具体实现如下:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//1.先准备好每个市
			var  cities = ["深圳市","东莞市","惠州市","广州市"];						
			//2.如何遍历
			
			//JQ对象调用
			$(cities).each(function(i,n){
				console.log(i+"==="+n);  //控制台输出
			});
				
			//JQ函数调用
			$.each(cities,function(i,n){
				console.log(i+">>>"+n);   //控制台输出
			});  
					
		</script>
	</head>
	<body>
	</body>
</html>

举例结果如下：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			/*
			
			//1.先准备好每个市
			var  cities = ["深圳市","东莞市","惠州市","广州市"];						
			//2.如何遍历
		
			//JQ对象调用
			$(cities).each(function(i,n){
				console.log(i+"==="+n);
			});
				
			//JQ函数调用
			$.each(cities,function(i,n){
				console.log(i+">>>"+n);
			});  			
			*/
		   
			//1.先准备好每个市
			var  cities = ["深圳市","东莞市","惠州市","广州市"];			
			
			function callback1(i,n){
				console.log("123"+"---"+i+"---"+n);
			}
			
			//遍历数据
			function bianli(arr,callback1){
				
				for(var i=0;i<arr.length;i++)
				{
					 var item=arr[i]; //存入
					 callback1(i,item);
				}
				
			}
			
			//调用	
			bianli(cities,callback1);

		</script>
		
	</head>
	<body>
	</body>
</html>

JQ遍历原理如下：

三、省市联动
　　在JS实现省市联动之后进行优化

技术分析：

1
2
3
4

1.准备工作：城市信息(把JS的代码拿过来用)
2.添加节点：append()等
3.JQ遍历:$.each(数组名,function(下标,数字值){});

步骤分析：

1
2
3
4
5
6
1.导入JQ文件
2.文档加载事件：页面初始化  $(function(){});
3.确定事件：change事件
4.触发函数：得到选中的省份  $("#province").change(function(){});
5.得到城市，遍历城市   $("#province").change(function(){});
6.将便利的城市+++省份   $("#city").append("<option>"+n+"</option>");

具体代码实现：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>	
		//1.先准备好每个市
			var  provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"],
				];						
		//2.文档加载事件
		$(function(){
			//4.选中省份
			$("#province").change(function(){
				//5.得到城市
				var cities=provinces[this.value];
				$("#city").empty();  //采用JQ的方式清空!!!!!!!!!!!!!!!!!!!
				//5.遍历城市数据
				$("#province").change(function(){
					$("#city").append("<option>"+n+"</option>");
				});
				
			});
		});					
		</script>
	</head>
	
	<body>
		<!--选择省份-->
		<select  id="province">
				<option value="-1">---选择省份</option>
				<option value="0">广东省</option>
				<option value="1">湖南省</option>
				<option value="2">福建省</option>
		</select>		
		<!--选择城市-->
			<select id="city">
		
			</select>
	</body>
</html>

页面结果如下：

JQ实现表格隔行换色

一、隔行换色

主要代码如下：

1
2
3
4
$(function(){
			$("tr:odd").css("background-color","blue");  //找到tr标签之后odd(奇数)
			$("tr:even:gt(0)").css("background-color","red"); //even(偶数) gt(0)过滤器从o开始
		});

完整代码如下：

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

<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("tr:odd").css("background-color","blue");
				$("tr:even:gt(0)").css("background-color","red");				
			});
		</script>
		
	</head>
	<body onload="init()">   //onload时间放在body体内
		<table border="1px" width="600px" id="tab">  给表格一个id名方便得到表格
			
			<tr >
				<td>
					<input type="checkbox" />   <!--复选框-->
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			
			<!--第一行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			
			<!--第二行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>2</td>
				<td>日用品</td>
				<td>洗衣粉</td>
				<td>这里面的洗衣服很干净的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr> 
			
			<!--第四行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第五行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>	
		</table>
	</body>
</html>

页面结果如下：

二、表格全选和全不选

1.所有函数默认具有(this)
2.属性选择器： 选择器[属性名='属性值']
3.更改属性的方法prop("要改的值",改成什么样子)

1主要代码如下：

1
2
3
4
5
6
7
8
9
$(function(){
	$("#checkAll").click(function(){
		//获取当前选中状态
		this.checked;  //代表当前函数所有者
		//获取所有分类项的checkbox
		//  属性选择器：选择器[属性名='属性值']
		$("input[type='checkbox']:gt(0)").prop("checked",this.checked); //修改属性prop方法	
	});
});
1
2
3
4
5
6
7
8
9
$(function(){
	$("#checkAll").click(function(){
		//获取当前选中状态
		this.checked;  //代表当前函数所有者
		//获取所有分类项的checkbox
		//  层级选择器 tbody tr td input
		$("tbody>tr>td>input").prop("checked",this.checked); 	//使用选择器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
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
<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("tr:odd").css("background-color","blue");
				$("tr:even:gt(0)").css("background-color","red");				
			});
		
		//全选和全不选:
			
				$(function(){
					$("#checkAll").click(function(){
						//获取当前选中状态
						this.checked;  //代表当前函数所有者
						//获取所有分类项的checkbox
						//  属性选择器：选择器[属性名='属性值']
						$("input[type='checkbox']:gt(0)").prop("checked",this.checked); //修改属性prop方法	
					});
				});
			</script>			
	
	</head>
	<body>
			<table border="1px" width="600px" id="tab">
				<thead>
					<tr >
						<td>
							<input type="checkbox" id="checkAll" />
						</td>
						<td>分类ID</td>
						<td>分类名称</td>
						<td>分类商品</td>
						<td>分类描述</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
					<td>1</td>
					<td>手机数码</td>
					<td>华为,小米,尼康</td>
					<td>黑马数码产品质量最好</td>
					<td>
						<a href="#">修改</a>|<a href="#">删除</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>2</td>
					<td>成人用品</td>
					<td>充气的</td>
					<td>这里面的充气电动硅胶的</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>3</td>
					<td>电脑办公</td>
					<td>联想,小米</td>
					<td>笔记本特卖</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>4</td>
					<td>馋嘴零食</td>
					<td>辣条,麻花,黄瓜</td>
					<td>年货</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>5</td>
					<td>床上用品</td>
					<td>床单,被套,四件套</td>
					<td>都是套子</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				</tbody>
			</table>
			
		</body>
</html>

JQ实现表单属性过滤

一、过滤器

选择标签第一个：##

1
$("标签：first")

主要代码分析：

1
2
3
4
5
6
7
8
9
$(function(){
//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:first").css("background-color","green");  //div标签里面的第一个改颜色
			
				});	
			});

完整代码如下：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--外部引入css文件-->
		<link rel="stylesheet" href="../../css/style.css">
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:first").css("background-color","green");
			
				});	
			});
			
		</script>
	</head>
	
	<body>
		<input type="button" value="过滤出所有div的第一个元素" id="btn1"><br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
				
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

代码结果如下：

匹配所有索引值为偶数的元素(0开始)：##

1
$("标签：even")

匹配所有索引值为奇数的元素(0开始)：##

1
$("标签：odd")

主要代码分析：

1
2
3
4
5
6
7
8
9
10
11

$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:even").css("background-color","green");
				});	
				
				$("#btn2").click(function(){
					$("div:odd").css("background-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
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--外部引入css文件-->
		<link rel="stylesheet" href="../../css/style.css">
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:even").css("background-color","green");
				});	
				
				$("#btn2").click(function(){
					$("div:odd").css("background-color","red");
				});
			});
			
		</script>
	</head>
	
	<body>
		<input type="button" value="过滤出所有div中偶数位的div" id="btn1"><br />
		<input type="button" value="过滤出所有div中奇数位的div" id="btn2"><br />
		<div id="one">  <!--0-->
			<div class="mini">1-1</div>  <!--1-->
		</div>  
		
		<div id="two">  <!--2-->
			<div class="mini">2-1</div>  <!--3-->
			<div class="mini">2-2</div>  <!--4-->
		</div>
				
		<div id="three">  <!--5-->
			<div class="mini">3-1</div>   <!--6-->
			<div class="mini">3-2</div>   <!--7-->
			<div class="mini">3-3</div>   <!--8-->
		</div>
		<span id="four">span</span>
	</body>
</html>

代码结果如下：

匹配所有大于(>)给定索引值(n)的元素：##

1
$("标签：gt(n)")

只展示部分代码(完整代码只需要把上面的div中value值和点击事件内的div:odd更改为div：gt(2))

1
2
3
4
5
6
7
8
$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:gt(2)").css("background-color","green");
				});	
				
				
			});

代码结果如下：

二、表单选择器

1
$("input/text/textarea等表单元素")

主要代码如下：

1
2
3
$(function(){
	$("text").css("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
36
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("text").css("color","red");
			});	
		</script>	
	</head>
	<body>
		<form>
		    <input type="button" value="Input Button"/>
		    <input type="checkbox" />
		
		    <input type="file" />
		    <input type="hidden" />
		    <input type="image" />
		
		    <input type="password" />
		    <input type="radio" />
		    <input type="reset" />
		
		    <input type="submit" />
		    <input type="text" />
		    
		    <select><option>1</option></select>
		
		    <textarea></textarea>
		    <button>Button</button>
		</form>
	</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>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$(":text").css("background-color","blue");  //text图背景色
				$("#btn1").click(function(){
					$("select option:selected").css("background-color","red");  //选中的项目选中后变红色
				});
			});	
		</script>	
	</head>
	<body>
		<form>
		    <input type="button" value="Input Bustton"/>
		    <input type="checkbox" />
		
		    <input type="file" />
		    <input type="hidden" />
		    <input type="image" />
		
		    <input type="password" />
		    <input type="radio" />
		    <input type="reset" />
		
		    <input type="submit" />
		    <input type="text" />
		    
		    <select multiple="multiple">  <!--多行显示-->
					<option>Option1</option>
			    	<option>Option2</option>
			    	<option>Option3</option>
			</select>
		<input type="button" value="点我" id="btn1" />
		    <textarea></textarea>
		    <button>Button</button>
		</form>
	</body>
</html>

代码结果如下：

JQuery选择器

一、JQuery中的选择器

基础选择器：

  • 元素选择器(标签的名称{})
  • ID选择器(#id的名字{})
  • 类选择器(.类名{})
  • 通配符选择器(*)
  • 选择器选择器(选择器1，选择器2)

基础选择器代码如下：

需要引入外来的css文件<link rel="stylesheet" href="../../css/style.css">

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

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left:25px;
}
.high{
    color:red;
}


  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
	border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }


table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}

需要引入外来的JQ文件<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>

1
已经在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
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--外部引入css文件-->
		<link rel="stylesheet" href="../../css/style.css">
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					//4.找到id为two的元素变为绿色
					$("#two").css("background-color","palegreen");  //"#two"  #ID的名字
				});	
				
				$("#btn2").click(function(){
					//4.找到mini的元素变为红色
					$(".mini").css("background-color","red");  //".mini"  .类名
				});	
				
				$("#btn3").click(function(){
					//4.找到所有div的元素变为黄色
					$("div").css("background-color","yellow");  //"div"  标签
				});	
				
				$("#btn4").click(function(){
					//4.找到所有div的元素变为黄色
					$("*").css("background-color","black");  //"*" *
				});	
				
				//找出mini类 和 span元素
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","palegreen");
				});
				
			});
			
		</script>
	</head>
	
	<body>
		<input type="button" value="找到id为two的元素" id="btn1"><br />
		<input type="button" value="找到mini的元素" id="btn2"><br />
		<input type="button" value="找出所有div元素" id="btn3"><br />
		<input type="button" value="通配符选择器" id="btn4"><br />
		<input type="button" value="找出mini类 和 span元素" id="btn5"><br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
				
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

1.找到id为two元素的结果如下：

2.找到mini的元素的结果如下：

3.找出所有div元素的结果如下：

4.找出通配符选择器的结果如下：

5.找出mini类和span元素的结果如下：

层级选择器：

  • 子元素选择器：选择器1>选择器2
  • 后代选择器：选择器1 儿孙
  • 相邻兄弟选择器：选择器1+选择器2：找到紧挨的一个弟弟
  • 找出所有弟弟：选择器1~选择器2：找出所有的弟弟

与基本选择器body一致(点击事件有区别)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//找出body下面的子div   
$("#btn1").click(function(){
	$("body > div").css("background-color","palegreen");					
});

//找出body下面的所有div
$("#btn2").click(function(){
	$("body div").css("background-color","palegreen");					
});

//找出id为one的相邻兄弟div
$("#btn3").click(function(){
	$("#one+div").css("background-color","palegreen");					
});

//找出id为two的所有弟弟div
$("#btn4").click(function(){
	$("#two~div").css("background-color","palegreen");					
});

完整代码如下

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../css/style.css" />
		<!--引入JQ的文件-->
		<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
		<!--
			-- 子元素选择器:   选择器1 > 选择器2
			- 后代选择器:  选择器1 儿孙
			- 相邻兄弟选择器 :  选择器1 + 选择器2 : 找出紧挨着的一个弟弟
			- 找出所有弟弟:  选择器1~ 选择器2   : 找出所有的弟弟

		-->
		<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>
	</head>
	<body>
		<input type="button" value="找出body下面的子div" id="btn1" />
		<input type="button" value="找出body下面的所有div" id="btn2" />
		<input type="button" value="找出id为one的相邻兄弟div" id="btn3" />
		<input type="button" value="找出id为two的所有弟弟div" id="btn4" />
				
		<br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				//通过属性选择器找到 a href
				 $("a[href]").css("color","red");
				 //找到包含href，title
				 $("a[href][title]").css("color","green");
				 //找到包含href，title并且title="testTitle"
				 $("a[href][title='testTitle']").css("color","yellow");
			});
		
			
		</script>
	</head>
	<body>
		<a href="#">href1</a><br />
		<a href="#" title="testTitle">href1 222</a>
	</body>
</html>

JQuery实现定时播放广告

#一、JQ中的动画效果#
　　JS中实现图片显示和隐藏使用的是img.style.display：block(显示)/none(隐藏)
　　Jquery中实现图片显示和隐藏使用的是$("#id名字").hide();/$("#id名字").show();

  • JQ的开发步骤：(将js代码和html页面代码进行分离)
    1. 导入JQ相关文件
  <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
2. 文档加载完成事件：
   $("#id名字").click(function(){});页面初始化操作：绑定事件，启动页面定时器；
//后三个是JS的开发操作(相当于把js要写的文件放在了外部让第一步去添加，然后用文档加载事件完成了之后完成JS的开发操作)
3. 确定相关操作的时间
4. 事件触发函数
5. 函数里面去操作相关的元素

实现隐藏的代码(只展示head内部)：

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
	$(function(){
		//隐藏页面图片
		$("#btn2").click(function(){  //去除标签的id=btn2
			//获得img
			$("#img1").hide();  //图片的id=img1
		});				
	});
</script>
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>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				
				//显示页面图片
				$("#btn1").click(function(){
					//获得img
					//$("#img1").show();
					//$("#img1").slideDown();
					//$("#img1").fadeIn();
					  $("#img1").animate({ wdith:"1000px",opacity:"1"},5000); //透明度opacity
				});
								
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
					//$("#img1").hide("100000");
					//$("#img1").slideUp(200);
					//$("#img1").fadeOut();
					  $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity
				});				
			});
		</script>		
	</head>
	<body>
		<input type="button" value="显示" id="btn1"/><br>
		<input type="button" value="隐藏" id="btn2"/><br>
		<img src="../../image/059b5245-e3c8-43bf-80fe-700f0e4e68b8-thumbnail.jpg" width="500px" id="img1">
	</body>
</html>
  • 知识点汇总：
    关于JQ的图片隐藏和显示：

隐藏：

  1. 已经定义好的方法：hide()/slideUp()/fadeOut() —-里面可以加时间
    $("#img1").slideDown(1000);
  2. 自定义的方法：animate() —-里面可以加第一个变量：{属性：值}/第二个变量：时间
    $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity

显示：

  1. 已经定义好的方法：show()/slideDown()/fadeIn() —-里面可以加时间
    $("#img1").slideUp(200);
  2. 自定义的方法：animate() —-里面可以加第一个变量：{属性：值}/第二个变量：时间
    $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity

#二、定时弹出广告(JS的基础上细化)#

步骤分析：

1.导入JQ的文件
2.编写JQ的文档加载事件
3.启动定时器setTimeout("毫秒值");
4.编写显示广告的函数
5.在显示广告里面加一个定时器
6.编写隐藏广告的函数
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>
		<meta charset="utf-8">
		<title></title>
		<!--1.导入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js"></script >
			<script>
				
				//4.显示广告
				function show(){
					$("#img1").show();
					setTimeout("hide()",3000);//5.写一个定时器(跳到隐藏广告函数hide())
				}
				
				//6.隐藏广告
				function hide(){
					$("#img1").hide();
				}
				
				//2.编写一个文档加载事件+3.写一个定时器(跳到显示广告函数show())
				$(function(){
					setTimeout("show()",3000);
				});
				
			</script>
	</head>
	
	<body>
		<img src="../../image/059b5245-e3c8-43bf-80fe-700f0e4e68b8-thumbnail.jpg" width="200px" id="img1" style="display: none;">	 //先让图片隐藏display显示为none
	</body>
</html>

JQuery

一、JQuery概述
　　JQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等变得更为简单，使用易于使用的API，可以跨多个浏览器工作。由于通用性和可扩展性的结合，jQuery已经改变了数百万人编写JavaScript的方式。
特点：

  1. 写更少的代码，做更多的事情
  2. 我们的页面js代码和HTML页面代码分离(动态绑定)

二、JQ入门

简写JQ代码：

1
2
3
$((function(){
  // 在这里写你的代码...
});

五种文件加载写法：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--导包,引入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			
			//js文档加载完成的事件
			window.onload = function()
			{
				alert("window.onload   111");
			}
			
			window.onload = function()
			{
				alert("window.onload   222");  //覆盖上一个的111
			}
			
			/*文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  简写成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最简单的写法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>
	</head>
	<body>
	</body>
</html>

三、JQ操作

  • JQ和JS之间的转换
    JQ对象只能调用JQ的属性和方法
    JS对象只能调用JS的属性和方法

触发click事件—>p/div标签的jQuery代码：

1
$("p/div").click()

具体实现代码如下：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script> //jq一定要有的调用外部js文件
		<script>  

			//JS的方式
			function changeJS(){
				var div=document.getElementById("div1");//获取div标签内容
				//div.innerHTML="JS成功了!" //通过innerHTML更改内容
				
				//JS对象 转成 JQ对象
				$(div).html("转成JQ对象!");   
				
			}
			
			//JQ的方式
			$(function(){	
				
				//按钮绑定事件
				$("#b2").click(function(){  //第二个按钮的id名为b2
					//找到div标签
					$("#div1").html("JQ成功了!");	
								
					//JQ对象 转成 JS对象 
					var $div=$("#div1");	
					var jsDiv=$div[0];//用中间量把div的值放在数组第一位
					jsDiv.innerHTML="转成JS对象!";
					
				});	
	
			});
				
		</script>
	</head>
	<body>
			<input type="button" value="JS修改div内容" onclick="changeJS()" >  //JS通过事件触发函数，函数实现功能
			<input type="button" value="JQ修改div内容" id="b2">  //JQ通过事件对于标签的jQuery代码格式
			<div id="div1">
				这里的内容一会就要被JS或者JQ改掉了!
			</div>
	</body>
</html>

四、开发步骤

  • JQ的开发步骤：(将js代码和html页面代码进行分离)
    1. 导入JQ相关文件
  <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
2. 文档加载完成事件：
   $(function(){});页面初始化操作：绑定事件[$("#id名字").click(function(){});]，启动页面定时器；
//后三个是JS的开发操作(相当于把js要写的文件放在了外部让第一步去添加，然后用文档加载事件完成了之后完成JS的开发操作)
3. 确定相关操作的时间
4. 事件触发函数
5. 函数里面去操作相关的元素
,