JQuery学习笔记（1）- $符号和 jQuery核心

前言

jQuery（JavaScriptQuery）是一款优秀的JavaScript库，其除了最主要的用途做查询外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。

jQuery与JavaScript加载模式对比

• JavaScript：多个window.onload只会执行一次, 后面的会覆盖前面的

<script>
        window.onload = function () {
            alert("hello 123"); 		// 不会显示，被覆盖
        }
        window.onload = function () {
            alert("hello world"); 		// 会显示
        }
</script>

• jQuery：多个$(document).ready()会执行多次,后面的不会覆盖前面的

<script>
        $(document).ready(function () {
            alert("hello 123");			 //会显示
        });
        $(document).ready(function () {
            alert("hello world"); 		//会显示
        });
</script>

• $(document).ready()不会覆盖的本质
  jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码	只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码
执行次数	只能执行一次,如果第二次,那么 第一次的执行会被覆盖	可以执行多次,第N次都不会被上 一次覆盖
简写	无	$(function () { });

$符号

为了提升开发者的编码效率，jQuery框架提供了jQuery访问还提供$访问（$是jQuery框架对外暴露的一个全局变量）。

*jQuery框架 $源码：

window.jQuery = window.$ = jQuery;

• $符号冲突问题
  很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过$访问,B框架也通过$访问)。

• 释放$使用权

  • 当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery

示例：

<script>
        // 在使用jQuery之前指定自定义符号，同时释放$符号
        jQuery.noConflict();
        
        // 未指定符号则只能使用 jQuery 访问，此时$无法访问jQuery
        jQuery("div p").hide();

		// 使用其他库的 $()
		$("content").style.display = 'none';
</script>

• 自定义便捷访问符号
  • 当便捷访问符号发生冲突时,我们可以自定义便捷访问符号

示例：

<script>
        // 在使用jQuery之前指定自定义符号，同时释放$符号
        var jq = jQuery.noConflict();
        
        // 指定符号后，和之前使用$一样可以通过自定义符号调用jQuery，此时$无法访问jQuery
        jq(function () {
            alert("hello world");
        });
</script>

jQuery核心

1. jQuery核心函数

1.1 jQuery(callback)

• 返回值：jQuery
• $(document).ready()的简写
• 当DOM加载完成后执行传入的回调函数

示例：

<script>
        $(function () {
            alert("hello world");
        });
</script>

1.2 jQuery([selector,[context]])

• 返回值：jQuery
• 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成jQuery对象
• jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。
• 默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在jQuery 1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。

参数	作用
selector,[context]	selector：用来查找的字符串，context：作为待查找的 DOM 元素集、文档或 jQuery 对象。
element	一个用于封装成 jQuery对象的DOM元素
object	一个用于封装成 jQuery对象
elementArray	一个用于封装成 jQuery对象的DOM元素数组
jQuery object	一个用于克隆的 jQuery对象
jQuery()	返回一个空的jQuery对象

示例：

// 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
$("div > p");

// 设置页面背景色。
$(document.body).css( "background", "black" );

// 隐藏一个表单中所有元素。
$(myForm.elements).hide();

// 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
$("input:radio", document.forms[0]);

// 在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。
$("div", xml.responseXML);

1.3 jQuery(html,[ownerDoc])

• 返回值：jQuery
• 根据 HTML 标记字符串，动态创建DOM 元素

示例：

// 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。
$("<div><p>Hello</p></div>").appendTo("body");

1.4 jQuery.holdReady(hold)

• 返回值：Boolean
• 暂停或恢复.ready() 事件的执行
• 传入true或false

示例：

// 延迟就绪事件，直到已加载的插件。
$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

2. jQuery对象访问

• jQuery对象的本质是一个伪数组。
• 伪数组：有0到length-1的属性，并且有length属性

示例：

var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

2.1 each(callback)

• 返回值：jQuery
• 以每一个匹配的元素作为上下文来执行一个函数
• callback：对于每个匹配的元素所要执行的函数

示例：

//迭代两个图像，并设置它们的 src 属性。
$("img").each(function(i){
	this.src = "test" + i + ".jpg";		//此处 this 指代的是 DOM 对象而非 jQuery 对象
 });
 
 //若要返回 jQuery对象，可以使用 $(this) 函数
 $("img").each(function(){
 	$(this).toggleClass("example");
});

 //可以使用 'return' 来提前跳出 each() 循环
$("button").click(function () { 
	$("div").each(function (index, domEle) { 
  		// domEle == this 
  		$(domEle).css("backgroundColor", "yellow");  
  		if ($(this).is("#stop")) { 
  			$("span").text("Stopped at div index #" + index); 
	 		return false; 
  		} 
	});
});

2.2 size()

• 返回值：Number
• jQuery 对象中元素的个数
• 与 jQuery 对象的<span title=“Core/size”>size</span> 返回相同的值。

示例

//计算文档中所有img元素数量
$("img").size();

2.3 length

• 返回值：Number
• jQuery 对象中元素的个数
• 与 jQuery 对象的’<span title=“Core/length”>length</span>’ 属性一致

示例

$("img").length;

2.4 selector

• 返回值：Striing
• 返回传给jQuery()的原始选择器

示例

//确定查询的选择器
$("ul")
	.append("<li>" + $("ul").selector + "</li>")		//结果：ul
	.append("<li>" + $("ul li").selector + "</li>")		//结果：ul li
	.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
	//结果：div#foo ul:not([class])

2.5 context

• 返回值：Element
• 返回传给 jQuery() 的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

示例

//检测使用的文档内容
$("ul")
	.append("<li>" + $("ul").context + "</li>")
	//结果：[object HTMLDocument] ，如果是IE浏览器，则返回[object]
	.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
	//结果：BODY

2.6 get([index])

• 返回值：Element
• 取得其中一个匹配的元素。index表示取得第几个匹配的元素。
• get()，取得所有匹配的 DOM 元素集合。

示例

//取得img中第0个元素
$("img").get(0);

//选择文档中所有img作为元素数组，并用数组内建的 reverse 方法将数组反向。
$("img").get().reverse();

2.7 index([selector|element])

• 返回值:Number
• 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
• selector：一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。
• element：获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

示例

/*
*	HTML 代码:
*/

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

/*
*	jQuery 代码:
*/

//传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index(document.getElementById('bar')); 

//传递一个jQuery对象
$('li').index($('#bar')); 

//传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('li').index($('li:gt(0)')); 

//传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index('li'); 

//不传递参数，返回这个元素在同辈中的索引位置。  
$('#bar').index(); 

3. 数据缓存

3.1 data([key],[value])

• 返回值：jQuery
• 在元素上存放数据,返回jQuery对象
• 参数

参数	含义	类型
key	存储的数据名	String
key,value	key：存储的数据名，value：将要存储的任意数据	String,Any
obj	一个用于设置数据的键/值对	object

示例

//在一个div上存取数据
	$("div").data("blah");  				// undefined
	$("div").data("blah", "hello"); 	    // blah设置为hello
	$("div").data("blah");  				// hello
	$("div").data("blah", 86);			    // 设置为86
	$("div").data("blah"); 				    //  86
	$("div").removeData("blah"); 		    //移除blah
	$("div").data("blah");  			    // undefined
	
//在一个div上存取名/值对数据
	$("div").data("test", { first: 16, last: "pizza!" });
	$("div").data("test").first 			 //16;
	$("div").data("test").last 				 //pizza!;

3.2 removeData([name|list])

• 返回值：jQuery
• 在元素上移除存放的数据
• name：存储的数据名
• list：移除数组或以空格分开的字符串

示例

//从元素中删除之前添加的数据：
$("#btn2").click(function(){
	$("div").removeData("greeting");
	alert("Greeting is: " + $("div").data("greeting"));
});

4. 队列控制

4.1 queue(element,[queueName])

• 返回值：Array/jQuery
• 显示或操作在匹配元素上执行的函数队列
• 参数

参数	含义	类型
element,[queueName]	element：检查附加列队的DOM元素；queueName：字符串值，包含序列的名称。默认是 fx, 标准的效果序列。	Element,String
element,queueName,newQueue	element：同上；queueName：同上；newQueue：替换当前函数列队内容的数组。	Element,String,Array
element,queueName,callback()	element：同上；queueName：同上；callback():要添加进队列的函数。	Element,String

示例

//显示队列长度
$("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
});

4.2 dequeue([queueName])

• 返回值：jQuery
• 从队列最前端移除一个队列函数，并执行他
• queueName：队列名，默认为fx

示例

//使用 dequeue() 终止一个自定义的队列函数
$("div").queue(function () {
  $(this).toggleClass("red");
  $(this).dequeue();
});

4.3 clearQueue([queueName])

• 返回值：jQuery
• 清空对象上尚未执行的所有队列
• 如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。

示例

//停止当前正在运行的动画
$("#stop").click(function(){
  $("#box").clearQueue();
});

5. 插件机制

5.1 jQuery.fn.extend(object)

• 返回值：jQuery
• object：用来扩充 jQuery 对象

示例

//增加两个插件方法
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
/*结果
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
*/

5.2 jQuery.extend(object)

• 返回值：jQuery
• 扩展jQuery对象本身

示例

//在jQuery命名空间上增加两个函数
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
/*结果
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
*/

6. 多库共存

6.1 jQuery.noConflict([extreme])

• 返回值：jQuery
• 运行这个函数将变量$的控制权让渡给第一个实现它的那个库

示例

//将$引用的对象映射回原始的对象
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';