黑马视频_前端_day02

博主： mrmj
发布时间：2018 年 07 月 24 日
1112 次浏览
暂无评论
9542字数
分类：前端+JS+JQ+BS

# 黑马视频 （7/10）

## JQuery

-----

### day04 Jquery
* 使用 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完成页面定时弹出广告， 当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
	* 定时器: setTimeout 
	* 显示和隐藏:  style.display = " block / none "

------
#### 什么是 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的作用:
	1. 写更少的代码,做更多的事情: write Less ,Do more
	2. 将我们页面的 JS 代码和 HTML 页面代码进行分离 
* JQ 中根据 ID 查找元素
```html
全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")
```

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

```html
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. 导入 JQ 相关的文件
	2.  文档加载完成事件:   $ ( function )  : 页面初始化的操作: 绑定事件, 启动页面定时器
	3. 确定相关操作的事件
	4. 事件触发函数
	5. 函数里面再去操作相关的元素
	6. 显示和隐藏  img.style.display
* 【JQ中的动画效果】
```javascript
	show : 显示

hide : 隐藏

slideDown:

slideUp: 向上滑动

fadeIn

fadeOut

animate : 自定义动画
```
* 定时弹出广告
```html
<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 ]
```javascript
	<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 选择器2 ，找出来的是选择器1下面的所有选择器2
	- 相邻兄弟选择器 :  选择器1 + 选择器2 : 找出紧挨着的一个弟弟
	- 找出所有弟弟:  选择器1~ 选择器2   : 找出所有的弟弟

```html
<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 中的基本过滤器
	基本过滤器:
	选择器:first  : 找出的是第一个
	:last   最后一个
	:even   找出索引为偶数
	:odd    找出奇数索引
	:gt (index) :  大于索引  greaterr-than
	:lt (index)   小于
	:eq (index)  等于

```html
		<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 中的属性选择器
```html
// 选择器[href]  : 单个属性
		$(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中的表单过滤器
	:input   找出所有输入项:  input  textarea  select 
	: text 
	: password  
* 表单对象属性:
	找出 select 中被选中的那一项:
	option:selected

```html
<script>
  //1.文档加载事件	
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>
```

* 使用JQ完成表格的隔行换色
```html
	$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});
```
* 使用JQuery完成表单的全选全不选功能
* 使用JQ完成省市联动效果， 添加节点 :  appendChild (JS)
   1. append  :  添加子元素到末尾
   2. appendTo  : 给自己找一个爹,将自己添加到别人家里
   3. prepend : 在子元素前面添加
   4. after :   在自己的后面添加一个兄弟
```javascript
$(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完成下拉列表左右选择

```javascript

```html
常用函数:
	属性prop()    properties : 如果传入一个参数  就是获取
	prop("src","../img/1.jpg");  :	 设置图片路径

attr : 操作一些自定义的属性  <img  abc='123' />
	prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性

css() ; 修改css样式
	addClass()  : 添加一个 class 样式
	removeClass() : 移除
	blur : 绑定失去焦点
	focus: 绑定获得焦点事件
	click:  点击
	dblclick：	双击
	change：更改

append    :  给自己添加儿子

appendTo :  把自己添加到别人家

prepend :  在自己子节点最前面添加子节点

after  : 在自己后面添加一个兄弟

before: 在自己前面添加一个兄弟

$("数组对象").each(function(index,data))

$.each(arr,function(index,data))

```
* 使用JQ完成表单的校验
	- trigger  :  触发事件，但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为，输入框获得焦点
	- triggerHandler : 仅仅只会触发事件所对应的函数
	- is()
```javascript
1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script type="text/javascript">7
			
			$(function(){      //  页面初始化
				//必填添加小红点
					$(".bitian").after("<font class='high'> *</font>");
					
					//  必填绑定事件   $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){});  失去焦点。获得焦点，
					$(".bitian").blur(function(){
						
						//用户当前输入的值
						//var value = this.value;    两种方式都可以得到当前值
						var value = $(this).val();
						
						
						//清空上一次的提示信息
						$(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");  //触发上面定义的 blur 函数
					}).keyup(function(){
						$(this).triggerHandler("blur");   
					});
					
					
					
					//给表单绑定提交事件
					$("form").submit(function(){
						//提交的时候，触发必填项的校验逻辑
						$(".bitian").trigger("focus"); 
						//判断错误信息是否包含0
						var length = $(".onError").length ;
						if(length > 0){
							return false ;
						}else
						return true;
						
					});
					
					
					
					
					
					
			});
			
		</script>
		
		<title></title>
	</head>
	<body>
		<form action="表单校验.html" method="post">
		<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" value="提交"/>
		</div>
		</form>
	</body>
</html>

```

---------------

最后修改：2018 年 07 月 24 日

哇卡哇卡

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

ye01
兄弟你写的太多了，看不完，根本看不完
ye01
牛啊兄弟
ye01
你也可以有个女朋友
下岗工人
加油
HAO
呦呵你也在网上冲浪鸭

黑马视频_前端_day02

mrmj • 2018 年 07 月 24 日

# 黑马视频 （7/10）

## JQuery

-----

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

hide : 隐藏

slideDown:

slideUp: 向上滑动

fadeIn

fadeOut

```html
<script>
  //1.文档加载事件	
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>
```

```javascript

```html
常用函数:
	属性prop()    properties : 如果传入一个参数  就是获取
	prop("src","../img/1.jpg");  :	 设置图片路径

attr : 操作一些自定义的属性  <img  abc='123' />
	prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性

append    :  给自己添加儿子

appendTo :  把自己添加到别人家

prepend :  在自己子节点最前面添加子节点

after  : 在自己后面添加一个兄弟

before: 在自己前面添加一个兄弟

$("数组对象").each(function(index,data))

$.each(arr,function(index,data))

```

---------------

黑马视频_前端_day02

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

对于handsome到目前为止所做的优化

古风、动漫

关于这次去西安游玩

Java获取当前时间，并转化为String类型

实现和没实现的改动

nginx 强制使用 https 访问 (http跳转到https)

黑马视频_数据库_day01

将 U 盘通过官方镜像做成系统盘的工具

成语集锦

长沙

黑马视频_前端_day02

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

黑马视频_前端_day02

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款