jQuery介绍，一篇就够了！

jQuery是全世界 65% 的网页使用，是非常受欢迎的 JavaSript Library 。
以【Write less, Do more!】扬名。jQuery官网/jQuery Plugins
不过最近两年，很多网站开始弃用它而改用原生JavaSript重写，不过历史总有痕迹，因此俺在这里记录一下jQuery的一些常用操作。

使用方式

引入 jQuery 文件

1
2
3

<head>
  <script src="jQuery Path"></script>
</head>

基本语法

1	$(selector).action(); or jQuery(selector).action();

selector选择器
- 比 HTML 5 Selector 和 CSS 3 Selector 更强大
action方法
- 将许多 JavaScript 功能整合成一个方法

jQuery中的选择器Selector

Returns: Node List

伪类别Pseudo classes

: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)

其它

:button             //结果属于 button 的 Element
:checkbox           //结果属于 checkbox 的 Element
:file               //结果属于 file 的 Element
:password           //结果属于 password 的 Element
:radio              //结果属于 radio 的 Element
:text               //结果属于 text 的 Element

jQuery 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操作

类操作

$(element).addClass('className1 className2');                         //增加类
$(element).removeClass('className1 className2');                      //删除类[不写清除全部]          
$(element).toggleClass('className1 className2'[,addOrRemove(bool)]);  //开关类
$(element).hasClass('className1 className2');                         //判断该 Element 是否存在某个类

CSS操作

$(element).css(propertyName);        //取得 CSS Style
$(element).css(propertyName, value); //设置 CSS Style
//多个操作
jQuery(element1,element2).css({
      'color': 'red',
      'display': 'block'
});
//不需要像原生JS一样将属性名称改为大小写

width&height

$(element).width();                 //content
$(element).innerWidth();            //content+padding
$(element).outerWidth();            //element width
$(element).height();                //content
$(element).innerHeight();           //content+padding
$(element).outerHeight();           //element width

Document Object Model

$(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 Traversal

DOM-Select

//过滤器筛选表单元素: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

$(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标签。<b><a>123</a></b><b><a>456</a></b>
a.wrapAll(b);                                              //给匹配的a全部包裹b标签。<b><a>123</a><a>456</a></b>
a.wrapInner(b);                                            //给匹配的a新增一个子标签b包裹内容。<a><b>123</b></a><a><b>456</b></a>

DOM-Removal

1
2
3

$(element).remove();                     //删除自身节点及子节点
$(element).empty();                      //清空子节点
$(element).clone(true).appendTo($el);    //复制element节点并复制事件监听，填到$el。

DOM-Event

//当文件载入完成时[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

$(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<b?a:b;}, 
  max: function(a, b){return a>b?a:b;} 
});

Ajax&Form

$.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