jQuery选择器
标签选择
$('a')
类选择
$('.box')
ID选择
$('#box')
类型选择
$('input:text')
名字选择
$('input:text:[name="box"]')
群组选择
$('input:button,input:submit')
第一个
$('input:text:first')
$('input:text').first()
最后一个
$('input:text:last')
$('input:text').last()
奇数个
$('input:text:odd')
偶数个
$('input:text:even')
第N个
$('input:text:eq(n-1)')
$(obj).eq(n-1)
第N个以前
$('input:text:lt(n)')
第N个以后
$('input:text:gt(n)')
除第N个
$('input:text:not(n)')
兄弟元素
$('input').siblings()
$('input').siblings('p')
父节点
$('input').parent()
子节点
$('div').children()
取得匹配元素的父节点集合
$('.active').parents()
下一个元素
$('div').next()
上一个元素
$('div').prev()
可见元素
$('div:visible')
隐藏元素
$('div:hidden')
选择包含指定文本的元素集合
$('div:contains("text")')
查找子元素标签
$('div').find('span')
选择指定元素下的子元素
$('tbody>tr')
jQuery方法
CSS操作
修改CSS样式
$(obj).css('width', '500px')
$(obj).css({ '500px', height: '500px', opacity: '0.8'})
添加CSS类
$(obj).addClass('class')
移除CSS类
$(obj).removeClass('class')
添加移除CSS类 (点击添加，再点移除。)
$(obj).toggleClass('active')
返回元素的宽度
$(obj).width()
设置元素的宽度
$(obj).width(500)
返回元素的高度
$(obj).height()
设置元素的宽度
$(obj).height(500)
返回最近的祖先定位元素
$(obj).offsetParent()
取得元素相对于文档的位置
$(obj).offset()
$(obj).offset().left
$(obj).offset().top
设置元素相对于文档的位置
$(obj).offset({left: 200, top: 200})
返回匹配元素相对于父元素的位置
$(obj).position()
$(obj).position().left
$(obj).position().top
返回元素中滚动条的水平偏移
$(obj).scrollLeft()
设置元素中滚动条的水平偏移
$(obj).scrollLeft(200)
返回元素中滚动条的垂直偏移
$(obj).scrollTop()
设置元素中滚动条的垂直偏移
$(obj).scrollTop(200)
显示隐藏元素
显示元素
$(obj).show()
隐藏元素
$(obj).hide()
jQuery动画
展开
$(obj).slideDown(speed, callback)
收缩
$(obj).slideUp(speed, callback)
展开收缩动画 (展开时，点击收缩。收缩时，点击展开。)
$(obj).slideToggle(speed, callback)
淡入 ( 不透明 )
$(obj).fadeIn(speed, callback)
淡入 ( 指定透明度 )
$(obj).fadeTo(speed, opacity, callback)
淡出 ( 透明度 )
$(obj).fadeOut(speed, callback)
animate复杂动画
$(obj).animate(json, time, callback)
第一个参数为json格式设置参数，第二个参数为动画完成时间，第三个参数为动画完成回调函数。
示例
$(obj).animate({ '100px', height: '100px', opacity: '0.8'}, 3000, function () { alert('动画完成'); });
控制显示隐藏
$(obj).toggle(speed, callback)
jQuery遍历
检测是否匹配，返回布尔值。
$(obj).is(条件)
示例
判断div是否显示
if($('div'.is(':visible')))
{
alert('显示');
}
else
{
alert('隐藏');
}
判断是否是li
$("ul").click(function(event)
{
var $target = $(event.target);
if ( $target.is("li") )
{
$target.css("background-color", "red");
}
});
通过筛选返回符合条件的元素集合
$(tag).filter(条件)
示例
$('li').filter(':even').css('background-color', 'red');
$('a').filter(':contains("百度"), :contains("搜狐"), :contains("新浪")');
DOM操作
添加子节点
$(parentNode).append(childrenNode);
添加节点到 (剪切)
$(Nodes).appendTo(obj)
删除元素
$(obj).remove()
创建标签
$('<div>内容</div>')
jQuery事件
循环执行函数
$(obj).toggle(function1, function2, functionN)
相对屏幕水平坐标
event.pageX
相对屏幕垂直坐标
event.pageY
所有匹配元素执行相应事件
$(elem).trigger(event)
示例
$('input').trigger('blur')
所有匹配元素添加函数
$(elem).each(function (index) {})
示例
$('input').focus(function () {
alert('文本框' + index + '正在输入');
})
双击事件
obj.dblclick()
鼠标移入移出时间
obj.hover(function () { alert('移入'); }, function () { alert('移出'); })