jQuery个人总结--第一篇：核心

                                                     jQuery个人总结--第一篇：核心

1、jQuery([selector,[context]])；

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

1.2解说：

selector:用来查找的字符串

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

1.3 jQuery("***");/$("***");一个用于封装成jQuery对象的DOM元素数组。

1.4 jQuery()返回一个空的jQuery对象。

1.5举例

例子1

描述:找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。   

jQuery 代码 

$("div > p");

列子2

描述:设置页面背景色。

jQuery 代码  

$(document.body).css( "background", "black" );

例子3

描述:隐藏一个表单中所有元素。

jQuery 代码:

$(myForm.elements).hide()

例子4

描述:在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。

jQuery 代码:

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

例子5

描述:在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。

jQuery 代码:

$("div", xml.responseXML);

2、jQuery(html,[ownerDocument])

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

2.2说明：

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

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

2.3举例

例子1

描述:创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

jQuery 代码:

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

例子2（动态创建元素，同时对它设置一系列的属性、事件等）

描述:动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。

jQuery 代码:设置div的class、文本text、点击事件

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

例子3（动态创建元素，同时对它设置一系列的属性、事件等）

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

jQuery 代码:

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

 

 

3、jQuery(callback)，callback对于每个匹配的元素所要执行的函数

3.1简介：$(document).ready()的简写。当DOM加载完成后，执行其中的函数。

3.2举例

例子1

描述:当DOM加载完成后，执行其中的函数。

jQuery 代码:

$(function(){
  // 文档就绪
});

 

 

4、each(callback)，callback对于每个匹配的元素所要执行的函数

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

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

4.2举例 

例子1

each(callback)；---each(function（index， this）)；//this位置表示this，当然也可以设置为one来表示this，如例子2：domEle

例子2（点击按钮，each每个元素，知道匹配到带有id为stop的div元素return false停止）

描述:你可以使用 'return' 来提前跳出 each() 循环。（return false将停止循环， return true跳至下一个循环）

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

 

 

5、size()，，，返回所匹配到的元素个数

5.1简介：jQuery 对象中元素的个数。

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

5.2举例

例子1

描述:计算文档中所有图片数量

HTML 代码:

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

jQuery 代码:

$("img").size();

结果:

2

 

 

6、length ，，，与size（）对象一直（如上5）

 

 

7、selector，返回传给jQuery()的原始选择器。

换句话说，就是返回你用什么选择器来找到这个元素的。如 $("div ul").selector;   //值为“div ul”

7.1简介：而$(expression, [context]).selector的值正好就是expression
例如：

1	$("div ul").selector//值为“div ul”

2	$("div.test").selector//值为“div.test”

3	$("#test ul li:first").selector//值为“test ul li:first”

也就是说expression是什么，selector就是啥，

7.2注意：jQuery1.3 新增该属性，于jQuery 1.7被标识为已过时，并于jQuery 1.9被移除(官方文档是这样描述的。不过在实际测试中发现：该属性在1.9之后的版本中仍然可用。建议谨慎使用，最好不用)。

7.3返回传给jQuery()的原始选择器，即jQuery()的第一个参数。jQuery([selector,[context]])

 

 

8、context，，返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。

如果没有指定，那么context指向当前的文档(document)。

9、get([index])，取得第 index 个位置上的元素

9.1get()取得所有匹配的 DOM 元素集合。

9.2简介：取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。

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

9.3举例

例子1

描述:取得所匹配的第一<img>元素

HTML 代码:

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

jQuery 代码:

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

9.4reverse()  数组反转

10、index([selector|element])

10.1index([selector])，，返回匹配元素的下标，从0开始。

10.2index([element])，，返回匹配坐标的元素。

10.3举例

描述:查找元素的索引值

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，不传递参数，返回这个元素在同辈中的索引位置。  

11、data([key],[value])，，，在元素上存放或读取数据,返回jQuery对象。

11.说明

key:存储的数据名

value:将要存储的任意数据

11.2例子

$("div").data("blah");  // 获得元素div数据名为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

11.3 $("div").removeDate（“bash"）;删除存储在div（名为bash）的数据。

removeData([name|list])

12、queue(element,[queueName])，返回值:Array/jQuery

12.1简介：显示或操作在匹配元素上执行的函数队列

12.2dequeue([queueName])从队列最前端移除一个队列函数，并执行他。

13、clearQueue([queueName])

13.1简介：

清空对象上尚未执行的所有队列

如果不带参数，则默认清空的是动画队列。这跟 stop(true)类似，但stop(true)只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。

14、jQuery.fn.extend(object)/$.fn.extend(object)

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

14.2举例

描述:增加两个插件方法。

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

15、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

16、jQuery.noConflict([extreme])

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

16.2产生缘由：jQuery库与其他库的$对象发生冲突，如jQuery库与第三方prototype库的$对象发生冲突

16.3解说

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

说明：jQuery库将$（）对象控制权让渡给第一个实现它的那个库，然后又重新给jquery对象起别名，则jquery恢复使用别名$。

16.4举例

例子1

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

jQuery 代码:  运行这个函数将变量$的控制权让渡给第一个实现它的那个库，重新取得别名j对象（跟之前$一样）；

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