JavaScript全面学习（jQuery）

1.

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

2.jQuery的选择器不会返回undefined或者null，返回[]

3.

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。

 4.子选择器$('parent>child')，<child>节点必须是<parent>节点的直属子节点

<!-- HTML结构 -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<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)'); // 选出序号为奇数的元素

5.针对表单元素，jQuery还有一组特殊的选择器：

• :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正好相反，选择那些不能输入的。

6.

<!-- HTML结构 -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

用find()查找：

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

filter()方法可以过滤掉不符合选择器条件的节点：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

也能用函数去过滤：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

7.

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

分别获取文本和HTML：

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作。

8.attr()和removeAttr()方法用于操作DOM节点的属性：

// <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

9.prop()方法和attr()类似，但是HTML5规定一些属性在DOM节点中可以没有值，checked="checked"等效于单独写checked  （selected也同理）

  attr()和prop()对于属性checked处理有所不同：

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
radio.is(':checked'); // true

对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性

10.添加Pascal、Lua和Ruby，然后按字母顺序排序节点：

<!-- HTML结构 -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

var ul=$("#test-div ul");
ul.append('<li><span>Pascal</span></li>');
ul.append('<li><span>Lua</span></li>');
ul.append('<li><span>Ruby</span></li>');

var langs = $("#test-div ul li span"); // 拿到JavaScript, Python, Swift, Scheme
var arr = langs.map(function () {
    return this.innerHTML;
}).get();
arr.sort();

var li = $('#test-div>ul>li');
li.remove();            
arr.map((x)=>ul.append('<li><span>'+x+'</span></li>'))

11.ready仅作用于document对象。ready事件在DOM完成初始化后触发，且只触发一次

12.取消绑定:

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

需要特别注意的是，下面这种写法是无效的：

// 绑定事件:
a.click(function () {
    alert('hello!');
});

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});

可以使用off('click')一次性移除已绑定的click事件的所有处理函数。

13.

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});
var input = $('#test-input');
input.val('change it!');   //这里用JavaScript代码去改动文本框的值，无法触发change事件
input.change(); // 触发change事件

14.ajax(url, settings)函数需要接收一个URL和一个可选的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猜测。