分享

Jquery核心

 了吧了 2015-01-28

1.jQuery([selector,[context]])

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

selector,[context]String,Element,/jQueryV1.0

selector:用来查找的字符串

context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

elementElementV1.0

一个用于封装成jQuery对象的DOM元素

objectobjectV1.0

一个用于封装成jQuery对象

elementArrayElementV1.0

一个用于封装成jQuery对象的DOM元素数组。

jQuery objectobjectV1.0

一个用于克隆的jQuery对象。

jQuery()V1.4

返回一个空的jQuery对象。

$("div > p");         找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。
$(document.body).css( "background", "black" );                设置页面背景色。
$(myForm.elements).hide();                            隐藏一个表单中所有元素。
$("input:radio", document.forms[0]);在文档的第一个表单中,查找所有的单选按钮。
$("div", xml.responseXML);    在一个由AJAX返回的XML文档中,查找所有的div元素。

2.jQuery(html,[ownerDocument])

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

html,[ownerDocument]String,DocumentV1.0

html:用于动态创建DOM元素的HTML标记字符串

ownerDocument:创建DOM元素所在的文档

html,propsString,MapV1.4

html:用于动态创建DOM元素的HTML标记字符串

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

$("<div><p>Hello</p></div>").appendTo("body");
       动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。
$("<input type='checkbox'>");    创建一个 <input> 元素必须同时设定 type 属性。
$("<div>", {                     动态创建一个 div 元素(以及其中的所有内容),
  "class": "test",                                  并将它追加到 body 元素中。
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");
$("<input>", {             创建一个 <input> 元素,同时设定 type 属性、属性值,
  type: "text",                                                 以及一些事件。
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

3.jQuery(callback)

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

callbackFunctionV1.0

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

$(function(){                                当DOM加载完成后,执行其中的函数。
  // 文档就绪
});

4.each(callback)

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

callbackFunctionV1.0

对于每个匹配的元素所要执行的函数

<img/><img/>
$("img").each(function(i){               迭代两个图像,并设置它们的 src 属性。
   this.src = "test" + i + ".jpg";
   //注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
 });
$("img").each(function(){
  $(this).toggleClass("example");
//
$(this)为jQuery 对象。
});
$("button").click(function () { 
   $("div").each(function (index, domEle) { 
     // domEle == this,使用 'return' 来提前跳出 each() 循环。
     $(domEle).css("backgroundColor", "yellow");  
     if ($(this).is("#stop")) { 
        $("span").text("Stopped at div index #" + index); 
        return false; 
     } 
  });
});

5.size()

$("img").size();                                        jQuery 对象中元素的个数。

6.length

$("img").length;                                        jQuery 对象中元素的个数。

7.selector

返回传给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])

8.context

返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
[object HTMLDocument]  //如果是IE浏览器,则返回[object]
BODY

9.get([index])

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

[index]Number

取得第 index 个位置上的元素

get()

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

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

10.index([selector|element])

搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。 

selectorSelectorV14

一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。

elementElementV1.0

获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
$('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,不传递参数,返回这个元素在同辈中的索引位置。  

11.data([key],[value])

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

keyStringV1.23

存储的数据名.

key,valueString,AnyV1.2.3

key:存储的数据名

value:将要存储的任意数据

objobjectV1.4.3

一个用于设置数据的键/值对

data()

$("div").data("blah");  // undefined                       在一个div上存取数据
$("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

12.jQuery.data(element,[key],[value])

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

element,key,valueString,String,AnyV1.2.3

element:要关联数据的DOM对象

key:存储的数据名

value:将要存储的任意数据

element,keyString,StringV1.2.3

element:要查询数据的DOM对象

key:存储的数据名

elementStringV1.4

要查询数据的DOM对象

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

13.jQuery.fn.extend(object)

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

objectObjectV1.0

用来扩充 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();

14.jQuery.extend(object)

扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

objectObjectV1.0

用以扩展 jQuery 对象

jQuery.extend({                              在jQuery命名空间上增加两个函数。
  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

15.jQuery.noConflict([extreme])

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。

extremeBooleanV1.0

传入 true 来允许彻底将jQuery变量还原

jQuery.noConflict();                          将$引用的对象映射回原始的对象。
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
jQuery.noConflict();                                            恢复使用别名$
(function($) { 
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码
var j = jQuery.noConflict();创建一个新的别名用以在接下来的库中使用jQuery对象。
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';
var dom = {};                             完全将 jQuery 移到一个新的命名空间。
dom.query = jQuery.noConflict(true);
// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();






































    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多