jQuery介绍，一篇就够了！

使用方式

引入 jQuery 文件

代码语言：javascript复制

基本语法代码语言：javascript复制$(selector).action(); or jQuery(selector).action();selector选择器比 HTML 5 Selector 和 CSS 3 Selector 更强大action方法将许多 JavaScript 功能整合成一个方法jQuery中的选择器SelectorReturns: Node List

伪类别Pseudo classes代码语言：javascript复制:visible //当 Element 显示时

:hidden //当 Element 隐藏时

:header //选择属于 header 的标签，如 h1, h2, …

:has(selector) //子节点有符合 selector 的 Element

:eq(index) //结果为第 index 个节点的 Element

:even //结果属于偶数的 Element

:first //结果属于第一个节点的 Element

:gt(index) //结果大于第 index 个节点的 Element

:last //结果属于最后一个节点的 Element

:lt(index) //结果取于第 index 个节点的 Element

:odd //结果属于基数的 Element

:only-child //仅仅为子元素jQuery Selector

CSS3/HTML Selector

:eq(index)

:nth-child(index)

:even

:nth-child(even)

:first

:first-child

:last

:last-child

:odd

:nth-child(odd)

其它代码语言：javascript复制:button //结果属于 button 的 Element

:checkbox //结果属于 checkbox 的 Element

:file //结果属于 file 的 Element

:password //结果属于 password 的 Element

:radio //结果属于 radio 的 Element

:text //结果属于 text 的 ElementjQuery Selector

CSS3/HTML Selector

:button

input[type='button'], button

:checkbox

input[type='checkbox']

:file

input[type='file']

:password

input[type='password']

:radio

input[type='radio']

:text

input[type='text']

jQuery中的CSS操作类操作代码语言：javascript复制$(element).addClass('className1 className2'); //增加类

$(element).removeClass('className1 className2'); //删除类[不写清除全部]

$(element).toggleClass('className1 className2'[,addOrRemove(bool)]); //开关类

$(element).hasClass('className1 className2'); //判断该 Element 是否存在某个类CSS操作代码语言：javascript复制$(element).css(propertyName); //取得 CSS Style

$(element).css(propertyName, value); //设置 CSS Style

//多个操作

jQuery(element1,element2).css({

'color': 'red',

'display': 'block'

});

//不需要像原生JS一样将属性名称改为大小写width&height代码语言：javascript复制$(element).width(); //content

$(element).innerWidth(); //content+padding

$(element).outerWidth(); //element width

$(element).height(); //content

$(element).innerHeight(); //content+padding

$(element).outerHeight(); //element widthDocument Object Model代码语言：javascript复制$(element).prop(attrName); //取得属性值

$(element).prop(attrName, attrValue); //设置属性值，一般原生的我们都使用prop，特别是radio与checkbox使用prop设置true和false才正确，其它的使用attr。

$(element).attr(attrName);

$(element).attr(attrName, attrValue);

$(element).removeAttr(attrName, attrValue);

$(element).removeAttr('attrName1 attrName2');

$(element).html(); //innerHTML

$(element).text(); //innerText

$(element).val(); //value

$(element).data(key); //取得自定义资料

$(element).data(key, value); //设置自定义资料，可叠加设置。

$(element).data({

x: 1,

y: 2,

z: 3

}); DOM-Tree TraversalDOM-Select代码语言：javascript复制//过滤器筛选表单元素:disabled、:enabled、:checked、:selected

$("input:disabled");

//指定序号获取元素

$(element).eq(3);

//指定范围获取元素

$(element).slice(1,5);

//指定条件获取元素

$(element).is(".blue");

$(element).parent([selector]); //父节点

$(element).parents([selector]); //所有父节点

$(element).parents('.xxx'); //所有长辈节点的含有 xxx 类的

$(element).children([selector]); //子节点

$(element).find([selector]); //找符合要求的子节点。相当与$(element selector);

$(element).filter([selector]); //从初始结果中筛选，找自己。相当与$(elementselector);//div.className

$(element).siblings([selector]); //所有的同辈节点

$(element).next([selector]); //下一个节点

$(element).nextAll([selector]); //之后的所有节点

$(element).prev([selector]); //上一个节点

$(element).prevAll([selector]); //之前的所有节点

$(document.querySelector('h1')); //dom对象转jquery对象

$('h1')[0]; or $('h1').get(0); //jquery对象转dom对象

$('a'); //现在chrome好像也可以使用$()选取元素了DOM-Insertion代码语言：javascript复制$(parentElement).append(newElement); //在目前节点插入新子节点到最后

$(parentElement).syntaxhighlightpend(newElement); //在目前节点插入新子节点到开头

$(newElement).appendTo(parentElement); //将新节点插入到某个父节点下的当第一个子节点

$(newElement).syntaxhighlightpendTo(parentElement); //将新节点插入到某个父节点下的当最后一个子节点

$(siblingElement).after(newElement); //在目前节点后方插入新相邻节点

$(siblingElement).before(newElement); //在目前节点前方插入新相邻节点

$(newElement).insertAfter(siblingElement); //将新节点插入到某节点之后当相邻节点

$(newElement).insertBefore(siblingElement); //将新节点插入到某节点之前当相邻节点

a.replaceWith(b); //b替换a，后面替换前面。

b.replaceAll(a); //b替换a，前面替换后面。

a.wrap(b); //给匹配的a包裹b标签。123456

a.wrapAll(b); //给匹配的a全部包裹b标签。123456

a.wrapInner(b); //给匹配的a新增一个子标签b包裹内容。123456DOM-Removal代码语言：javascript复制$(element).remove(); //删除自身节点及子节点

$(element).empty(); //清空子节点

$(element).clone(true).appendTo($el); //复制element节点并复制事件监听，填到$el。DOM-Event代码语言：javascript复制//当文件载入完成时[onload]

$(document).ready(function(){

//do something

});

$(function(){

//do something

});

//增加事件监听器

$(element).on('eventType1 eventType2 eventType3', handler);

//顺带一提，有些元素是无法聚焦的，设置keydown或者keyup事件会发现无法触发，所以我们一般给其设置tabindex，再设置事件即可。

$('h1').attr({

'tabindex': '-1',

'style': 'outline: none;'//不能学习这种写法，应该用css()语义化。

}).on('keydown',function(e){

if (event.ctrlKey && event.keyCode === 65) {

console.log(123);

e.stopPropagation();

e.preventDefault();

}

});

//移除事件监听器

$(element).unbind(eventType);//弃用

$(element).off(eventType); //不写eventType移除所有事件

//鼠标放置/离开动作

$(element).hover(over(),out());

//元素被点击时的切换动作

$(element).toggle(fn1(),fn2(),fn3(),···);

//元素点击事件

$(element).click(fn());

//鼠标事件

$(element).mouseover(fn());

$(element).mouseout(fn());

//只响应一次事件

$(element).one(type,[data],fn);

//在每一个元素上触发一次某事件

$(element).trigger(type,[data]);Effects代码语言：javascript复制$(element).focus([function]); //得到焦点

$(element).blur([function]); //失去焦点

$(element).defaultValue; //得到预设值value

$(element).offset(); //得到元素左边距和上边距[对象]。

$(element).offset().left; //得到元素左边距

$(element).offset().top; //得到元素上边距

$(element).show([duration][, complete]); //显示元素

$(element).hide([duration][, complete]); //隐藏元素

$(element).toggle([duration][, complete]); //显示元素开关【不推荐】

$(element).fadeIn(); //淡入元素

$(element).fadeOut(); //淡出元素

$(element).fadeToggle(); //淡入淡出开关【不推荐】

$(element).slideDown(); //向下滑动元素

$(element).slideUp(); //向上滑动元素

$(element).slideToggle(); //滑动元素开关【不推荐】

//自定义元素动画

$(element).animate(properties[, duration][, easing][, complete]);

/*

*properties //CSS 属性

{

property1: value1,

property2: value2

}

*duration //持续时间

*easing //加速度曲线

*complete //动画完成后的handle

*/

//中文转Unicode

escape('中文转Unicode').toLocaleLowerCase().replace(/%u/gi,'\\u');

//中文转Unicode(CSS)

escape('中文转Unicode').toLocaleLowerCase().replace(/%u/gi,'\\');

//为jQuery扩展min,max两个方法 ，通过<$.方法名>调用。

$.extend({

min: function(a, b){return a

max: function(a, b){return a>b?a:b;}

});Ajax&Form代码语言：javascript复制$.ajax(options) | jQuery.ajax(options);

$.get("demo_test.php",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

$.post("demo_test.php",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

//获取JSON

$.getJSON(url,[data],[callback]);

$.ajax({

async: false,

url: 'http://跨域',

type: "GET", //jsonp只支持GET

dataType: 'jsonp',

jsonp: 'jsoncallback',

data: {

test: 'hello world'

},

timeout: 5000,

beforeSend: function () {

//jsonp 方式此方法不被触发，原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了。

},

success: function (json) {

//客户端jquery预先定义好的callback函式，成功获取跨域服务器上的json资料后，会动态执行这个callback函式。

},

complete: function (XMLHttpRequest, textStatus) {

},

error: function (xhr) {

//jsonp 方式此方法不被触发，原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了。

}

});

//获取JS并执行

$.getScript(url,[callback]);

//读取HTML文件插入到元素中

$(element).load(url,data,callback);

//ajax完成后执行的函数

$.ajaxComplete(callback);

//ajax失败后执行的函数

$.ajaxError(callback);

//ajax成功后执行的函数

$.ajaxSuccess(callback);

//ajax发送前执行的函数

$.ajaxSend(callback);

//ajax开始时执行的函数

$.ajaxStart(callback);

//ajax结束时执行的函数

$.ajaxStop(callback);

//设置Ajax全局预设值

$.ajaxSetup(options);

//获取表单序列化结果

$("form").serialize();

//return JSON

$("form").serializeArray();

$("form").submit();

$("form").reset();

//对象序列化

$.param(obj,[traditional]);

//数组

$.each(object, [callback]); //遍历数组(key,value)=>{做一些处理}

$.map(arr|obj, [callback]); //返回新数组

$(selector).toArray(); //NodeList 2 Array

$.merge(arr1, arr2); //合并数组，赋给arr1。

$.unique(NodeList); //去除重复Element