Javaweb基础知识chapter06 - jQuery

---

第1章： jQuery简介

• 为了简化 JavaScript 的开发，诞生了一系列的JavaScript库。 JavaScript库封装了很多预定义的对象和实用函数， 并且兼容各大浏览器。

• 当前流行的 JavaScript 库有

• 如今，jQuery已经成为最流行的JavaScript库。 在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
• jQuery，顾名思义，也就是JavaScript和查询（Query），其宗旨是 “WRITE LESS，DO MORE” ，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。具体来说，优势如下：
  • jQuery是免费、开源的
  • 轻量级(压缩后只有几十k)
  • 强大的选择器
  • 出色的 DOM 操作的封装
  • 可靠的事件处理机制
  • 完善的 Ajax使用
  • 出色的多浏览器兼容性
  • 隐式迭代：对集合对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历
  • 文档说明很全
  • 可扩展插件

---

第2章：jQuery快速入门

2.1 将jQuery的库文件加入应用

• jQuery库实际上就是一个js文件，只需要在网页中直接引入这个文件就可以了。

<script type = “text/javascript” src = “script/jquery-1.7.2.js”> </script>

2.2 HelloWorld

• 需求：使用jQuery给一个按钮绑定单击事件

<!-- 导入jQuery库-->
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //调用jQuery库定义的函数
    //使用$()代替window.onload
	$(function(){
   
    	//根据id属性获取按钮对象，并绑定单击响应函数
		$("#btnId").click(function(){
   
            //弹出HelloWorld
			alert("HelloWorld");
		});
	});
</script>

<button id="btnId">ClickMe</button>

---

第3章：jQuery基本语法

3.1 jQuery源码初分析

(function( window, undefined ) {
   	//16行
	
	var jQuery = (function() {
   	//22行
	
		var jQuery = function( selector, context ) {
   
			// The jQuery object is actually just the init constructor 'enhanced'
			return new jQuery.fn.init( selector, context, rootjQuery );
		};
		
		jQuery.fn = jQuery.prototype = {
   	//97行
			constructor: jQuery,
			init: function( selector, context, rootjQuery ) {
   
				//...
			}	//207行
			
		};	//319行
	
		//...
		return jQuery;	//981行

	})();	//983行
	
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;	//9384行
	
})( window );	//9404行

说明：

• 自执行函数
• 给window添加了两个等同的函数： jQuery() / $()
• 执行$()后，返回的是一个jQuery库包装的对象， 一般称之为：jQuery对象

3.2 jQuery核心函数： $()

• jQuery库中为window对象定义了一个函数： jQuery()，简化为：$()
• $是jQuery的核心函数，jQuery的核心功能都是通过这个函数实现。 $()就是调用$这个函数。
• $函数会根据参数数据类型的不同做不同的工作, 返回一个jQuery封装的伪数组的对象
• 核心函数有如下的四个作用：

3.2.1 传入参数为函数时：$(function(){})

• 传入一个function参数, 作为回调函数。相当于window.onload = function(){}
• 表示：在DOM文档载入完成后，回调函数自动执行
• 这个函数是 $(document).ready(function(){})的简写形式。
• 它与window.onload是有区别的

3.2.2 传入参数为选择器字符串时： $(选择器字符串)

• 接收一个CSS选择器格式的字符串参数

• 根据这个选择器查找元素节点对象

• 根据此字符串在document中去匹配一组元素，并封装成jQuery对象返回

• 举例：

  $("#id属性值"); 相当于通过id属性查找标签对象
  $("标签名");  相当于通过标签名查找标签对象，返回集合
  $(".class属性值");  相当于通过class属性查找标签对象，返回集合
  

3.2.3 传入参数为HTML字符串时：$(HTML字符串)

• 接收一个标签字符串参数。

• 根据这个html字符串创建元素节点对象

• 创建对应的标签对象， 并包装成jQuery对象

• 代码举例：

  var $liEle = $("<li>香港</li>") //相当于创建了一个标签对象 <li>香港</li>。
  $("#city").append($liEle); //将此jQuery对象添加到现有的jQuery对象中。
  //相当于：
  var liObj = document.createElement("li");//<li></li>
  liObj.innerHTML = "香港"; //<li>香港</li>
  document.getElementById("city").appendChli