1 案例1-定时弹广告

1.1 需求

当页面加载1秒后,显示一个广告图,广告图显示2秒后,隐藏广告图;

1.2 技术分析

1:由于使用js的代码太繁琐,因此我们使用js的工具类解决这个案例的效果;
2:当页面加载的时候,需要使用事件解决页面加载时机问题;
3:涉及到1秒做xxx,2秒做xxx,需要使用定时器实现;
4:让图片显示或隐藏;

1.3 Js的工具类-jQuery

Jquery就是js的一个小框架，jquery的宗旨：写的更少，做的更多。

1.4 Jquery的作用

可以让程序员轻松的完成js代码很难完成的效果;
(页面操作,事件操作,表单校验,CSS样式控制….)

1.5 Jquery的使用

在jquery中有一个通用的格式:
$(参数);
当传递不同形式的参数时，jquery会有不同的效果。

1.5.1 使用jquery获取页面元素(标签)

$(“#id的值”); 根据id的值,获取标签对象;

使用步骤:
1:引入jquery.js文件;（）
2:使用$(“#id的值”)格式，根据id的值，获取标签对象;
注意:
使用jquery的代码获取的对象（var name=$(“#username”);），属于jquery对象，只能调用jquery定义的属性和方法；
使用js的代码获取的对象（var name2=document.getElementById(“username”);），属于js的对象，只能调用js的属性和方法；
两个对象的属性和方法的操作方式是不一样的!
this属于js中的对象。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <!--
  7.     使用步骤:
  8.         1:导入从网上下载的js文件
  9.         2:直接使用jquery的方法,做相应的事情;  $();
  10. -->
  11. <script src="../js/jquery-1.8.3.js"></script>
  12. <script>
  13.     onload=function(){
  14.         //使用jquery的方式获取的对象
  15.         var name=$("#username");
  16.         //alert(name);
  17.         //alert(name.value);//jquery对象不能使用js的属性操作方式
  18.         //由于value属性使用频率很高,因此jquery直接将value属性封装成了一个val方法
  19.         var  v=name.val();
  20.         //alert(v)
  21.         //使用js的方式,获取对象
  22.         var name2=document.getElementById("username");
  23.         //alert(name2);
  24.         var v2=name2.val();//js对象不能调用jquery的方法
  25.         //alert(v2)
  26.     }
  29. </script>
  30. </head>
  31. <body>
  32.     <input type="text" id="username" value="jack"/>
  33. </body>
  34. </html>

1.5.2 DOM对象与jqeury对象的互转

格式:
var jquery对象= $(js对象); //将js对象转jquery对象
var js对象= jquery对象[0]; //将jquery对象转js对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script>
        /*
         * 练习jquery对象与js对象的互转
         * 
         * 格式:
         *         var jquery对象= $(js对象);
         *         var js对象= jquery对象[0];
         */
        onload=function(){
            //1:使用jqeury获取对象
            var $un = $("#username");
            //2:将$un转成js对象
            var jsun = $un[0];
            //alert(jsun.value);
            //3:使用js代码获取对象
            var  un2=document.getElementById("username");
            //4:将un2转成jquery对象
            var $un2=$(un2);
            //5:使用jquery对象的方法,获取value属性值的
            var v2=$un2.val();
            //alert(v2)
            //6:使用jquery的方式,修改value属性值
            $un2.val("rose");
        }
    </script>
<body>
    <input type="text" id="username" value="jack"/>
</body>
</html>

1.5.3 Jquery的页面加载事件

//页面加载的第一种方式:(了解)
$(document).ready(function(){
alert(“jquery页面加载事件1”)
});
//页面加载的第一种方式:(掌握)
$(function(){
alert(“jquery页面加载事件2”)
});
注意事项:
Jquery中可以写多个页面加载事件，按顺序逐个执行，去且会在js的页面加载事件之前执行。js中原始的页面加载事件只能写一次。(写多次会覆盖)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            onload=function(){
                alert("js的页面加载事件1");
            }
            onload=function(){
                alert("js的页面加载事件2");
            }
            //页面加载的第一种方式:(了解)
            $(document).ready(function(){
                alert("jquery页面加载事件1")
            });
            //页面加载的第一种方式:(掌握)
            $(function(){
                alert("jquery页面加载事件2")    
            });

        </script>
    </head>
    <body>

    </body>
</html>

说明：多个js原生页面加载事件相互冲突，上面代码只能执行一个js的页面加载事件2。jQuery页面加载事件可多个一起用不冲突，上面的代码页面加载事件执行顺序：jquery页面加载事件1、jquery页面加载事件2、js的页面加载事件2。

1.5.4 Jquery的常用事件操作

在jquery中的事件操作,采用的是事件派发的方式;
代码步骤:
1:什么时候绑定事件?
2:给谁绑定什么样的事件?
3:事件触发的时候做什么?
代码格式:
Jquery对象.事件名(function(){
//事件触发的事情
});
注意事项:
1：将js中事件名去掉单词on即是jquery中的事件方法(onload除外);
2：jquery对象的事件绑定可以链式绑定;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            /*
             * 练习jquery的点击事件
             * 
             * 事件操作的3个步骤:
             *         1:什么时候绑定事件?
             *         2:给谁绑定什么样的事件?
             *         3:事件触发的时候做什么?
             * 
             *         将js中事件名去掉单词on即是jquery中的事件方法;
             * 
             */
            //1:什么时候绑定事件?
            $(function(){
                //2:给谁绑定什么样的事件?
                $("#bId").click(function(){//3:事件触发的时候做什么?
                    alert("您瞅啥?")
                });
            })
            //给div绑定鼠标移入与移出事件
            $(function(){
                $("#div").mouseover(function(){
                    alert("欢迎光临!")
                }).mouseout(function(){   //链式绑定，此处可以直接再.一个事件
                    alert("拜拜!")
                })

            })
        </script>
    </head>
    <body>
        <input type="button" id="bId" value="点击查看" />
        <div id="div">
            1234
        </div>
    </body>
</html>

1.5.4 Jquery的效果

在jqeury中有固定的方法，可以实现页面元素的显示或隐藏效果;
例如:
show,hide,toggle方法;
格式:
Jquery对象.show(速度,效果,function(){
回调函数,当效果执行完成之后,会执行这个方法;
});
关于参数:
3个参数都是可选的：速度可以使用单词，也可以使用毫秒值。
效果只有两个选择：默认是”swing”，可用参数”linear”。
回调函数：直接写一个匿名方法即可。
试验代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">

        div{
            border:1px solid #000;
            width:100px;
            height:100px;
        }
    </style>
    <!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            /*
             * 练习jquery的效果:
             * 
             *     1:显示元素   show
             *     2:隐藏元素  hide
             *     3:切换显示和隐藏  toggle
             */
            //选择3个按钮,分别绑定相应的点击事件
            $("#btn1").click(function(){
                //让div显示或隐藏
                $("#b1Div").toggle(1000);
            });
            $("#btn2").click(function(){
                //让div显示或隐藏
                $("#b2Div").show(1000);
            });
            $("#btn3").click(function(){
                //让div显示或隐藏
                $("#b3Div").hide(1000);
            });
        });

    </script>
</head>
<body>
    <input type="button" id="btn1" value="显示/隐藏 b1Div" />
    <div id="b1Div"></div> <br/>
    <input type="button" id="btn2" value="显示"/>
    <div id="b2Div" style="display: none;"></div> <br/>
    <input type="button" id="btn3" value="隐藏" />
    <div id="b3Div"></div>

</body>
</html>

1.6 定时弹广告案例步骤与实现

1:在页面加载的时候,编写一个定时器对象;
2:在定时器中,选择一个图片广告对象,并让图片显示出来;
3:在显示效果的回调函数中,定义一个新的定时器,2秒后隐藏广告图片;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
            }

            .cle{
                clear: both;
            }

            /*logo 部分的div*/
            .header{
                width: 100%;
            }
            .header div{
                float:left;
                width:33.33%;
                height: 60px;
                line-height: 50px;
            }
            .header a{
                padding: 15px;
            }

            /*菜单部分*/
            .menu{
                width: 100%;
                background-color: #000;
                height: 50px;
                padding-top:1px
            }

            .menu ul li{
                list-style-type: none;
                display: inline;
            }

            .menu a{
                font-size: 25px;
                color: #fff;

            }

            /*轮播图*/
            .lunbo{
                width:100%;
                margin-top:10px;
                margin-bottom: 10px;
            }

            .lunbo img{
                width:100%;
            }

            /*热门商品*/
            /*.left,.right{
                float:left;
            }*/
            .left{
                float:left;
                width: 16%;
                height: 500px;
            }
            .right{
                float: left;
                width:84%;
                text-align: center;
                height: 500px;
            }

            .middle{
                float:left;
                width: 50%;
                height: 250px;
            }
            .item{
                float:left;
                width:16.66%;
                height: 250px;
            }

            /*给广告*/
            .ad1{
                width: 100%;
            }
            .ad1 img{
                width: 100%;
            }

            /*版权*/
            .foot{
                width:100%;
            }
            .foot p{
                text-align: center;
            }
        </style>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script>
            $(function(){
                /*
                 * 1:在页面加载的时候,编写一个定时器对象;
                    2:在定时器中,选择一个图片广告对象,并让图片显示出来;
                    3:在显示效果的回调函数中,定义一个新的定时器,2秒后隐藏广告图片;
                 */
                setTimeout(function(){
                    //在定时器中,选择一个图片广告对象,并让图片显示出来;
                    $("#ad").show(1000,function(){
                        //3:在显示效果的回调函数中,定义一个新的定时器,2秒后隐藏广告图片;
                        setTimeout(function(){
                            //隐藏广告图片;
                            $("#ad").hide(1000);
                        },2000);
                    })
                },1000);
            })
        </script>
    </head>
    <body>
        <div id="ad" style="width:100%;display: none;">
            <img src="../img/ad_.jpg" width="100%" />
        </div>
        <!--
            一个大div中放置8个div
        -->
        <div>
            <!--logo
                嵌套三个div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <div class="cle"></div>

            <!--菜单-->
            <div class="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                </ul>
            </div>

            <!--轮播图-->
            <div class="lunbo">
                <img src="../img/1.jpg"/>
            </div>

            <!--热门
                将起划分成两个div
                    左边放图片
                    右边的放商品

            -->
            <div class="hot">
                <!--存放热门商品和一张图片-->
                <div>
                    <h2 style="display: inline;">热门商品</h2>
                    <img src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左边的图片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品图片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>

                    </div>
                </div>
            </div>

            <div class="cle"></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/ad.jpg"/>
            </div>

            <!--最新-->
            <div></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/footer.jpg"/>
            </div>

            <!--版权foot-->
            <div class="foot">
                <p>
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                    </p>
                    <p>
                        Copyright &copy; 2005-2016 传智商城 版权所有
                    </p>
            </div>


        </div>
    </body>
</html>

1.7 关于jquery的选择器

说明：在api中能查询到所有选择器，开发中都可能碰到

1.7.1 基本语法（这个地方建议查jQuery的api看的更清楚）

1:基本选择器
#id值
.class值
元素名
*
,
2:层级选择器
A B A下面的后代B
3:基本过滤选择器
:eq(索引)
:gt(索引)
:even 索引偶数
:odd 索引奇数
4:属性选择器
[属性名]
[属性名=’属性值’]
5:可见性选择器
:hidden
:visible
6:表单项选择器
:input

1.7.2练习代码：

需要一个assist.js

  /*
    辅助例子
    1,自动重置
    2,给元素添加动画
  */

  $(document).ready(function(){
       //手动重置页面元素
      $("#reset").click(function(){
          $("*").removeAttr("style");
           $("div[class=none]").css({"display":"none"}); 
      });
      //判断是否自动重置
       $("input[type=button]").click(function(){
          if($("#isreset").is(":checked")){
               $("#reset").click();
           }
      });
      //给id为mover的元素添加动画.
       function animateIt() {
          $("#mover").slideToggle("slow", animateIt);
        }
        animateIt();
 })

需要一个css

  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
    border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }

（1）基本选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>01-基本选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         /*
          * <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
          */
         $("#btn1").click(function(){
             $("#one").css("backgroundColor","red");//css方法是操作标签的样式属性
         })
         $("#btn2").click(function(){
             $(".mini").css("backgroundColor","red");
         })
         $("#btn3").click(function(){
             $("div").css("backgroundColor","red");
         })
         $("#btn4").click(function(){
             $("*").css("backgroundColor","red");
         })
         $("#btn5").click(function(){
             $("#two,span").css("backgroundColor","red");
         })
     })
 </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3>

 <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>

  <br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

（2）层级选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>02-层次选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             $("body div").css("backgroundColor","blue");
         });
         $("#btn2").click(function(){
             $("body>div").css("backgroundColor","blue");
         });
         $("#btn3").click(function(){
             $("#one+div").css("backgroundColor","blue");
         });
         $("#btn4").click(function(){
             $("#one~div").css("backgroundColor","blue");
         });
     })
 </script>
</head>
<body>
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
  <input type="button" value="选择 body内的子元素是div的元素(即仅选子元素,不含后代元素)。" id="btn2"/>
  <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>

  <br />
  <br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

（3）基本过滤选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>03-基本过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             $("div:first").css("backgroundColor","#ffff33");
         });
         $("#btn2").click(function(){
             $("div:last").css("backgroundColor","#ffff33");
         });
         $("#btn3").click(function(){
             $("div:even").css("backgroundColor","#ffff33");
         });
         $("#btn4").click(function(){
             $("div:odd").css("backgroundColor","#ffff33");
         });
         $("#btn5").click(function(){
             $("div:eq(3)").css("backgroundColor","#ffff33");
         });
         $("#btn6").click(function(){
             $("div:gt(3)").css("backgroundColor","#ffff33");
         });
         $("#btn7").click(function(){
             $("div:not(.one)").css("backgroundColor","#ffff33");
         });
     });
 </script>
</head>
<body>
  <h3>基本过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择第一个div元素." id="btn1"/>
  <input type="button" value="选择最后一个div元素." id="btn2"/>
  <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
  <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
  <input type="button" value="选择索引值等于3的div元素." id="btn5"/>
  <input type="button" value="选择索引值大于3的div元素." id="btn6"/>
  <input type="button" value="选择class不为one的 所有div元素." id="btn7"/>


<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

（4）内容过滤选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>04-内容过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             $("div[class='mini']").css("backgroundColor","#ffff33");
         });
     });
 </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />


  <input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>



<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

（5）可见性过滤选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             $("div:visible").css("backgroundColor","#ffff33");
         });
         $("#btn2").click(function(){
             $("div:hidden").show(1000);
         });
     });
 </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>
  <input type="button" value=" 选取所有可见的div元素"  id="btn1"/>
  <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="btn2"/>

  <br /><br />


  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>


</body>
</html>

（6）属性选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>06-属性选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             $("div[title]").css("backgroundColor","#ffff33");
         });
         $("#btn2").click(function(){
             $("div[title='test']").css("backgroundColor","#ffff33");
         });
     });
 </script>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    
  <h3> 属性选择器.</h3>


  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>

    <br /><br />
   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

</body>
</html>

（7）表单选择器练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>09-表单选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             //var v=$(":input").length;//选择页面中所有的表单项
             //alert(v)

             //只选择form表单中的表单项
             var v2 = $("#form1 :input").length;
             alert(v2)
         });
     });
 </script>
</head>
<body>
  <input type="button" value="选取所有的表单子元素" id="btn1"/><br />

  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><br/>
    <input type="image" src="1.jpg"/><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>

  <div></div>
</body>
</html>

2 案例2-隔行变色

2.1 需求

当页面加载的时候,分别设置表格的奇数行和偶数行为两种颜色;
当鼠标移入这一行的时候,修改背景色为红色,移出的变回原来的颜色;

2.2 技术分析

1:在页面加载事件中,选择表格的所有奇数行和偶数行(第一行除外);
2:选中后,设置背景色;
3:给表格的所有行(第一行除外)绑定鼠标移入与移出事件;
(当鼠标移入这一行的时候,修改背景色为红色,移出的变回原来的颜色;)

2.3 Jquery操作标签的样式和属性

2.3.1 语法

（1）操作标签的原始属性:

建议使用:
prop方法;
格式:
设置一个属性值:
Jquery对象.prop(属性名,属性值);
获取一个属性值:
Var 结果名 = Jquery对象.prop(属性名);
设置多个属性值:
Jquery对象.prop({属性名1:属性值1,属性名2:属性值2});
注意:
属性名的引号可写可不写,建议写;

（2）操作标签的样式:

建议使用css方法;
格式:
设置一个样式属性值:
Jquery对象.css(属性名,属性值);
获取一个样式属性值:
Var 结果名 = Jquery对象.css(属性名);
设置多个样式属性值:
Jquery对象.css({属性名1:属性值1,属性名2:属性值2});

2.3.2 练习

（1）css-属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        //1.1给username添加title属性
        $("input[name='username']").prop("title","新加的值");
        //1.2获取username的title属性
        var v=$("input[name='username']").prop("title");
        //alert(v)
        //1.3给username添加value和class属性
        $("input[name='username']").prop({value:"新加的value值",class:"textClass"});
        //1.4删除username的class属性
        $("input[name='username']").removeProp("class");
        //2.1给username添加一个名为textClass的样式
        $("input[name='username']").addClass("textClass");
        //2.2删除username的名为textClass的样式
        $("input[name='username']").removeClass("textClass");

        //4.1 给div添加边框样式
        $("div").css("border","10px solid red");
        //4.2 获取div的表框样式
        var b=$("div").css("border");
        alert(b);
        //4.3 给div添加多种样式
        $("div").css({"border":"10px solid red","background-color":"blue"});
        });    
    </script>
    <style type="text/css">
        .textClass {
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <h3>表单</h3>
    <form action="">
        <table border="1">
            <tr id="tr1">
                <td><label>姓名</label></td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td><span>密码</span></td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="男" />男
                    <input type="radio" name="gender" value="女" />女
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <button type="button">普通按钮</button>
                    <input type="submit" value="提交按钮" />
                    <input type="reset" value="重置按钮" />
                </td>
            </tr>
        </table>
    </form>


    <h3>公告信息</h3>
    <div>
        未满18慎进
    </div>
    <span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>

2.4 案例的步骤与实现

1:编写一个页面加载事件,在页面加载的时候,获取表格的奇数行设置背景色为绿色;
2:设置偶数行背景色为蓝色;
3:给所有行绑定鼠标移入和移出事件;
4:在移入事件中;获取原来的颜色,并修改颜色为红色;
5:在移出事件.,还原原来的颜色;(this属于js中的对象)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .odd{
                background-color: #BCD68D;
            }

            .even{
                background-color: #FFFFCC;
            }
            .red{
                background-color: red;
            }
        </style>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script>
            $(function(){
                /*
                 * 1:编写一个页面加载事件,在页面加载的时候,获取表格的奇数行添加class为odd的样式;
                2:设置偶数行添加class为even的样式;;
                3:给所有行绑定鼠标移入和移出事件;
                4:在移入事件中;获取原来的颜色,并修改颜色为红色;
                5:在移出事件.,还原原来的颜色;(this属于js中的对象)
                 */
                //1:编写一个页面加载事件,在页面加载的时候,获取表格的奇数行添加class为odd的样式;
                $("tr:gt(0):even").prop("class","even");
                //2:设置偶数行添加class为even的样式;;
                $("tr:gt(0):odd").prop("class","odd");
                //3:给所有行绑定鼠标移入和移出事件;
                $("tr:gt(0)").mouseover(function(){
                    //4:在移入事件中;获取原来的颜色,并修改颜色为红色;
                    //使用this即可代表当前触发事件的这一个tr对象
                    y = $(this).prop("class"); //如果是var y的话，y这个变量的作用域就太小了，想要提升y的变量作用域，就把var去掉
                    $(this).prop("class","red");
                }).mouseout(function(){
                    //5:在移出事件.,还原原来的颜色;(this属于js中的对象)
                    $(this).prop("class",y);
                })
            })
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >

            <tr style="background-color: #999999;">
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>

3 案例3-全选与全不选

3.1 需求

当用户勾选第一个多选框的时候,自动勾选下面所有的多选框,如果取消第一个多选框的时候,下面所有的多选框都不勾选;

3.2 技术分析

1:单击多选框是一个点击事件;
2:多选框是否选中,可以通过checked属性来控制;

3.3 案例步骤与实现

1:当页面加载的时候,给第一个多选框绑定点击事件;
2:在事件中获取第一个多选框的checked属性值;
3:设置下面所有的多选框的checked属性值为第一个多选框的checked属性值;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="../js/jquery-1.11.0.min.js"></script>
     <script type="text/javascript">

             /*
              * 1:当页面加载的时候,给第一个多选框绑定点击事件;
                2:在事件中获取第一个多选框的checked属性值;
                3:设置下面所有的多选框的checked属性值为第一个多选框的checked属性值;
              */
             function selectAll(t){
                 //此时的t就是一个多选框
                 //2:在事件中获取第一个多选框的checked属性值;
                 //t.checked;
                 //$(t).prop("checked");
                 //3:设置下面所有的多选框的checked属性值为第一个多选框的checked属性值;
                 $(".itemSelect").prop("checked",t.checked);
             }

    </script>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            <tr>
                <td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
            </tr>
            <tr>
                <th><input type="checkbox" onclick="selectAll(this)" ></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>