JavaScript之jQuery

jQuery

使用：从官网上下载，并在中引入即可

<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

用法：使用jQuery()或者$()

按id查找

使用#id

var div = $('#abc')

按tag查找

直接写tag名称即可

var p = $('p')

按class查找

使用.class

var a = $('.red')

按属性查找

使用[key=value]

var email = $('[name=email]')

若value含有特殊字符(如空格)，需要用双引号”“

如

var email = $('[name="abc email"]')

以某个字符串开头或结束可以用

var name = $('[name^=icon]')

和

var name = $('[name$=icon]')

组合查找

即按id,class,tag,属性组合在一起，直接连在一起即可

var tr = $('tr.red')

多项选择器

使用逗号隔开，只要符合一个即可，按组合要全部都符合

var ps = $('p.red,p.green')

层级选择器

用空格隔开，表示前者是后者的子孙

如查找ul下的所有li节点：

$('ul.lang li');

子选择器

使用>，和层级选择器差不多，区别是前者必须是后者的父节点

如

$('ul.lang>li');

过滤器

使用:

用法

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div

还有一些特殊的用法：

:input：可以选择<input>，<textarea>，<select>和<button>；
:file：可以选择<input type="file">，和input[type=file]一样；
:checkbox：可以选择复选框，和input[type=checkbox]一样；
:radio：可以选择单选框，和input[type=radio]一样；
:focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；
:checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；
:enabled：可以选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；
:disabled：和:enabled正好相反，选择那些不能输入的。

查找和过滤

找到某个节点后，还可以基于这个节点查找这个节点附近的节点。

向下查找：

find()

向上查找：

parent()

向左/右查找：

prev()/next()

首个子节点：

first()

最后一个子节点：

last()

n到m-1个子节点：

slice(n,m)

可以输入参数作为过滤条件，若为空则返回[]。

过滤：

filter()

参数为过滤的条件

映射：

map()

参数为一个function，将jQuery数组每个元素使用一次map()，返回处理后的数组

操作DOM

修改Text和HTML

获取节点的文本

text()

获取原始的HTML文本

html()

设置文本

只需要在上述函数中添加参数即可

操作css

获取css：

css('key')

修改css：

css('key','value')

操作class

var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

隐藏和显示DOM

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

获取DOM信息

获取宽高信息：

width()

height()

设置节点属性

attr()和removeAttr()

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

操作表单

对表单元素可以使用val()获取和设置value

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('[email protected]'); // 文本框的内容已变为[email protected]

select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

修改DOM结构

prepend()和append()插入到第一个和最后一个子节点

before()和after()插入到该节点的前面或后面

可以插入HTML字符串、DOM对象或者jQuery对象

var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($('#scheme'));

删除节点：

remove()

事件

鼠标事件

click: 鼠标单击时触发；

dblclick：鼠标双击时触发；

mouseenter：鼠标进入时触发；

mouseleave：鼠标移出时触发；

mousemove：鼠标在DOM内部移动时触发；

hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。

keydown：键盘按下时触发；

keyup：键盘松开时触发；

keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发；

blur：当DOM失去焦点时触发；

change：当<input>、<select>或<textarea>的内容改变时触发；

submit：当<form>提交时触发；

ready：当页面被载入并且DOM树完成初始化后触发。

绑定事件

使用on()为相应的事件绑定函数即可

var a = $('#test-link');
a.on('event', function () {
    alert('Hello!');
});

另外，可以使用on()绑定多个事件，按绑定顺序执行。

另外，可以直接使用.click(func(…){…})方法直接绑定click事件；

使用.ready(func(…){…})或者直接$(func(…){…})绑定ready事件。

解除绑定

a.off('event',func);//为某个事件解除某个函数
a.off('event');//解除某个事件的所有函数
a.off();//解除所有事件的所有函数

事件参数

对每个绑定的函数func，都会传入一个event对象，用于获取事件的参数。

$(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

动画

显示/隐藏

show()：显示

hide()：隐藏

toggle()：根据当前的状态选择隐藏或显示

展开/收缩

slideUp()：收缩

slideDown()：展开

slideToggle()：根据当前状态选择收缩或展开

淡入/淡出

fadeIn()：淡入

fadeOut()：淡出

fadeToggle()：根据当前状态选择淡入或淡出

上述函数的参数可以使用时间（以毫秒为单位）作为动画的过渡时间，也可以使用fast、slow等参数。

自定义动画

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000,func(...){...}); // 在3秒钟内CSS过渡到设定值

animate接受三个参数：css最终效果，过渡的时间，回调函数

暂停

delay()：参数为暂停的毫秒数

串行动画

多次调用上述函数即可实现串行的效果

var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);

AJAX

通过$.ajax(url, settings)来使用ajax

settings有如下选项：

async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
headers：发送的额外的HTTP头，必须是一个object；
dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

回调函数：在请求完成后自动调用：

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

GET

可以通过get(url,data)快速使用GET方法

POST

可以通过post(url,data)快速使用POST方法

getJSON

可以通过getJSON(url,data)快速使用GET方法获取一个JSON对象

扩展

可以使用$.fn.plugin = func(...){...}为jQuery对象绑定方法。

例：

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}

使用参数

$.fn.highlight2 = function (options) {
    // 要考虑到各种情况:
    // options为undefined
    // options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
}

其中&&是指若没有这个key则给它加上去，||表示若为undefined，则取默认值。

还有另一种表示方法：

$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}

// 设定默认值:
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}

其中extend({},obj1,obj2,…)表示将所有对象合并成为一个，若遇到相同的key，后面的obj覆盖前面的obj。

另外，使用.defaults的方法表示默认值更加灵活。

错误处理

try...catch...finally

有错误发生时，执行流程：

先执行try { ... }的代码；
执行到出错的语句时，后续语句不再继续执行，转而执行catch (e) { ... }代码；
最后执行finally { ... }代码。

而没有错误发生时，执行流程：

先执行try { ... }的代码；
因为没有出错，catch (e) { ... }代码不会被执行；
最后执行finally { ... }代码。

另外，catch和finally不必都出现，但应至少出现一个。

抛出错误

throw new Error('...')