jquery 菜鸟笔记

记录笔者日常学习笔记，无深解内容，除了笔者无人看懂。
jquery begin
jquery:库，框架
库：别人写好的，咱只负责用
原生js:使用系统提供api，自己封装，自己写

用库的原则：
一般情况，都使用一些低版本
1.7 稳定版
1.6
1.8

版本：
1.x 使用中国地区 兼容低版本IE IE6
2.x 使用国外 兼容高版本浏览器 IE9+

准备：

1. 库：http://code.jquery.com/jquery-1.7.2.js
2. 帮助手册

步骤：

1. window.onload
2. 获取元素
3. 加事件

$(function(){

});

				js		jquery

页面加载完毕 window.onload $(function(){//code});
获取元素 getElementById $('#btn1');
事件 obj.onclick click(function(){});

jquery本身js，不存在jquery能实现，js实现不了
jquery帮你解决很多兼容性问题，本身也有很多bug

获取元素：
如果获取元素的时候名称中有. [] () 在用jq获取元素的时候就需要转义一下 用\
css里面选择器:
\((document)//选择整个文档对象 \)('#myId')//选择ID为myId的网页元素
\(('div.myClass')//选择class为myClass的div元素 \)('input[name=first]')//选择name属性等于first的input元素

伪类：(注意子级也会受到影响)
:first 和:last 最常见的用法：与其他元素一起使用，选取指定组合中的第一个元素
\(('div a:first')//div a 选取的是所有div下的a ，然后再选取first \)('a:first')//选择网页中第一个a元素

:odd :even
选择器选取每个带有奇数 index 值的元素（比如 1、3、5）。
index 值从 0 开始，所有第一个元素是偶数 (0)。
最常见的用法：与其他元素/选择器一起使用，来选择指定的组中奇数序号的元素
$('tr:odd')//选择表格的奇数行

:eq(n) 等于第n个元素 只匹配一个元素 $('li:eq(4)') $(".box div:eq(1)") .box下的第二个div
:lt(n) 小于第n个元素不包括第n个元素 $('li:lt(4)')
:gt(n) 大于第n个元素不包括第n个元素 $('li:gt(2)')

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的
\(('ul li:nth-child(2)') ul 下的第二个li（nth-child方法的index是从1开始的，需要注意一下） \)(':nth-child') 会给每一个父元素匹配子元素
:nth-child(even) 能选取每个元素下的索引值是偶数的元素
:nth-child(odd) 能选取每个元素下的索引值是偶奇数的元素
:nth-child(2) 能选取每个元素下的索引值等于2的元素
:nth-child(3n) 能选取每个元素下的索引值是3的倍数的元素，这里n从0开始
:nth-child(3n+1) 能选取每个元素下的索引值是3n+1的倍数的元素，这里n从0开始

:first-child 匹配第一个子元素
':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
$('ul li:first-child') 选取每个ul中第一个li元素
:last-child 将为每个元素匹配最后一个子元素

:only-child 将为每个元素匹配第一个子元素(只有一个子元素的父级)
$('ul li:only-child') 在ul中选取是唯一子元素的li元素

\(('div:visible') //选择可见的div元素 \)('div:animated')//选择当前处于动画状态的div元素
属性选择器
inputtype='button' -> $('input[value=aaa]')(兼容IE6)

包含：
:has(元素); $('div:has(input[value=aaa])')有input的value等于aaa的div
:not(条件) 不包含某个条件的元素
:contains(内容文本); $('div:contains(h3)')内容中包含h3这个文本的div
:empty $('div:empty') 选取不包含子元素或者不包含文本元素的空div
:parent $('div:parent') 选取拥有子元素或者拥有文本元素的div

:hidden \((':hidden') 选取所有不可见的元素，包括input='hidden' , div style="display:none" ,div style="visibility:hidden" 如果执行选取input元素 可以使用\)('input:hidden')
:visible $('div:visible') 选取所有可见的div元素

\(('div[id]') 选取拥有属性id的div元素 \)('div[title=test]') 选取属性title为test的div元素
\(('div[title!=test]') 选取属性title不等于test的div元素（注意没有属性title的div也会被选取） \)('div[title^=test]') 选取属性title以test开始的div元素
\(('div[title\)=test]') 选取属性title以test结束的div元素
\(('div[title*=test]') 选取属性title含有test的div元素 \)('div[id][title$=test]') 选取拥有属性id 并且属性title以test结束的div元素

选择元素时候的空格不能少，会产生严重偏差，需要注意一下
\(('.test :hidden') 选取class为test的元素里面的隐藏元素 \)('.test:hidden') 选取隐藏的class为test的元素

\(('div span') div下的所有子元素包含多级子级孙级子孙级 \)('div > span') div下的一级span子元素
\(('.one + div') 选取class为one的下一个div元素 \)('#one ~ div') 选取id为two的元素后面的所有div兄弟元素

表单对象属性操作
:enabled 选取所有可用元素 $('#form1 :enabled') 选取id为form1的表单内的所有可用元素
:disabled 选取所有不可用元素 $('#form2 :disabled') 选取id为form2的表单内的所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框） $('input:checked') 选取所有被选中的input元素
:selected 选取所有被选中的选项元素（下拉列表） \(('select:selected') 选取所有被选中的选项元素 \)('#form1 input:enabled').val('这里变化了'); 改变表单内可以使用的input元素的value值
\(('#form1 input:disabled').val('这里变化了'); 改变表单内不可以使用的input元素的value值 \)('input:checked').length 获取多选框选中的个数
\(('select:selected').text() 获取下拉框选中的内容 \)('#select1 option:selected').text() 获取下拉框选中的内容
\((':input') 选取所有input,textarea,select,button元素 \)(':text') 选取所有的单行文本框
\((':password') 选取所有的密码框 \)(':radio') 选取所有的单选框
\((':checked') 选取所有的复选框框 \)(':submit') 选取所有的提交按钮
\((':image') 选取所有的图像按钮 \)(':reset') 选取所有的重置按钮
\((':button') 选取所有的按钮 \)(':file') 选取所有的上传域
$(':hidden') 选取所有的不可见元素

二、改变结果集
如果选中多个元素，jQuery提供过滤器，可以缩小结果集：

1 $('div').has('p'); //选择包含p元素的div元素
2 $('div').not('.myClass'); //选择class不等于myClass的div元素
3 $('div').filter('.myClass'); //选择class等于myClass的div元素
4 $('div').first(); //选择第1个div元素
5 $('div').eq(5); //选择第6个div元素
6 \(('p').find("span') 在p下查找span元素 与\)('p span')相同

有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

1 $('div').next('p'); //选择div元素后面的第一个p元素
2 $('div').parent(); //选择div元素的父元素
3 $('div').closest('form'); //选择离div最近的那个form父元素
4 $('div').children(); //选择div的所有子元素不包括孙级元素,但是要注意选择的范围，
5 $('div').find(); //选择div的所有子元素包括孙级元素，注意集合范围，必填参数，否则找不到条件
6 $('div').siblings(); //选择div的同级元素

三、元素的操作：取值和赋值

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

jQuery使用同一个函数，来完成取值(getter)和赋值(setter)。到底是取值还是赋值，由函数的参数决定。

01 $('h1').html(); //html()没有参数，表示取出h1的值
02 $('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
03 常见的取值和赋值函数如下：
04 .html() 取出或设置html内容
05 .text() 取出或设置text内容
06 .attr() 取出或设置某个属性的值
07 .width() 取出或设置某个元素的宽度
08 .height() 取出或设置某个元素的高度
09 .val() 取出某个表单元素的值
10 .outerHTML 取出元素html内容包括元素标签

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值;取值的时候，则是只取出第一个元素的值(.text()例外，它取出所有元素的text内容)。

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

1 $('div')
2 .find('h3')
3 .eq(2)
4 .html('Hello')
5 .end()//退回到选中所有的h3元素的那一步
6 .eq(0)//选中第一个h3元素
7 .html('World'); //将它的内容改为World

四、元素的操作：移动

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对

1 .insertAfter()和.after()：在现存元素的外部，从后面插入元素
2 .insertBefore()和.before()：在现存元素的外部，从前面插入元素
3 .appendTo()和.append()：在现存元素的内部，从后面插入元素
4 .prependTo()和.prepend()：在现存元素的内部，从前面插入元素

五、元素的操作：复制、删除和创建

复制元素使用.clone()。

删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容(但是不删除该元素)使用.empty()。

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

\(('<p>Hello</p>'); \)('

new list item

');
$('ul').append('

list item

');

六、工具方法

除了对选中的元素进行操作以外，jQuery还提供一些工具方法(utility)，不必选中元素，就可以直接使用。

如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例(即选中元素)后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。

常用的工具方法有以下几种：
1 $.trim() 去除字符串两端的空格。
2 $.each() 遍历一个数组或对象。
3 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
4 $.grep() 返回数组中符合某种标准的元素。
5 $.extend() 将多个对象，合并到第一个对象。
6 $.makeArray() 将对象转化为数组。
7 $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
8 $.isArray() 判断某个参数是否为数组。
9 $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
10 $.isFunction() 判断某个参数是否为函数。
11 $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
12 $.support() 判断浏览器是否支持某个特性。

七、事件操作
jQuery可以对网页元素绑定事件。根据不同的事件，运行相应的函数。

$('p').click(function(){
alert('Hello');
});

目前，jQuery主要支持以下事件：
1 .blur() 表单元素失去焦点。
2 .change() 表单元素的值发生变化
3 .click() 鼠标单击
4 .dblclick() 鼠标双击
5 .focus() 表单元素获得焦点
6 .focusin() 子元素获得焦点
7 .focusout() 子元素失去焦点
8 .hover() 同时为mouseenter和mouseleave事件指定处理函数
9 .keydown() 按下键盘（长时间按键，只返回一个事件）
10 .keypress() 按下键盘（长时间按键，将返回多个事件）
11 .keyup() 松开键盘
12 .load() 元素加载完毕
13 .mousedown() 按下鼠标
14 .mouseenter() 鼠标进入（进入子元素不触发）
15 .mouseleave() 鼠标离开（离开子元素不触发）
16 .mousemove() 鼠标在元素内部移动
17 .mouseout() 鼠标离开（离开子元素也触发）
18 .mouseover() 鼠标进入（进入子元素也触发）
19 .mouseup() 松开鼠标
20 .ready() DOM加载完成
21 .resize() 浏览器窗口的大小发生改变
22 .scroll() 滚动条的位置发生变化
23 .select() 用户选中文本框中的内容
24 .submit() 用户递交表单
25 .toggle() 根据鼠标点击的次数，依次运行多个函数
26 .unload() 用户离开页面

以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

$('input').bind(
'click change'， //同时绑定click和change事件
function(){
alert('Hello');
}
);

如果你只想让事件运行一次，这时可以使用.one()方法。

$("p").one("click"， function(){
alert("Hello"); //只运行一次，以后的点击不会运行
});

.unbind()用来解除事件绑定。
$('p').unbind('click');

所有的事件处理函数，都可以接受一个事件对象(event object)作为参数，比如下面例子中的e：

$("p").click(function(e){
alert(e.type); //"click"
});

这个事件对象有一些很有用的属性和方法：
event.pageX 事件发生时，鼠标距离网页左上角的水平距离
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型(比如click)
event.which 按下了哪一个键
event.data 在事件对象上绑定数据，然后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() 停止事件向上层元素冒泡

在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：
\(('a').click(function(){ if (\)(this).attr('href').match('evil')){//如果确认为有害链接
e.preventDefault(); //阻止打开
$(this).addClass('evil'); //加上表示有害的class
}
});

有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

\(('a').click(); \)('a').trigger('click');

八、特殊效果

jQuery允许对象呈现某些特殊效果。
$('h1').show(); //展现一个h1标题

常用的特殊效果如下：

1 $('h1').show(); //展现一个h1标题
2 常用的特殊效果如下：
3 .fadeIn() 淡入
4 .fadeOut() 淡出
5 .fadeTo() 调整透明度
6 .hide() 隐藏元素
7 .show() 显示元素
8 .slideDown() 向下展开
9 .slideUp() 向上卷起
10 .slideToggle() 依次展开或卷起某个元素
11 .toggle() 切换 ()可以放多个函数，分别代表第一次点击执行的函数，第二次执行的函数...以此类推
.focus(); 获得焦点时的事件
.blur(); 失去焦点时的事件
.hover(fn,fn2); 移入函数，移除函数

除了.show()和.hide()，所有其他特效的默认执行时间都是400ms(毫秒)，但是你可以改变这个设置。

1 $('h1').fadeIn(300); // 300毫秒内淡入
2 $('h1').fadeOut('slow'); //缓慢地淡出

在特效结束后，可以指定执行某个函数。

\(('p').fadeOut(300, function(){\)(this).remove(); });

更复杂的特效，可以用.animate()自定义。

$('div').animate(
{
left : "+=50"，//不断右移
opacity : 0.25 //指定透明度
},
300,// 持续时间
function(){ alert('done!'); }//回调函数
);

.stop()和.delay()用来停止或延缓特效的执行。

$.fx.off如果设置为true，则关闭所有网页特效。

*用animate就一定要加上stop,slideDown、slideUp也是，如果防止bug出现就加上stop
.animate({width:'300px'},100) 可以加时间
.animate({width:'+=300px'},100) 在300基础上累加300
startMove(obj,{width:300});
animate(params,[speed],[easing],[fn]) [speed]代表可选参数，params是必选参数
if(!\((element).is('animated')){ //判断是否处于动画状态 如果没有处于动画状态，添加新动画 } //animate() : 类似于 startMove() //第一个参数 : json(属性和目标点) //第二个参数 : 时间 ( 根据时间来控制物体的快慢 ) 默认 : 400 //第三个参数 : 运动形式( 就有两种 : 默认 : swing(慢快慢) , linear(匀速) ) //第四个参数 : 回调函数 //\)('#div1').stop(); //默认情况下 : 只会停止当前运动
//\(('#div1').stop(true); //第一参 : 可以阻止后续运动 //\)('#div1').stop(true,true); //第二参 : 当前值立即到指定目标点
$('#div1').finish(); // 让所有值立即到达目标点

.slideToggle() 切换一个元素高度的动画事件，可以设置速度
.fadeTo() 切换一个元素透明度的动画事件 可以设置速度和固定透明度，透明度是小数

缓存变量
DOM遍历是昂贵的，所以尽量将会重用的元素缓存。

// 糟糕

h = \(('#element').height(); \)('#element').css('height',h-20);

// 建议

$element = $('#element');
h = \(element.height(); \)element.css('height',h-20);

避免全局变量
jQuery与javascript一样，一般来说,最好确保你的变量在函数作用域内。

// 糟糕

$element = $('#element');
h = \(element.height(); \)element.css('height',h-20);

// 建议

var $element = $('#element');
var h = \(element.height(); \)element.css('height',h-20);

使用匈牙利命名法
在变量前加$前缀，便于识别出jQuery对象。

// 糟糕

var first = $('#first');
var second = $('#second');
var value = $first.val();

// 建议 - 在jQuery对象前加$前缀

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

使用 Var 链（单 Var 模式）
将多条var语句合并为一条语句，我建议将未赋值的变量放到后面。

var
$first = $('#first'),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};

请使用'On'
在新版jQuery中，更短的 on("click") 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后，on() 附加事件处理程序的首选方法。然而，出于一致性考虑，你可以简单的全部使用 on()方法。

// 糟糕

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px solid red');
})

// 建议
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
})

$first.on('hover',function(){
$first.css('border','1px solid red');
})

精简javascript
一般来说,最好尽可能合并函数。

// 糟糕

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

// 建议

$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});

链式操作
jQuery实现方法的链式操作是非常容易的。下面利用这一点。

// 糟糕

\(second.html(value); \)second.on('click',function(){
alert('hello everybody');
});
\(second.fadeIn('slow'); \)second.animate({height:'120px'},500);

// 建议

\(second.html(value); \)second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

维持代码的可读性
伴随着精简代码和使用链式的同时，可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。

// 糟糕

\(second.html(value); \)second.on('click',function(){
alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// 建议

\(second.html(value); \)second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);

选择短路求值
短路求值是一个从左到右求值的表达式，用 &&（逻辑与）或 || （逻辑或）操作符。

// 糟糕

function initVar(\(myVar) { if(!\)myVar) {
$myVar = $('#selector');
}
}

// 建议

function initVar($myVar) {
$myVar = $myVar || $('#selector');
}

选择捷径
精简代码的其中一种方式是利用编码捷径。

// 糟糕

if(collection.length > 0){..}

// 建议

if(collection.length){..}

繁重的操作中分离元素
如果你打算对DOM元素做大量操作（连续设置多个属性或css样式），建议首先分离元素然后在添加。

// 糟糕

var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;

$element = $containerLi.first();
//... 许多复杂的操作

// better

var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach();
//... 许多复杂的操作

\(container.append(\)element);

熟记技巧
你可能对使用jQuery中的方法缺少经验,一定要查看的文档，可能会有一个更好或更快的方法来使用它。

// 糟糕

$('#id').data(key,value);

// 建议 (高效)

$.data('#id',key,value);

使用子查询缓存的父元素
正如前面所提到的，DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。

// 糟糕

var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');

// 建议 (高效)

var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

避免通用选择符
将通用选择符放到后代选择符中，性能非常糟糕。

// 糟糕

$('.container > *');

// 建议

$('.container').children();

避免隐式通用选择符
通用选择符有时是隐式的，不容易发现。

// 糟糕

$('.someclass :radio');

// 建议

$('.someclass input:radio');

优化选择符
例如，Id选择符应该是唯一的，所以没有必要添加额外的选择符。

// 糟糕

\(('div#myid'); \)('div#footer a.myLink');

// 建议
\(('#myid'); \)('#footer .myLink');

避免多个ID选择符
在此强调，ID 选择符应该是唯一的，不需要添加额外的选择符，更不需要多个后代ID选择符。

$('#outer #inner');

// 建议

$('#inner');

坚持最新版本
新版本通常更好：更轻量级，更高效。显然，你需要考虑你要支持的代码的兼容性。例如，2.0版本不支持ie 6/7/8。

摒弃弃用方法
关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。

// 糟糕 - live 已经废弃

$('#stuff').live('click', function() {
console.log('hooray');
});

// 建议
$('#stuff').on('click', function() {
console.log('hooray');
});
// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

• jquery与js混编

this -> \((this); .css() 样式操作 jq一样获取不了background符合类型样式 css(name); getStyle() css(name,value) css({name:value,name2,value2...}) \)(this).css('background') 获取样式
\((this).css('background','blue'); 设置一个样式 \)(this).css({background:'blue',width:'300px'}); 设置一组样式

.attr() 属性 设置、获取自定义属性，用法同css
attr(name); 获取属性
attr(name,value); 设置属性，如果设置同一个属性，后面的会覆盖前面的，所以如果要追加class就用addClass
attr({name:value,name2:value2}); 批量设置属性

删除某个元素的特定属性
.removeAttr() $('p').removeAttr('title'); 删除p元素的属性title

获取物体内容：
.html() 获取非表单元素.innerHTML
\((this).html() 获取innerHTML(包括<strong>标签) \)(this).html('asdfasdfdas'); 设置innerHTML

.val(); 获取表单元素.value
$(this).val()
.text() 纯文本 innerText(不包括<strong>标签)

class相关:
.addClass() 添加className $(this).addClass('on') 添加on样式名
.hasClass() $(this).hasClass('blue') 检测是否含有blue这个样式，用于检测是否含有指定样式名，有的话返回true 这其实就是is("." + class)，尽量用hasClass，性能更高一点

.removeClass() 删除className $(this).removeClass('on');移除on样式名,如果同时移除多个class,可以直接写在''里 注意加空格
.toggleClass()
重复切换类名，如果存在则删除它，如果不存在则添加它

选项卡:

1. 先清空
2. 当前显示
   \((this) this \)(this).index(); this.index
   aCon.eq(n) -> aCon.eq($(this).index());

DOM操作：
创建元素：
\(('#div1'); \)(function(){});
$('

'); 创建元素
插入：可以用于添加新内容，也可以用于标签换位
内部：
appendTo(父级); 往后面添加 \(('<div>div1</div>').appendTo(\)('body')); //新添加的在最后，在body的最后插入'

div1

'内容
prependTo(父级); 往前面添加 \(('<div>div1</div>').prependTo(\)('body')); //新添加的在开头，在body的开始插入'

div1

'内容

外部：
insertBefore(父级); 外面的前面添加 //新添加的在最后 $('p').insertBefore('你好'); 在每个匹配的p元素外部的前面追加'你好'内容
insertAfter(父级); 外面的后面添加 //新添加的在开始 $('p').insertAfter('你好'); 在每个匹配的p元素外部的后面追加'你好'内容

append() $('p').append('你好'); 在每个匹配的p元素内部的最后追加'你好'内容
prepend() $('p').prepend('你好');在每个匹配的p元素内部的开始追加'你好'内容
after() $('p').after('你好'); 在每个匹配的p元素外部的后面追加'你好'内容
before() $('p').before('你好'); 在每个匹配的p元素外部的前面追加'你好'内容
删除：
.remove();删除#box元素 \(('#box').remove(); \)('ul li').remove('li[title!=菠萝]')将li元素中属性title不等于菠萝的li元素删除
//detach()跟remove()的区别 : 会保留之前的操作行为、事件
.parent() 某个元素的父级
//parents() : 获取所有的祖先节点,参数：筛选的功能

//closest() : 找最近的祖先节点(包括自身) , 必须要写参数 , 只能找到一个符合条件的

清空：
.empty() 清空节点，和remove效果稍有不同
$('ul li:eq(1)').empty() 获取第二个li元素节点后，清空此元素里的内容，注意是元素里，外面的标签元素还会存在的

克隆：
复制节点的时候如果需要新元素也具有复制功能（元素身上的事件）用 .clone(true) ,不写true就不会复制事件
不写参数：会有兼容性 一个布尔值 : true : 会复制子节点 false : 不会复制子节点

替换：
<p title='选择你最喜欢的水果.'>你最喜欢的水果是？</p>  替换成  <strong>你最不喜欢的水果是？</strong>
$('p').replaceWith('<strong>你最不喜欢的水果是？</strong>')
$('<strong>你最不喜欢的水果是？</strong>').replaceAll('p')
最终效果两个是一样的，另外需要注意，如果在替换之前，已经为元素绑定事件了，替换后，原先绑定是事件和被替换的元素一起消失，需要在新元素上重新绑定事件

包裹：
$('strong').wrap('<b></b>');用b把strong元素包裹起来
<strong>你最不喜欢的水果是？</strong>   
<strong>你最不喜欢的水果是？</strong>
最后变成： 
<b><strong>你最不喜欢的水果是？</strong></b>   
<b><strong>你最不喜欢的水果是？</strong></b>

$('strong').wrapAll('<b></b>');用b把strong元素包裹起来
<strong>你最不喜欢的水果是？</strong>   
<strong>你最不喜欢的水果是？</strong>
最后变成： 
<b>
<strong>你最不喜欢的水果是？</strong>   
<strong>你最不喜欢的水果是？</strong>
</b>

$('strong').wrapInner('<b></b>');用b把strong元素内的东西包裹起来
<strong>你最不喜欢的水果是？</strong>   
<strong>你最不喜欢的水果是？</strong>
最后变成： 
<strong><b>你最不喜欢的水果是？</b></strong>   
<strong><b>你最不喜欢的水果是？</b></strong>

//unwrap() : 删除包装 ( 删除的是父节点 , 不能删body )

.has() 用于筛选包含条件的元素
.not() 用于筛选不符合条件的元素
.filter() 用于筛选符合条件的元素
.slice() 截取指定元素的范围
.size() 像length属性
.children('a') 某个元素下面的a子元素
.children() 获取某个元素下面的子元素，不会考虑二级子元素
.prev() 获得某个元素前面紧邻的同辈元素
.prevAll() 查找当前元素之前所有的同辈元素
.next() 获得某个元素后面紧邻的同辈元素
.nextAll() 查找当前元素之后所有的同辈元素
.nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
.siblings() 某个元素的兄弟节点
\(('div:first').nextAll().addClass('after'); 给第一个div之后的所有元素加个类 \)('input:not(:checked)') 查找所有未选中的 input 元素
\((':header') 网页中所有的h1-h6标签 \)('div:animated') div中所有正在执行动画效果的元素
$('div:not(:animated)') div中所有没用动画效果的元素

事件：
原生： obj.onclick
obj.addEventListener();
jquery里面所有的事件都是绑定！

.click();
.hover();
.toggle();
.trigger('事件名称');
页面加载后模拟用户操作,也可以传参,参数是以数组形式传递的:
$('#btn').bind('myClick',function(event,mesg1,mesg2){

});
$('#btn').trigger('myClick',['自定义属mesg1','自定义mesg2']);

.triggerHandler('事件名称'); 这个只会执行操作，但是会阻止浏览器默认行为

三元运算：
$(this)条件?结果1:结果2;

过滤数组中小于 0 的元素。
$.grep( [0,1,2], function(n,i){
return n > 0;
});

排除数组中大于 0 的元素，使用第三个参数进行排除。
$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);

绑定：
创建出来的元素：未来元素

bind(事件名,fn); 给现有的元素加事件，事件名不加on
$('#box').bind('mousewheel',function(){
alert(1);
});

$('#btn1').bind('click',show);	

live(事件名,fn); 相当于事件委托，用法和bind一样，既可以给现有元素加事件还可以给未来的元素加事件

.one(事件名,fn)
如果绑定一个函数只需执行一次，然后就解绑，可以用这个函数

.on() 可以给未来元素加事件等同于live，官方推荐用这个，高级版本删除live方法了 .
on("click dblclick mouseover mouseout", function(){});可以给一个元素加多个事件，执行同一个函数
.off() 等同于die，官方推荐用这个，高级版本删除die方法了

解绑定：解不了匿名函数
unbind(); 危险，把身上所有的事件都干掉了
unbind(事件名,fn); 解绑定
$('#btn1').unbind('click',function(){
alert(1);
});

$('#btn1').unbind('click',show);

die();用法同unbind
die(事件名,fn);

.delegate(加事件的元素，加什么事件，fn) 这个可以给指定父级下的某个元素加事件，和live一样可以给未来元素加事件，但是这个性能更高，可以外面套个函数元素通过传参进来，这个也比live好
$('ul').delegate('a','click',function(){});
.undelegate() 删除由delegate添加的事件

事件对象：
原生：var oEvent=ev || event;
jquery: ev 兼容所有浏览器
$(document).click(function(ev){
alert('x: '+ev.clientX+', y: '+ev.clientY);
});

.pageX;光标相对于页面x坐标
.pageY;光标相对于页面y坐标

阻止冒泡 | 阻止默认事件：return false

return fasle可以解绑两个事件，但是不好最好用各自特有的方法好点

只想阻止冒泡：
	ev.stopPropagation();	

eg:$('#btn1').click(function(ev){
	alert('btn1');
	ev.stopPropagation();	
});

阻止默认事件：

只想阻止默认事件：
	ev.preventDefault();

eg:$(document).contextmenu(function(ev){
	alert('document');
	ev.preventDefault()	
});

event.target(); 获取到触发事件的元素
event.relatedTarget(); 相关元素，jq做了兼容，在mouseover中相当于IE中的event.fromElement(),在mouseout中相当于IE的event.toElement()

mouseover:也有bug
mouseout:也有bug

mouseenter:
mouseleave:

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

	eg:$('#div1').mouseenter(function(){
		alert('over');	
	});	

物体：

.width(); -> getStyle()
.height();
上面两个括号中没有内容就是获取(获取时候是纯数字，不带单位)，有数字没单位就是设置单位是px，有单位有数字就是按参数走
.outerWidth() -> offsetWidth(浏览器放大缩小会影响获取数据情况) width+padding+border
.outerHeight() -> offsetHeight height+padding+border

.innerWidth() -> width+padding
.innerHeight() -> height+padding

滚动距离：
.scrollTop() 获取元素的滚动条距顶端的距离
.scrollLeft() 获取元素的滚动条距左端的距离
还可以进行设置滚动条的距离，传入参数即可，不要加单位

jQuery简易的返回顶部效果
$('html, body').animate({scrollTop: 0});

距离：

.position().left -> offsetLeft 到有定位父级的距离（不包含自身的margin）
.position().top -> offsetTop 到有定位父级的距离（不包含自身的margin）

.offset().left -> getPos();
.offset().top -> getPos();

有定位的父元素 obj.offsetParent()
结构上的父级 obj.parent()

.find() 搜索与条件相符的元素
oUl.find('li').css('background','red');oUl中的li变成红色

链式操作：$(this).css('width','300px').animate({left:'300px'}).animate({top:'300px'}).css('height','300px').css('background','blue');

转化：（因为jq对象不能使用DOM方法，如果对jq方法不熟悉，或者没有想用的封装函数，不得不用DOM对象的时候就需要进行对象转换）
原生对象 -> jquery对象

$('div');

原生对象 -> jquery对象
$(this)
$(oDiv);
$(可以放任何东西);

jquery对象 -> 原生对象(这个是下标，不一定是0，元素是第几个下标就写几)
方法一： $('div')[0]
方法二： $('div').get(0);

可视区的宽高
\((window).width() \)(window).height()

内容的宽高
\((document).width() \)(document).height()

\((window).height(); //浏览器时下窗口可视区域高度 \)(document).height(); //浏览器时下窗口文档的高度
\((document.body).height();//浏览器时下窗口文档body的高度 \)(document.body).outerHeight(true);//浏览器时下窗口文档body的总高度包括border padding margin
\((window).width(); //浏览器时下窗口可视区域宽度 \)(document).width();//浏览器时下窗口文档对于象宽度
\((document.body).width();//浏览器时下窗口文档body的高度 \)(document.body).outerWidth(true);//浏览器时下窗口文档body的总宽度包括border padding margin

$.trim()过滤首尾空格

	var str='   asdf   asdf   asdf  ddfd   ';
	alert('('+$.trim(str)+')');	

str.replace(/^\s+|\s+$/g,'');

判断浏览器
\(.browser 检测内核(返回true 或者undefind) \).browser.mozilla 火狐
\(.browser.msie IE \).browser.webkit Chrome

$.isArray();//判断是否是数组

.extend(); 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

合并 settings 和 options，修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
settings == { validate: true, limit: 5, name: "bar" }
var options = { validate: true, name: "bar" };

合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

.grep();使用过滤函数过滤数组元素。
此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

过滤数组中小于 0 的元素。

$.grep( [0,1,2], function(n,i){
  return n > 0;
});

结果:[1, 2]

排除数组中大于 0 的元素，使用第三个参数进行排除。

$.grep( [0,1,2], function(n,i){
  return n > 0;
}, true);

结果:[0]

//$.inArray() : 类似与indexOf,针对数组的
//alert( $.inArray('w',arr) ); //-1
	
//$.proxy() : JQ改this指向

.makeArray();将类数组对象转换为数组对象。//arguments childNodes : 类数组
类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。

.map();将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

var arr=[0,1,2]
var newArr=$.map( arr, function(n){
  return [ n, n + 1 ];
});
alert(arr);//0,1,2
alert(newArra);//0,1,1,2,2,3

.merge();合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。

var arr=[0,1,2];
var arr2=[3,4,5];
var arr3=[];
var newArr=$.merge( arr, arr2);
alert(arr);//[0,1,2,3,4,5]
alert(arr2);//[3,4,5]
alert(arr3);//[]
alert(newArr);//[0,1,2,3,4,5]

交互:
ajax:

$.ajax({
	url:'请求地址',
	type:'GET/POST',//请求方式
	data:{},//发送的数据
	timeout:'5000',//超时时间
	async:true/false,//是否异步
	dataType:'json/xml/html/script/jsonp/text',//返回的数据格式
	beforeSend:function(){},//发送请求前
	success:function(){},//请求成功
	error:function(){},//请求失败
	complete:function(){}//请求结束
})

jsonp:

$.ajax({
	url:'http://www.baidu.com/su?cb=?',【回调函数cb需要写到url中，cb=?】
	dataType:
	success:function
})

用法一:如果dataType为jsonp，那么url的链接可以不带”callback=？”，JQ会自动在链接中加上”callback=？”

$.ajax({
    url:'http://192.168.0.235/index.php?do=bbs&handle=wap',
    type:'GET',
    dataType:'jsonp',
    success:function(data){
        var str='<li>'
                +'    <p>('+data.us+')</p>'
                +'</li>';
        $('.bbsdl').html(str);
    }
})

用法二:如果url中带了”callback=？”，那么dataType只要写json就可以

$.ajax({
    url:'http://192.168.0.235/index.php?do=bbs&handle=wap&callback=?',
    type:'GET',
    dataType:'json',
    success:function(data){
        var str='<li>'
                +'    <p>('+data.us+')</p>'
                +'</li>';
        $('.bbsdl').html(str);
    }
})

jQuery插件：
用插件：舒服
么有太合适插件

写插件：$$$

jquery fancybox

用插件的，注意jquery版本

jQuery.fn = jQuery.prototype

jQuery.extend(object)
为jQuery类添加类方法，可以理解为添加静态方法。如：
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2
jQuery.max(4,5); // 5

Object jQuery.extend( target, object1, [objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果：settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object);
对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

jQuery.fn.extend = jQuery.prototype.extend
你可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。
(function( $ ){
$.fn.tooltip = function( options ) {
};

//等价于

var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

写插件：
最好写成闭包形式，让变量是局部变量

(function($){
	$.fn.xxx=function(){};
})(jQuery)

写插件：
$.fn.xxx=function(){} //导出一个插件

$.fn.extend({
	toRed:fucntion(){},
	toGreen:function(){}
})		//这个写法相当于批量导出模块方法

• 在写插件时候this不是原生的，但是不用写成这样$(this)，这种方式仅限在写插件的时候

	<script>
	$.fn.slider=function(){
		var aBtn=this.find('ol li');//这里的插件this代表#play元素，并不是原生的this
		var oUl=this.find('ul');
		var aLi=this.find('ul li');
		
		aBtn.click(function(){
			aBtn.removeClass('active');
			$(this).addClass('active');
			oUl.stop().animate({top:-$(this).index()*aLi.outerHeight()});	
		});
	};
	$(function(){
		$('#play').slider();
	});
	</script>

.each() 可以理解为循环

	$('div').each(function(index, element) {       //index是索引，element是对应的元素，是原生对象
        element.style.background='red';//循环玩之后都是原生对象
    });

 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

由于input元素的父元素是一个表单元素，所以返回true。

$("input[type='checkbox']").parent().is("form")

.is(':checked') 判断是否被选中

判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色，

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

jquery基础总结:

点击第一个input按钮div背景变绿(css可以传json,$(this).css({background:'blue',width:'300px'})😉

	$('input:eq(0)').click(function(){
		$('#div').css('background','green');
	});

点击第一个inpunt按钮body背景变skin1样式

	$('input:eq(0)').click(function(){
		$('body').addClass('skin1');
	});

鼠标滑过移出效果(hover接两个函数，第一个是移入时执行的函数，第二个是移出时执行的函数，添加样式:addClass,移出样式：removeClass)

	$('img').hover(function(){
		$(this).addClass('w400');
		$(this).css({'margin-left':'-100px','margin-top':'-100px'});
	},function(){
		$(this).removeClass('w400');
		$(this).css({'margin-left':'0px','margin-top':'0px'});
	});

让#div下div对应下标的 显示出来

	$('#div div').eq($(this).index()).css('display','block');

当前元素下面的子元素

	$(this).children().addClass('on');

复选框效果

	$('span').toggle(function(){
		$(this).children().addClass('on');
	},function(){
		$(this).children().removeClass('on');
	});