jQuery学习进阶01_jquery进阶学习-CSDN博客

1. jQuery简介：jQuery极大的简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
2. jQuery的优势
① 轻量级：利用Packer压缩后大小不到30KB；利用Gzip压缩后只有18KB；
② 强大的选择器；
③ 出色的DOM操作的封装：jQuery封装了大量常用的DOM操作；
④ 可靠的事件处理机制；
⑤ 完善的Ajax：jQuery将所有的Ajax操作封装到$.ajax( )函数中；
⑥ 不污染顶级变量：jQuery只建立一个叫jQuery的对象，所有的函数方法都在这个对象之下。
⑦ 出色的浏览器兼容性
⑧ 链式操作方式：发生在同一个jQuery（$）对象上的一组操作，可以直接连写无需重复获取对象
⑨ 隐式迭代：jQuery里的方法都是默认自动操作对象集合。
⑩ 行为层与结构层的分离：使用jQuery选择器选中元素，可以直接给元素添加事件。
⑪ 丰富的插件支持。
⑫ 完善的文档。
⑬ 开源
3. jQuery库类型
① jquery-1.3.1.js ，114KB，完整无压缩版本，主要用于测试学习和开发。
② jquery-1.3.1.min.js , 54KB/18KB，JSMin等工具压缩为54KB,Gzip压缩后大小只有18KB，主要用于产品和项目。
4. jQuery环境配置：在相应的HTML文档中引入jQuery库文件的位置即可。
	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script src="../script/jquery-1.3.1.js" type="text/javascript" />	
	</head>
	<body>
	</body>
	</html>
5. jQeury对象和DOM对象
① DOM对象： 
	Document Object Model，文档对象模型。通过JavaScript中的getElementsByTagName或者getElementById获取元素节点，这样得到的就是DOM元素或DOM对象。DOM对象可以使用JavaScript中的方法。
② jQuery对象：
	通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，jQuery对象可以使用jQuery里的方法。
jQuery对象无法使用DOM对象的任何方法，同理DOM对象也无法使用jQuery对象里的方法。
③ jQuery对象转化为DOM对象
	a. 通过[index] 的方法得到对应的DOM对象
	var $obj = $("#obj");   // jQuery对象
	var obj = $obj[0];   // DOM对象
	alert（obj.checked）// 检测checkbok是否被选中
	b. 通过get（index）方法得到对应的DOM对象
	var $obj = $("#obj");   // jQuery对象
	var obj = $obj[0];   // DOM对象
	alert（obj.checked）// 检测checkbok是否被选中
④ DOM对象转成jQuery对象
    只需要使用$( )把DOM对象包装起来，就可以获得一个jQuery对象了。
	var obj = document.getElementById("obj"); // DOM对象
	var $obj = $(obj);	// jQuery对象
6. 解决jQuery和其他库的冲突
① jQuery在其他库之后导入
	a. <!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head></head>
	<body>
		<p id="pp">test---prototype<p>
		<p>test---jQuery<p>
		<!--引入prototype-->
		<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
		<!--引入jQuery-->
		<script src="../../script/jquery-1.3.1.js" type="text/javascript"></script>
		<script language="javascript">
			jQuery.noConflict(); //将变量$的控制权交给prototype.js
			jQuery(function(){ //使用jQuery
				jQuery("p").click(function(){
					alert(jQuery(this).text());
				})
			})
			$("pp").style.display = 'none'; //使用prototype
		</script>
	</body>
	</html>
	b. 自定义一个快捷方式
	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head></head>
	<body>
		<p id="pp">test---prototype<p>
		<p>test---jQuery<p>
		<!--引入prototype-->
		<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
		<!--引入jQuery-->
		<script src="../../script/jquery-1.3.1.js" type="text/javascript"></script>
		<script language="javascript">
			var $j = jQuery.noConflict(); //自定义一个快捷方式
			$j(function(){ //使用jQuery,利用自定义快捷方式$j
				jQuery("p").click(function(){
					alert($j(this).text());
				})
			})
			$("pp").style.display = 'none'; //使用prototype
		</script>
	</body>
	</html>
c. 如果不想给jQuery自定义名称，可以使用以下2中方法：
	// ...省略其他代码
	jQuery.noConflict(); //将变量$的控制权交给prototype.js
	jQuery(function($){	//使用jQuery设定页面加载时执行的函数
		$("p").click(function(){ //在函数内部继续使用$()方法
			alert($(this).text());
		})
	})
	$("pp").style.display = 'none'; // 使用prototype
---------------------------------------------------------------------------------------
	// ...省略其他代码
	jQuery.noConflict(); //将变量$的控制权交给prototype.js
	(function($){	//定义匿名函数并设置形参为$
		$(function(){ //匿名函数内部的$均为jQuery
			$("p").click(function(){ //继续使用$()方法
				alert($(this).text());
			});
		});
	})
	$("pp").style.display = 'none'; // 使用prototype
	
②  jQuery库在其他库之前导入
	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head></head>
	<body>
		<p id="pp">test---prototype<p>
		<p>test---jQuery<p>
		<!-先引入jQuery-->
		<script src="../../script/jquery-1.3.1.js" type="text/javascript"></script>
		<!--引入prototype-->
		<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
		<script language="javascript">
			jQuery(function(){ //直接使用jQuery，无需调用“jQuery.noConflict()”
				jQuery("p").click(function(){
					alert(jQuery(this).text());
				})
			})
			$("pp").style.display = 'none'; //使用prototype
		</script>
	</body>
	</html>