jQuery总结

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('移出'); })