jq知识总结

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");选中页面中的全部内容