标签：io ar color sp for on 数据 div bs
jQuery 核心函数
//前者为查找对象,后者为前者查找的范围
$(argunment)
jQuery([selector,[context]])
参数
$(selector,[context])
selector 被查找的字符串
context 待查找的元素集、文档或 jQuery 对象
Eg ---- $(‘p‘,‘[class=two]‘).css(‘color‘,‘red‘)
$(‘p‘,‘[class=one],[class=two]‘).css(‘color‘,‘red‘)
element 一个用于封装成 jQuery 对象的DOM元素
Eg ---- $(‘#id‘)
object 一个用于封装成 jQuery 对象
elementArray 一个用于封装成 jQuery 对象的 DOM 数组
jQuery object 一个用于克隆的 jQuery 对象
jQuery() 返回一个空的 jQuery 对象
---------------------------------
jQueryjQuery(html,[ownerDocument])
(1.8*)
参数
$(html,[ownerDocument])
html 用于动态创建 DOM 元素的HTML标记字符串
ownerDocument 创建 DOM 元素所在的文档 对象
$(html,props)
html 用于动态创建 DOM 元素的HTML标记字符串
ownerDocument 用于附加到新创建元素上的属性、事件和方法
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type=‘checkbox‘>");
-----------------------------
$("<div>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");
-----------------------------
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
-----------------------------
// callback is function
jQuery(callback)
$(document).ready(){
// 代码块
}
等价 ↓简写
$(function(){
// 代码块
})
-----------------------------
jQuery.holdReady(hold)
(1.6+)
$.holdReady(true);
$.getScript("myplugin.js", function() {
$.holdReady(false);
});
jQuery 对象访问
// each 遍历对象
// index 是索引值
// value 是对象本身
function(index)
function(index,value)
each(callback)
<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>
$("button").click(function(){
// index 是索引下标 value 是当前传入的对象值
$("div").each(function (index, value) {
// value == this
$( value ).css("backgroundColor", "yellow");
// 如果这个是 #stop
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
// 并退出 each 遍历
return false;
}
});
});
----------------------------------
size()
// size() 是获取元素数量
$(‘div‘).size()
----------------------------------
length
// length 是获取长度
var arr = [1,2,3,‘a‘,‘b‘,..‘n‘]
arr.length;
$(‘div‘).length
----------------------------------
selector
// .selector 为选择器的字符串
// 结果都为 <ul> <li> div </li> </ul>
$(‘ul‘).append(‘<li>‘ + $(‘div‘).selector + ‘</li>‘)
$(‘ul‘).append(‘<li>‘ + ‘div‘ + ‘</li>‘)
----------------------------------
context
// 返回对象 htmlDocument
$(‘ul‘,‘div‘).context
// 返回字符串 #document
$(‘ul‘,‘div‘).context.nodeName
----------------------------------
get([index])
// index 为索引值, 实际的DOM 元素并且对他直接操作, 而不是通过 jQuery 函数, $(this).get(0)与$(this)[0]等价
$(‘div‘).get(0)
$(‘div‘)[0]
----------------------------------
返回值:Numberindex([selector|element])
如果 .index() 方法没有传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
参数
index()
// 返回在 sibling 中的索引位置
$(‘#bar‘).index();
seletor
一个选择器, 代表一个jQuery对象, 将会从这个对象中查找元素
element
获得 index 位置的元素, 可以是 DOM 元素或 jQuery 选择器
// 以下都是返回 li 的索引位置
$(‘#bar‘).index(‘li‘);
$(‘li‘).index($(‘#bar‘));
$(‘li‘).index($(‘li:gt(0)‘));
$(‘li‘).index(document.getElementById(‘bar‘));
数据缓存
data([key],[value])
在元素上存放数据,返回jQuery对象
如果jQuery集合指向多个元素,那将在所有元素上设置对应数据,这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串
参数
key
存储的数据名.
$(‘div‘).date(‘name‘);
key,value
key:存储的数据名
value:将要存储的任意数据
$(‘div‘).date(‘name‘,‘kk‘);
obj
一个用于设置数据的键/值对
$(‘div‘).date(‘obj‘,{‘name‘:‘kk‘,‘sex‘:‘man‘});
data()
----------------------------------------------
removeData([name|list])
参数
name
存储的数据名.
list
移除数组或以空格分开的字符串
队列控制
queue(element,[queueName])
// 显示或操作在匹配元素上执行的函数队列
参数
element,[queueName]
element 检查附加列队的 DOM 元素
queueName 字符串值,包含序列的名称,默认是 fx,标准的效果序列
element,queueName,newQueue
element 检查附加列队的 DOM 元素
queueName 字符串值,包含序列的名称,默认是 fx,标准的效果序列
newQueue 替换当前函数列队内容的数组
element,queueName,callback()
element 检查附加列队的 DOM 元素
queueName 字符串值,包含序列的名称,默认是 fx,标准的效果序列
callback() 要添加进队列的函数
<script>
$(document.body).click(function(){
// 参数为缓慢显示出来
$("div").show("slow");
// 对不在动画的元素执行 left 属性值 +=200,并且延迟 2000 毫秒
$("div").animate({left:‘+=200‘},2000);
// 操作加入队列的函数
$("div").queue(function(){
$(this).addClass("newcolor");
// 剔除上一个加入队列的函数并执行它
$(this).dequeue();
});
// 同上
$("div").animate({left:‘-=200‘},5000);
// 同上
$("div").queue(function(){
$(this).removeClass("newcolor");
// 同上
$(this).dequeue();
});
$("div").slideUp();
});
</script>
dequeue([queueName])
同上 队列名默认为 fx
// 移除 .queue()创建的队列并执行( kk )
// 从队列最前端移除一个队列函数,并执行他
clearQueue([queueName])
清空对象上尚未执行的队列
如果不带参数,则默认清空的是动画队列,这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过 .queue() 创建的队列
插件机制
$.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)
参数
object
用来扩充 jQuery 对象
// $.fn.extend 创建 jq 的对象
jQuery.fn.extend({
// 属性为 check 例 $.check
check: function() {
return this.each(function() { this.checked = true; });
},
// 属性为 check 例 $.uncheck
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
---------------------------------
jQuery.extend
// 增加函数
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
$.min(a,b)
多库共存jQuery.noConflict([extreme])
运行这个函数将变量$的控制权让渡给第一个实现它的那个库
参数
剔除 jquery 中的 $ 将$引用的对象映射回原始的对象
jQuery.noConflict();
jquery 库只能用 jQuery 或者
var jq = jQuery
标签：io ar color sp for on 数据 div bs
原文地址：http://www.cnblogs.com/mhxy13867806343/p/4163054.html
