JQuery的基本使用

JQuery的基本使用：

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

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

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

使用JQuery完成省市联动效果

使用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

---

使用JQuery完成省市联动效果

JS中的数组： [“城市”]

new Array()

DOM树操作：

• 创建节点： document.createElement
• 创建文本节点： document.createTextNode
• 添加节点： appendChild

---

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

select下拉列表

multiple 允许多选

ondblclick ： 双击事件

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

---

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

事件：

• 获得焦点事件： onfocus
• 失去焦点事件： onblur
• 按键抬起事件： onkeyup
• 鼠标移入： onmouseenter
• 鼠标移出： onmouseout
• JS引入外部文件 ： script标签，src属性

---

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操作

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告。

1.2 技术分析

定时器： setTimeout

显示和隐藏： style.display = “block/none”

什么是JQuery？

• JQ其实是一个javascript函数库

JQuery的作用：

• 1、写更少的代码,做更多的事情： write Less ,Do more
• 2、将我们页面的JS代码和HTML页面代码进行分离

为什么学习JQuery：

• 提高我们的工作效率

JQ的入门：

<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查找元素】

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

【JQ和JS之间的转换】

• JQ对象,只能调用JQ的属性和方法
• JS对象 只能调用JS的属性和方法

	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、函数里面再去操作相关的元素

显示和隐藏 img.style.display

【JQ中的动画效果】

show()
hide()

slideUp()
slideDown()

fadeIn()
fadeOut()

animate({
    CSS样式 }, 5000)：自定义动画

1.3 步骤分析：

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

1.4 代码实现

<script