jQuery学习
选择器
- 元素选择器:
$("p")
- id 选择器:
$("#test")
- class 选择器:
$(".test")
- 选择实例
选择器转自 菜鸟教程jQuery教程选择器
效果
隐藏和显示
所用方法:
hide(speed,callback):
隐藏函数,speed
可以为slow、fast和毫秒
,callback
是 hide函数执行完后所执行的函数名称,会在当前动画或者效果完成100%后执行。
show(speed,callback):
同hide
toggle(speed,callback):让隐藏的元素显示,显示的元素隐藏。
<p>我爱你</p>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" class="hide">
<input type="button" value="显示/隐藏" id="toggle">
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p").show(500);
});
$(".hide").click(function(){
$("p").hide(1000,"linear",function(){
alert("成功隐藏!");
});
});
$("#toggle").click(function(){
$("p").toggle(500);
});
});
</script>
淡入和淡出
淡入和淡出主要是用fade的一些方法。
fadeIn(speed,callback):
淡入隐藏的元素
fadeOut(speed,callback):
淡出可见的元素
fadeToggle(speed,callback):
淡入淡出切换
fadeTo(speed,opacity,callback):
渐变为给定的不透明度,speed和opacity必有
<div style="margin-top: 10px;" id="div">
<input type="button" value="淡入" id="fadein">
<input type="button" value="淡出" class="fadeout">
<input type="button" value="淡入/淡出" class="fadetoggle">
<input type="button" value="渐变" id="fadeto">
<div style="background-color: red;width: 50px;height: 50px;"></div>
<div style="background-color: blue;width: 50px;height: 50px;margin-top: 10px;"></div>
</div>
<script>
$(document).ready(function(){
$("#fadein").click(function(){
$("#div div").fadeIn("slow");
});
$(".fadeout").click(function(){
$("#div div").fadeOut("fast");
});
$(".fadetoggle").click(function(){
$("#div div").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#div div").fadeTo("slow",0.5);
});
});
</script>
滑动
滑动使用的是slide方法。
slideDown(speed,callback):
下滑slideUp(speed,callback):
上滑slideToggle(speed,callback):
切换上滑和下滑
<div>
<div id="slidedown" class="slide">点我下滑面板</div>
<div id="slideup" class="slide">点我收起面板</div>
<div id="slidetoggle" class="slide">点我下滑/收起面板</div>
<div id="panel">我是面板!</div>
</div>
#panel,.slide{
width: 150px;
text-align: center;
background-color: skyblue;
border: 1px solid tomato;
float: left;
}
#panel{
clear: both;
width: 354px;
padding: 50px;
}
<script>
$(document).ready(function(){
$("#slidedown").click(function(){
$("#panel").slideDown("slow");
});
$("#slideup").click(function(){
$("#panel").slideUp("fast");
});
$("#slidetoggle").click(function(){
$("#panel").slideToggle(1000,function(){
$("#panel").text("成功执行!");
});
});
});
</script>
停止滑动:
stop();
动画
开始动画
动画使用的是animate方法,类似于css中的animation,可以自己定义动画。
animate({动画属性},speed,callback)
注意:对某个元素的位置使用animate方法时,必须设置position属性!!
一个元素可以使用多个animate方法,形成队列,会逐一调用
<div>
<input type="button" value="动画" id="ani">
<div id="div0"></div>
</div>
#div0{
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
}
<script>
$(document).ready(function(){
$("#ani").click(function(){
$("#div0").animate({
left:"100px",
});
$("#div0").animate({
marginTop:"10px",
});
var div=$("#div0");
div.animate({
opacity:0.5,
width:"+=20px",
height:"-=20px",
},500);
});
});
</script>
问题:
- 为什么当第二次点击动画时,只有 width 和height 改变了?按理说每点击一次,就要把 animate 从头到尾执行一次?
位置的改变应该是相对于自身原来的位置,当第一次位置改变后,再去执行第二次,此时位置相对于自身来说已经达到了所要求的,所以不会在改变。其他的属性用的都是绝对值,比如 left:“100px”,opacity:0.5,当达到这个要求的时候,就不会再改变,但width:"+=20px",height:"-=20px",是相对值,意思是相对于当前值,所以第二次点击会改变。不管点击动画多少次,只会有 width 和height 的变化。
如果我们把定位去了会怎样?
去掉定位:
//改变如下
<script>
$(document).ready(function(){
$("#ani").click(function(){
$("#div0").animate({
left:"+=100px",
});
$("#div0").animate({
marginTop:"+=10px",
});
var div=$("#div0");
div.animate({
opacity:0.7,
width:"+=20px",
height:"-=20px",
},500);
});
});
</script>
我们发现 left 没有变化,哪怕已经改成了相对值。所以这就是为什么要加定位的原因,之前讲position和margin的区别时,我们知道只有加了定位 left top 这些才是可以用的,否则调位置只能用 margin 。所以当没有加定位时, left 是没用的,margin-top 才有用。
停止动画
使用的是
stop(stopAll,goToEnd)
方法。
stopAll:是否清除动画队列
goToEnd:是否立即完成当前动画
<div style="margin-top: 20px;">
<input type="button" value="开始动画" class="start">
<input type="button" value="停止" class="stop">
<input type="button" value="停止所有" class="stop_all">
<input type="button" value="停止动画,但完成动作" class="stop_but_finish">
<div id="div0">开始动画</div>
</div>
<script>
$(document).ready(function(){
var div=$("#div0");
$(".start").click(function(){
$("#div0").animate({
left:"+=100px",
},5000);
$("#div0").animate({
marginTop:"+=10px",
},5000);
div.animate({
width:"+=50px",
height:"+=50px",
},500);
});
$(".stop").click(function(){
div.stop();
div.text("停止当前激活的动画,但之后点击开始可以在动画队列中再次激活。");
});
$(".stop_all").click(function(){
div.stop(true);
div.text("停止当前动画,并清除动画队列,所以元素的所有动画都会停止");
});
$(".stop_but_finish").click(function(){
div.stop(true,true);
div.text("快速完成动作,并停止它");
});
});
</script>
链
我们之前写的代码都是在同一个元素上做了很多操作,链(chaining)可以把这些操作串成一行,不用每次都写相同的元素。
以滑动效果为例:
之前我们想要div有上滑、下滑的切换效果时,用的是
slideToggle
方法,那么我们也可以用链来达到这个效果。
<div style="margin-top: 20px;">
<div class="slide">点我下滑/收起面板</div>
<div id="panel">我是面板!</div>
</div>
slideToggle
<script>
$(function(){
$(".slide").click(function(){
var div=$("#panel");
//div.slideDown(500).slideUp(500);
div.slideToggle(500);
})
});
</script>
链
<script>
$(function(){
$(".slide").click(function(){
var div=$("#panel");
div.slideDown(500).slideUp(500);
//div.slideToggle(500);
})
});
</script>
区别:
slideToggle 点击后才会切换效果,但 链的话,点击一次,就会完成先下滑再收起的操作,再下滑后紧着着收起,不会等待下一次点击。
对HTML的操作
内容和属性
获得内容
text()
:设置或返回所选元素的文本内容html()
:设置或返回所选元素的内容(包括 HTML 标记)val()
:设置或返回表单字段的值
<p>hello!<span>我<b>爱</b>你</span></p>
<input type="button" value="显示文本" id="btn1">
<input type="button" value="显示内容" id="btn2">
<input type="text" value="" id="test">
<script>
$(function(){
$("#btn1").click(function(){
$("p").text("Text:"+$("p").text());
});
$("#btn2").click(function(){
$("p").text($("p").html());
});
$("#test").change(function(){
$("p").text($("#test").val());
});
});
</script>
设置内容
内容的设置很容易,只需要在 text("") html("") val("")
中写入相应的字符串 .
需要注意的是,不仅仅可以写入字符串,也可以写入回调函数:
$("#test1").text(function(i,origText){
return "旧文本: "+origText+"新文本: Hello world! (index: "+i+ ")";
});
i 为被选元素列表中当前元素的下标,origText 为原始值,return 返回新值。
获得属性
attr(属性)
:获取属性值
$("#btn2").click(function(){
$("p").text($("#btn2").attr("id"));
});
设置属性
- 单个设置:
attr("属性")
- 多个设置:
attr({"属性":"值",})
- 回调函数:和设置内容的回调函数参数意义一样
.attr("属性",function(i,origValue){
return ..;
})
元素
添加元素
append()
:在被选元素的结尾插入内容prepend()
: 在被选元素的开头插入内容after()
: 在被选元素之后插入内容before()
: 在被选元素之前插入内容
向HTML中添加文本的几种方法:
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
注意:append 和 prepend 是在元素内部添加,after 和 before 是在元素外部追加。
删除元素
remove()
:删除被选元素(及其子元素)remove(参数)
:对被删元素进行过滤,删除带有参数的元素empty()
:删除被选元素的子元素。
$("p").remove(".italic");
CSS类
addClass("类名")
:向被选元素添加一个或多个类removeClass("类名")
:从被选元素删除一个或多个类toggleClass("类名")
: 对被选元素进行添加/删除类的切换操作css("属性名")
: 返回样式属性css("属性名","值")
: 设置样式属性
$("h1,h2,p").addClass("blue");//添加blue类
$("body div:first").addClass("important blue");//添加important和blue类
$("h1,h2,p").removeClass("blue");//移除blue类
$("h1,h2,p").toggleClass("blue");//添加、删除blue类的切换
$("p").css("background-color");//返回 p 元素的 background-color属性
$("p").css("background-color","yellow");//p 元素的背景颜色设置为黄色
$("p").css({"background-color":"yellow","font-size":"200%"});
//多属性设置,背景颜色为黄色,字体大小为200%
尺寸
返回尺寸值:
width() 、innerWidth() 、outerwidth()
以及相应的height
width();
innerWidth()=width()+2*padding;
outerWidth()=width()+2*padding+2*border;
outerWidth(true)=width()+2*padding+2*border+2*margin;
遍历
祖先(父亲)
parent()
:返回被选元素的直接父元素。parents()
:返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (html)。parents(参数)
:过滤,是或者带有参数的祖先元素元素.parentsUntil(元素)
:返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");// span 和 div 中间的所有祖先元素
后代(孩子)
children()
:返回被选元素的所有直接子元素。children(参数)
:过滤,是或者带有参数的所有直接子元素。find(参数)
:返回被选元素的后代元素,一路向下直到最后一个后代。
$("div").find("*");//返回 div 的所有后代
$("div").find("span");//返回 div 的所有 span 后代
同胞(兄弟)
siblings()
:返回被选元素的所有同胞元素。siblings(参数)
:过滤对同胞元素的搜索。next()
:返回被选元素的下一个同胞元素。nextAll()
:返回被选元素的所有跟随的同胞元素。元素.nextUntil(元素)
:返回介于两个给定参数之间的所有跟随的同胞元素。prev()
:返回被选元素的上一个同胞元素。prevAll()
:返回被选元素的所有上方的同胞元素。元素.prevUntil(元素)
:返回介于两个给定参数之间的所有上方的同胞元素。
## each
- each(function(index,element)) :为每个匹配元素规定要运行的函数
过滤
first()
:返回被选元素内部的首个元素。last()
:返回被选元素内部的最后一个元素。eq(索引)
:返回被选元素内部带有指定索引号的元素。filter(参数)
:允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回not(参数)
:返回不匹配标准的所有元素。
事件方法
dblclick()
:双击元素focus()
:元素获得焦点focusin()
:元素或其任意子元素获得焦点focusout()
:元素或任意子元素失去焦点hover(infunction,outfunction)
:鼠标移上去和移开,只有一个函数则都执行它。mouse
事件:
mousedown() | 当鼠标指针移动到元素上方,并按下鼠标左键时 |
---|---|
mouseup() | 当鼠标指针移动到元素上方,并松开鼠标左键时 |
mouseenter() | 当鼠标指针穿过(进入)被选元素时 |
mouseleave() | 当鼠标指针离开被选元素时 |
mouseover() | 当鼠标指针位于元素上方时,在鼠标指针进入被选元素或任意子元素时都会被触发 |
mouseout() | 鼠标指针离开被选元素,离开被选元素或任意子元素时都会被触发 |
mousemove() | 鼠标指针在指定的元素中移动 |
on("事件 事件",指定的子元素上,传递到函数的额外数据,事件发生时的函数):
on()可以绑定到动态控件上
$(".li").on('click', ".deleteon", function(){
$(this).parent().remove();
})
off("事件 事件",有on()添加事件的选择器,事件发生时的运行函数,事件映射):
$("body").off("click","p");
one("事件 事件",额外数据,事件发生时的运行函数)
:每个元素只能运行一次事件处理程序函数resize()
:当调整浏览器窗口大小时,发生 resize 事件scroll()
:当用户滚动指定的元素时,会发生 scroll 事件select()
:当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件submit()
:当提交表单时,会发生 submit 事件toggle(function)
:当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推,造成切换
其他一些方法:
$(selector).each(function(index,element))
为每个匹配元素规定要运行的函数。
- index:选择器的 index 位置。
- element:当前的元素(也可使用 “this” 选择器)。