jquery温故知新-核心篇

影者东升

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

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

2.jQuery(html,[ownerDocument]) 1.8*

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

3.jQuery.readyException( error ) 3.1+

jQuery.readyException = function( error ) {
  console.error( error );
};

4.selector

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

5.context

$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
[object HTMLDocument]  //如果是IE浏览器，则返回[object]
BODY

6.index([selector|element])

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
$('li').index($('#bar')); //1，传递一个jQuery对象
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

7.data([key],[value])参数 key 不得大写

即当使用.data()获取值时，jQuery会首先尝试将获取的字符串值转化成JS类型，包括布尔值，null，数字，对象，数组： 
若值是”true|false”，则返回相应的布尔值； 
若值是”null”，则返回null； 
若值是纯数字构成的字符串（+data + ”” === data），则返回相应的数字（+data）； 
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或[1,2,3]，则尝试使用jQuery.parseJSON解析之；

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 
$("div").data("role") // "page"; 
$("div").data("lastValue") // 43; 
$("div").data("hidden") // true; 
$("div").data("options").name // "John"; 
$("div").removeData("role");  //移除blah

8.removeData([name|list]) 1.7*

与 data([key], [value])函数作用相反
[name] 存储的数据名
[list] 移除数组或以空格分开的字符串

9.queue(element,[queueName])

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

参数
a.element,[queueName]

element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

b.element,queueName,newQueue

element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
newQueue:替换当前函数列队内容的数组

c.element,queueName,callback()

element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
callback():要添加进队列的函数

\\显示队列长度
<style>
  div { margin:3px; width:40px; height:40px;
    position:absolute; left:0px; top:30px; 
    background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
$("#show").click(function () {
    var n = $("div").queue("fx");
    $("span").text("Queue length is: " + n.length);
});
function runIt() {
    $("div").show("slow");
    $("div").animate({left:'+=200'},2000);
    $("div").slideToggle(1000);
    $("div").slideToggle("fast");
    $("div").animate({left:'-=200'},1500);
    $("div").hide("slow");
    $("div").show(1200);
    $("div").slideUp("normal", runIt);
}
runIt();

\\通过设定队列数组来删除动画队列
<style>
div { margin:3px; width:40px; height:40px;
  position:absolute; left:0px; top:30px; 
  background:green; display:none; }
div.newcolor { background:blue; }
</style>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

\\插入一个自定义函数 如果函数执行后要继续队列，则执行 jQuery(this).dequeue();
<style>
div { margin:3px; width:40px; height:40px;
  position:absolute; left:0px; top:30px; 
  background:green; display:none; }
div.newcolor { background:blue; }
</style>
Click here...
<div></div>
$(document.body).click(function () {
    $("div").show("slow");
    $("div").animate({left:'+=200'},2000);
    $("div").queue(function () {
      $(this).addClass("newcolor");
      $(this).dequeue();
    });
    $("div").animate({left:'-=200'},500);
    $("div").queue(function () {
      $(this).removeClass("newcolor");
      $(this).dequeue();
    });
    $("div").slideUp();
});

10.dequeue([queueName])

从队列最前端移除一个队列函数，并执行他。

参数

[queueName] 队列名，默认为fx

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

\\用dequeue来结束自定义队列函数，并让队列继续进行下去。\
<style>
div { margin:3px; width:50px; position:absolute;
  height:50px; left:10px; top:30px; 
  background-color:yellow; }
div.red { background-color:red; }
</style>
<button>Start</button>
<div></div>
$("button").click(function () {
  $("div").animate({left:'+=200px'}, 2000);
  $("div").animate({top:'0px'}, 600);
  $("div").queue(function () {
    $(this).toggleClass("red");
    $(this).dequeue();
  });
  $("div").animate({left:'10px', top:'30px'}, 700);
});

11.clearQueue([queueName])

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

参数

queueName 含有队列名的字符串。默认是"Fx"，动画队列。

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