jquery温故知新-核心篇
1.jQuery(])//在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
$("input:radio", document.forms);
//在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。
$("div", xml.responseXML);
2.jQuery(html,) 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()").selector + "</li>");
结果:
ul
ul li
div#foo ul:not()
5.context
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
//如果是IE浏览器，则返回
BODY
6.index()
<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 不得大写
即当使用.data()获取值时，jQuery会首先尝试将获取的字符串值转化成JS类型，包括布尔值，null，数字，对象，数组：
若值是”true|false”，则返回相应的布尔值；
若值是”null”，则返回null；
若值是纯数字构成的字符串（+data + ”” === data），则返回相应的数字（+data）；
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或，则尝试使用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() 1.7*
与 data(, )函数作用相反
存储的数据名
移除数组或以空格分开的字符串
9.queue(element,)
显示或操作在匹配元素上执行的函数队列
参数
a.element,
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()
从队列最前端移除一个队列函数，并执行他。
参数
队列名，默认为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()
清空对象上尚未执行的所有队列
如果不带参数，则默认清空的是动画队列。
这跟 stop(true)类似，但stop(true)只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。
参数
queueName 含有队列名的字符串。默认是"Fx"，动画队列。
\\停止当前正在运行的动画：
$("#stop").click(function(){
$("#box").clearQueue();
});
文档来源：51CTO技术博客https://blog.51cto.com/StavinLi/3043326
页:
[1]