前言:这节课接着上次课的继续讲。
内容:接上-->
1.jq元素样式设置:
(4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass("myClass");
(5)直接获取、编辑内容:html(text);text(content);
1 $("p").click(function(){ 2 var sHtmlStr = $(this).html(); 3 $(this).text(sHtmlStr); 4 });
(6)移动和复制元素:
$("p").append("<h1>我爱北京天安门</h1>");表示给所有p标签添加一段html代码作为子元素;
$("p:eq(1)").append($("a:eq(1)"));表示第二个p后面添加第二个a作为它的子元素;
$("img:eq(1)").appendTo("p:eq(0)");表示把页面中的第二个img标签加到第一个p标签中去;appendTo是将对象加到相应的里面去。
$("p:eq(1)").after($("a:eq(1)"));表示在第二个p后面添加第二个a,after是加在其后面,而不是里面。
$("p:eq(1)").before($("a:eq(1)"));表示在第二个p前面添加第二个a。
(7)删除元素:
$("p:contains('大')").remove();表示删除含有‘大’的p标签;
$("p").empty();表示清空p里面的内容。
(8)处理表单元素的值:val()表示获取文本框或者按钮的文本属性;val(text)表示设置文本框或者按钮的文本属性;
(9)绑定事件监听:
bind
1 $(function(){ 2 $("img") 3 .bind("click",function(){ 4 $("#show").append("<div>点击事件1</div>"); 5 }) 6 .bind("click",function(){ 7 $("#show").append("<div>点击事件2</div>"); 8 }) 9 .bind("click",function(){ 10 $("#show").append("<div>点击事件3</div>"); 11 }); 12 });
一个对象可以绑定多个方法,bind方法可以反复执行;
one方法绑定事件触发一次后自动删除;one方法只执行一次。
$("p").unbind("click"):移除绑定。
(10)交替:toggle();高版本是不支持的,只有低版本支持。
(11)鼠标感应:即前面所讲的hover()方法。
2.jq里的动画事件:
(1)显示和隐藏:
slideToggle(speed,callback),在显示和隐藏之间切换,toggle()是伸缩地显示隐藏,而slidetoggle()是上下地显示隐藏。slideToggle()对应的是slideDown()(即显示)和slideUp()(即隐藏)。
1 $(".btn1").click(function(){ 2 $("p").slideToggle(); 3 });
hide(毫秒)表示隐藏,show(毫秒)表示显示。toggle()默认在show()和hide()之间切换。hide()和show()还有一个特别重要的参数,叫做“回调函数”,即执行完之后再执行。slideDown()和slideUp也有回调函数参数。
1 $(function(){ 2 $("#btn").click(function(){ 3 $("#d1").show(1000,function(){ 4 alert("hello"); 5 }); 6 }); 7 });
fadeToggle(毫秒),表示渐变地显示和隐藏,它的参数没有回调函数。fadeToggle可以拆分成fadeIn()(渐变地显示),fadeOut()(渐变地隐藏)。fadeTo是设置透明度。
animate():自定义动画。(div自由自在的运动的前提条件是脱离文档流)
1 $(function(){ 2 $("#btn").click(function(){ 3 $("#d1").animate({"top":"300px","left":"300px"},2000,function(){ 4 $("#d1").animate({"top":"0px","left":"600px"},2000}; 5 }); 6 }); 7 });
(2)setInterval(function(){},time):间隔time时间自动执行某个事件function。
1 $(function(){ 2 $("#btn").click(function(){ 3 var iNum = 0; 4 setInterval(function(){ 5 iNum++; 6 $("#d1").text(iNum); 7 },2000); 8 }); 9 });
clearInterval()可以将定时器移除。
setTimeout(function(){},4000);表示只执行一次function()。
3.例子:轮播图
HTML代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>轮播图</title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/demo.js"></script> 8 <link href="css/demo.css" rel="stylesheet" /> 9 </head> 10 <body> 11 <div> 12 <div class="image"><img src="image/1.jpg" /></div> 13 <div class="image"><img src="image/2.jpg" /></div> 14 <div class="image"><img src="image/3.jpg" /></div> 15 <div class="image"><img src="image/4.jpg" /></div> 16 <div class="image"><img src="image/5.jpg" /></div> 17 <div class="image"><img src="image/6.jpg" /></div> 18 </div> 19 <div id="tabs"> 20 <div class="tab bg">1</div> 21 <div class="tab">2</div> 22 <div class="tab">3</div> 23 <div class="tab">4</div> 24 <div class="tab">5</div> 25 <div class="tab">6</div> 26 </div> 27 </body> 28 </html>
CSS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 * { 2 padding: 0px; 3 margin: 0px; 4 } 5 .image { 6 margin-left: 300px; 7 margin-top: 100px; 8 } 9 #tabs { 10 position: absolute; 11 top: 445px; 12 left: 500px; 13 } 14 .tab { 15 height: 24px; 16 width: 24px; 17 text-align: center; 18 line-height: 24px; 19 background-color: #00bfff; 20 float: left; 21 color: #fff0f5; 22 margin-right: 5px; 23 cursor: pointer; 24 border-radius: 50%; 25 } 26 .bg { 27 background-color: #ff7f50; 28 }
JS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 var iNum = 0; 2 3 function Show() { 4 $(".image").eq(iNum).show(); 5 $(".image").eq(iNum).siblings().hide(); 6 $(".tab").eq(iNum).addClass("bg"); 7 $(".tab").eq(iNum).siblings().removeClass("bg"); 8 } 9 $(function () { 10 $(".tab").click(function() { 11 iNum = $(".tab").index($(this)); 12 Show(); 13 }); 14 15 $(".image").eq(0).siblings().hide(); 16 setInterval(function() { 17 iNum++; 18 if (iNum == 6) { 19 iNum = 0; 20 } 21 Show(); 22 }, 2000); 23 })
效果图:
后记:多多练习。