Attribute:
$("p").addClass(css中定义的款式范例); 给某个元素增加款式
$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素增加属性/值,参数是map
$("img").attr("src","test.jpg"); 给某个元素增加属性/值
$("img").attr("title", function() { return this.src }); 给某个元素增加属性/值
$("元素称号").html(); 获得该元素内的内容(元素,文本等)
$("元素称号").html("<b>new stuff</b>"); 给某元素设置内容
$("元素称号").removeAttr("属性称号") 给某元素删除指定的属性以及该属性的值
$("元素称号").removeClass("class") 给某元素删除指定的款式
$("元素称号").text(); 获得该元素的文本
$("元素称号").text(value); 设置该元素的文本值为value
$("元素称号").toggleClass(class) 当元素存在参数中的款式的时刻作废,假如不存在就设置此款式
$("input元素称号").val(); 猎取input元素的值
$("input元素称号").val(value); 设置input元素的值为value
Manipulation:
$("元素称号").after(content); 在婚配元素背面增加内容
$("元素称号").append(content); 将content作为元素的内容插进去到该元素的背面
$("元素称号").appendTo(content); 在content后接元素
$("元素称号").before(content); 与after要领相反
$("元素称号").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,看成true处置惩罚)
$("元素称号").empty() 将该元素的内容设置为空
$("元素称号").insertAfter(content); 将该元素插进去到content以后
$("元素称号").insertBefore(content); 将该元素插进去到content之前
$("元素").prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$("元素").prependTo(content); 将该元素作为content的一部分,放content的最前面
$("元素").remove(); 删除一切的指定元素
$("元素").remove("exp"); 删除一切含有exp的元素
$("元素").wrap("html"); 用html来围困该元素
$("元素").wrap(element); 用element来围困该元素
Traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core:
$(html).appendTo("body") 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){……..}); 实行一个函数
$("div > p").css("border", "1px solid gray"); 查找一切div的子节点p,增加款式
$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找一切的单选按钮
$.extend(prop) prop是一个jQuery对象,
举例:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) ---$( expression, [context]); 在默许情况下,$()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个婚配的元素作为上下文来实行一个函数
举例:1
$("span").click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});
举例:2
$("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;
}
});
});
jQuery Event:
ready(fn); $(document).ready()注意在body中没有onload事宜,不然该函数不能实行。在每一个页面中能够
有很多个函数被加载实行,根据fn的递次来实行。
bind( type, [data], fn ) 为每一个婚配元素的特定事宜(像click)绑定一个或多个事宜处置惩罚器函数。能够的事宜属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 为每一个婚配元素的特定事宜(像click)绑定一个或多个事宜处置惩罚器函数。在每一个对
象上,这个事宜处置惩罚函数只会被实行一次。其他划定规矩与bind()函数雷同。
trigger( type, [data] ) 在每一个婚配的元素上触发某类事宜。
triggerHandler( type, [data] ) 这一特定要领会触发一个元素上特定的事宜(指定一个事宜范例),同时作废浏览器对此事宜的默许行为
unbind( [type], [data] ) 反绑定,从每一个婚配的元素中删除绑定的事宜。
$("p").unbind() 移除一切段落上的一切绑定的事宜
$("p").unbind( "click" ) 移除一切段落上的click事宜
hover( over, out ) over,out都是要领, 当鼠标挪动到一个婚配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);
toggle( fn, fn ) 假如点击了一个婚配的元素,则触发指定的第一个函数,当再次点击统一元素时,则触发指定的第二个函数。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
元素事宜列表申明
注:不带参数的函数,其参数为可选的 fn。jQuery不支撑form元素的reset事宜。
事宜 形貌 支撑元素或对象
blur( ) 元素落空核心 a, input, textarea, button, select, label, map, area
change( ) 用户转变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 险些一切元素
dblclick( ) 鼠标双击某个对象 险些一切元素
error( ) 当加载文档或图象时发作某个毛病 window, img
focus( ) 元素获得核心 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 险些一切元素
keypress( ) 某个键盘的键被按下或按住 险些一切元素
keyup( ) 某个键盘的键被松开 险些一切元素
load( fn ) 某个页面或图象被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 险些一切元素
mousemove( fn ) 鼠标被挪动 险些一切元素
mouseout( fn ) 鼠标从某元素移开 险些一切元素
mouseover( fn ) 鼠标被移到某元素之上 险些一切元素
mouseup( fn ) 某个鼠标按键被松开 险些一切元素
resize( fn ) 窗口或框架被调解尺寸 window, iframe, frame
scroll( fn ) 转动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
JQuery Ajax 要领申明:
load( url, [data], [callback] ) 装入一个长途HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get( url, [data], [callback] ) 运用GET要求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
jQuery.getJSON( url, [data], [callback] ) 运用GET要求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 运用GET要求JavaScript文件并实行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 运用POST要求一个页面。
ajaxComplete( callback ) 当一个AJAX要求完毕后,实行一个函数。这是一个Ajax事宜
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
ajaxError( callback ) 当一个AJAX要求失利后,实行一个函数。这是一个Ajax事宜
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
ajaxSend( callback ) 在一个AJAX要求发送时,实行一个函数。这是一个Ajax事宜
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li<Starting request at " + settings.url
+ "</li<");
});
ajaxStart( callback ) 在一个AJAX要求最先但还没有激活时,实行一个函数。这是一个Ajax事宜
当AJAX要求最先(并还没有激活时)显现loading信息
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop( callback ) 当一切的AJAX都住手时,实行一个函数。这是一个Ajax事宜
当一切AJAX要求都住手时,隐蔽loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) 当一个AJAX要求胜利完成后,实行一个函数。这是一个Ajax事宜
当AJAX要求胜利完成时,显现信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});
jQuery.ajaxSetup( options ) 为一切的AJAX要求举行全局设置。检察$.ajax函数获得一切选项信息。
设置默许的全局AJAX要求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize( ) 以称号和值的体式格局衔接一组input元素。完成了准确表单元素序列
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
serializeArray( ) 衔接一切的表单和表单元素(相似于.serialize()要领),然则返回一个JSON数据格式。
从form中获得一组值,显现出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
JQuery Effects 要领申明
show( ) 显现隐蔽的婚配元素。
show( speed, [callback] ) 以文雅的动画显现一切婚配的元素,并在显现完成后可选地触发一个回调函数。
hide( ) 隐蔽一切的婚配元素。
hide( speed, [callback] ) 以文雅的动画隐蔽一切婚配的元素,并在显现完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状况。假如元素是可见的,切换为隐蔽的;假如元素是隐蔽的,
切换为可见的。
slideDown( speed, [callback] ) 经由过程高度变化(向下增大)来动态地显现一切婚配的元素,在显现完成后可选
地触发一个回调函数。这个动画结果只调解元素的高度,能够使婚配的元素以
"滑动"的体式格局显现出来。
slideUp( speed, [callback] ) 经由过程高度变化(向上减小)来动态地隐蔽一切婚配的元素,在隐蔽完成后可选地
触发一个回调函数。这个动画结果只调解元素的高度,能够使婚配的元素以"滑动"
的体式格局隐蔽起来。
slideToggle( speed, [callback] ) 经由过程高度变化来切换一切婚配元素的可见性,并在切换完成后可选地触发一个回
调函数。 这个动画结果只调解元素的高度,能够使婚配的元素以"滑动"的体式格局隐
藏或显现。
fadeIn( speed, [callback] ) 经由过程不透明度的变化来完成一切婚配元素的淡入结果,并在动画完成后可选地触
发一个回调函数。 这个动画只调解元素的不透明度,也就是说一切婚配的元素的
高度和宽度不会发作变化。
fadeOut( speed, [callback] ) 经由过程不透明度的变化来完成一切婚配元素的淡出结果,并在动画完成后可选地触
发一个回调函数。 这个动画只调解元素的不透明度,也就是说一切婚配的元素的
高度和宽度不会发作变化。
fadeTo( speed, opacity, [callback] ) 把一切婚配元素的不透明度以渐进体式格局调解到指定的不透明度,并在动画完成
后可选地触发一个回调函数。 这个动画只调解元素的不透明度,也就是说所
有婚配的元素的高度和宽度不会发作变化。
stop( ) 住手一切婚配元素当前正在运转的动画。假如有动画处于行列当中,他们就会马上最先。
queue( ) 获得第一个婚配元素的动画序列的援用(返回一个内容为函数的数组)
queue( callback ) 在每一个婚配元素的事宜序列的末端增加一个可实行函数,作为此元素的事宜函数
queue( queue ) 以一个新的动画序列替代一切婚配元素的原动画序列
dequeue( ) 实行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于建立自定义动画的函数。
animate( params, options ) 建立自定义动画的另一个要领。作用同上。
JQuery Traversing 要领申明
eq( index ) 从婚配的元素鸠合中获得一个指定位置的元素,index从0最先
filter( expr ) 返回与指定表达式婚配的元素鸠合,能够运用","号支解多个expr,用于完成多个前提挑选
filter( fn ) 应用一个特别的函数来作为挑选前提移除鸠合中不婚配的元素。
is( expr ) 用一个表达式来搜检当前挑选的元素鸠合,假如个中最少有一个元素相符这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素应用callback要领转换其值,然后增加到一个jQuery数组中。
not( expr ) 从婚配的元素鸠合中删除与指定的表达式婚配的元素。
slice( start, [end] ) 从婚配元素鸠合中获得一个子集,和内建的数组的slice要领雷同。
add( expr ) 把与表达式婚配的元素增加到jQuery对象中。
children( [expr] ) 获得一个包含婚配的元素鸠合中每一个元素的一切子元素的元素鸠合。可选的过滤器
将使这个要领只婚配相符的元素(只包含元素节点,不包含文本节点)。
contents( ) 获得一个包含婚配的元素鸠合中每一个元素的一切子孙节点的鸠合(只包含元素节点,不
包含文本节点),假如元素为iframe,则获得个中的文档元素
find( expr ) 搜刮一切与指定表达式婚配的元素。
next( [expr] ) 获得一个包含婚配的元素鸠合中每一个元素紧邻的背面平辈元素的元素鸠合。
nextAll( [expr] ) 获得一个包含婚配的元素鸠合中每一个元素一切的背面平辈元素的元素鸠合
parent( [expr] ) 获得一个包含着一切婚配元素的唯一父元素的元素鸠合。
parents( [expr] ) 获得一个包含着一切婚配元素的唯一先人元素的元素鸠合(不包含根元素)。
prev( [expr] ) 获得一个包含婚配的元素鸠合中每一个元素紧邻的前一个平辈元素的元素鸠合。
prevAll( [expr] ) 获得一个包含婚配的元素鸠合中每一个元素的之前一切平辈元素的元素鸠合。
siblings( [expr] ) 获得一个包含婚配的元素鸠合中每一个元素的一切平辈元素的元素鸠合。
andSelf( ) 将前一个婚配的元素鸠合增加到当前的鸠合中
获得一切div元素和个中的p元素,增加border类属性。获得一切div元素中的p元素,
增加background类属性
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
end( ) 完毕当前的操纵,回到当前操纵的前一个操纵
找到一切p元素个中的span元素鸠合,然后返回p元素鸠合,增加css属性
$("p").find("span").end().css("border", "2px red solid");
JQuery Selectors 要领申明
基础挑选器
$("#myDiv") 婚配唯一的具有此id值的元素
$("div") 婚配指定称号的一切元素
$(".myClass") 婚配具有此class款式值的一切元素
$("*") 婚配一切元素
$("div,span,p.myClass") 团结一切婚配的挑选器
层叠挑选器
$("form input") 子女挑选器,挑选ancestor的一切子孙节点
$("#main > *") 子挑选器,挑选parent的一切子节点
$("label + input") 临挑选器,挑选prev的下一个临节点
$("#prev ~ div") 同胞挑选器,挑选prev的一切同胞节点
基础过滤挑选器
$("tr:first") 婚配第一个挑选的元素
$("tr:last") 婚配末了一个挑选的元素
$("input:not(:checked) + span")从原元素鸠合中过滤掉婚配selector的一切元素(这里有是一个临挑选器)
$("tr:even") 婚配鸠合中偶数位置的一切元素(从0最先)
$("tr:odd") 婚配鸠合中奇数位置的一切元素(从0最先)
$("td:eq(2)") 婚配鸠合中指定位置的元素(从0最先)
$("td:gt(4)") 婚配鸠合中指定位置以后的一切元素(从0最先)
$("td:gl(4)") 婚配鸠合中指定位置之前的一切元素(从0最先)
$(":header") 婚配一切题目
$("div:animated") 婚配一切正在运转为画的一切元素
内容过滤挑选器
$("div:contains('John')") 婚配含有指定文本的一切元素
$("td:empty") 婚配一切空元素(只含有文本的元素不算空元素)
$("div:has(p)") 从原元素鸠合中再次婚配一切最少含有一个selector的一切元素
$("td:parent") 婚配一切不为空的元素(含有文本的元素也算)
$("div:hidden") 婚配一切隐蔽的元素,也包含表单的隐蔽域
$("div:visible") 婚配一切可见的元素
属性过滤挑选器
$("div[id]") 婚配一切具有指定属性的元素
$("input[name='newsletter']") 婚配一切具有指定属性值的元素
$("input[name!='newsletter']") 婚配一切不具有指定属性值的元素
$("input[name^='news']") 婚配一切指定属性值以value开首的元素
$("input[name$='letter']") 婚配一切指定属性值以value末端的元素
$("input[name*='man']") 婚配一切指定属性值含有value字符的元素
$("input[id][name$='man']") 婚配同时相符多个挑选器的一切元素
子元素过滤挑选器
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), 婚配父元素的第n个子元素
$("ul li:nth-child(3n + 1)")
$("div span:first-child") 婚配父元素的第1个子元素
$("div span:last-child") 婚配父元素的末了1个子元素
$("div button:only-child") 婚配父元素的唯一1个子元素
表单元素挑选器
$(":input") 婚配一切的表单输入元素,包含一切范例的input, textarea, select 和 button
$(":text") 婚配一切范例为text的input元素
$(":password") 婚配一切范例为password的input元素
$(":radio") 婚配一切范例为radio的input元素
$(":checkbox") 婚配一切范例为checkbox的input元素
$(":submit") 婚配一切范例为submit的input元素
$(":image") 婚配一切范例为image的input元素
$(":reset") 婚配一切范例为reset的input元素
$(":button") 婚配一切范例为button的input元素
$(":file") 婚配一切范例为file的input元素
$(":hidden") 婚配一切范例为hidden的input元素或表单的隐蔽域
表单元素过滤挑选器
$(":enabled") 婚配一切可操纵的表单元素
$(":disabled") 婚配一切不可操纵的表单元素
$(":checked") 婚配一切已点选的元素
$("select option:selected") 婚配一切已挑选的元素
JQuery CSS 要领申明
css( name ) 接见第一个婚配元素的款式属性。
css( properties ) 把一个"名/值对"对象设置为一切婚配元素的款式属性。
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "#0028f4"
}
$(this).css(cssObj);
});
css( name, value ) 在一切婚配的元素中,设置一个款式属性的值。
offset( ) 获得婚配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
top和left,属性值为整数。这个函数只能用于可见元素。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
width( ) 获得当前第一婚配的元素的宽度值,
width( val ) 为每一个婚配的元素设置指定的宽度值。
height( ) 获得当前第一婚配的元素的高度值,
height( val ) 为每一个婚配的元素设置指定的高度值。
JQuery Utilities 要领申明
jQuery.browser
.msie 示意ie
jQuery.browser.version 读取用户浏览器的版本信息
jQuery.boxModel 检测用户浏览器针对当前页的显现是不是基于W3C CSS的盒模子
jQuery.isFunction( obj ) 检测通报的参数是不是为function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " + i + ")").text(isFunc);
});
jQuery.trim( str ) 消灭字符串两头的空格,运用正则表达式来消灭给定字符两头的空格
jQuery.each( object, callback ) 一个通用的迭代器,能够用来无缝迭代对象和数组
jQuery.extend( target, object1, [objectN] ) 扩大一个对象,修正本来的对象并返回,这是一个壮大的完成继续的
东西,这类继续是采纳传值的要领来完成的,而不是JavaScript中的
原型链体式格局。
兼并settings和options对象,返回修正后的settings对象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
兼并defaults和options对象,defaults对象并没有被修正。options对象中的值
替代了defaults对象的值通报给了empty。
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 经由过程一个挑选函数往来来往除数组中的项
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 将一个相似数组的对象转化为一个真正的数组
将拔取的div元素鸠合转化为一个数组
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 运用某个要领修正一个数组中的项,然后返回一个新的数组
jQuery.inArray( value, array ) 返回value在数组中的位置,假如没有找到,则返回-1
jQuery.unique( array ) 删除数组中的一切反复元素,返回整顿后的数组