JQuery文档

1          概要

自从jQuery面世以来，它以其快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心。

本文档旨在收录一些Jquery一些实用的方法，方便以后开发参考。

2          JQuery常用函数

2.1         jQuery(expression,[context])

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

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

如：

先在Body中定义如下元素：<p>最外面</p><div id="testDiv">外面<p>里面</p></div>。再定义一个xml文件test.xml，其中test.xml的内容为：

<div>test

<p>test1</p></div>

最后定义页面加载的函数：

var test = jQuery("div>p");

      alert(test.text());

      // 结果显示“里面”

      var test2 = jQuery("div");

      alert(test2.text());

      // 结果显示“外面里面”

      var test3 = jQuery("p",document.getElementById("testDiv"));

      alert(test3.text());

      // 显示“里面”

      var testXML = $.ajax({

           url: "xml/test.xml",

           async: false

     }).responseXML;

     

      var test4 = jQuery("p",testXML);

      alert(test4.text());

      // 显示“test1”;

}

);

2.2         jQuery(html)

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

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")

如：var pElement = jQuery("<p>测试的内容</p>");

    pElement.appendTo("body");

 

2.3         jQuery(callback)

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

允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。

你可以在一个页面中使用任意多个$(document).ready事件。

2.4         get()

取得所有匹配的 DOM 元素集合。这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。 如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。

2.5         each(callback)

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

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

如：

HTML 代码:

<button>Change colors</button>

<span></span>

<div></div>

<div></div>

 

<div></div>

<div></div>

<div id="stop">Stop here</div>

<div></div>

 

<div></div>

<div></div>

 

jQuery 代码:

$("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.6      index(subject)

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值值。

如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。

 

2.7         length

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

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

 

2.8         jQuery.extend(object)

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。 查看 'jQuery.fn.extend' 获取更多添加插件的信息。

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

2.9         data(name)

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

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

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

示例

在一个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

---

在一个div上存取名/值对数据

HTML 代码:

<div></div>

jQuery 代码:

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;

2.10     jQuery.noConflict()

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。

在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。

注意:这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。

示例

将$引用的对象映射回原始的对象。

jQuery 代码:

jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:

jQuery.noConflict();
(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码

---

创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery 代码:

var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';

 

2.11     jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

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();