jQuery学习笔记整理第一部分：jQuery介绍和体验

1.课前介绍

• 参考资料：《锋利的jQuery》、《JavaScript忍者禁术》、《精通JavaScript》
• 最重要的是掌握jQuery编程思想

2.什么是jQuery

jQuery有两大版本：

• jQuery1（低版本，兼容性好，需要兼容IE6/8时使用）
• jQuery3（高版本，可以使用最新的功能）
• jQuery选择器是重点内容中的重点内容

总结：

• 简化代码
• 解决兼容性
• 提高代码容错性
• DOM中window.onload只能有一个
• （简单方便：代码写得少做得多）

大牛：John Resig（《精通JavaScript》、《JavaScript忍者的秘密》）

jQuery的优点：写得少，做得多，链式编程、隐式迭代……

3.案例（使用jQuery实现按钮点击后变色）

HTML代码片段：

<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>

1.使用DOM的方式实现按钮点击后变色功能：

window.onload=function(){
	document.getElementById("btn").onclick=function(){
		//获取div，根据id的方式获取
		var divObj=document.getElementById("dv");
		divObj.style.width="200px";
		divObj.style.height="100px";
		divObj.style.backgroundColor="red";
		};
	};

2.使用jQuery的方式实现按钮点击后变色

$(function(){
	$("#btn").click(function(){
		$("#dv").css({"width":"200px","height":"100px","backgroundColor":"green"});
		});
	});

4.jQuery中的顶级对象"$"

1.DOM中的顶级对象：document----页面中的顶级对象（document“点出来”的是DOM中的属性和方法）。
2.BOM中的顶级对象：window----浏览器中的顶级对象（window“点出来”的是浏览器中的属性和方法）。

• window也可以“点出”document：window.document

3.jQuery的顶级对象:“$”（点出来的是jQuery中的方法）。

5.事件

JS的DOM中的加载事件：

window.onload=function(){
	console.log("哈哈，我又变帅了！")；
};

解析：

• 通过赋值命名函数的方式
• 只能写一个（函数唯一）
• 使用onload方法加载事件

jQuery中的加载事件：

第一种方式：

$(window).load(function(){
	console.log("啊哈哈，我真的好帅！");
});

解析：

• 使用load方法加载事件
• 特点：页面中所有内容加载完毕才触发，所以加载速度慢

第二种写法（“方法”）：

$(document).ready(function(){
	console.log("啊哈哈！");
});

解析：

• 页面中的基本的标签加载完毕就可以触发
• 如果和第一种方法同时出现，则第二种方法中的内容先出现，因为加载速度更快

第三种写法：

jQuery(function(){
	console.log("纯洁的我");
});

解析：

• 页面中基本的标签加载后就执行

第四种写法（推荐写法）：

$(function(){
	console.log("哈哈");
});

解析：

• “$()”加命名函数的方式
• jQuery把函数都进行了封装，所以写起来简单方便

所有DOM中的对象加上“$()”就变成了jQuery中的方法

6.关于引入jQuery文件

开发时用jQuery普通文件，上线时用压缩版文件

7.jQuery对象和DOM对象互转

要实现的功能：点一下按钮，按钮变色。
HTML代码：

<input type="button" value="显示效果"  id="btn"/>

用DOM对象实现：

window.onload=function(){
	//btnObj就是DOM对象
	var btnObj=document.getElementById("btn");
	btnObj.onclick=function(){
		this.style.backgroundColor="red";
	};
};

解析：

• “this”指针指向的是当前的btnObj对象

DOM对象转jQuery对象：

• 只需要把DOM对象放在$()里边，变成$(dom对象)的形式即可转变为jQuery对象

window.onload=function(){
	var btnObj=document.getElementById("btn");
	$(btnObj).click(function(){
		$(this).css("background","red");
	});
};

把jQuery对象转DOM对象的两种方式：

• 1.$(btnObj).get(0);----就将jQuery对象$(btnObj)转换成了DOM对象
• 2.$(btnObj)[0];----转换成了DOM对象

第一种方式代码示例：

var btnObj=document.getElementById("btn");	//DOM对象
var obj=$(btnObj).get(0);		//DOM对象
obj.onclick=function(){
	this.style.backgroundColor="green";
};

第二种方式代码示例：

var btnObj=document.getElementById("btn");	//DOM对象
var obj=$(btnObj)[0];		//DOM对象
obj.onclick=function(){
	this.style.backgroundColor="green";
};

使用jQuery方式实现该功能：

$(function(){
	//$("#btn");--jQuery对象
	$("#btn").click(function(){
		$(this).css("backgroundColor","green");
	});
});

解析：

• 1.$("#btn")是jQuery对象，.click是jQuery中的方法

错误示例：

$("#btn").onclick=function(){
	this.style.backgroundColor="red";
}

总结（DOM对象和jQuery对象互转）：

1.DOM转jQuery：$(DOM的对象)
2.jQuery对象转DOM对象：

• 1.$("#btn")[0]
• 2.$("#btn"),get(0)

8.实现网页开关灯效果示例

HTML代码：

<button>开灯</button>

使用DOM方式实现：

window.onload=function(){
	//获取按钮，注册点击事件，设置body的背景颜色
	document.getElementById("btn").onclick=function(){
		//判断按钮的value值是否是关灯，如果是“关灯”，则body的背景颜色为黑色
		if(this.value=="关灯"){
			document.body.style.backgroundColor="black";
			this.value="开灯"；	//同时value值变为“开灯”
		}else{
			document.body.style.backgroundColor="white";
			this.value="关灯"；
			}；
	}；
}；

使用jQuery方式实现：

$(function(){
	//获取按钮，注册点击事件
	$("#btn").click(function(){
		//.val()方法--获取value属性的值
		//.val("内容")；--设置按钮的value属性的值
		if($(this).val()=="关灯"){
			$("body").css("backgroundColor","black");
			$(this).val("开灯");
		}else{
			$("body").css("backgroundColor","white");
			$(this).val("关灯");
			};
		});
});

注：根据传智播客教学内容整理