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 & 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
猜测。