JQ 基础

JQ 选择器

jQuery.com 官网
jQuery 当中最重要且独有的对象：jQuery 对象：$( )
id 选择器：$('#id' )
类选择器：$('.class') // 获取多个元素
元素选择器：$('div' )
后代选择器：$('div>ul>li' )
群组选择器：$('div,ul,ol,li' )

选择器方法：
$('#id').find('p') // 子元素
children ：子元素
next：下一个兄弟
nextAll：后面所有的兄弟
prev：前一个兄弟
prevAll：前面所有的兄弟
nextUntil：向后选直到某个兄弟
prevUntil：向前选直到某个兄弟
siblings：同级上下所有元素
eq（0）：索引

.filter（‘xx’）：选择对应项
.middle：class 为 middle 的元素
：even：偶数项
：odd：奇数项

JQ 文本 – 获取与设置

html（）等同于js 中的 innerHTML 属性

$（'.box'）.html（）  // 获取
$（'.box'）.html（'hello'）  // 设置

text（）等同于js 中的 innerText 属性

$（'.box'）.text（）  // 获取
$（'.box'）.text（'hello'）  // 设置

val（）等同于js 中的 value 属性

$（'#inp'）.val（）  // 获取
$（'#inp'）.val（'hello'）  // 设置

JQ 元素属性的操作

attr（）：（‘属性名’，‘属性值’）

$（'#box'）.attr（'id'）  // 获取
$（'#box'）.attr（'id','bb'）  // 设置

同时获取或设置多个属性

$（'#box'）.attr（{
    id:'nical',
    class:'red',
    name:'hello'
}）

通过回调函数设置属性

$（'#box'）.attr（'class',function(index,value){
    var v = index + value + 'hello'
    return v  // 返回值
}）

回调函数有两个可选的参数：
index：元素的索引
value：属性原本的值

JQ 元素样式的操作 css（）

$（'#box'）.css（'height'）  // 获取样式
$（'#box'）.css（'height','200'）  // 设置修改

// jQ 元素设置尺寸时不给单位，默认使用 px
同时设置多个 css 属性

$（'#box'）.css（{
    height：200，
    color：'red'
}）

通过回调函数设置 css 属性

$（'#box'）.css（'width',function(index,value){
    console.log(value);
    return paseInt(value)-800;  // 返回值
}）

JQ 元素 class 类样式

添加 class 类

$（'div'）.addClass（"one"）  
$（'div'）.addClass（"one two"）  // 添加多个

删除 class 类

$（'div'）.removeClass（"one")

有无切换

$（'div'）.toggleClass（"one")

// 在默认样式与指定类样式之间进行切换
toggleClass(类名，boolean）
// 当 boolean 为 true 时，添加类名
// 当 boolean 为 false时，删除类名
例如：

var i = 10;
$('div').toggleClass('three',i-->5);

支持回调函数，把函数返回值作为类名进行添加删除

$('div').toggleClass(function（）{
    return 'three'
}

例子：

var count = 0;
$('div').click(function(index,className,swichBool){
    alert(index + ',' + className + ';' + swichBool);
    return $(this).hasClass('red')?'blue':'redsize';
},count++ % 3 == 0);

index：索引
class 类两个参数
及频率布尔值

JQ 元素位置

offset（）：获取元素相对于浏览器窗口的位置
position（）：获取元素相对父元素的位置（父元素应设置定位）
获取滚动条隐藏部分的高度

$(document).scrollTop()  // 垂直滚动条 获取
$(document).scrollTop(0)  // 垂直滚动条 设置
$(document).scrollLeft()  // 水平滚动条 获取
$(document).scrollLeft(0)  // 水平滚动条 设置

DOM节点操作

创建节点

var d = $('<div><div>')

插入节点，给元素追加子节点

$('body').append(d)

移动节点，把 box1 移动到 box2 里面，作为最后一个子元素

$('#box1').appendTo($('#box2'))

把节点追加到 body 内作为第一个子节点

$('body').prepend(d)

把 box1 移动到 box2 内做第一个子元素 / 节点

$('#box1').prependTo($('#box2'))

给 box3 之后添加一个兄弟元素 a

$('#box3').after($('<a>点我</a>'))

把 box3 移动到 box1 之后做兄弟节点

$('#box3').insertAfter($('#box1'))

给 box3 之前添加一个兄弟元素 a

$('#box3').before($('<a>点我</a>'))

把 box3 移动到 box1 之前做兄弟节点

$('#box3').insertBefore($('#box1'))

复制节点：clone（true）
删除节点：remove（）
清空节点：empty（）
替换节点：
replaceWith（） // 前者替换成后者
replaceAll（） // 后者替换成前者

绑定事件

可以绑定多次事件

1、事件名 + 函数

$('document').click(function(){ })

click（）：单击事件
dbclick（）：双击事件
mouseover（）：鼠标移入
mouseout（）：鼠标移出
mousedown（）：鼠标按下
mouseup（）：鼠标抬起
mouseenter（）：鼠标进入
mouseleave（）：鼠标离开
focus（）：获取焦点
blur（）：失去焦点
change（）：文本框内容改变
input（）：文本框输入

2、on（）绑定事件
on（‘事件名’，函数）

$('document').on('click',function(){ })

hover（）相当于 css 的 hover 伪类

$('#box').hover(function(){ },function(){ })
// hover(鼠标进入执行的函数，鼠标离开执行的函数）

事件对象

1、event对象 属性（e）
type ：事件类型
target ：绑定事件的 DOM 元素
data ：获取事件调用时的额外数据
relatedTarget ：获取移入移出目标点，离开或进入的那个 DOM
currentTarget ：获取冒泡前触发的 DOM 元素等同 this
pageX / pageY：获取相对于页面原点的水平 / 垂直坐标
screenX / screenY：获取屏幕位置的水平 / 垂直坐标
clientX / clientY：获取相对页面视口的水平 / 垂直坐标
result：获取上一个相同事件的返回值
timeStamp：获取事件触发的时间戳
witch：获取按键，鼠标，键盘
altkey / shiftkey / ctrlkey / metakey：获取是否按下 alt / shift / ctrl / meta 键

2、冒泡和默认行为
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。
阻止事件冒泡
event.stopPropagation（）
阻止元素默认事件
event.preventDefault（）
例如：

<div>
    <input type = "button" value = "按钮" />
</div>
$('input').click(function(e) {
    alert('触发了');
    e.stopPropagation( );
})

// 禁止提交表单跳转
$('form').submit(function(e){
    e.preventDefault( );
})

// 同时阻止冒泡和默认行为
$('a').click(function(e){
    return false;
})

JQ 动画

1、显示、隐藏
show（）：显示
hide（）：隐藏
toggle（）：显示隐藏之间切换
可选参数：（时间ms 动画效果 回调函数）
时间：slow（600ms） normal（400ms）fast（200ms）
jquery.easing：引入扩展文件，添加动画效果曲线

2、滑动、卷动
slideUp（）：向上卷
slideDown（）：向下卷
slideToggle（）：上下切换
参数同上

3、淡入、淡出
fadeIn（）：淡入
fadeOut（）：淡出
fadeToggle（）：出入切换
参数同上

fadeTo（）：淡入淡出
如果本身透明度大于指定值时淡出
如果本身透明度大于指定值时淡入
参数：（时间，0 – 1）

4、自定义动画
animate（）
参数：（对象，时间，曲线，回调函数）
例如：

$('#box').click(function(){
    $(this).animate({
        'width':300,
        'height':"+=100px"
    },100,ease-in,function(){
        alert("hello")
    })
})

实现位移动画
必须先设置 css 绝对定位

5、停止动画
stop（）
参数（true，true） // false
是否清空未执行完的动画列队，是否跳转到结束状态。

6、延时动画
delay（）
参数（时间）
例如：

$('#box').click(function(){
    $(this).animate({
        'width':300,
        'height':"+=100px"
    },1000).delay(3000).animate({
        'width':200,
        'height':"-=100px"
    },2000)
})

选中正在执行动画的元素
xx：animated

JQ数据操作

字符串操作
$.trim（）：去掉字符串两边的空格

var str = ' jquery ';
alert(str);
alert($.trim(str));

数组对象操作
$.each（）：遍历

var array = ['hello','jq','js'];
$.each(array,function(index,element){
    alert(index);
    alert(element);
})
或：
$(array).each(function(index,element){ });

$.grep（）：数据筛选

var arr = [5,2,9,4,11,57,89,8];
arrGrep = $.grep(arr,function(index,element){
    return element<6 && index<5;    
});
alert(arrGrep);

$.map（）：修改数据
$.inArray（）：获取查找到元素的下标，从0开始
$.merge（）：合并两个数组
$.unique（）：删除重复的 DOM 元素
.toArray（）：合并多个 DOM 元素为数组

测试工具函数

$.isArray（obj）：判断是否为数组对象
$.isFunction（obj）：判断是否为函数
$.isEmptyObject（obj）：判断是否为空对象
$.isPlainObject（obj）：判断是否为纯粹对象
$.contains（obj）：判断 DOM 节点是否含另一个 DOM 节点
$.type(data)：判断数据类型
$.isNumeric（data）：判断数据是否为数值
$.isWindow（data）：判断数据是否为 window 对象

URL操作
$.param（）
将对象的键值对转化为 URL 字符串键值对