jQuery
jQuery基本选择器：
id选择器 $(“#div1”)
class选择器 $(“.div1”)
元素选择器 $(“div”)
* 选择器 $(“*”) 所有元素
组合选择器 $(“#div1,.div1,div”)
层次选择器 $(“div span”) 获取div下的所有span，包括子子孙孙
子选择器 $(“#div1>div”)获取#div下的div，只能获得儿子
相邻第一个元素选择器 $(“div+span”)获取div相邻的第一个span,相当于.next(),$(“div”).next(“span”)
相邻的所有选择器 $(“div~span”)获取div后边所有的兄弟，相当于.nextAll()
jQuery伪类选择器：
：first伪类选择器 $(“li :first”)获取一组li元素中的第一个li
eq(“index”)伪类选择器 $(“li:eq(3)”)获取索引是3的li
:contains(text)伪类选择器 $(“li:contains(“土豪”)”)找包含“土豪”两个字的li
：not（）选取除指定之外的元素
：even（）偶数选择器,从索引0开始的
:odd（）奇数选择器，从索引0开始的
：gt（）选取大于指定索引的元素
：lt（）选取小于指定索引的元素
：header选取h1,h2,h3,h4,h5,h6标签
：animated选取正在执行动画的元素。
:contains()选取包含文本内容的元素
$(‘p:contains(“live”)’).show().siblings().hide();让包含live的p标签显示，其他的兄弟节点都隐藏。
：empty()选择不包含子元素或者文本空元素
：parent选择含有子元素或者文本的元素
:has(selector)伪类选择器 $(“li:has(‘p’)”)获取li下边的p元素
:hidden伪类选择器 获取所有不可见的元素
Var $str=$(“p:hidden”).html();
$(“div”).html($str);
:hidden的使用条件：
1、肉眼看不到的选择器
2、在网页上不占用位置
:visible伪类选择器 $(“p:visible”) 与：hidden相反，获取所有可见的元素，也就是display值不是none的所有元素
[attribute=value]属性选择器 获取属性名和属性值完全相同的元素，如$(“li[title=’我最爱’]”)
[attribute!=value]属性选择器 获取属性名是attribute，属性值不是value的元素
[attribute*=value]属性选择器 获取属性值中包含value的所有元素
:first-child子元素伪类选择器 获取第一个子元素
:last-child子元素伪类选择器 获取最后一个子元素
Children():选取子元素
Parent():选取父元素
Parents():选取祖先元素
parentsUntil()：所有的父辈元素，知道遇到匹配的那个元素为止，
Prev()：前一个兄弟元素
jQuery表单选择器：(注：冒号前边要加空格)
:input表单选择器 $(“#div1 :input”)获取所有表单元素
:text表单文本选择器 $(“#div1 :text”)
:password表单密码选择器 $(“#div1 :password”)
:radio单选按钮选择器 $(“#div1 :radio”) $(“#div1 :radio”).hide()
:checkbox复选框选择器
$(“#div1 :checkbox”) $(“#div1 :checkbox”).attr(“checkbox”,”true”);
:submit提交按钮选择器
$(“#div1 :submit”) $(“#div1 :submit”).attr(“value”,”点我”)
:image图像域选择器
$(“#div1 :image”) $(“#div1 :image”).addclass(“red”)
:button表单按钮选择器
$(“#div1 :button”) $(“#div1 :button”).addclass(“red”)
:checked选中状态选择器
$(“#div1 :checked”) $(“#div1 :checked”).hide();
:selected选中状态选择器
$(“#div1 :selected”) $(“#div1 :selected”).text(“我处于选中状态”)
Filter()筛选指定表达式的元素
Is()检测是否元素返回布尔值
Has()保留包含特定后代的元素，去掉那些不含有指定后代的元素
Map（）将一组元素转换成其他数组
Slice（）根据指定的下标范围，选取匹配的元素集合
如：$(”p”).slice(1,5)找到从索引1开始到索引5但不包含5的p标签，索引如果是负值，则是从最大的索引开始找
Children：选取子元素
使用attr获取元素属性名
$(“#a1”).attr(“href”)获取#a1的href属性
$(“#div1”).attr(“class”)获取#div1的class值
操作元素的内容
Html()和text()操作元素的内容
当两个方法中参数为空时，表示获取该元素的内容，如果包含参数，则把参数值设置为元素的内容。
操作元素的样式 css() addClass()
$(“#div1”).css(“color”,”red”)
$(“#div1”).css({“color”:”red”,”font-size”:”12px”})
$(“#div1”).addClass(“c1 c2”)
移除属性和样式
removeAttr(name)移除元素的属性名
$(“a”).removeAttr(“href”);移除a元素中的href属性
removeClass(class)移除元素的样式名
$(“#div1”).removeClass(“c1 c2”)移除#div1中的class名c1和c2
使用Append()方法向元素内追加内容
Append（content）方法的功能是向指定的元素后面追加内容，被追加的content参数可以是字符，html元素标记，还可以是一个返回字符串内容的函数
例：往body中添加一个有id 和title属性和显示内容的div元素
方法1：Var $div1=”<div id=’div1’ title=’hi’>我是动态创建的</div>”;
$(“body”).append($html);
方法2：function rel(){
var $html="<div id='div1' title='哈哈哈哈哈哈'>我是新来的</div>";
return $html;
}
$("body").append(rel());
appendTo( )方法向被选元素前插入内容 $(content).appendTo(selector);
$(“.c1”).appendTo(“#div1”); 给#div1添加一个class名c1
Prepend向指定元素前面添加，同append
prependTo同appendTo
Wrap（）将所有匹配的元素单独包裹
wrapAll（）将所有匹配元素用一个元素包裹
wrapInner（）将所有匹配的元素的子内容用其他标签包裹
删除节点：remove（）；empty（）,empty()只是清空内容，但是标签还在
Upwrap（）把父元素删除
使用before()和after()在元素前后插入内容
$(selector).before(content)和$(selector).after(content)
$(“#div1”).before(“.c1”)
使用clone()方法复制元素。复制后的元素包括他的节点、文本和属性
$(selector).clone( )
其中参数selector可以是一个元素或HTML内容
使用replaceWith( )和replaceAll( )方法都可以用于替换元素或元素中的内容，但他们调用时，内容和被替换元素所在的位置不同
$(selector).replaceWith(content)和$(content).replaceAll(selector);
参数selector为被替换的元素，content为替换的内容
例：调用replaceWith()方法将页面中的span元素替换成一段html字符串
Var $html=”<span class=’red’ title=’hi’>我是土豪</span>”;
$(“.green”).replaceWith($html);
$($html).replaceAll(“.green”)
使用wrap( )和wrapInner( )方法包裹元素和内容
wrap()和wrapInner()都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，他们的调用格式如下：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper);
Selector为被包裹的元素，wrapper为包裹元素的格式。
例：调用wrap（）把span元素用div包起来
$(“span”).wrap(“<div></div>”);
$(“span”).wrapInner(“<div></div>”)
使用each（）方法遍历元素
使用each（）方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，他的调用格式为：$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，他从0开始。
例：遍历所有li，给索引是6的li添加class名c1
$(“li”).each(function(index){
If(index==6){
$(this).addClass(“c1”);
// $(this).attr(“class”,”c1”);
}
})
使用remove（）和empty（）方法删除元素
remove( )方法删除所选元素本身和子元素，该方法可以添加过滤参数指定需要删除的某些元素，而empty（）方法则只删除所选元素的子元素。
例：使用attr方法，取消id号为test的复选框选中状态
$(“#test”).attr(“checked”,false);
页面加载时触发ready( )事件
ready( )事件类似于onLoad( )事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready( )可以写多个，按顺序执行
写法：$(document).ready(function(){ })等价于$(function（）{})
例：点击按钮，改变class是c1的内容
$(document).ready(function(){
$(“input”).bind(“click”,function(){
$(“.c1”).html(“我被点击了！”)
})
})
例：点击按钮，让按钮状态变成不可用
$(document).ready(function(){
$(“input”).bind(“click”,function(){
$(this).attr(“disabled”,true);
})
})
事件绑定用bind方法，事件名称直接用空格隔开
如 $(“#div1”).bind(“click mouseout”,function( ){ })
使用hover（）方法切换事件
Hover（）方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切换效果。格式：$(selector).hover(over,out);
Over是数遍移到所选元素上触发的函数，out是鼠标移出元素时触发的函数
例：鼠标经过按钮时，给它增加一个class名red，鼠标离开时，给它删除class名red
$(function(){
$(“input”).hover(
function(){
$(this).addClass(“red”);
},function(){
$(this).removeClass(“red”);
}
)
})
使用toggle（）方法可以在元素的click事件中绑定两个或两个以上的函数，同时，还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式：
$(selector).toggle(function1()function2(),functionN().....)
使用unbind( )方法移除元素绑定的方法
even表示需要移除的事件名称，多个事件用空格隔开，function参数为事件执行时调用的函数名称
dblclick是jQuery中的双击事件
例： $(function () {
$("div").bind("click",
function () {
$(this).removeClass("backcolor").addClass("color");
}).bind("dblclick", function () {
$(this).removeClass("color").addClass("backcolor");
})
$("#btntest").bind("click", function () {
$("div").unbind("click",function(){
$(this).attr("disabled", "true");
})
});
});
使用one( )方法绑定元素的一次性事件，这个方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，他的调用格式如下：
$(selector).one(event,[data],fun);
Event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
调用show（）和hide（）方法显示和隐藏元素
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]);
Speed的值可为slow fast或毫秒数值
调用toggle（）方法实现动画切换效果
$(selector).toggle(speed,[callback])
例：点击按钮#btn，让div以1秒的速度隐藏，隐藏完让btn的value变成显示。
$(function(){
$(“#btn”).bind(“click”,function(){
Var $this=$(this);
$(“div”).toggle(1000,function(){
$this.val()==”隐藏”?$this.val(“显示”):$this.val(“隐藏”)；
})
})
})
使用slideUp（）和slideDown（）方法的滑动效果
$(selector).slideUp(speed,[callback])向上滑动
$(selector).slideDown(speed,[callback])向下滑动
给Selector下的所有后代元素span设置样式，颜色为红色。
$(selector).find(“span”).css(‘color’,’red’)
jQuery中 val（）表示value的值。
例：当btn的内容为显示时，点击让div的内容从上往下滑动显示，btn的内容变为隐藏，否则相反
$(function(){
$("#btn").bind("click",function(){
$this=$(this);
if($this.val()=="显示"){
$("div").slideDown(3000,function(){
$this.val("隐藏");
})
}else{
$("div").slideUp(3000,function(){
$this.val("显示");
})
}
})
})
使用slideToggle()方法实现slideUp（）和slideDown（）方法的切换，也就是如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动。
$(selector).slideToggle(speed,callback);
fadeIn()与fadeOut()实现淡入淡出效果
格式：$(selector).fadeIn(speed,function(){ })
$(selector).fadeOut(speed,function(){ })
fadeTo( )方法设置淡入淡出效果的不透明度
调用fadeTo（）方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：
$(selector).fadeTo(speed,opacity,callback)
jQuery对象不能使用DOM对象中的方法，只能使用jquery中的方法。
DOM对象不能使用任何jquery对象中的方法。
如：alert(input.value) 输出input的value值，这么用法没有问题
alert(input.val()) 这个使用了jquery中的方法，会报错
alert($(input).val())这个也不会有问题，能输出value的值
在编辑器中输入input:text然后按tab键，可以形成一行input代码 type是text
在编辑器中输入p#p1然后按tab键，可以形成一个p标签， id是 p1
Position:fixed; IE6不支持
在编辑器中输入#outer{outer}>#wrap{wrap}>p{我是第$个p标签}*3+div{我是div标签}，形成html结构， 大括号里表示的是内容
Jquery对象转换成DOM对象的方法
1.可以使用索引（有些获取的是类数组，需要加上索引 再用）
2.可以使用get（index）方法
如：input[0]或 input.get(0)
jQuery释放$的控制权：jQuery.noConflict()方法
如果需要释放$的控制权，直接在js中写入jQuery.noConflict()，然后需要用到$的时候，直接把jQuery当$用。或者定义一个变量，变量值是jQuery.noConflict()，下边需要用到$的地方，直接用变量名代替$;
如果想解决prototype.js和jQuery中的$冲突问题，就释放jQuery中的$控制权。
jQuery有完美的容错机制，获取元素时，如果写错了获取不到，jQuery也不会报错。
单引号和双引号不能同时使用，如果外面用单引号，里边也想用单引号的话，可以给里边的单引号，添加转义符“”
jQuery动画：$(“#div1”).animate({‘left’:’1000’},1000)
例：$(“:animated”).css(“background”,”red”);让运动的元素background变成red；
$(“input”).map(function(){})遍历所有的input，也可以用each方法
Off()：用于取消所有on的绑定事件
如：取消段落p上所有用on绑定的事件$(“p”).off( );
同时绑定多个事件1
如：给一个button按钮添加一个切换事件，点击button时让段落p在显示或隐藏中切换
给button添加一个鼠标经过事件，当鼠标经过button时，让body的背景色变红，当鼠标离开时，让body的背景色变绿
$(“button”).bind({
Click:function(){ $(“p”).slideToggle()},
Mouseover:function(){$(“body”).css(“background-color”,”red”)}
Mouseout:function(){$(“body”).css(“background-color”,,”green”)}
})
同时绑定多个事件2
如：当鼠标经过 button和点击button时，让body的背景色变成绿色
$(“button”).bind(“click mouseover”,function(){
$(“body”).css(“background-color”,”green” );
})
One：给元素绑定一次性事件，也就是通过one绑定的事件，只会执行一次，其他规则和bind相同
如：当第一次点击p标签的时候，弹出p的内容。
$(“p”).one(“click”,function(){
Alert($(this).text( ));
})
Offset（）返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效
clientWidth：实际内容的宽度（width）+左右padding值，当内容有溢出的时候没有影响
clientHeight：实际内容的高度（height）+上下的padding，当内容有溢出的时候没有影响
clientLeft：当前元素的左边框
clientTop：当前元素的上边框
scrollTop:当前元素内容卷去的高度、有一定范围的，最小是0，最大值是实际内容的高度
scrollLeft：当前元素内容卷去的宽度、有一定范围的，最小是0，最大值是实际内容的宽度
scrollHeight:实际内容的高，包括溢出的，也包括padding，如果没有溢出，此值和clientHeight相同，
如果内容有溢出，则只包括上padding 不包括下padding。
scrollWidth：实际内容的宽 包括溢出的，也包括padding，如果没有溢出，此值和clientWidth相同，
如果内容有溢出，则只包括左 padding
获取当前屏幕的可视化窗口宽度和高度
document.documentElement.clientHeight||document.body.clientHeight
document.body.clientWidth||document.documentElement.clientWidth
获取当前屏幕的真实宽度和高度
document.documentElement.scrollHeight||document.body.scrollHeight
document.body.scrollWidth||document.documentElement.scrollWidth
offsetWidth：clientWidth+左右的border值，当内容有溢出的时候没有影响
offsetHeight：clientHeight+上下的border值，当内容有溢出的时候没有影响
offsetTop:当前元素距离参照物的上偏移量，不算上边框
offsetLeft:当前元素距离参照物的左偏移量，不算左边框
offsetParent获取父亲参照物
在这12个属性里，只有scrollTop、scrollLeft是可读的，其他10个DOM盒子模型属性都是只读的。（只读是可以获取，但是不能改变）
window.getComputedStyle();//获取经过浏览器计算的样式（只要浏览器渲染过的样式，我们在页面中看到的样式，都是浏览器计算过的）
replaceWith：将所有匹配的元素替换成html或DOM元素
如：$(“.p1”).replaceWith($(“.p2”))
Trigger（type,data）:在每一个匹配的元素上触发某类事件。
示例1：提交第一个表单，但不用submit（）；
$(“form:first”).trigger(“submit”);
示例2：给一个元素传递参数
$(“p”).click(function(event,a,b){
//这里foo就是a，tar就是b
}).tragger(“click”,[“foo”,”tar”]);
unbind（）方法：跟bind相反，从每一个匹配的元素中解除绑定的事件。如果没有传递参数，则解除所有的绑定事件。
Resize:当改变浏览器窗口大小时触发时间
例：定义一个span标签，把改变窗口大小的次数作为span标签的内容，显示在页面上。
var x=0;
$(window).resize(function(){
$(“span”).text(x+=1);
})
Size:计算页面中某个元素的数量
例：弹出页面中的span标签个数
alert($(“span”).size())
length:计算页面中某个元素的数量
例：弹出页面中的span标签个数
alert($(“span”).length)
removeAttr:移除指定元素的某个属性
例：移除img标签的src属性
$(“img”).removeAttr(“src”);
注：1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。
Prop:获取在匹配元素集中的第一个元素的属性值
例：把页面中所有的复选框设置成选中状态
$(“input[type=’checkbox’]”).prop(“checked”,true);
例：把页面中所有的复选框设置成未选中的状态
$(“”)
Unbind：是bind（）的方向操作，从匹配的元素上删除绑定事件
例：点击段落p会执行函数foo，删除这个点击事件，不执行foo
$(“p”).unbind(“click”,foo);
Delegate(selector,type,fn)给匹配的元素绑定多个事件:
例：让table中的td，鼠标经过时背景色变成绿色。鼠标离开变成默认，点击时变成红色
$("table").delegate("td",{"click":fn,"mouseover":fn2,"mouseout":fn1});
function fn(){
$(this).css("backgroundColor","red");
}
function fn1(){
$(this).css("backgroundColor","transparent");
}
function fn2(){
$(this).css("backgroundColor","green");
}
wrap：将匹配的元素用一个新创建的容器包裹起来
例：将所有的p标签用class是con的div包裹起来（注：这时每一个p标签都会被一个新创建的class是con的div包裹着。）
$(“p”).wrap($(“.con”))
wrapAll：将所有匹配的元素用一个新创建的容器包裹起来、
例：将所有的p标签用class是con的div包裹起来（注：这时所有的p标签都会被同一个新创建的class是con的div包裹着。）
$(“p”).wrapAll($(“.con”));
Remove():将所有匹配的元素移除
例：将所有的p标签移除
$(“p”).remove();
Detach():从DOM中删除所有匹配的元素，跟remove（）不同的是所有的绑定事件、附加数据会被保留。(用法和remove相同)
例：将所有class是mm的p标签移除
$(“p”).detach(“.mm”)
insertAfter：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
例：将段落p添加到div的后边
$(“p”).insertAfter($(“div”))
insertBefore：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
例：将段落p添加到div的前边
$(“p”).insertBefore($(“div”))
prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。
例：将span标签放到p标签内部的前边
$(“span”).prependTo($(“p”))
appendTo():把所有匹配的元素后置到另一个、指定的元素元素集合中。
例：将span标签放到p标签内部的后边
$(“span”).appendTo($(“p”));
Append():向所有匹配的元素集合后边追加一个元素
如：在p标签内部的最后追加一个span标签
$(“p”).append($(“span”))
prepend():向所有匹配的元素集合前边追加一个元素
如：在p标签内部的前边追加一个span标签
$(“p”).prepend($(“span”))
After():在每个匹配的元素之后插入内容。
例：在所有的p标签后边追加一个b标签。
$(“p”).after(“<b>已读</b>”)；
before():在每个匹配的元素之前插入内容。
例：在所有的p标签前边追加一个b标签。
$(“p”).before(“<b>已读</b>”)；
Clone（）：克隆 clone里边有个布尔值，用来决定是否克隆该元素上的绑定事件。如果值为true，则副本也有对应的绑定事件。
例：复制一个button标签并添加到p标签的后边，要求克隆绑定事件
$(“button”).clone(true).appendTo($(“p”));
hasClass():相当于is("." + class)，用来判断是否包含某个class，如果包含则返回true
例：给span添加点击事件，如果span的class值是spn的话，则点击过后让span的颜色变成红色
$("span").bind("click",function(){
if($(this).hasClass("spn")){
$(this).css("color","red");
}
})
Filter():筛选出与指定表达式匹配的元素集合。
例:保留第一个以及带有select类的p元素
$(“p”).filter(“.select, :first”)
Children():查找匹配元素的所有子元素集合（注：parents()是查找所有的祖辈元素，而children()只考虑子元素，不考虑后代元素）
例：获取class是ul1下的所有li子元素添加一个class名selected
$(“.ul1”).children(“li”).addClass(“selected”);
Find():遍历 查找（注：find查找的范围包括子子孙孙。）
例：给class是div1下的所有div，添加一个class名selected
$(“.div1”).find(“div”).addClass(“selected”);
注：$(“.div1”).find(“div”)与$(“.div1 div”)效果相同，意义相同
next():返回匹配元素后边一个紧邻的同辈元素
例：把class是p1的p标签后边的第一个span标签的字体颜色设置成红色。
$(“.p1”).next(“span”).css(“color”,”red”);
nextAll（）：返回匹配元素后边所有符合条件的同辈元素
例：把class是p1的p标签后边的所有span标签的字体颜色设置成红色。
$(“.p1”).nextAll(“span”).css(“color”,”red”);
nextUntil():返回匹配元素后边所有符合条件的同辈元素
例：把class是c1的div后边所有的同辈div字体颜色设置成红色，直到遇到class是c2的时候停止。
$(“.c1”).nextUntil(“c2”).css(“color”,”red”);
offsetParent():返回第一个设置了position定位的父节点。只针对可见元素
例：把离class是c1的div最近的设置了position定位的父节点的背景色设置为红色。
$(".c1").offsetParent().css("background-color","red");
Parent（）：返回匹配元素的唯一父节点
例：在控制台输出class是c1的父节点。
console.log($(".c1").parent());
parentsUntil（）：从匹配元素开始往上找，知道找到某一个符合条件的父节点为止
例：从class是c4开始往上找，直到找到class是c1的父节点为止，把找到的元素字体颜色设置为白色。
$(".c4").parentsUntil(".c1").css("color","#fff");
prev():返回匹配元素前边紧邻的一个符合条件的同辈元素
例：把class是c1的div前边紧邻的同辈元素中的字体颜色设置为红色
$(".c1").prev().css("color","red")；
注：如果prev()里边有条件，则只有条件成立的时候才会执行该语句，条件不成立的话不执行。
prevAll():返回匹配元素前边符合条件的所有同辈元素
例：把class是c1的div前边class是c5的所有同辈元素颜色设置为红色
$(".c2").prevAll(".c5").css("color","red");
Siblings():返回匹配元素所有符合条件的兄弟节点
例：将class是c2的所有class是c1的兄弟节点颜色设置为红色。
Contents():查找匹配元素内部的所有子节点（包括文本节点）
例：将段落p中所有的文本节点加粗
$(“p”).contents().not(“[nodeType=1]”).wrap(“<b>”);
Animate（）：
例：点击#div时，让p的 left值变成100
$(“#div1”).bind(“click”,function(){
$(“p”).animate({“left”:”100px”});
})
$(window).unload当用户离开页面时触发的事件
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面
$(window).height()获取当前屏幕的高度，移动端是需要加上等比放大的meta标签才有效
document.execCommand("selectAll");选中页面中的全部内容
jQuery
jQuery基本选择器：
id选择器 $(“#div1”)
class选择器 $(“.div1”)
元素选择器 $(“div”)
* 选择器 $(“*”) 所有元素
组合选择器 $(“#div1,.div1,div”)
层次选择器 $(“div span”) 获取div下的所有span，包括子子孙孙
子选择器 $(“#div1>div”)获取#div下的div，只能获得儿子
相邻第一个元素选择器 $(“div+span”)获取div相邻的第一个span,相当于.next(),$(“div”).next(“span”)
相邻的所有选择器 $(“div~span”)获取div后边所有的兄弟，相当于.nextAll()
jQuery伪类选择器：
：first伪类选择器 $(“li :first”)获取一组li元素中的第一个li
eq(“index”)伪类选择器 $(“li:eq(3)”)获取索引是3的li
:contains(text)伪类选择器 $(“li:contains(“土豪”)”)找包含“土豪”两个字的li
：not（）选取除指定之外的元素
：even（）偶数选择器,从索引0开始的
:odd（）奇数选择器，从索引0开始的
：gt（）选取大于指定索引的元素
：lt（）选取小于指定索引的元素
：header选取h1,h2,h3,h4,h5,h6标签
：animated选取正在执行动画的元素。
:contains()选取包含文本内容的元素
$(‘p:contains(“live”)’).show().siblings().hide();让包含live的p标签显示，其他的兄弟节点都隐藏。
：empty()选择不包含子元素或者文本空元素
：parent选择含有子元素或者文本的元素
:has(selector)伪类选择器 $(“li:has(‘p’)”)获取li下边的p元素
:hidden伪类选择器 获取所有不可见的元素
Var $str=$(“p:hidden”).html();
$(“div”).html($str);
:hidden的使用条件：
1、肉眼看不到的选择器
2、在网页上不占用位置
:visible伪类选择器 $(“p:visible”) 与：hidden相反，获取所有可见的元素，也就是display值不是none的所有元素
[attribute=value]属性选择器 获取属性名和属性值完全相同的元素，如$(“li[title=’我最爱’]”)
[attribute!=value]属性选择器 获取属性名是attribute，属性值不是value的元素
[attribute*=value]属性选择器 获取属性值中包含value的所有元素
:first-child子元素伪类选择器 获取第一个子元素
:last-child子元素伪类选择器 获取最后一个子元素
Children():选取子元素
Parent():选取父元素
Parents():选取祖先元素
parentsUntil()：所有的父辈元素，知道遇到匹配的那个元素为止，
Prev()：前一个兄弟元素
jQuery表单选择器：(注：冒号前边要加空格)
:input表单选择器 $(“#div1 :input”)获取所有表单元素
:text表单文本选择器 $(“#div1 :text”)
:password表单密码选择器 $(“#div1 :password”)
:radio单选按钮选择器 $(“#div1 :radio”) $(“#div1 :radio”).hide()
:checkbox复选框选择器
$(“#div1 :checkbox”) $(“#div1 :checkbox”).attr(“checkbox”,”true”);
:submit提交按钮选择器
$(“#div1 :submit”) $(“#div1 :submit”).attr(“value”,”点我”)
:image图像域选择器
$(“#div1 :image”) $(“#div1 :image”).addclass(“red”)
:button表单按钮选择器
$(“#div1 :button”) $(“#div1 :button”).addclass(“red”)
:checked选中状态选择器
$(“#div1 :checked”) $(“#div1 :checked”).hide();
:selected选中状态选择器
$(“#div1 :selected”) $(“#div1 :selected”).text(“我处于选中状态”)
Filter()筛选指定表达式的元素
Is()检测是否元素返回布尔值
Has()保留包含特定后代的元素，去掉那些不含有指定后代的元素
Map（）将一组元素转换成其他数组
Slice（）根据指定的下标范围，选取匹配的元素集合
如：$(”p”).slice(1,5)找到从索引1开始到索引5但不包含5的p标签，索引如果是负值，则是从最大的索引开始找
Children：选取子元素
使用attr获取元素属性名
$(“#a1”).attr(“href”)获取#a1的href属性
$(“#div1”).attr(“class”)获取#div1的class值
操作元素的内容
Html()和text()操作元素的内容
当两个方法中参数为空时，表示获取该元素的内容，如果包含参数，则把参数值设置为元素的内容。
操作元素的样式 css() addClass()
$(“#div1”).css(“color”,”red”)
$(“#div1”).css({“color”:”red”,”font-size”:”12px”})
$(“#div1”).addClass(“c1 c2”)
移除属性和样式
removeAttr(name)移除元素的属性名
$(“a”).removeAttr(“href”);移除a元素中的href属性
removeClass(class)移除元素的样式名
$(“#div1”).removeClass(“c1 c2”)移除#div1中的class名c1和c2
使用Append()方法向元素内追加内容
Append（content）方法的功能是向指定的元素后面追加内容，被追加的content参数可以是字符，html元素标记，还可以是一个返回字符串内容的函数
例：往body中添加一个有id 和title属性和显示内容的div元素
方法1：Var $div1=”<div id=’div1’ title=’hi’>我是动态创建的</div>”;
$(“body”).append($html);
方法2：function rel(){
var $html="<div id='div1' title='哈哈哈哈哈哈'>我是新来的</div>";
return $html;
}
$("body").append(rel());
appendTo( )方法向被选元素前插入内容 $(content).appendTo(selector);
$(“.c1”).appendTo(“#div1”); 给#div1添加一个class名c1
Prepend向指定元素前面添加，同append
prependTo同appendTo
Wrap（）将所有匹配的元素单独包裹
wrapAll（）将所有匹配元素用一个元素包裹
wrapInner（）将所有匹配的元素的子内容用其他标签包裹
删除节点：remove（）；empty（）,empty()只是清空内容，但是标签还在
Upwrap（）把父元素删除
使用before()和after()在元素前后插入内容
$(selector).before(content)和$(selector).after(content)
$(“#div1”).before(“.c1”)
使用clone()方法复制元素。复制后的元素包括他的节点、文本和属性
$(selector).clone( )
其中参数selector可以是一个元素或HTML内容
使用replaceWith( )和replaceAll( )方法都可以用于替换元素或元素中的内容，但他们调用时，内容和被替换元素所在的位置不同
$(selector).replaceWith(content)和$(content).replaceAll(selector);
参数selector为被替换的元素，content为替换的内容
例：调用replaceWith()方法将页面中的span元素替换成一段html字符串
Var $html=”<span class=’red’ title=’hi’>我是土豪</span>”;
$(“.green”).replaceWith($html);
$($html).replaceAll(“.green”)
使用wrap( )和wrapInner( )方法包裹元素和内容
wrap()和wrapInner()都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，他们的调用格式如下：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper);
Selector为被包裹的元素，wrapper为包裹元素的格式。
例：调用wrap（）把span元素用div包起来
$(“span”).wrap(“<div></div>”);
$(“span”).wrapInner(“<div></div>”)
使用each（）方法遍历元素
使用each（）方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，他的调用格式为：$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，他从0开始。
例：遍历所有li，给索引是6的li添加class名c1
$(“li”).each(function(index){
If(index==6){
$(this).addClass(“c1”);
// $(this).attr(“class”,”c1”);
}
})
使用remove（）和empty（）方法删除元素
remove( )方法删除所选元素本身和子元素，该方法可以添加过滤参数指定需要删除的某些元素，而empty（）方法则只删除所选元素的子元素。
例：使用attr方法，取消id号为test的复选框选中状态
$(“#test”).attr(“checked”,false);
页面加载时触发ready( )事件
ready( )事件类似于onLoad( )事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready( )可以写多个，按顺序执行
写法：$(document).ready(function(){ })等价于$(function（）{})
例：点击按钮，改变class是c1的内容
$(document).ready(function(){
$(“input”).bind(“click”,function(){
$(“.c1”).html(“我被点击了！”)
})
})
例：点击按钮，让按钮状态变成不可用
$(document).ready(function(){
$(“input”).bind(“click”,function(){
$(this).attr(“disabled”,true);
})
})
事件绑定用bind方法，事件名称直接用空格隔开
如 $(“#div1”).bind(“click mouseout”,function( ){ })
使用hover（）方法切换事件
Hover（）方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切换效果。格式：$(selector).hover(over,out);
Over是数遍移到所选元素上触发的函数，out是鼠标移出元素时触发的函数
例：鼠标经过按钮时，给它增加一个class名red，鼠标离开时，给它删除class名red
$(function(){
$(“input”).hover(
function(){
$(this).addClass(“red”);
},function(){
$(this).removeClass(“red”);
}
)
})
使用toggle（）方法可以在元素的click事件中绑定两个或两个以上的函数，同时，还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式：
$(selector).toggle(function1()function2(),functionN().....)
使用unbind( )方法移除元素绑定的方法
even表示需要移除的事件名称，多个事件用空格隔开，function参数为事件执行时调用的函数名称
dblclick是jQuery中的双击事件
例： $(function () {
$("div").bind("click",
function () {
$(this).removeClass("backcolor").addClass("color");
}).bind("dblclick", function () {
$(this).removeClass("color").addClass("backcolor");
})
$("#btntest").bind("click", function () {
$("div").unbind("click",function(){
$(this).attr("disabled", "true");
})
});
});
使用one( )方法绑定元素的一次性事件，这个方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，他的调用格式如下：
$(selector).one(event,[data],fun);
Event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
调用show（）和hide（）方法显示和隐藏元素
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]);
Speed的值可为slow fast或毫秒数值
调用toggle（）方法实现动画切换效果
$(selector).toggle(speed,[callback])
例：点击按钮#btn，让div以1秒的速度隐藏，隐藏完让btn的value变成显示。
$(function(){
$(“#btn”).bind(“click”,function(){
Var $this=$(this);
$(“div”).toggle(1000,function(){
$this.val()==”隐藏”?$this.val(“显示”):$this.val(“隐藏”)；
})
})
})
使用slideUp（）和slideDown（）方法的滑动效果
$(selector).slideUp(speed,[callback])向上滑动
$(selector).slideDown(speed,[callback])向下滑动
给Selector下的所有后代元素span设置样式，颜色为红色。
$(selector).find(“span”).css(‘color’,’red’)
jQuery中 val（）表示value的值。
例：当btn的内容为显示时，点击让div的内容从上往下滑动显示，btn的内容变为隐藏，否则相反
$(function(){
$("#btn").bind("click",function(){
$this=$(this);
if($this.val()=="显示"){
$("div").slideDown(3000,function(){
$this.val("隐藏");
})
}else{
$("div").slideUp(3000,function(){
$this.val("显示");
})
}
})
})
使用slideToggle()方法实现slideUp（）和slideDown（）方法的切换，也就是如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动。
$(selector).slideToggle(speed,callback);
fadeIn()与fadeOut()实现淡入淡出效果
格式：$(selector).fadeIn(speed,function(){ })
$(selector).fadeOut(speed,function(){ })
fadeTo( )方法设置淡入淡出效果的不透明度
调用fadeTo（）方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：
$(selector).fadeTo(speed,opacity,callback)
jQuery对象不能使用DOM对象中的方法，只能使用jquery中的方法。
DOM对象不能使用任何jquery对象中的方法。
如：alert(input.value) 输出input的value值，这么用法没有问题
alert(input.val()) 这个使用了jquery中的方法，会报错
alert($(input).val())这个也不会有问题，能输出value的值
在编辑器中输入input:text然后按tab键，可以形成一行input代码 type是text
在编辑器中输入p#p1然后按tab键，可以形成一个p标签， id是 p1
Position:fixed; IE6不支持
在编辑器中输入#outer{outer}>#wrap{wrap}>p{我是第$个p标签}*3+div{我是div标签}，形成html结构， 大括号里表示的是内容
Jquery对象转换成DOM对象的方法
1.可以使用索引（有些获取的是类数组，需要加上索引 再用）
2.可以使用get（index）方法
如：input[0]或 input.get(0)
jQuery释放$的控制权：jQuery.noConflict()方法
如果需要释放$的控制权，直接在js中写入jQuery.noConflict()，然后需要用到$的时候，直接把jQuery当$用。或者定义一个变量，变量值是jQuery.noConflict()，下边需要用到$的地方，直接用变量名代替$;
如果想解决prototype.js和jQuery中的$冲突问题，就释放jQuery中的$控制权。
jQuery有完美的容错机制，获取元素时，如果写错了获取不到，jQuery也不会报错。
单引号和双引号不能同时使用，如果外面用单引号，里边也想用单引号的话，可以给里边的单引号，添加转义符“”
jQuery动画：$(“#div1”).animate({‘left’:’1000’},1000)
例：$(“:animated”).css(“background”,”red”);让运动的元素background变成red；
$(“input”).map(function(){})遍历所有的input，也可以用each方法
Off()：用于取消所有on的绑定事件
如：取消段落p上所有用on绑定的事件$(“p”).off( );
同时绑定多个事件1
如：给一个button按钮添加一个切换事件，点击button时让段落p在显示或隐藏中切换
给button添加一个鼠标经过事件，当鼠标经过button时，让body的背景色变红，当鼠标离开时，让body的背景色变绿
$(“button”).bind({
Click:function(){ $(“p”).slideToggle()},
Mouseover:function(){$(“body”).css(“background-color”,”red”)}
Mouseout:function(){$(“body”).css(“background-color”,,”green”)}
})
同时绑定多个事件2
如：当鼠标经过 button和点击button时，让body的背景色变成绿色
$(“button”).bind(“click mouseover”,function(){
$(“body”).css(“background-color”,”green” );
})
One：给元素绑定一次性事件，也就是通过one绑定的事件，只会执行一次，其他规则和bind相同
如：当第一次点击p标签的时候，弹出p的内容。
$(“p”).one(“click”,function(){
Alert($(this).text( ));
})
Offset（）返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效
clientWidth：实际内容的宽度（width）+左右padding值，当内容有溢出的时候没有影响
clientHeight：实际内容的高度（height）+上下的padding，当内容有溢出的时候没有影响
clientLeft：当前元素的左边框
clientTop：当前元素的上边框
scrollTop:当前元素内容卷去的高度、有一定范围的，最小是0，最大值是实际内容的高度
scrollLeft：当前元素内容卷去的宽度、有一定范围的，最小是0，最大值是实际内容的宽度
scrollHeight:实际内容的高，包括溢出的，也包括padding，如果没有溢出，此值和clientHeight相同，
如果内容有溢出，则只包括上padding 不包括下padding。
scrollWidth：实际内容的宽 包括溢出的，也包括padding，如果没有溢出，此值和clientWidth相同，
如果内容有溢出，则只包括左 padding
获取当前屏幕的可视化窗口宽度和高度
document.documentElement.clientHeight||document.body.clientHeight
document.body.clientWidth||document.documentElement.clientWidth
获取当前屏幕的真实宽度和高度
document.documentElement.scrollHeight||document.body.scrollHeight
document.body.scrollWidth||document.documentElement.scrollWidth
offsetWidth：clientWidth+左右的border值，当内容有溢出的时候没有影响
offsetHeight：clientHeight+上下的border值，当内容有溢出的时候没有影响
offsetTop:当前元素距离参照物的上偏移量，不算上边框
offsetLeft:当前元素距离参照物的左偏移量，不算左边框
offsetParent获取父亲参照物
在这12个属性里，只有scrollTop、scrollLeft是可读的，其他10个DOM盒子模型属性都是只读的。（只读是可以获取，但是不能改变）
window.getComputedStyle();//获取经过浏览器计算的样式（只要浏览器渲染过的样式，我们在页面中看到的样式，都是浏览器计算过的）
replaceWith：将所有匹配的元素替换成html或DOM元素
如：$(“.p1”).replaceWith($(“.p2”))
Trigger（type,data）:在每一个匹配的元素上触发某类事件。
示例1：提交第一个表单，但不用submit（）；
$(“form:first”).trigger(“submit”);
示例2：给一个元素传递参数
$(“p”).click(function(event,a,b){
//这里foo就是a，tar就是b
}).tragger(“click”,[“foo”,”tar”]);
unbind（）方法：跟bind相反，从每一个匹配的元素中解除绑定的事件。如果没有传递参数，则解除所有的绑定事件。
Resize:当改变浏览器窗口大小时触发时间
例：定义一个span标签，把改变窗口大小的次数作为span标签的内容，显示在页面上。
var x=0;
$(window).resize(function(){
$(“span”).text(x+=1);
})
Size:计算页面中某个元素的数量
例：弹出页面中的span标签个数
alert($(“span”).size())
length:计算页面中某个元素的数量
例：弹出页面中的span标签个数
alert($(“span”).length)
removeAttr:移除指定元素的某个属性
例：移除img标签的src属性
$(“img”).removeAttr(“src”);
注：1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。
Prop:获取在匹配元素集中的第一个元素的属性值
例：把页面中所有的复选框设置成选中状态
$(“input[type=’checkbox’]”).prop(“checked”,true);
例：把页面中所有的复选框设置成未选中的状态
$(“”)
Unbind：是bind（）的方向操作，从匹配的元素上删除绑定事件
例：点击段落p会执行函数foo，删除这个点击事件，不执行foo
$(“p”).unbind(“click”,foo);
Delegate(selector,type,fn)给匹配的元素绑定多个事件:
例：让table中的td，鼠标经过时背景色变成绿色。鼠标离开变成默认，点击时变成红色
$("table").delegate("td",{"click":fn,"mouseover":fn2,"mouseout":fn1});
function fn(){
$(this).css("backgroundColor","red");
}
function fn1(){
$(this).css("backgroundColor","transparent");
}
function fn2(){
$(this).css("backgroundColor","green");
}
wrap：将匹配的元素用一个新创建的容器包裹起来
例：将所有的p标签用class是con的div包裹起来（注：这时每一个p标签都会被一个新创建的class是con的div包裹着。）
$(“p”).wrap($(“.con”))
wrapAll：将所有匹配的元素用一个新创建的容器包裹起来、
例：将所有的p标签用class是con的div包裹起来（注：这时所有的p标签都会被同一个新创建的class是con的div包裹着。）
$(“p”).wrapAll($(“.con”));
Remove():将所有匹配的元素移除
例：将所有的p标签移除
$(“p”).remove();
Detach():从DOM中删除所有匹配的元素，跟remove（）不同的是所有的绑定事件、附加数据会被保留。(用法和remove相同)
例：将所有class是mm的p标签移除
$(“p”).detach(“.mm”)
insertAfter：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
例：将段落p添加到div的后边
$(“p”).insertAfter($(“div”))
insertBefore：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
例：将段落p添加到div的前边
$(“p”).insertBefore($(“div”))
prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。
例：将span标签放到p标签内部的前边
$(“span”).prependTo($(“p”))
appendTo():把所有匹配的元素后置到另一个、指定的元素元素集合中。
例：将span标签放到p标签内部的后边
$(“span”).appendTo($(“p”));
Append():向所有匹配的元素集合后边追加一个元素
如：在p标签内部的最后追加一个span标签
$(“p”).append($(“span”))
prepend():向所有匹配的元素集合前边追加一个元素
如：在p标签内部的前边追加一个span标签
$(“p”).prepend($(“span”))
After():在每个匹配的元素之后插入内容。
例：在所有的p标签后边追加一个b标签。
$(“p”).after(“<b>已读</b>”)；
before():在每个匹配的元素之前插入内容。
例：在所有的p标签前边追加一个b标签。
$(“p”).before(“<b>已读</b>”)；
Clone（）：克隆 clone里边有个布尔值，用来决定是否克隆该元素上的绑定事件。如果值为true，则副本也有对应的绑定事件。
例：复制一个button标签并添加到p标签的后边，要求克隆绑定事件
$(“button”).clone(true).appendTo($(“p”));
hasClass():相当于is("." + class)，用来判断是否包含某个class，如果包含则返回true
例：给span添加点击事件，如果span的class值是spn的话，则点击过后让span的颜色变成红色
$("span").bind("click",function(){
if($(this).hasClass("spn")){
$(this).css("color","red");
}
})
Filter():筛选出与指定表达式匹配的元素集合。
例:保留第一个以及带有select类的p元素
$(“p”).filter(“.select, :first”)
Children():查找匹配元素的所有子元素集合（注：parents()是查找所有的祖辈元素，而children()只考虑子元素，不考虑后代元素）
例：获取class是ul1下的所有li子元素添加一个class名selected
$(“.ul1”).children(“li”).addClass(“selected”);
Find():遍历 查找（注：find查找的范围包括子子孙孙。）
例：给class是div1下的所有div，添加一个class名selected
$(“.div1”).find(“div”).addClass(“selected”);
注：$(“.div1”).find(“div”)与$(“.div1 div”)效果相同，意义相同
next():返回匹配元素后边一个紧邻的同辈元素
例：把class是p1的p标签后边的第一个span标签的字体颜色设置成红色。
$(“.p1”).next(“span”).css(“color”,”red”);
nextAll（）：返回匹配元素后边所有符合条件的同辈元素
例：把class是p1的p标签后边的所有span标签的字体颜色设置成红色。
$(“.p1”).nextAll(“span”).css(“color”,”red”);
nextUntil():返回匹配元素后边所有符合条件的同辈元素
例：把class是c1的div后边所有的同辈div字体颜色设置成红色，直到遇到class是c2的时候停止。
$(“.c1”).nextUntil(“c2”).css(“color”,”red”);
offsetParent():返回第一个设置了position定位的父节点。只针对可见元素
例：把离class是c1的div最近的设置了position定位的父节点的背景色设置为红色。
$(".c1").offsetParent().css("background-color","red");
Parent（）：返回匹配元素的唯一父节点
例：在控制台输出class是c1的父节点。
console.log($(".c1").parent());
parentsUntil（）：从匹配元素开始往上找，知道找到某一个符合条件的父节点为止
例：从class是c4开始往上找，直到找到class是c1的父节点为止，把找到的元素字体颜色设置为白色。
$(".c4").parentsUntil(".c1").css("color","#fff");
prev():返回匹配元素前边紧邻的一个符合条件的同辈元素
例：把class是c1的div前边紧邻的同辈元素中的字体颜色设置为红色
$(".c1").prev().css("color","red")；
注：如果prev()里边有条件，则只有条件成立的时候才会执行该语句，条件不成立的话不执行。
prevAll():返回匹配元素前边符合条件的所有同辈元素
例：把class是c1的div前边class是c5的所有同辈元素颜色设置为红色
$(".c2").prevAll(".c5").css("color","red");
Siblings():返回匹配元素所有符合条件的兄弟节点
例：将class是c2的所有class是c1的兄弟节点颜色设置为红色。
Contents():查找匹配元素内部的所有子节点（包括文本节点）
例：将段落p中所有的文本节点加粗
$(“p”).contents().not(“[nodeType=1]”).wrap(“<b>”);
Animate（）：
例：点击#div时，让p的 left值变成100
$(“#div1”).bind(“click”,function(){
$(“p”).animate({“left”:”100px”});
})
$(window).unload当用户离开页面时触发的事件
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面
$(window).height()获取当前屏幕的高度，移动端是需要加上等比放大的meta标签才有效
document.execCommand("selectAll");选中页面中的全部内容