jQuery复习

jQuery:
jquery: js的库，比js写得少，做的多
jquery使用： 1、下载库文件 http://www.jq22.com/jquery-info122
版本选择： 2.0版本以上没有做ie6-8的兼容性处理，一般选用1.8-1.11版本
2、通过cdn加速服务器直接引入线上的jquery库
jquery对象和DOM对象的区别和相互转换的方式：
jquery对象不能直接使用DOM对象的属性和方法
DOM对象也不能直接使用jquery的属性和方法
jquery对象转换成DOM对象： $('#box')[0] $('#box').get(0)
DOM对象转换成jquery对象: $(DOM对象)
文档就绪事件： 1、js的文档就绪事件 window.onload = function(){ }
等待DOM结构以及页面的资源加载完才会触发
2、jquery的文档就绪事件 $(document).ready(function(){ }) DOM结构加载完就触发
简写：$(function(){})
jquery基本语法：$(选择器).action().action();
===========================================
一：选择器
1.基本选择器
*  element  .class  #id  sel1,sel2,sel3
2.层级选择器
sel1 sel2(后代)
sel1>sel2(子代)
prev+next
prev~siblings
3.基本筛选
:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
4.子元素
:first-child
:last-child
:nth-child(n)
:only-child
5.内容
:contains(text)  筛选集合中包含指定字符串的元素
:empty   筛选集合中为空的元素
:parent   筛选集合中不为空的元素（包含文本或子元素）
:has(selector)   筛选集合中包含指定选择器的元素的元素
6.可见性
:hidden  display:none的元素  行内元素没有内容  type为hidden的input
:visible    除了:hidden的元素
7.属性
[attr]   筛选包含attr属性的元素
[attr^=val]   筛选包含attr属性并且以val开头的元素
[attr$=val]   筛选包含attr属性并且以val结尾的元素
[attr =val]   筛选包含attr属性并且包含val的元素
[attr!=val]   筛选包含attr属性并且不等于val的元素
[attr1][attr2][attr3]   筛选同时包含多个属性的元素
8.表单
:input   选择input、select、textarea标签
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:button
表单状态：
:enabled
:disabled
:checked
:selected
===========================================
二：常用效果：
show() 显示
hide() 隐藏
toggle() 切换显示隐藏

slideDown(time) 展开
slideUp(time) 收起
slideToggle(time) 切换展开收起

fadeIn(time) 淡入
fadeOut(time) 淡出
fadeToggle(time) 切换淡入淡出
fadeTo(time,0.6) 指定透明度达到某个值就停止

animate({属性},time) 自定义动画
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
css属性值逐渐变换，color不可用
delay(1000) 动画延迟执行
stop() 停止动画，停留在当前状态
finish() 立刻完成动画，停留在最终状态
=========================================
三：元素遍历
1.祖先
parent() 父元素
parents() 获取所有祖先元素 parents(选择器) 在所有祖先元素中筛选符合指定选择器的元素
parentsUntil(选择器) 获取祖先元素直到一个指定的元素（不包括）为止
2.后代
children() 获取所有子代元素 children(选择器) 在所有子代元素中筛选符合指定选择器的元素
find(选择器) 必须指定查找的选择器，在所有后代中获取指定元素
3.同胞
prev() 上一个兄弟
prevAll() 获取所有哥哥 prevAll(选择器) 在所有哥哥元素中筛选符合指定选择器的元素
prevUntil(选择器) 获取哥哥直到一个指定的元素（不包括）为止

next() 下一个兄弟
nextAll() 获取所有弟弟 nextAll(选择器) 在所有弟弟元素中筛选符合指定选择器的元素
nextUntil(选择器) 获取弟弟直到一个指定的元素（不包括）为止
siblings() 所有的同胞（不包括自己）
4.筛选
eq(index) 获取集合中指定索引的一项
first() 集合中的第一个
last() 集合中的最后一个
filter(选择器) 在集合中筛选符合指定选择器的元素
not(选择器) 在集合中排除符合指定选择器的元素
has(选择器) 在集合中筛选后代中含有指定选择器的元素的元素
=====================================
四：文档操作
1.内部插入
A.append(B)   在A的末尾插入B
B.appendTo(A)    把B插入到A的末尾

A.prepend(B)    在A的开头插入B
B.prependTo(A)   把B插入到A的开头
2.外部插入
A.after(B)             在A之后插入B
B.insertAfter(A)      把B插入到A之后
A.before(B)           在A之前插入B
B.insertBefore(A)   把B插入到A之前

3.包裹
A.wrap(B)     给A添加父元素B
A.unwrap()    移除A的父元素，无参数

4.替换
A.replaceWith(B)   把A替换成B
B.replaceAll(A)   用B替换A
5.移除
empty()   清空
remove()   移除
6.复制
clone()  克隆   clone(true) 克隆结构以及事件处理函数
========================================
五：属性操作
1.attr(); 设置或获取元素属性（标签属性） setAttribute('flag',1); getAttribute('flag');一般设置自定义属性
2.prop(); 获取或设置DOM对象属性
3.addClass(); 添加类
removeClass(); 移除类
toggleClass(); 切换类
4.html() 相当于innerHTML属性
5.text() 相当于innerText属性
6.val() 获取或设置表单元素的value属性
=====================================
六：核心
$('#box').index();#box的索引值
$('div').index($('#box'))；#box在div类数组中的索引
length   集合的长度
get()   get(index)  获取集合中对应索引的DOM对象   get()  把DOM对象全部获取出来放在数组里面
each()   遍历集合
$('li').each(function (index,item) {//index代表每个对象的索引  函数里的this代表每次遍历的对象
//item  === this,可不写
$(item).prop('id','li'+(index+1));
})
======================================
七：事件
1.常用事件类型：
click()   不传参数代表触发该事件    传一个函数作为参数，代表给这个事件绑定函数
dblclick()
blur()
focus()
change()
submit()
scroll()
mouseover()
mousemove()
mouseout()
mousedown()
mouseup()
keydown()
keyup()
resize()
2.on&off
on()   绑定事件   on('click',function(){});
off()   移除事件
off('事件类型') 移除该事件类型上的所有函数
off('事件类型',fn)    移除该事件类型上的fn
trigger('事件类型')   触发事件

on('事件类型',fn1)  on('事件类型',fn2)  绑定事件
可以做事件委托
on('click','span',function(){this指向改为span})
off('事件类型')  移除该事件的所有处理函数
off('事件类型',fn1) 移除该事件的fn1；
举例：
function fn1(){$(this).css({
width:'100px',height:'200px',
}).addClass('red');}
function fn2(){$(this).css({
border:'3px solid black'})}
$('.box').on('click',fn1);
$('.box').on('click',fn2);
$('.box').off('click',fn1);

$('.box2').on('click',function (event) {
event.target.style.color = 'red';
$(this).css({color:'yellow'})})
=========================================
八：css
1.css() 设置或获取css样式
可以设置一组或多组属性 css('attrName',val); css({ attr1:val,attr2,val })
获取样式 css('attrName');
2.位置
offset()   获取元素距离可视窗口的位移   返回一个对象  {top:100,left:100};
position()    获取元素相对于它定位的参照元素的位移   返回一个对象  {top:100,left:100};
scrollTop()   获取或设置元素垂直方向卷去的高度
scrollLeft()  获取或设置元素水平方向卷去的宽度
回到顶部
$('.ss').scroll(function () {
var res = $(this).scrollTop();
});
$('input').click(function () {
$('.ss').animate({scrollTop:0},400);});
==========================================
九：尺寸
width()    获取元素的width   不带单位
height()   获取元素的height   不带单位
innerWidth()   width+左右padding
innerHeight()   height+上下padding
outerWidth()    width+左右padding+左右border
outerHeight()   height+上下padding+上下border
outerWidth(true) width+左右padding+左右border+左右margin
outerHeight(true)height+上下padding+上下border+上下margin
十：生成插件
$.fn.extend({方法名：function(形参){})