jquery笔记-api

//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()




// 事件对象
// 延迟对象
// 回调函数
// 工具

// 事件委托
// attr() 与 prop()	的区别再看看
// 返回值:Object 	jQuery.cssHooks
// 返回值:jQuery 	closest(expr,[context]|object|element)
// 返回值:jQuery 	find(expr|obj|ele)
// position:absolute|relative
// absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
// 注意设置position之后，它的兄弟元素和后代元素如何显示
// float


// bootstap的滚动监听的使用