jQuery汇总

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() 
   })
  })