jquery常见指令记录,一篇就够了。

1.选择器

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


	层级选择器：$('ancestor descendant')  //如果有父子关系，用空格分开
	      		$('ul.lang  li.lang-javascript'); // <li class="lang-javascript">JavaScript</li>
	
	层级：$('form[name=upload] input'); // name属性为upload的表单
	多层：$('form.test p input'); // 在form表单选择被<p>包含的<input>
	子选择器：$('parent>child') //必须是直属子节点
	
	过滤器：Filter
		$('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)'); // 选出序号为奇数的元素
		
		
	针对表单元素特殊的选择器：
		: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正好相反，选择那些不能输入的。

		$('div:visible'); // 所有可见的div
		$('div:hidden'); // 所有隐藏的div

2.查找

	<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
	

	parent()方法：从当前节点开始查找父级节点
	
	var swf = $('#swift'); // 获得Swift
	var parent = swf.parent(); // 获得Swift的上层节点<ul>
	var a = swf.parent('.red'); // 获得Swift的上层节点<ul>，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象


	next()和prev()方法：查找同级节点
	
	var swift = $('#swift');

	swift.next(); // Scheme
	swift.next('[name=haskell]'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]
	
	swift.prev(); // Python
	swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy

3.过滤

	filter()方法：可以过滤掉不符合选择器条件的节点
	
	var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
	var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
	
	或者传入一个函数，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象
	var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
	langs.filter(function () {
	    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
	});


	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']
	此外，一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉：
	
	var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
	var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
	var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
	var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

4.操作DOM

	<div id="test-div">
		    <ul>
		        <li><span>JavaScript</span></li>
		        <li><span>Python</span></li>
		        <li><span>Swift</span></li>
		    </ul>
		</div>
	
	jQuery的html()这种暴力方法
	append()把DOM添加到最后，
	prepend()把DOM添加到最前
	before()方法  ...之前
	after()  ...之后
	
	
	拿到节点			var ul = $('#test-div>ul');
	调用方法		传入HTML片段：
	ul.append('<li><span>Haskell</span></li>');
	
	append()还可以传入原始的DOM对象，jQuery对象和函数对象：

	// 创建DOM对象:
	var ps = document.createElement('li');
	ps.innerHTML = '<span>Pascal</span>';
	// 添加DOM对象:
	ul.append(ps);
	
	// 添加jQuery对象:
	ul.append($('#scheme'));
	
	// 添加函数对象:
	ul.append(function (index, html) {
	    return '<li><span>Language - ' + index + '</span></li>';
	});
	**-->>如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。

5.删除

要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。

6.事件

/* HTML:
 *
 * <a id="test-link" href="#0">点我试试</a>
 *
 */

// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
    alert('Hello!');
});

on：用来传递事件，但是可以简写事件，直接调用方法。两者完全等价。
	a.click(function () {
	    alert('Hello!');
	});

鼠标事件

click: 鼠标单击时触发；
dblclick：鼠标双击时触发； 
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发； 
mousemove：鼠标在DOM内部移动时触发； 
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

事件参数

有些事件
如mousemove和keypress，
我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。
所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：
    $(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

键盘事件

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

keydown：键盘按下时触发； 
keyup：键盘松开时触发； 
keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发； 
blur：当DOM失去焦点时触发； 
change：当<input>、<select>或<textarea>的内容改变时触发； 
submit：当<form>提交时触发； ready：当页面被载入并且DOM树完成初始化后触发。
ready：仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，

由于ready事件使用非常普遍，所以可以这样简化：
$(document).ready(function () {
    // on('submit', function)也可以简化:
    $('#testForm).submit(function () {
        alert('submit!');
    });
});
甚至还可以再简化为：
$(function () {
    // init...
});

取消绑定

一个已被绑定的事件可以解除绑定，通过off('click', function)实现：

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', function () {...})无法移除已绑定的第一个匿名函数。

为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。

同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。

事件触发条件
一个需要注意的问题是，事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：

var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});

当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将***不会***触发change事件：

var input = $('#test-input');
input.val('change it!'); // 无法触发change事件

有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件：

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
input.change()相当于input.trigger('change')，它是trigger()方法的简写。

为什么我们希望手动触发一个事件呢？如果不这么做，很多时候，我们就得写两份一模一样的代码。

浏览器安全限制
在浏览器中，有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数：

// 无法弹出新窗口，将被浏览器屏蔽:
$(function () {
    window.open('/');
});

这些“敏感代码”只能由用户操作来触发：

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');

function popupTestWindow() {
    window.open('/');
}

button1.click(function () {
    popupTestWindow();
});

button2.click(function () {
    // 不立刻执行popupTestWindow()，100毫秒后执行:
    setTimeout(popupTestWindow, 100);
});

当用户点击button1时，click事件被触发，由于popupTestWindow()在click事件处理函数内执行，这是浏览器允许的，而button2的click事件并未立刻执行popupTestWindow()，延迟执行的popupTestWindow()将被浏览器拦截。

7.ajax

var kk = $.ajax(url,{
	async：默认为true，是否异步执行AJAX请求
	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猜测。
}).done(function (data) {
ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});

参考廖雪峰老师博客整理