JQ对象和原生对象可以相互转化
原生转JQ $('需要转化的元素')
JQ转原生
$('需要转化的元素')[0]
注[0]是下表：index根据不同的选择器需要作出相应的调整
$('需要转化的元素').get（0）
注：这里面的 0 也是index 需要根据不同的选择器不同的需要作出调整
选择器
id选择器 $("#myDiv");
标签选择器 $("div");
类选择器 $(".myClass");
通配符选择器 $("")；
群组选择器 $("div,span,p.myClass")；
后代选择器 $("form input")；
父子选择器 $("form > input")；
兄弟选择器 紧接在后面的 $("label + input")；
兄弟选择器，匹配到后面所有的 $("form ~ input")；
获取第一个元素 $('li:first');
否定选择器、去除所有给定选择器选中的元素 $("input:not(:checked)")
匹配所有索引值为偶数的元素 （第二个 第四个...） $("tr:even")
匹配所有索引值为奇数的元素 （第一个 第三个...） $("tr:odd")
匹配一个给定索引值的元素 $("tr:eq(1)")
匹配所有大于给定索引值的元素 $("tr:gt(0)")
匹配所有小于给定索引值的元素 $("tr:lt(2)")
获取最后一个元素 $('li:last')
匹配h1,h2,h3等标题元素 $(":header")
匹配所有正在执行动画效果的元素 :animated
匹配当前获取焦点的元素 ：focus
选择该文档的根元素 ：root
匹配包含给定文本的元素 $("div:contains('John')")
匹配所有不含子元素或者文本是空的元素 $("td:empty")
匹配所有含有指定元素的元素 $("div:has(p)")《匹配所有包含p标签的div》
匹配所有含有子元素或者文本的元素 :parent
匹配所有不可见的元素，或者type 为hidden的元素 ：hidden
匹配所有可见的元素 ：visible
包含给定属性的元素（属性选择器）element [attribute]
匹配给定属性是某个特定值的元素 element[attribute=value]
匹配所有不含有特定属性后者是属性不为特定值的元素 [attribute!=value]
匹配给定的属性是以某些特定的值开始的元素 [attribute^=value]
匹配给定的属性是以某些特定的值结束的元素[attribute$=value]
匹配给定的属性包含指定属性的元素 [attribute=value]
复合属性选择器，需要同时满足多个条件时使用。$("input[id][name$='man']")找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
匹配所有文件域 ：file
匹配所有可用 元素 ：enable
匹配所有不可用元素 ：disable
$.escapeSelector(selector) 这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。
文档处理
1.append()在给定的元素的内部的末尾插入
p.append(span) 给p添加子集span(在最后)
2.appendTo（）把所有匹配到的所有元素插入到指定元素的末尾
p.appendTo(body) 把p插入到body里面 （最后面）
3.pretend 在只元素的内容开始插入
p.pretend(span) 给p添加子集span(在最前)
4.pretendTo 把所有匹配的元素插入到指定的元素的最前
p.pretendTo(body) 把p插入到body里面 （最前面）
5.after() 在匹配的元素之后差插入（同级）
element.after('element2') 把element2插入到element的后面（同级）
6.before()在匹配的元素的前面插入内容
element.before('element2') 把element2插入到element的前面（同级）
7.insertAfter() 把所有匹配的元素插入到 指定元素的后面
element.insertAfter('element2') 把所有匹配到的element插入到element2的后面（同级）
8.insertBefore() 把所有匹配到的元素插入到指定元素的后面
element.insertBefore('element2') 把所有匹配到的element插入到element2的前面（同级）
9.wrap（）给所有匹配到的元素添父级
$('form').wrap($('<div class="BB"></div>')); 给form添加一个类名为BB的div父级
10.unwrap（） 移除指定元素的父级
$('.content').unwrap(); 把类名为.content的div的父级去除
11.wrapAll（）把所有匹配到的元素用同同一个标签包裹起来
$('form').wrapAll($('<div class="BB"></div>')); 把所有的form放在同一个标签里 这个标签的位置在匹配到的元素的第一个的位置
12.wrapInner（）把所有匹配到的元素的子内容（包括文本节点）用一个HTML包裹起来
13replaceWith(content|fn) 把匹配到的元素替换成指定的HTML后者DOM节点 支持回调函数
14.replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
删除元素
1.empty（）删除匹配的元素集合中所有的子节点。
2.remove（） 从DOM中删除所有匹配的元素。
注：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
3.detach（）从DOM中删除所有匹配的元素。
注：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
克隆
clone（）克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
属性
attr(name|pro|key,val|fn)
name 属性名
$("img").attr("src"); 返回文档中所有图像的src属性值。
properties 作为属性的（名值对象）
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 为所有图像设置src和alt属性。
key,value 属性名 属性值
$("img").attr("src","test.jpg");为所有图像设置src属性。
key,function(index, attr)
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
$("img").attr("title", function() { return this.src }); 把src属性的值设置为title属性的值。
removeAttr(name) 从每一个匹配的元素中删除指定属性
$("img").removeAttr("src"); 删除img的src属性
prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值。
$("input[type='checkbox']").prop("checked"); 选中复选框为true，没选中为false
$("input[type='checkbox']").prop({
disabled: true
});禁用页面上的所有复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});通过函数来设置所有页面上的复选框被选中。
removeProp(name) 用来删除由.prop()方法设置的属性集
设置一个段落数字属性，然后将其删除。
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
addClass(class|fn) 为每个匹配到的元素添加类名
class 一个或多个要添加到元素中的CSS类名，请用空格分开
function(index, class) 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
为匹配的元素加上 'selected' 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
给li加上不同的class
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
class 一个或多个要删除的CSS类名，请用空格分开
function(index, class)此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
删除匹配元素的所有类
$("p").removeClass();
删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。
$("p").toggleClass("selected"); 类名存在删除该类名，不存在，添加此类名
每点击三下加上一次 'highlight' 类
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回p元素的内容。
$('p').html();
设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
text([val|fn])取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效
返回p元素的文本内容。
$('p').text();
设置所有 p 元素的文本内容
$("p").text("Hello world!");
使用函数来设置所有匹配元素的文本内容
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
val([val|fn|arr])获得匹配元素的当前值。
包括select。如果多选，将返回一个数组，其包含所选的值。>>
获取文本框中的值
$("input").val();
设定文本框的值
$("input").val("hello world!");
设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
事件
页面载入
ready()在文档加载完毕之后激活函数
三种用法
方法一：$(document).ready(function)
方法二：$().ready(function)
方法三：$(function) 最常用的用法
事件处理
trigger() 方法触发被选元素的指定事件类型。
$(selector).trigger(event,[param1,param2,...])
event
必需。规定指定元素要触发的事件。
可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]
可选。传递到事件处理程序的额外参数。
额外的参数对自定义事件特别有用。
触发 input 元素的 select 事件：
$("button").click(function(){
$("input").trigger("select");
});
one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
当使用 one() 方法时，每个元素只能运行一次事件处理器函数。
当点击 p 元素时，增加该元素的文本大小：
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
$(selector).one(event,data,function)
event
必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。
与 trigger() 方法相比的不同之处
它不会引起事件（比如表单提交）的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
筛选
.eq( index ) 选中集合中的某一个元素 index是元素的下标支持负数（从后向前）
.first()元素集合的第一个元素
.last（）元素集合的最后一的元素
.hasClass( className ) 选中轴指定类名的元素
.filter( selector ) 支持选择器 下标 函数 函数的返回值应是下标
.is() 代表是什么的就选中 可以是各种选择器 或者是函数 （返回值是布尔类型）
可以用于选择出指定类型的元素 也可以用来判断 选中的是不是指定类型的元素
.children( [selector ] ) 获得匹配元素集合中每个元素的子元素，选择器选择性筛选。
.find( selector ) 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代。 在该元素的所有后代元素中查找指定类型的元素
.parent( [selector ] )取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。
.parents( [selector ] ) 获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数。
.siblings( [selector ] )获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。
.next()下一个元素 同级
.prev（） 上一个元素 同级
.nextAll（）后面的所有元素 同级
.prevAll（）前面的所有元素 同级
事件的绑定
on 绑定事件 四个参数
div.on(type , selecter , obj , fn )
type 是字符串类型 放的是事件类型，如 click
selecter 字符串类型 是选择器，代表过滤 只有这个选择器里面的元素才能触发事件
obj 对象类型，给事件传递的参数
fn 函数，事件触发之后执行的函数
$('div p:first-child:first').on('click','span',{name:'张忠仁',age:18},function(ev){
console.log(ev); 打印参数的所有属性和属性值
ev.data 传进去的参数
console.log('点击了P标签');
});
解除绑定事件 off
div.off（） 移除所有事件
div.off('click') 移除所有点击事件
div.off（'click',fn） 移除指定的点击事件