笔记-JavaWeb学习之旅17

其他 2019-06-16 23:51:24 阅读次数: 0
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>

img

插件机制

实现方式：

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>

猜你喜欢

转载自www.cnblogs.com/train99999/p/11037394.html
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022