jquery笔记

1.选择器

$('#div')
$('.div')
$('div')
$("ul li:eq(1)")
$('div[class=none]')
$('input:checked')
$('input').is(':checked')
$('input:hidden')
$('div:visible')
//选取 属性title值不等于 test 的div元素
$('div[title!=test]')
//选取 属性title值 以 te 开始 的div元素
$('div[title^=te]')
//选取 属性title值 以 est 结束 的div元素
$("div[title$=est]")
//选取 属性title值 含有 es  的div元素
$("div[title*=es]")
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素
$("div[id][title*=es]")
//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)')
//选取每个父元素下的第一个子元素
$('div.one :first-child')
//选取每个父元素下的最后一个子元素
$('div.one :last-child')
//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div.one :only-child')
//选择第一个div元素
$('div:first')
//选择最后一个div元素
$('div:last')
//选择class不为one的 所有div元素
$('div:not(.one)')
//选择 索引值为偶数 的div元素
$('div:even')
//选择 索引值为奇数 的div元素
$('div:odd')
//选择 索引等于 2 的元素
$('div:eq(2)')
//选择 索引大于 2 的元素
$('div:gt(2)')
//选择 索引小于 2 的元素
$('div:lt(2)')
//选择 所有的标题元素.比如h1, h2, h3等等
$(':header')
//选择 当前正在执行动画的所有元素
$(':animated')
//选取含有文本"di"的div元素
$('div:contains(di)')
//选取不包含子元素(或者文本元素)的div空元素
$('div:empty')
//选取含有class为mini元素 的div元素
$('div:has(.mini)')
//选取含有子元素(或者文本元素)的div元素
$('div:parent')
//重置表单元素
$(":reset")
//对表单内 可用input
$("#form1 input:enabled")
//对表单内 不可用input
$("#form1 input:disabled")
// 使用:checked选择器
$(":checkbox")
// 使用:selected选择器
$("select:selected")
$("#form1 :text")
$("#form1 :password")
$("#form1 :radio")
$("#form1 :checkbox")
$("#form1 :submit")
$("#form1 :image")
$("#form1 :reset")
$("#form1 :button")
$("#form1 :file")
$("#form1 :hidden")
$("#form1 select")
$("#form1 textarea")
$("#form1 :input")
$('div').find('a')
$('ul li')
.filter("
	:contains('佳能'),
	:contains('尼康'),
	:contains('奥林巴斯')
")

1.1 查找语法

children([expr])
closest(e|o|e)
find(e|o|e)
next([expr])
nextAll([expr])
nextUntil([e|e][,f])
offsetParent()
parent([expr])
parents([expr])
parentsUntil([e|e][,f])
prev([expr])
prevAll([expr])
prevUntil([e|e][,f])
siblings([expr])

2. CSS 样式设置

$('#div').addClass('active')
$('#div').removeClass('active')
$('#div').children('a')
$('#div').show()
$('#div').hide()
$('#div').fadeIn()
$('#div').fadeOut()
$('#div').hide()
$('#div').end()

3. DOM操作

$("form").submit(function() {})
$('div').slideToggle('slow', function() {
	$('div').slideToggle('slow', function() {})
})
$('div').wrapInner('<p>123</p>')
$('div').wrapAll('<p>123</p>')
$("div").wrap("<p></p>");
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>")
$('#ul').clone().appendTo("ul")
$('.li').clone(true).appendTo("ul")
$("ul li:eq(1)").remove()
$("ul li").remove("li[title!=菠萝]")
$("ul li:eq(1)").empty()
$('div').append($('<p>123</p>'))
$('div').prepend($('<p>123</p>'))
$('div').insertAfter($('<p>123</p>'))
$('div').insertBefore($('<p>123</p>'))
$('div').find('a')
$('div').text()
$('div').text('1231')
$('div').html()
$('div').html('<p>242</p>')
$('div').attr('data-value', 123)
$('div').attr('data-value')
$('div').removeAttr('data-value')
$('div').css('width', '100px')
// 获取li第5个以后且除去最后一个的所有li元素
$('ul li:gt(5):not(:last)').hide()
$('div').fadeIn()
$('div').fadeOut()
$('#div').fadeTo(600, 0.2)
$('#div').slideUp()
$('#div').slideDown()

4. 事件绑定与解绑

event.stopPropagation()
event.preventDefault()
return false
$('#div').bind('click', function() {})
$('#btn').unbind("click")
$('#btn').unbind("click", fn)
$('#btn').one("click", function(){})

4.1 自定义事件

$('#btn').bind("myClick", function(event, message1, message2){
	$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
	$(this).trigger("myClick",["我的自定义","事件"]);
}).trigger("myClick",["我的自定义","事件"]);
$("div").bind("mouseover mouseout", function(){
	$(this).toggleClass("over");
});
$("div").bind("click.plugin",function(){
	$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function(){
	$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
	$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
	$("div").unbind(".plugin");
})

5. 动画设置

//停止当前动画，继续下一个动画
$('div').stop().animate({height : "150",width : "300"} , 200 );
//清除元素的所有动画后执行下一个动画
$('div')
.stop(true)
.animate({height : "150",width : "300"} , 200 )
.animate({left: "500px"}, 3000)
.animate({height: "200px"}, 3000, function() {
	$(this).css("border","5px solid blue");
});

6. ajax¹ 数据请求

$.ajax({
	// GET | POST | PUT | DELETE
	// PUT 和 DELETE 仅部分浏览器支持
	type: 'GET',
	url: '',
	// json | text | html | script | jsonp | xml
	dataType: 'script',
	// 异步
	async: true,
	// 缓存 dataType 为 script 和 jsonp 时默认为 false
	cache: true,
	// 一个数据类型对数据类型转换器的对象
	contents: {},
	contentType: 'application/x-www-form-urlencoded',
	converters: {},
	// 同域请求为false
	crossDomain: false,
	// String | Object
	data: {},
	// 是否触发全局 AJAX 事件
	global: true,
	// 请求头
	headers: {},
	ifModified: false,
	jsonp: 'onJsonpLoad',
	jsonpCallback: '',
	// 一个mime类型用来覆盖XHR的 MIME类型
	mimeType: '',
	// 用于响应HTTP访问认证请求的用户名
	username: '',
	// 用于响应HTTP访问认证请求的密码
	password: '',
	// 通过data选项传递进来的数据
	processData: true,
	// 通常只在本地和远程的内容编码不同时使用
	scriptCharset: '',
	// 一组数值的HTTP代码和函数对象，当响应时调用了相应的代码
	statusCode: {
		404: function() {
			// page not found
		}
	},
	traditional: false,
	// 单位 ms
	timeout: 60000,
	// 在发送请求之前调用
	beforeSend： function (xhr) {
		// xhr 是 XMLHttpRequest 对象
	},
	// 当请求之后调用
	success: function (data, textStatus, jqXHR) {
		// data 可能是 xmlDoc, jsonObj, html, text, 等等
		// textStatus 是 描述状态的字符串
		// jqXHR 是 XMLHttpRequest 对象
	},
	// 给Ajax返回的原始数据的进行预处理的函数
	// 在请求成功之后调用
	dataFilter: function(data, type) {
		// data是Ajax返回的原始数据
		// type是调用jQuery.ajax时提供的dataType参数
		return data // 返回处理后的数据
	},
	// 在请求出错时调用
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		// XMLHttpRequest 是 XMLHttpRequest 对象
		// textStatus 是 错误信息
		// errorThrown 是 捕获的异常对象
	},
	// 当请求完成之后调用这个函数，无论成功或失败
	complete: function (xhr, ts) {
		// xhr 是 XMLHttpRequest 对象
		// ts 是 一个描述成功请求类型的字符串
	},
	xhr: function() {}
})

---

1. http://jquery.cuishifeng.cn/jQuery.Ajax.html ↩︎