jQuery
选取(查询)HTML元素,并对它们执行操作
基础语法 : $(selector).action()
原则 : Get first Set all
文档就绪函数
$(document).ready(function(){}) 简化为$(function(){})
选择器
基本选择器
id选择器
$('#id')
class选择器
$('.class')
元素选择器
$('element')
层次选择器
$('div p') 选择所有div元素中的p元素
$('#div>*') 选择id为div元素的所有子元素
$('div + p') 选择所有div的下一个元素p
$("#div ~ div")选择id为div元素之后所有同一父级的div标签
过滤选择器
:first 选择第一个元素
:last 选取最后一个元素
:not 取非元素
DOM操作
操作HTML元素和属性的方法
获取和设置内容属性
text():设置或返回所选文本内容
html():设置或返回所选元素的内容(包含HTML)
val():设置或返回表单字段的值
添加
append():在被选元素的结尾插入内容
perpend():在被选元素的开头插入内容
after():在被选元素之后插入内容
before():在被选元素之前插入内容
删除
remove():删除被选元素(及其子元素)
empty():删除被选元素的子元素
css类
addClass():添加一个或多个类
removeClass():删除一个或多个类
尺寸
width():设置或返回元素的宽度(不包含内边距,边框和外边距)
height():设置或返回元素的高度(不包含内边距,边框和外边距)
outerWidth():返回元素的宽度(包含内边距和边框)
outerHeight():返回元素的高度(包含内边距和边框)
offset():函数用于设置或返回当前匹配元素相对于当前文档的偏移
遍历
用根据其相对于其他元素的关系来'查找'(或选取)HTML元素,以某项选择器开始,并沿着这个选择移动,直到抵达期望的元素为止
each(callback):函数用于以当前jQuery对象匹配到每个元素作为上下文来遍历执行指定的函数
eq(index):获取当前index所对应的jQuery对象
find(expr):函数用于选取每个元素匹配指定表达是expr的后代元素
index():函数用于获取当前jQuery对象中指定DOM元素的索引值
文档遍历
next():获得匹配元素集合中每个元素紧邻的同辈元素
prev():获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
map():把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
filter():filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
siblings():获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
效果
显示隐藏
show(speed,callback):显示
hide(speed,callback): 隐藏
toggle(speed,callback);切换显示和隐藏
淡入淡出
fadeIn():淡入已隐藏的元素
fadeOut():淡出可见元素
fadeToggle():切换淡入和淡出效果
滑动
sildeDown():向下滑动元素
sildeUp():向上滑动元素
sildeToggle():切换向上向下滑动
jQuery实例
jQuery实现tab切换
css
div{
width: 200px;
height: 200px;
background-color: #ccc;
font-size: 100px;
text-align: center;
line-height: 200px;
display: none;
}
.current{
background-color: skyblue;
}
.show{
display: block;
}
html
<input class="current" type="button" value="A" />
<input type="button" value="B" />
<input type="button" value="C" />
<div class="show">A</div>
<div>B</div>
<div>C</div>
jQuery
$(function(){
$('input').click(function(){
$(this).addClass('current').siblings().removeClass()
var $i = $('input').index($(this))
$('div').hide().eq($i).show()
})
})
