jquery 启动运行 jquery运行的核心是什么

1、jQuery核心之jQuery核心函数

1.1、jQuery(expression, [context])

该函数接收一个包含CSS选择器的字符串，然后用这个字符串去匹配一组元素。

jQuery核心功能是通过该函数实现的。jQuery中的一切都基于这个函数，或者说都是以某种方式使用这个函数。这个函数最基本的用户就是向它传递一个表达式（通常由CSS选择器组成），然后根据这个表达式来所有匹配的元素。

默认情况下，如果没有指定context参数，$()将在当前的HTML document中查找DOM元素；如果指定了context参数，如一个DOM元素集或jQuery对象，那就会在这个

context中查找。在jQuery1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。

参数：

expression：用来查找的字符串。--String

context：(可选)作为待查询的DOM元素集、文档或jQuery对象。--Element、jQuery

示例：在文档的第一个表单中，查找所有的单选按钮（即：type值为radio的input元素）。

$("input:radio", document.forms[0])

1.2、jQuery(html, [ownerDocument])

根据提供的原始HTML标记字符串，动态创建由jQuery对象包装的DOM对象。

可以传递一个手写的HTNL字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过AJAX加载过来的字符串。但是创建input元素时会有限制，可以参考下面例

子。当然这个字符串可以包括斜杠（比如一个图形地址），还有反斜杠。当你创建单个元素时，请使用闭合标签或XHTML格式。例如，创建一个span，可以使用$("<span/>")或$("<span></span>")，但是不推荐使用$("<span>")。在jQuery中，这个语法等同于$(document.createElement("span"))。

参数：

html：用于动态创建DOM元素的HTML标记字符串。--String

ownerDocument：(可选)创建DOM元素所在的文档。--Document

示例：创建一个input元素必须同时给type属性。因为微软规定input的type属性只能给一次。

jQuery代码：

//在IE中无效
$("<input>").attr("type", "checkbox");
//在IE中有效
$("input type='checkbox'");

1.3、jQuery(html, props)

根据提供的原始HTML标记字符串，动态创建由jQuery对象包装的DOM元素。同时设置一系列的属性，事件等。

参数：

html：用于动态创建DOM元素的HTML标记字符串。--String

props：用于附加到新创建元素上的属性、事件和方法。--Map

示例：创建一个<input>元素，同时设定type属性、属性值以及一些事件。

jQuery代码：

$("<input>", {
type:"text",
val:"Test",
focusin:function(){
     $(this).addclass("active");
},
focusout:function(){
     $(this).removeclass("active");
}
}).appendTo("form");

1.4、jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。

这个函数也可以接受XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。

参数：

elements：用于封装成jQuery对象的DOM元素。

示例：隐藏一个表单中的所有元素。

jQuery代码：

$("myForm.elements").hide();

1.5、jQuery()

返回一个空的jQuery对象。

jQuery1.4中，如果不提供任何参数，则返回一个空jQuery对象。在先前版本中，这会返回一个包含document节点的对象。

1.6、jQuery(callback)

$(document).ready()的简写。

允许你绑定一个在DOM文档载入完成时执行的函数。这个函数的作用如同$(document).ready()一样。只不过用这个函数时，需要把页面中所有需要在DOM加载完成时执

行的$()操作都包含进来。从技术上来说，这个函数是可链接的--但真正以这种方式链接的情况并不多。

可以在一个页面中使用任意多个$(document).ready事件。参考ready(Function)获取更多ready事件的信息。

参数：

callback：当DOM加载完成后要执行的函数。

示例：当DOM加载完成后，执行其中的函数。

jQuery代码：

$(function(){
//文档就绪
});
或使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
jQuery(function($){
//<span style="font-family: Arial, Helvetica, sans-serif;">可以在这里继续使用$作为别名...</span>
})

2、jQuery核心之jQuery对象访问

2.1、each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整数）。返回false将停止循环（就像在普通的环境中使用break）。返回true跳到下一个循环（就像在普通循环中使用continue）。

参数：

callback：对于每一个匹配的元素所要执行的函数。--Function

示例：迭代两个图像，并设置它们的src属性。注意：此处this指代的是DOM对象而非jQuery对象。

<img/><img/>jQuery代码： 
 

 
 

$("img").each(function(i, item){
this.src="test"+i+".jpg";
});结果： 
 

 
 

<img src="test0.jpg"/><img src="test1.jpg"/>

2.2、size()

jQuery元素中元素的个数。

这个函数的返回值与jQuery对象的"length"属性一致。

示例：计算文档中所有图片数量。

HTML代码：

<img src="test1.jpg"/><img src="test2.jpg"/>jQuery代码： 
 

 
 

$("img").size();

结果：

2

2.3、length

jQuery对象中元素的个数。

当前匹配的元素个数。size将返回相同的值。

示例：参见size()方法

2.4、selector

jQuery1.3新增。返回传给jQuery()的原始选择器。

返回你用的什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员有用。

示例：确定查询的选择器

jQuery代码：

$("ul")
.append("<li>"+$("ul").selector+"</li>")
.append("<li>"+$("ul li").selector+"</li>")
.append("<li>"+$("div#foo ul:not([class])").selector+"</li>");结果： 
 

 
 

ul
ul li
div#foo ul:not([class])

2.5、context

jQuery1.3新增。返回给jQuery的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

可以与selector一起使用，用于精确检测选择器查询情况。

示例：检测使用的文档内容。

jQuery代码：

$("ul")
.append("<li>"+ $("ul").context +"<li/>")
.append("<li>"+$("ul",document.body).context.nodeName+"</li>")结果： 
 

 
 

[object HTMLDocument] //如果是IE浏览器，则返回[object]
BODY

2.6、get()

获得所有匹配的DOM元素集合。

这是取得匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上市元素数组）。

如果你想要直接操作DOM对象而不是jQuery对象，这个函数非常有用。

示例：选择文档中所有图像元素数组，并用数组内建的reverse方法将数组反向。

HTML代码：

<img src="test1.jpg"/><img src="test2.jpg"/>jQuery代码： 
 

 
 

$("img").get().reverse();

结果：

<img src="test2.jpg"/><img src="test1.jpg"/>注意：如果通过该方法得到的DOM元素被引用，例如被添加到别的DOM元素下，则被引用的原来的DOM元素将不存在。

2.7、get(index)

取得其中一个匹配的元素。num表示取得第几个匹配的元素。

这能够让你选择一个实际的DOM元素并且对它直接操作，而不是通过jQuery函数。$(this).get(0)与$(this)[0]等价。

参数：

index：取得第index个位置上的元素。--Number
示例参见get();

2.8、index([subject])

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给.index()方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对一其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原来集合的位置。

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

参数：

subject：(可选)要搜索的对象。--Selector，Element

示例：查找元素的索引值。

HTML代码：

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

jQuery代码：

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

3、jQuery核心之数据缓存

3.1、data([name])

返回元素上储存的相应名字的数据，可以用data(name, value)来设定。

如果jQuery集合指向多个元素，那将只返回第一个元素的对应数据。

这个函数可以用于在一个元素是哪个存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。你可以在很多地方使用这个函数，jQuery UI中常用到这个函数。

参数：

name：(可选)存储的数据名。--String

示例：在一个div上存取数据。

HTML代码：

<div></div>jQuery代码： 
 

 
 

$("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

3.2、data(name, value)

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。

这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。

参数：

name：存储的数据名。--String

value：将要存储的任意数据。--Any

示例参见data(name)的示例。

3.3、data(obj)

在元素上存放一组数据，返回jQuery对象。

注意：如果使用这个方法之后，原先存放的多有数据都会被重写！因为这些数据包括事件处理函数，都是绑定在元素上的。所以以一个obj作为参数使用.data()方法时，请务必小心。

参数：

obj：一个用于设置数据的键/值对。--Object

示例参见data(name)的示例。

3.4、removeData(name)

在元素上移除存放的数据。

与$(...).data(name, value)函数作用相反。

参数：

name：存储的数据名。--String

示例参见data(name)的示例。

3.5、jQuery.data(element, key, value)

在元素上存放数据，返回jQuery对象。

注意：这是一个底层方法。你应当使用.data()来代替。

参数：

element：要关联数据的DOM对象。--String

key：存储的数据名。--String

value：将要存储的任意数据。--Any

示例：

JQuery代码：

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

3.6、jQuery.data([element], [key])

查询在元素上存放的数据。

如果不指定参数，则会返回元素上面存放的所有数据，以Object的形式返回。

注意：这是个底层方法。应该使用.data()来代替。

参数：

element：(可选)要查询的DOM对象。--String

key：(可选)存储的数据名。--String

示例：

jQuery代码：

alert(jQuery.data(document.body, 'foo'));
alert(jQuery.data(docuemnt.body));