jq知识总结

时间:2022-11-21 19:39:00

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

Triggertype,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”))

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