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