ASP.NET动态网站制作（12）-- JQ（4）

前言：这节课接着上次课的继续讲。

内容：接上-->

　　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

 $(function(){
     $("img")
         .bind("click",function(){
             $("#show").append("<div>点击事件1</div>");
         })
         .bind("click",function(){
             $("#show").append("<div>点击事件2</div>");
         })
         .bind("click",function(){
             $("#show").append("<div>点击事件3</div>");
         });
 });

　　　　一个对象可以绑定多个方法，bind方法可以反复执行；

　　　　one方法绑定事件触发一次后自动删除；one方法只执行一次。

　　　　$("p").unbind("click"):移除绑定。

　　  （10）交替：toggle();高版本是不支持的，只有低版本支持。

　　  （11）鼠标感应：即前面所讲的hover()方法。

　　2.jq里的动画事件：

　　  （1）显示和隐藏：

　　　　slideToggle(speed,callback)，在显示和隐藏之间切换，toggle()是伸缩地显示隐藏，而slidetoggle()是上下地显示隐藏。slideToggle()对应的是slideDown()（即显示）和slideUp()（即隐藏）。

 $(".btn1").click(function(){
     $("p").slideToggle();
 });

　　　　hide(毫秒)表示隐藏，show(毫秒)表示显示。toggle()默认在show()和hide()之间切换。hide()和show()还有一个特别重要的参数，叫做“回调函数”，即执行完之后再执行。slideDown()和slideUp也有回调函数参数。

 $(function(){
     $("#btn").click(function(){
         $("#d1").show(1000,function(){
             alert("hello");
         });
     });
 });

　　　　fadeToggle(毫秒)，表示渐变地显示和隐藏，它的参数没有回调函数。fadeToggle可以拆分成fadeIn()（渐变地显示），fadeOut()（渐变地隐藏）。fadeTo是设置透明度。

　　　　animate()：自定义动画。（div自由自在的运动的前提条件是脱离文档流）

 $(function(){
     $("#btn").click(function(){
         $("#d1").animate({"top":"300px","left":"300px"},2000,function(){
             $("#d1").animate({"top":"0px","left":"600px"},2000};
         });
     });
 });

　　  （2）setInterval(function(){},time)：间隔time时间自动执行某个事件function。

 $(function(){
     $("#btn").click(function(){
         var iNum = 0;
         setInterval(function(){
             iNum++;
            $("#d1").text(iNum);
         },2000);
     });
 });

　　　　clearInterval()可以将定时器移除。

　　　　 setTimeout(function(){},4000);表示只执行一次function()。

　　3.例子：轮播图

HTML代码：

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>轮播图</title>
     <script src="js/jquery-1.10.2.min.js"></script>
     <script src="js/demo.js"></script>
     <link href="css/demo.css" rel="stylesheet" />
 </head>
 <body>
     <div>
         <div class="image"><img src="data:image/1.jpg" /></div>
         <div class="image"><img src="data:image/2.jpg" /></div>
         <div class="image"><img src="data:image/3.jpg" /></div>
         <div class="image"><img src="data:image/4.jpg" /></div>
         <div class="image"><img src="data:image/5.jpg" /></div>
         <div class="image"><img src="data:image/6.jpg" /></div>
     </div>
 <div id="tabs">
     <div class="tab bg">1</div>
     <div class="tab">2</div>
     <div class="tab">3</div>
     <div class="tab">4</div>
     <div class="tab">5</div>
     <div class="tab">6</div>
 </div>
 </body>
 </html>

CSS代码:

 * {
     padding: 0px;
     margin: 0px;
 }
 .image {
     margin-left: 300px;
     margin-top: 100px;
 }
 #tabs {
     position: absolute;
     top: 445px;
     left: 500px;
 }
 .tab {
     height: 24px;
     width: 24px;
     text-align: center;
     line-height: 24px;
     background-color: #00bfff;
     float: left;
     color: #fff0f5;
     margin-right: 5px;
     cursor: pointer;
     border-radius: 50%;
 }
 .bg {
     background-color: #ff7f50;
 }

JS代码：

 var iNum = 0;

 function Show() {
    $(".image").eq(iNum).show();
         $(".image").eq(iNum).siblings().hide();
         $(".tab").eq(iNum).addClass("bg");
         $(".tab").eq(iNum).siblings().removeClass("bg");
 }
 $(function () {
     $(".tab").click(function() {
         iNum = $(".tab").index($(this));
         Show();
     });

     $(".image").eq(0).siblings().hide();
     setInterval(function() {
         iNum++;
         if (iNum == 6) {
             iNum = 0;
         }
         Show();
     }, 2000);
 })

效果图：

后记：多多练习。