1. HTML5 data-属性可以存储用户无法看到的自定义数据(data-xxxx-xxxx)。例如：
<img class="myimg" src="images/index.jpg" data-jquery-title="标题-index" data-jquery-descripe="this is index.jpg">
获取自定义数据:
$('.myimg').click(function(e){ alert($(this).attr("data-jquery-title")); alert($(this).attr("data-jquery-descripe"));
});
2. 选择器
$("p:even")：选择所有偶数行的<p>元素
$("tr:nth-child(1)"):选择每个表格的第一行元素
$("body > div"): 选择作为<body>直接子节点的<div>元素
$("a[href$='pdf']"): 选择连接到PDF文件的超链接元素
$("body > div:has(a)"): 选择作为<body>直接子节点的、包含超链接(<a>)的<div>元素
3. $()的其他作用：
(1)作为一些通用实用函数集的命名空间前缀
比如：$.trim(something) 去除字符串something前后空格的实用函数，等价于jQuery.trim(something)
(2)创建DOM元素
$(function(){
$("<p>Hi here!</p>").insertAfter("#p1");
});
4. jQuery支持的基础CSS选择器
* 匹配所有远胜于
E 匹配标签名为E的所有元素（比如：$("div")匹配所有的div）
E F 匹配标签名为F的所有元素，这些元素是E的子节点（比如：$("div ul")匹配所有的div中的ul子节点）
E>F 匹配标签名为F的所有元素，这些元素是E的直接子节点（比如：$("div ul")匹配所有的div中的ul直接节点）
E+F 匹配标签名为F的所有元素，这些元素是E的第一个兄弟节点
E~F 匹配标签名为F的所有元素，这些元素是E后面的兄弟节点之一
E.C 匹配标签名为E的所有元素，这些元素拥有CSS类名为C，如果省略E则相当于*.C（比如：$("div.mydiv")匹配拥有类名为mydiv的所有div）
E#I 匹配标签名为E的所有元素，这些元素的id特征值为I，如果省略E则相当于*#I（比如：$("div#mydiv")匹配拥有id为mydiv的所有div）
E[A] 匹配标签名为E的所有元素，这些元素拥有特征A（比如：$("div[title]")匹配拥有特征title所有div）
E[A=V] 匹配标签名为E的所有元素，这些元素的A特征值为V（比如：$("div[title='mytitle']")匹配拥有title的特征值为mytitle所有div）
E[A^=V] 匹配标签名为E的所有元素，这些元素的A特征值以V开头（比如：$("div[title^='my']")匹配拥有title的特征值以my开头所有div）
E[A$=V] 匹配标签名为E的所有元素，这些元素的A特征值以V结束（比如：$("a[href$='.pdf']"),用来定向所有指向pdf文件的链接）
E[A!=V] 匹配标签名为E的所有元素，这些元素的A特征值不等于V，或者根本就不存在A特征
E[A*=V] 匹配标签名为E的所有元素，这些元素的A特征值包含V（比如：$("a[href*='jquery.com']"),指向链接地址中包含jquery.com的所有<a>元素）
5. 创建新的HTML
$('<img></img>',{
src: 'images/index.jpg',
alt: 'index.jpg',
title: 'add img',
click: function(){
alert($(this).attr('title'));
}
}).css({
border: 'solid 1px black',
padding: '12px 12px 12px 12px',
backgroundColor:'white'
}).appendTo('body');
或者：
$('<img></img>',{
src: 'images/index.jpg',
alt: 'index.jpg',
title: 'add img',
click: function(){
alert($(this).attr('title'));
},
css: {
border: 'solid 1px black',
padding: '12px 12px 12px 12px',
backgroundColor:'white'
}
}).appendTo('body');
5. prepend To(targets)和insertBefore(targets)的区别：
比如：$('<p>This is p.I am insert here</p>').insertBefore($('div.divContext'));是将<p>This is p.I am insert here</p>插入到div的前面，并不是div元素的里面。即div并不包含This is p.I am insert here。
而$('<p>This is p.I am insert here</p>').prependTo($('div.divContext'));是将<p>This is p.I am insert here</p>插入到div的开头，是在div的里面。即div包含This is p.I am insert here。
6. 包裹与反包裹
（1）用带有hello类的<div>将所有拥有surprise类的链接分别包裹起来。
jQuery:
$("a.surprise").wrap("<div class='hello' style='border:solid 1px red;'></div>");
html:
<a class="surprise" href="www.baidu.com">百度1</a>
<a class="surprise" href="www.baidu.com">百度2</a>
<a class="surprise" href="www.baidu.com">百度3</a>
效果：
等效于：
<div class='hello' style='border:solid 1px red;'> <a class="surprise" href="www.baidu.com">百度1</a>
</div> <div class='hello' style='border:solid 1px red;'> <a class="surprise" href="www.baidu.com">百度2</a> </div> <div class='hello' style='border:solid 1px red;'> <a class="surprise" href="www.baidu.com">百度3</a> </div>
（2）如果想要将包装集中的全部元素作为一个整体包裹起来，则可以使用wrapAll()方法：
$("a.surprise").wrapAll("<div class='hello' style='border:solid 1px red;'></div>");
效果：
（3）反向操作，也就是删除子元素的父节点，可以通过unwrap()方法来实现。
比如：
html：
<div class='hello' style='border:solid 1px red;'> <a class="surprise" href="www.baidu.com">百度1</a> </div> <div class='hello' style='border:solid 1px red;'> <a class="surprise" href="www.baidu.com">百度2</a> </div> <div class='hello' style='border:solid 1px red;'> <a class="surprise" href="www.baidu.com">百度3</a> </div>
jQuery：
$("a.surprise").unwrap("<div class='hello' style='border:solid 1px red;'></div>");
删除子元素的父节点之后的效果：
7. val()用法：
（1）获取单选按钮组的选中值$('[name="radio1"]:checked').val()
（2）获取多选按钮组的选中值
var checkboxValues = $('[name="checkbox1"]:checked').map(
function(){
return $(this).val();
}
).toArray();
（3）将包装集中的任何复选框、单选框或者<select>元素的可选项变成选中(checked)或者选择(selected)状态，只要它们的值匹配传入的数组中的任何一个值。比如，
选中值为"two"的单选框：$('input[name="radio1"]').val(['two']);
选中值为"one","two","three"的复选框：$('input[name="checkbox1"]').val(['one','two','three']);