Notes -JavaWeb learning journey 17

Others 2019-06-17 02:57:22 views: null
1. Filter selector

The first element selector: first to get the first element in the choice element

End element selector: last last element to obtain selected elements

Non-element selector: not (selector) does not include the element specifies content

Even-selector: even even number, counting from 0

Selector odd: odd odd, counting from 0

Equal to the index selector: eq (index) the specified index element

Is greater than the index selector: gt (index) is greater than the specified index element

Less than the index selector: lt (index) is less than the specified index element

Selector Title: header to obtain the title (h1-h6) elements, fixed wording

<!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>
Form filter selector

Selector available elements: enabled for available elements

Unavailable element selector: disabled elements obtained unavailable

Select the selectors get checked radio / checkbox element

Select Selector: selected elements get in the drop down box

<!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 manipulation

(Is the need to distinguish the content of the attribute or tag body of the tag body to operate)

Content operation

html (): Gets / sets the contents of the tag body element

text (): Gets / sets the tag body element plain text

val (): Gets / sets the value attribute element

<!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>
Property operations

General Operation 1. Properties

  • attr (): Gets / sets the attributes of the element
  • removeAttr (): Delete property
  • prop (): Gets / sets the attributes of the element
  • removeProp (): Delete property
The difference between the prop and attr

If the operation is an inherent property of an element, it is recommended to use Prop

If the operation is an element of self-defined attributes, it is recommended to use 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. The operation of the class attribute

1.addClass (): add the class attribute value

2.removeClass (): Delete the class attribute value

3.toggleClass (): switch the class attribute (if the attribute value exists, delete it, the property value does not exist to add)

<!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 operations
<!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>
Advanced JQuery

Animation

Three ways to show and hide elements

1. The default display mode and hide

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

speed: speed of the animation, three predefined value ( "slow", "normal", "fast") or express large number of milliseconds animation

easing: to toggle the effect, the default is "swing", available parameters "linear"

fn: the animation is done in the function execution, each execution function once

2. Slide show and hide the way

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

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

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

3. Fade to show and hide the way

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>
Traversal

js traversal for (initial value; loop end condition; step)

jq traversal

1.jq objects .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>
Event binding

1.jquery standard binding way:. Jq object event method (callback)

2.on binding events / off unbind

jq objects .on ( "Event Name", callback)

jq objects .off ( "Event Name")

3. Event switch: toggle

jq objects .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>
Case 1

When the page has finished loading, 3 seconds, automatically displays ads

After the ad is displayed for 5 seconds, automatically disappear

<!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>
Case 2-- lottery
<!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

Plug-in mechanism

Method to realize:

1. $. Fn.extend (object), enhancements to get the object through jquery $ ( "# id")

(Using the object method call)

<!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), the object itself JQuery enhanced functionality, $ / JQuery

(Use $ to call methods)

<!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>

Guess you like

Origin www.cnblogs.com/train99999/p/11037394.html
Recommended
Arc Browser for Windows 1.0 officially GA
A programmer born in the 1990s developed a video porting software and made over 7 million in less than a year. The ending was very punishing!
Ranking
1. Select Sort
Create a thread thread
3 press to play ball that reach 6
Programmation CUDA (4) : gestion de la mémoire
SpringBoot database connection pool Druid error
E Diudiu App redesign summary
4EVERLAND Hosting now supports SNS+IPFS
About HTTPS
[vue3+vite+ts+element-plu+sass] uses bug records in sass
Interpretation of HUAWEI CLOUD GaussDB (for Influx): Best Practice Data Modeling
Daily
More
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)

Code World

© 2018 codetd.com