欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

笔记-JavaWeb学习之旅17

程序员文章站 2022-04-29 18:38:55
1.过滤选择器 首元素选择器：first 获得选择的元素中的第一个元素 尾元素选择器：last获得选择元素中的最后一个元素 非元素选择器：not(selector) 不包括指定内容的元素 偶数选择器：even偶数，从0开始计数 奇数选择器：odd奇数，从0开始计数 等于索引选择器：eq(index) ......
1.过滤选择器

首元素选择器：first 获得选择的元素中的第一个元素

尾元素选择器：last获得选择元素中的最后一个元素

非元素选择器：not(selector) 不包括指定内容的元素

偶数选择器：even偶数，从0开始计数

奇数选择器：odd奇数，从0开始计数

等于索引选择器：eq(index)指定索引元素

大于索引选择器：gt(index) 大于指定索引元素

小于索引选择器：lt(index)小于指定索引元素

标题选择器：header 获得标题(h1-h6)元素，固定写法

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999cc;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
     </style>
    <script type="text/javascript">

        $(function () {
            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
            $("#b1").click(function(){
                $("div:first").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
            $("#b2").click(function(){
                $("div:last").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
            $("#b3").click(function(){
                $("div:not(.one)").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
            $("#b4").click(function(){
                $("div:even").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
            $("#b5").click(function(){
                $("div:odd").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
            $("#b6").click(function(){
                $("div:gt(3)").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
            $("#b7").click(function(){
                $("div:eq(3)").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
            $("#b8").click(function(){
                $("div:lt(3)").css("backgroundcolor","red");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
            $("#b9").click(function(){
                $(":header").css("backgroundcolor","red");
            });
        });
    </script>
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
         <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>     
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         <div id="one">
             id为one  
             
         </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是xinlaid mini</div>
        </div>          
    </body>  
</html>
表单过滤选择器

可用元素选择器：enabled 获得可用元素

不可用元素选择器：disabled 获得不可用元素

选中选择器 checked 获得单选/复选框选中的元素

选中选择器：selected 获得下拉框选中的元素

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999cc;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            #job{
                margin: 20px;
            }
            #edu{
                margin-top:-70px;
            }       
     </style>
    <script type="text/javascript">
    
        $(function () {
            // <input type="button" value=" 利用 jquery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
            $("#b1").click(function(){
                //获取所有的表单，并且是纯文本框可用的，改变他们的值
                $("input[type='text']:enabled").val("aaa");
            })
            // <input type="button" value=" 利用 jquery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
            $("#b2").click(function(){
                $("input[type='text']:disabled").val("aaa");
            })
            // <input type="button" value=" 利用 jquery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
            $("#b3").click(function(){
                //获取所有复选框，checked表示选中的个数
                alert($("input[type='checkbox']:checked").length);
            })
            // <input type="button" value=" 利用 jquery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
            $("#b4").click(function(){
                //通过id获取器获得下拉框元素
                alert($("#job > option:selected").length);
            });
        });     
    </script>
    </head>  
    <body>              
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 利用 jquery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
         <input type="button" value=" 利用 jquery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
         <input type="button" value=" 利用 jquery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
         <input type="button" value=" 利用 jquery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
        <br><br>
        
         <input type="text" value="不可用值1" disabled="disabled"> 
         <input type="text" value="可用值1" >
         <input type="text" value="不可用值2" disabled="disabled">
         <input type="text" value="可用值2" >
         
         <br><br>
         <input type="checkbox" name="items" value="美容" >美容
         <input type="checkbox" name="items" value="it" >it
         <input type="checkbox" name="items" value="金融" >金融
         <input type="checkbox" name="items" value="管理" >管理
         
         <br><br>
         
          <input type="radio" name="sex" value="男" >男
          <input type="radio" name="sex" value="女" >女
          
         <br><br>
         
          <select name="job" id="job" multiple="multiple" size=4>
            <option>程序员</option>
            <option>中级程序员</option>
            <option>高级程序员</option>
            <option>系统分析师</option>
          </select>
            
          <select name="edu" id="edu">
            <option>本科</option>
            <option>博士</option>
            <option>硕士</option>
            <option>大专</option>
          </select>         
        <br/>
            
         <div id="two" class="mini" >
               id为two   class是 mini  div
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
        
    </body>  
</html>
dom操作

(需要分清楚是对标签体的内容还是对标签体的属性进行操作)

内容操作

html():获取/设置元素的标签体内容

text()：获取/设置元素的标签体纯文本内容

val()：获取/设置元素的value属性值

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script  src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                // 获取myinput的value值
                // 通过id选择器获取元素对象
                var value = $("#myinput").val();
                alert(value);
                // 获取mydiv的标签体内容,使用html方法
                alert($("#mydiv").html());
                // 获取mydiv文本内容
                alert($("#mydiv").text());
            });
        </script>
    </head>
    <body>
        <input id="myinput" type="text" name="username" value="张三" /><br />
        <div id="mydiv"><p><a href="#">标题标签</a></p></div>
    </body>
</html>
属性操作

1.通用属性操作

  • attr(): 获取/设置元素的属性
  • removeattr():删除属性
  • prop():获取/设置元素的属性
  • removeprop():删除属性
attr和prop的区别

如果操作的是元素的固有属性，则建议使用prop

如果操作的是元素自定义的属性，则建议使用attr

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    
    
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999cc;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:roman;
            }
            
            div.mini{
                width: 30px;
                height: 30px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
    
    <script type="text/javascript">
        $(function () {
            //获取北京节点的name属性值
            //name是标签体的属性，li标签中没有name属性，所以是自定义的属性，建议使用attr
            //获取标签元素，使用方法attr获取属性值
            var value = $("#bj").attr("name");
            alert(value);
            //设置北京节点的name属性的值为dabeijing
            var value1 = $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性 属性值是didu
            var value2 = $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeattr("name")
            //获得hobby的的选中状态,checked是固有属性，建议使用prop
            var checked = $("#hobby").prop("checked");
            alert(checked);
        });
        
    </script>   
    
    </head>
     
    <body>
                
         <ul>
             <li id="bj" name="beijing" xxx="yyy">北京</li>
             <li id="tj" name="tianjin">天津</li>
         </ul>
         <input type="checkbox" id="hobby"/>     
        
    </body> 
   
</html>
2.对class属性的操作

1.addclass():添加class属性值

2.removeclass():删除class属性值

3.toggleclass():切换class属性(如果存在该属性值就删除掉，不存在该属性值就添加)

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
           .one{
                width: 200px;
                height: 140px;
                margin: 20px;
                background: red;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:roman;
            }
        
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999cc;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:roman;
            }
            
            div .mini{
                width: 40px;
                height: 40px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            div .mini01{
                width: 40px;
                height: 40px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            
            /*待用的样式*/
            .second{
                width: 300px;
                height: 340px;
                margin: 20px;
                background: yellow;
                border: pink 3px dotted;
                float:left;
                font-size: 22px;
                font-family:roman;
            }       
            
     </style>
    <script type="text/javascript">

        $(function () {
            // <input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
            //使用attr获取/设置属性的值
            $("#b1").click(function () {
                $("#one").attr("class","second");
            })
            // <input type="button" value=" addclass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addclass("second");
            })
            // <input type="button" value="removeclass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeclass("second");
            })
            // <input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleclass("second");
            })
            // <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
            $("#b5").click(function () {
                alert($("#one").css("backgroundcolor"))
            })
            // <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
            $("#b6").click(function () {
               $("#one").css("backgroundcolor","green")
            })
        });  
    
    </script>
   
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
         <input type="button" value=" addclass"  id="b2"/>
         <input type="button" value="removeclass"  id="b3"/>
         <input type="button" value=" 切换样式"  id="b4"/>
         <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
         <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
 
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         
         <div id="one" class="one">
             id为one 
         </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
        <span class="spanone">    span
        </span>
        
    </body>
    
</html>
crud操作
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999cc;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:roman;
            }
            
            div .mini{
                width: 30px;
                height: 30px;
                background: #cc66ff;
                border: #000 1px solid;
                font-size: 12px;
                font-family:roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
     <script type="text/javascript">

         $(function () {
             // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
             $("#b1").click(function () {
                 $("#city").append($("#fk"));
             })
             // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function () {
                 $("#city").prepend($("#fk"));
             })
             // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function () {
                 $("#tj").after($("#fk"));
             })
             // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function () {
                 $("#tj").before($("#fk"));
             })
         });


        
    </script>
     
     
    </head>
     
    <body>

        <input type="button" value="将反恐放置到city的后面"  id="b1"/>
        <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
        <input type="button" value="将反恐插入到天津后面"  id="b3"/>
        <input type="button" value="将反恐插入到天津前面"  id="b4"/>
         <ul id="city">
             <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>   
         
          <ul id="love">
             <li id="fk" name="fankong">反恐</li>
             <li id="xj" name="xingji">星际</li>
         </ul>
        
        <div id="foo1">hello1</div> 
       
    </body>
    
   
</html>
jquery高级

动画

三种方式显示和隐藏元素

1.默认显示和隐藏方式

  1. show([speed],[easing],[fn])
  2. hide([speed],[easing],[fn])
  3. toggle([speed],[easing],[fn])

speed:动画的速度，三个预定义的值("slow","normal","fast")或表示动画时长的毫秒数值

easing:用来指定切换效果，默认是"swing",可用参数"linear"

fn:在动画完成是执行的函数，每个函数执行一次

2.滑动显示和隐藏方式

1.slidedown([speed],[easing],[fn])

2.slideup([speed],[easing],[fn])

3.slidetoggle([speed],[easing],[fn])

3.淡入淡出显示和隐藏方式

fadein([speed],[easing],[fn])

fadeout([speed],[easing],[fn])

fadetoggle([speed],[easing],[fn])

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>insert title here</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>


    <script>
        //隐藏div
        function hidefn(){
            //默认方式
          //$("#showdiv").hide("slow","swing")
            //滑动方式
          //$("#showdiv").slideup("slow","swing")
            //淡入淡出方式
          $("#showdiv").fadeout("8000","swing")
        }
        //点击按钮显示div
        function showfn(){
            //默认方式
             //$("#showdiv").show("slow","linear");
            //滑动方式
             //$("#showdiv").slidedown("slow","linear");
            //淡入淡出方式
             $("#showdiv").fadein("5000","linear");
        }
        //点击按钮切换div显示和隐藏
        function togglefn(){
             //默认方式
             //$("#showdiv").toggle("slow","swing");
             //滑动方式
             //$("#showdiv").slidetoggle("slow","swing");
            //淡入淡出方式
             $("#showdiv").fadetoggle("5000","swing");
        }
    </script>

</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hidefn()">
<input type="button" value="点击按钮显示div" onclick="showfn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="togglefn()">

<div id="showdiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>
遍历

js遍历方式 for(初始化值;循环结束条件；步长)

jq遍历方式

1.jq对象.each(callback)

2.$.each(object,[callback])

3.for...of;

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    $(function () {
        //获取遍历对象
       var citys =  $("#city li");
       //第一种方式，不能获得索引
       citys.each(function (index,element) {
       //     alert(this.innerhtml)
       // });
        //第二种方式，可以获得索引，在回调函数中定义参数
       if("上海"==$(element).html()){
           return false;//false相当于java的break,true相当于continue
       }
        alert(index+":"+$(element).html());//把获得的js对象强制转换jq对象
    });
    });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>
事件绑定

1.jquery标准的绑定方式：jq对象.事件方法(回调函数)

2.on绑定事件/off解除绑定

jq对象.on("事件名称"，回调函数)

jq对象.off("事件名称")

3.事件切换：toggle

jq对象.toggle(fn1,fn2....)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //绑定单机事件
            $("#btn").on("click",function () {
                alert("我被点击了")
            })
            //解除单机事件
            $("#btn2").click(function () {
                $("#btn").off("click");//若不传递click参数，则将btn上的所有绑定事件解绑
            })
        });


    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
案例1

当页面加载完，3秒后，自动显示广告

广告显示5秒后，自动消失

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            settimeout(adshow,3000);
            settimeout(adhide,8000);
        })
        function adshow() {
            $("#ad").fadein("slow","swing")
        }
        function adhide() {
            $("#ad").fadeout("slow","swing")
        }


    </script>
</head>
<body>
<!-- 整体的div -->
<div>
    <!-- 广告div -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>
案例2--抽奖
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>
        var imgs = [
            "man00.jpg",
            "man01.jpg",
            "man02.jpg",
            "man03.jpg",
            "man04.jpg",
            "man05.jpg",
            "man06.jpg",
        ];
        var satrtid;
        var index;
        $(function () {
            //点击开始按钮，需要循环加载图片
          $("#startid").click(function () {
              $("#startid").prop("disabled",false);//设置按钮可用
              $("#stopid").prop("disabled",true);//设置按钮不可用
                //使用定时器，循环加载图片
              satrtid= setinterval(function () {
                  $("#startid").prop("disabled",true);
                  $("#stopid").prop("disabled",false);
                    //随机获得数字
                    index = math.floor(math.random()*7);
                    $("#img1id").prop("src",imgs[index]);//获得随机图片
                },20);
            })
            //点击停止按钮，加载大方框图片
            $("#stopid").click(function () {
                $("#startid").prop("disabled",false);
                $("#stopid").prop("disabled",true);
                //结束定时器
                clearinterval(satrtid)
               var img =  $("#img2id").prop("src",imgs[index]).hide();
                img.show(1000);

            })
        })

    </script>

</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1id" src="man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2id" src="man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startid"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px">

<!-- 停止按钮 -->
<input
        id="stopid"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px">


</body>
</html>

笔记-JavaWeb学习之旅17

插件机制

实现方式：

1.$.fn.extend(object),增强通过jquery获取对象的功能 $("#id")

(使用对象调用方法)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>01-jquery对象进行方法扩展</title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        //1.定义jqeury的对象插件
            $.fn.extend({
                //该方法所有的jq对象都可以调用
                check:function () {
                    this.prop("checked",true);
                },
                uncheck:function () {
                    this.prop("checked",false);
                }
            });
            $(function () {
                $("#btn-check").click(function () {
                    $("input[type='checkbox']").check();//获取所有的复选框对象
                })

            })
       $(function () {
           $("#btn-uncheck").click(function () {
               $("input[type='checkbox']").uncheck();//获取所有的复选框对象
           })
       })


    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkfn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckfn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>

2.$.extend(object),增强jquery对象自身的功能，$/jquery

（使用$来调用方法）

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>01-jquery对象进行方法扩展</title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            max:function (a,b) {
                return a>=b ? a:b;
            },
            min:function (a,b) {
                return a<=b ? a:b;
            }
        })
        //调用全局方法
       var max =  $.max(2,3);
        alert(max);

        var min =  $.min(2,3);
        alert(min);

    </script>
</head>
<body>
</body>
</html>

上一篇： Protocol Buffer使用转换工具将proto文件转换成Java文件流程及使用

下一篇： 《数据挖掘导论》实验课——实验一、数据处理之Numpy

推荐阅读