目录
Introduction
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
var $variable = jQuery对象
$variable[0] // jQuery对象转成DOM对象
查找标签
$('#id') // id选择器
$('tagName') // 标签选择器
$('.cl) // class选择器
$('div.cl') // 找到有cl类的div标签
$('#id, .className, tagName') // 组合选择器
$('x y')
$('x > y')
$('x + y') // 毗邻选择器
$('x ~ y') // 兄弟选择器
基本筛选器
:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
:not(元素选择器)
:has(元素选择器)
$('div:has(h1)')
属性选择器
[attr]
[attr=value]
[attr!=value]
$('input[type!="text"]')
表单筛选器
根据type类型
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
根据对象属性
:enabled
:disabled
:checked
:selected
筛选器方法
元素选择
下一个元素
$('#id').next()
$('#id').nextAll()
$('#id').nextUntil('#i2')
上一个元素
$('#id').prev()
$('#id').prevAll()
$('#id').prevUntil('#i2')
父亲元素
$('#id').parent()
$('#id').parents()
$('#id').parentsUntil()
儿子和兄弟元素
$('#id').children()
$('#id').siblings()
后代元素
$('div').find('p')
元素筛选
$('div').filter('.c1')
.first()
.last()
.not()
.has()
.eq()
操作标签
样式操作
addClass()
removeClass()
hasClass()
toggleClass()
CSS
tag.css('color', 'red') // tag.style.color = 'red'
位置操作
offset()
position()
scrollTop()
scrollLeft()
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeigth()
outerWidth()
文本操作
HTML
html()
html(val) // 设置元素html内容
文本
text()
值
val()
$('[name='hobby']').val(['basketball', 'football'])
属性操作
attr(attrName)
attr(attrName, attrValue)
attr({k1:v1, k2:v2})
removeAttr()
对于checkbox和radio
prop()
注意：
- 对于标签上有的和自定义属性都用attr
- 对于返回布尔值的如checkbox, radio和option是否被选中用prop
文档处理
append()
appendTo()
prepend()
prependTo()
.afer()
.insertAfer()
.before()
.insertBefore()
移除和清空元素
remove()
empty()
替换
replaceWith()
replaceAll()
克隆
clone()
事件
常用事件
click(func(){..})
hover
blur
focus
change
keyup
事件绑定
.on(event, [, selector], function(){})
移除事件
.off(event, [, selector], function(){})
阻止后续事件
1. return false;
2. 2.preventDefault()
阻止事件冒泡
$('span').click(function(e)) {
alert('span');
e.stopPropagation();
}
页面载入
$(document).read(function(){..})
$(function(){...})
事件委托
$('table').on('click', '.delete', function(){})