jQuery1.10笔记
(*号是需要注意的部分)
核心
// jQuery([selector,[context]])
$("div", xml.responseXML);
$("input:radio", document.forms[0]);
//返回值:jQuery jQuery(html,[ownerDocument])
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass('active');
},
focusout: function() {
$(this).toggleClass('type');
}
}).appendTo('form');
// jQuery(callback)
$(function() {
// body...
});
//返回值:Boolean jQuery.holdReady(hold)
$.holdReady(true);
$.getScript("myplugin.js", function() {
$.holdReady(false);
});
// 返回值:jQuery each(callback)
$('img').each(function(i) {
this.src = "test" + i + ".jpg"
});
//返回值:Number size()
$('img').size();
//返回值:Number length
$('img').length();
//返回值:Striing selector
$('ul').append('<li>' + $('ul').selector + '<li>');
// 返回值:Element context
$('ul', document.body).context.nodeName;
// 返回值:Element get([index])
$('img').get().reverse();
//返回值:Number index([selector|element])
$('li').index($('li:gt(0)'));
// 返回值:jQuery data([key],[value])
*能在一个元素上存放任何格式的数据，而不仅仅是字符串。*
$('div').data('blah', {
first: 16,
last: 'pizza'
});
// 返回值:jQuery removeData([name|list])
$('div').removeData('blah');
//返回值:Array/jQuery queue(element,[queueName,[callback]])
//返回值:jQuery dequeue([queueName])
// 返回值:jQuery clearQueue([queueName])
//返回值:jQuery jQuery.fn.extend(object)
jQuery.fn.$.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
}
});
$('input[type=checkbox]').check();
//返回值:jQuery jQuery.extend(object)
jQuery.extend({
min: function(a, b) {
return a < b ? a : b;
},
max: function(a, b) {
return a > b ? a : b;
}
});
//返回值:jQuery jQuery.noConflict([extreme])
*运行这个函数将变量$的控制权让渡给第一个实现它的那个库。*
选择器
// 返回值:Array<Element> #id
$('#myDiv');
// 返回值:Array<Element(s)> element
$('div');
// 返回值:Array<Element(s)> .class
$(".myClass");
// 返回值:Array<Element(s)> *
$("*");
// 返回值:Array<Element(s)> selector1,selector2,selectorN
$("div,span,p.myClass");
// 返回值:Array<Element(s)> ancestor descendant
$("form input");
// 返回值:Array<Element(s)> parent > child
$("form > input");
// 返回值:Array<Element(s)> prev + next
$("label + input");
// 返回值:Array<Element(s)> prev ~ siblings
$("label ~ input");
// 返回值:jQuery :first
$("li:first");
// 返回值:Array<Element(s)> :not(selector)
$("input:not(:checked)");
// 返回值:Array<Element(s)> :even
$("tr:even");
// 返回值:Array<Element(s)> :odd
$("tr:odd");
// 返回值:Array<Element> :eq(index)
$("tr:eq(1)");
// 返回值:Array<Element(s)> :gt(index)
$("tr:gt(0)");
// 返回值:jQuery :lang(language)
$("p:lang(it)");
// 返回值:jQuery :last()
$('li:last');
// 返回值:Array<Element(s)> :lt(index)
$("tr:lt(2)");
// 返回值:Array<Element(s)> :header
$(":header").css("background", "#EEE");
// 返回值:Array<Element(s)> :animated
$("div:not(:animate)").animate({
left: "+=20"
}, 1000);
// 返回值:jQuery :focus
$("a").focus();
// 返回值:jQuery :root
$(":root").css("background-color", "yellow");
// 返回值:jQuery :target
// 返回值:Array<Element(s)> :contains(text)
$("div:contains('Jhon')");
// 返回值:Array<Element(s)> :empty
$("td:empty");
// 返回值:Array<Element(s)> :has(selector)
$("div:has(p)").addClass("test");
// 返回值:Array<Element(s)> :parent
$("td:parent");
// 返回值:Array<Element(s)> :hidden
$("tr:hidden");
// 返回值:Array<Element(s)> :visible
$("tr:visible");
// 返回值:Array<Element(s)> [attribute]
// 返回值:Array<Element(s)> [attribute!=value]
// 返回值:Array<Element(s)> [attribute=value]
$("input[name='newsletter']").attr("checked", true);
// 返回值:Array<Element(s)> [attribute^=value]
$("input[name^='news']");
// 返回值:Array<Element(s)> [attribute$=value]
$("input[name$='er']");
// 返回值:Array<Element(s)> [attribute*=value]
$("input[name*='man']");
// 返回值:Array<Element(s)> [selector1][selector2][selectorN]
$("input[id][name$='man']");
// 返回值:Array<Element(s)> :first-child
$("ul li:first-child");
// 返回值:jQuery :first-of-type
$("div:fist-of-type");
// 返回值:Array<Element(s)> :last-child
$("ul li:last-child");
// 返回值:jQuery :last-of-type
$("p:last-of-type");
// 返回值:jQuery :nth-last-child(n|even|odd|formula)
// 返回值:Array<Element(s)> :nth-child
*':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。*
* :nth-child从1开始的，而:eq()是从0算起的！*
$("ul li:nth-child(2n)");
// 返回值:jQuery :nth-last-of-type
// 返回值:jQuery :nth-of-type(n|even|odd|formula)
// 返回值:Array<Element(s)> :only-child
$("ul li:only-child");
//返回值:Array<Element(s)> :only-of-type
$("button:only-of-type").text("Alone").css("border", "2px blue solid");
// 返回值:Array<Element(s)> :input
*匹配所有 input, textarea, select 和 button 元素*
$(":input");
// 返回值:Array<Element(s)> :text
$(":text");
// 返回值:Array<Element(s)> :password
$(":password")
// 返回值:Array<Element(s)> :radio
// 返回值:Array<Element(s)> :checkbox
// 返回值:Array<Element(s)> :submit
// 返回值:Array<Element(s)> :image
// 返回值:Array<Element(s)> :reset
// 返回值:Array<Element(s)> :button
// 返回值:Array<Element(s)> :file
// 返回值:Array<Element(s)> :checked
// 返回值:Array<Element(s)> :selected
// 返回值:Array<Element(s)> :disabled
// 返回值:Array<Element(s)> :enabled
$("input:enabled");
// 返回值:Array<Element(s)> :has(selector)
文档处理
// 返回值:jQuery append(content|fn)
// 返回值:jQuery appendTo(content)
// 返回值:jQuery prepend(content)
// 返回值:jQuery prependTo(content)
// 返回值:jQuery after(content|fn)
// 返回值:jQuery before(content|fn)
// 返回值:jQuery insertAfter(content)
// 返回值:jQuery insertBefore(content)
// 返回值:jQuery wrapAll(html|ele)
// 将所有包裹起来
// 返回值:jQuery wrap(html|element|fn)
// 将每一个包裹起来
*当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加*
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '"/>';
});
// 返回值:jQuery unwrap()
// 返回值:jQuery wrapInner(htm|element|fnl)
// 返回值:jQuery replaceWith(content|fn)
*是移动到目标位置来替换，而不是复制一份来替换*
// 返回值:jQuery replaceAll(selector)
// 返回值:jQuery empty()
// 返回值:jQuery remove([expr])
// 返回值:jQuery detach([expr])
*与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。*
$("p").detach(".hello");
// 返回值:jQuery clone([Even[,deepEven]])
事件
// 返回值:jQuery ready(fn)
// 返回值:jQuery on(events,[selector],[data],fn)
$('p').on("click", function() {
alert($(this).text());
});
// 返回值:jQuery off(events,[selector],[fn])
$('p').off();
$('p').off("click");
// 返回值:jQuery bind(type,[data],fn)
*.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置*
$("button").bind({
click: function() {
$("p").slideToggle();
},
mouseover: function() {
$("body").css("background-color", "red");
},
mouseout: function() {
$("body").css('background-color', '#FFF');
}
});
// 返回值:jQuery one(type,[data],fn)
$("p").one("click", function() {
alert($(this).text());
});
// 返回值:jQuery trigger(type,[data])
$("p").click(function(event, a, b) {
*一个普通的点击事件时，a和b是undefined类型*
*如果用下面的语句触发，a指向"foo",而b指向"bar"*
}).trigger('click', ["foo", "bar"]);
$("p").bind('myEvent', function(event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello", "World"]);
// 返回值:jQuery triggerHandler(type, [data])
*与trigger类似，但有以下三个主要区别： *
第一，他不会触发浏览器默认事件。
第二，只触发jQuery对象集合中第一个元素的事件处理函数。
第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。*
$("#new").click(function() {
$("input").triggerHandler('focus');
});
// 返回值:jQuery unbind(type,[data|fn])
// 返回值:jQuery live(type, [data], fn)
*jQuery 给所有匹配的元素附加一个事件处理函数，(与bind()的区别)即使这个元素是以后再添加进来的也有效。*
// 返回值:jQuery die(type, [fn])
// 返回值:jQuery delegate(selector,[type],[data],fn)
$("div").delegate("button", "click", function() {
$("p").slideToggle();
});
// 返回值:jQuery undelegate([selector,[type],fn])
// 返回值:jQuery hover([over,]out)
* hover()方法通过绑定变量"handlerInOut"来切换方法。*
$("td").bind("mouseenter mouseout", handlerInOut);
$("td").hover(handlerInOut);
$("td").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
// 返回值:jQuery toggle([speed],[easing],[fn])
$("p").toggle("slow");
// 返回值:jQuery blur([[data],fn])
// 返回值:jQuery change([[data],fn])
*该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。*
// 返回值:jQuery click([[data],fn])
// 返回值:jQuery dblclick([[data],fn])
*如果把 dblclick和 click 事件应用于同一元素，可能会产生问题*
// 返回值:jQuery error([[data],fn])
// 返回值:jQuery focus([[data],fn])
$("#login").focus();
// 返回值:jQuery focusin([data],fn)
* focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。*
// 返回值:jQuery focusout([data],fn)
* focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。*
// 返回值:jQuery keydown([[data],fn])
$(window).keydown(function(event) {
switch (event.keyCode) {
}
});
// 返回值:jQuery keypress([[data],fn])
* 每插入一个字符，就会发生 keypress 事件*
// 返回值:jQuery keyup([[data],fn])
// 返回值:jQuery mousedown([[data],fn])
$("button").mousedown(function() {
$("p").slideToggle();
});
// 返回值:jQuery mouseup([[data],fn])
// 返回值:jQuery mouseenter([[data],fn])
* 与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。*
$("p").mouseenter(function() {
$("p").css("background-color", "yellow");
});
// 返回值:jQuery mouseleave([[data],fn])
* 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件*
// 返回值:jQuery mouseover([[data],fn])
* 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件*
// 返回值:jQuery mouseout([[data],fn])
* 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件*
// 返回值:jQuery mousemove([[data],fn])
$(document).mousemove(function(e) {
$("span").text(e.pageX + "," + e.pageY);
});
// 返回值:jQuery resize([[data],fn])
$(window).resize(function() {
alert("stop it");
});
// 返回值:jQuery scroll([[data],fn])
$(window).scroll(function() {
$("span").text(x += 1);
});
// 返回值:jQuery select([[data],fn])
* textarea 或文本类型的 input 元素*
$("input").select(function() {
return false; //防止触发浏览器的默认行为
});
// 返回值:jQuery submit([[data],fn])
* 只适用于表单元素
// 返回值:jQuery unload([[data],fn])
效果
// 返回值:jQuery show([speed,[easing],[fn]])
* easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"*
// 返回值:jQuery hide([speed,[easing],[fn]])
// 返回值:jQuery slideDown([speed],[easing],[fn])
// 返回值:jQuery slideUp([speed,[easing],[fn]])
$("p").slideUp("slow");
// 返回值:jQuery slideToggle([speed],[easing],[fn])
// 返回值:jQuery fadeIn([speed],[easing],[fn])
// 返回值:jQuery fadeOut([speed],[easing],[fn])
// 返回值:jQuery fadeTo([[speed],opacity,[easing],[fn]])
$("p").fadeTo("fast", 0.6, function() {
alert("animation done");
});
// 返回值:jQuery fadeToggle([speed,[easing],[fn]])
// 返回值:jQuery animate(params,[speed],[easing],[fn])
* 所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left*
* 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！*
$("#go").click(function() {
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000);
});
$("#right").animate({
opacity: 'show',
height: 'toggle'
}, "slow", "easein");
// 返回值:jQuery stop([clearQueue],[jumpToEnd])
// 返回值:jQuery delay(duration,[queueName])
// 返回值:jQuery finish( [queue ] )
* .stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。*
// 返回值:Boolean jQuery.fx.off
// 返回值:Number jQuery.fx.interval
Ajax
// 返回值:XMLHttpRequest jQuery.ajax(url,[settings])
$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {
param1: 'value1'
},
success: function function_name(data, textStatus, jqXHR) {
// body...
},
complete: function function_name(argument) {
// body...
},
contentType: 'application/x-www-form-erlencoded',
context: document,
error: function function_name(XHR, textStatus, errorThrown) {
// body...
}
}).done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
// 返回值:jQuery load(url, [data], [callback])
$("#feeds").load("feeds.php", {
limit: 25
}, function() {
alert("loaded");
});
// 返回值:XMLHttpRequest jQuery.get(url, [data], [callback], [type])
$.get('test.php', {
name: "jhon",
time: 2 px
}, function(argument) {
// body...
});
// 返回值:XMLHttpRequest jQuery.getJSON(url, [data], [callback])
$.getJSON('test.js', {
name: 'john',
time: '2pm'
}, function(json, textStatus) {
alert("json data:" + json.users[3].name);
});
// 返回值:XMLHttpRequest jQuery.getScript(url, [callback])
$.getScript("test.js", function() {
alert("script");
});
// 返回值:XMLHttpRequest jQuery.post(url, [data], [callback], [type])
$.post("test.php", {
"func": getNameAndTime
}, function(data) {
alert(data.name);
}, "json");
// 返回值:jQuery ajaxComplete(callback)
$("#txt").ajaxComplete(function() {
$("#wait").css("display", "none");
});
// 返回值:jQuery ajaxError(callback)
// 返回值:jQuery ajaxSend(callback)
// 返回值:jQuery ajaxStart(callback)
// 返回值:jQuery ajaxStop(callback)
// 返回值:jQuery ajaxSuccess(callback)
* XMLHttpRequest 对象和设置作为参数传递给回调函数。*
$("#msg").ajaxSuccess(function(evt, request, settings) {
$(this).append("<li>请求成功</li>");
});
// 返回值:undefined jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )
// 返回值:jQuery jQuery.ajaxSetup([options])
// 返回值:String serialize()
// 返回值:Array<Object> serializeArray()
* 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。*
属性
// 返回值:String attr(name|properties|key,value|fn)
$("img").attr({
src: "test.jpg",
alt: "test image"
});
$("img").attr("src", "test.jpg");
// 返回值:jQuery removeAttr(name)
// 返回值:jQuery prop(name|properties|key,value|fn)
* attribute表示HTML文档节点的属性，property表示JS对象的属性。*
// 返回值:jQuery removeProp(name)
// 返回值:jQuery addClass(class|fn)
// 返回值:jQuery removeClass([class|fn])
$("li:last").removeClass(function() {
return $(this).prev().attr('class');
});
// 返回值:jQuery toggleClass(class|fn[,sw])
var count = 0;
$("p").click(function() {
$(this).toggleClass("highlight", count++ % 3 == 0);
});
// 返回值:String html([val|fn])
$('p').html(); //返回匹配元素的内容
$('p').has(function(n) {
return "这个P元素的index是：" + n;
}); //设置匹配元素的内容
// 返回值:String text([val|fn])
// 返回值:String,Array val([val|fn|arr])
CSS
// 返回值:String css(name|pro|[,val|fn])
// 返回值:Object jQuery.cssHooks
// 返回值:Object offset([coordinates])
* 获取匹配元素在当前视口的相对偏移。*
var p = $("p:last")
var offset = p.offset();
p.html("left:" + offset.left + "top:" + offset.top);
// 返回值:Object{top,left} position()
* 获取匹配元素相对父元素的偏移。*
// 返回值:Integer scrollTop([val])
* 获取匹配元素相对滚动条顶部的偏移。*
// 返回值:Integer scrollLeft([val])
// 返回值:Integer height([val|fn])
* 不包括padding，border，margin*
// 返回值:Integer innerHeight()
* 包括padding，不包括border，margin*
// 返回值:Integer outerHeight([options])
* 包括padding，border，margin*
// 返回值:Integer width([val|fn])
// 返回值:Integer innerWidth()
// 返回值:Integer outerWidth([options])
筛选
// 返回值:jQuery eq(index|-index)
// 返回值:jQuery first()
// 返回值:jQuery last()
// 返回值:Boolean hasClass(class)
// 返回值:jQuery filter(expr|obj|ele|fn)
$("p").filter(".selected,:first");
// 返回值:Boolean is(expr|obj|ele|fn)
$("li").click(function() {
var $li = $(this);
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
});
if (isWithTwo) {
$li.css('background-color', 'green');
} else {
$li.css('background-color', 'red');
}
}); //如果点击的是第二个strong，当前的li增加背景色为绿色
// 返回值:jQuery map(callback)
$("p").append($("input").map(function() {
return $(this).val();
}).get().join(",")); //把每个input元素的值建立一个列表
// 返回值:jQuery has(expr|ele)
* filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中。*
$("ul").has("li"); //含有li的ul
// 返回值:jQuery not(expr|ele|fn)
* 从匹配的集合中删除与指定表达式匹配的元素*
$("p").not($("#select")).css("background-color", "red");
// 返回值:jQuery slice(start, [end])
$("p").slice(0, 1).wrapInner('<div class="extra-wrapper"></div>');
// 返回值:jQuery children([expr])
// 返回值:jQuery closest(expr,[context]|object|element)
// 返回值:jQuery find(expr|obj|ele)
* children()返回匹配的子元素，find()返回匹配的所有后代元素*
$("ul").find('li'); //在ul里查找li,注意与has()的区别
// 返回值:jQuery next([expr])
$("p").next(".selected");
// 返回值:jQuery nextAll([expr])
// 返回值:jQuery nextUntil([exp|ele][,fil])
// 返回值:jQuery offsetParent()
* 返回父元素中第一个其position设为relative或者absolute的元素*
// 返回值:jQuery parent([expr])
// 返回值:jQuery parents([expr])
// 返回值:jQuery parentsUntil([expr|element][,filter])
// 返回值:jQuery prev([expr])
// 返回值:jQuery prevAll([expr])
// 返回值:jQuery prevUntil([exp|ele][,fil])
// 返回值:jQuery siblings([expr])
// 返回值:jQuery add(expr|ele|html|obj[,con])
* add()追加到元素集合中，append()添加元素节点*
// 返回值:jQuery andSelf()
// 返回值:jQuery contents()
// 返回值:jQuery end()
// 事件对象
// 延迟对象
// 回调函数
// 工具
