python学习笔记_week17

note

jQuery
    http://jquery.cuishifeng.cn/
    模块 《=》类库
    DOM/BOM/JavaScript的类库
    版本：
        1.x  1.12
        2.x
        3.x
    转换：
        jquery对象[0]   => Dom对象
        Dom对象         => $(Dom对象)
    一、查找元素
        DOM
            10个左右
        jQuery：
            选择器，直接找到某个或者某类标签
            1. id
                $('#id')
            2. class
                <div class='c1'></div>
                $(".c1")
            3. 标签
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                $('a')
            4. 组合
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                $('a')
                $('.c2')
                $('a,.c2,#i10')
            5. 层级
                $('#i10 a') 子子孙孙
                $('#i10>a') 儿子
            6. 基本
                :first
                :last
                :eq() #根据索引找，从0开始
            7. 属性
                $('[alex]')       具有alex属性的所有标签
                $('[alex="123"]') alex属性等于123的标签     注意引号                        

                <input type='text'/>
                <input type='text'/>
                <input type='file'/>
                <input type='password'/>
                $("input[type='text']")
                $(':text')
                enabled disabled
            实例：
                多选，反选，全选   ---s2
                - 选择器
                -
                    $('#tb:checkbox').prop('checked');        获取值
                    $('#tb:checkbox').prop('checked', true);  设置值
                -
                    jQuery方法内置循环： $('#tb:checkbox').xxxx
                - $('#tb:checkbox').each(function(k){
                        // k当前索引
                        // this，DOM对象，代指当前循环的元素 $(this)

                    })
                - var v = 条件 ? 真值 : 假值
            筛选        ---s3
                $('#i1').next()   找下一个
                $('#i1').nextAll() 找下边所有
                $('#i1').nextUntil('#ii1')
                <div>
                    <a>asdf</a>
                    <a>asdf</a>
                    <a id='i1'>asdf</a>
                    <a>asdf</a>
                    <a id='ii1'>asdf</a>
                    <a>asdf</a>
                </div>
                $('#i1').prev()
                $('#i1').prevAll()
                $('#i1').prevUntil('#ii1')                                

                $('#i1').parent()
                $('#i1').parents() 找到所有的上辈
                $('#i1').parentsUntil()
                $('#i1').children()
                $('#i1').siblings()
                $('#i1').find()
                $('li:eq(1)')
                $('li').eq(1)
                first()
                last()
                hasClass(class)
        文本操作：
                $(..).text()           # 获取文本内容
                $(..).text(“<a>1</a>”) # 设置文本内容 不解析
                $(..).html()
                $(..).html("<a>1</a>")        解析
                $(..).val()
                $(..).val(..)
        样式操作：   ---s8
                addClass
                removeClass
                toggleClass
        属性操作：
                # 专门用于做自定义属性
                $(..).attr('n')  获取值
                $(..).attr('n','v')  设置值
                $(..).removeAttr('n')
                <input type='checkbox' id='i1'  />
                # 专门用于chekbox,radio
                $(..).prop('checked')
                $(..).prop('checked', true)
                PS:
                    index 获取索引位置        ---s10
        文档处理：   ---s11
                append
                prepend
                after
                before
                remove
                empty
                clone
        css处理
            $('t1').css('样式名称', '样式值')
            点赞：  ---s12
                 - $('t1').append()
                 - $('t1').remove()
                 - setInterval
                 - 透明度 1 》 0
                 - position
                 - 字体大小，位置
        位置： ---s13
            $(window).scrollTop()  获取
            $(window).scrollTop(0) 设置
            scrollLeft([val])
            offset().left                 指定标签在html中的坐标
            offset().top                  指定标签在html中的坐标
            position()                       指定标签相对父标签(relative)标签的坐标
            <div style='relative'>
                <div>
                    <div id='i1' style='position:absolute;height:80px;border:1px'></div>
                </div>
            </div>
            $('i1').height()           # 获取标签的高度 纯高度
            $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
            # 纯高度，边框，外边距，内边距
        事件
            DOM： 三种绑定方式
                jQuery：
                    $('.c1').click()
                    $('.c1').....
                    $('.c1').bind('click',function(){
                    })
                    $('.c1').unbind('click',function(){
                    })                    

                    *******************   ---s15 委托
                    $('.c').delegate('a', 'click', function(){
                    })
                    $('.c').undelegate('a', 'click', function(){
                    })
                    $('.c1').on('click', function(){
                    })
                    $('.c1').off('click', function(){
                    })
                阻止事件发生
                    return false
                # 当页面框架加载完成之后，自动执行
                $(function(){
                    $(...)
                })
        jQuery扩展：
            - $.extend        $.方法
            - $.fn.extend     $(..).方法
            ---自执行函数 避免全局变量冲突
            (function(){
                var status = 1;
                // 封装变量
            })(jQuery)
    二、操作元素
===》实例：
作业：
    一：
            $('i1').height()           # 获取标签的高度 纯高度
            $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
            # 纯高度，边框，外边距，内边距
    二、所有实例敲一遍
    三、编辑框

s1

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="csswenjian" />
     <style>
     </style>
 </head>
 <body>
     <input type="text" />
     <input type="text" disabled />
     <input type="text" />
     <div id='i10' class='c1'>
         <div>
             <a>asd</a>
         </div>
         <a alex='123'>f2</a>
         <a alex='456'>f2</a>
         <a>f3</a>
         <a>f4</a>
     </div>
     <div class='c1'>
         <a>f</a>
     </div>
     <div class='c1'>
         <div class='c2'> </div>
     </div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $("#i1")
     </script>
 </body>
 </html>

s2

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .header{
             background-color: black;
             color: wheat;
         }
         .content{
             min-height: 50px;
         }
         .hide{
             display: none;
         }
     </style>
 </head>
 <body>
     <div style="height:400px;width: 200px;border: 1px solid #dddddd">
         <div class="item">
             <div class="header">标题一</div>
             <div id="i1" class="content hide">内容</div>
         </div>
         <div class="item">
             <div class="header">标题二</div>
             <div class="content hide">内容</div>
         </div>
         <div class="item">
             <div class="header">标题三</div>
             <div class="content hide">内容</div>
         </div>
     </div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         // 绑定onclick
         $('.header').click(function(){
             // 当前点击的标签 $(this)
             // 获取某个标签的下一个标签
             // 获取某个标签的父标签
             // 获取所有的兄弟标签
             // 添加样式和移除样式
             // $('.i1').addClass('hide')
             // $('#i1').removeClass('hide')
             // var v = $("this + div"); 用这种太麻烦
             // $("label + input")
             // console.log(v);
             //
             // $("afsldkfja;skjdf;aksdjf")

             // 筛选器
             /*
             $(this).next()      下一个
             $(this).prev()      上一个
             $(this).parent()    父
             $(this).children()  孩子
             $('#i1').siblings() 兄弟
             $('#i1').find('#i1') 子子孙孙中查找
             // . . .
             //
             $('#i1').addClass(..)
             $('#i1').removeClass(..)
             */
             // 链式编程
             // $(...).click(function(){
             //     this..
             // })
 //            $(this).next().removeClass('hide');
 //            $(this).parent().siblings().find('.content').addClass('hide')
             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
         })
     </script>
 </body>
 </html>

s3

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .header{
             background-color: black;
             color: wheat;
         }
         .content{
             min-height: 50px;
         }
         .hide{
             display: none;
         }
     </style>
 </head>
 <body>
     <div style="height:400px;width: 200px;border: 1px solid #dddddd">
         <div class="item">
             <div class="header">标题一</div>
             <div id="i1" class="content hide">内容</div>
         </div>
         <div class="item">
             <div class="header">标题二</div>
             <div class="content hide">内容</div>
         </div>
         <div class="item">
             <div class="header">标题三</div>
             <div class="content hide">内容</div>
         </div>
     </div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         // 绑定onclick
         $('.header').click(function(){
             // 当前点击的标签 $(this)
             // 获取某个标签的下一个标签
             // 获取某个标签的父标签
             // 获取所有的兄弟标签
             // 添加样式和移除样式
             // $('.i1').addClass('hide')
             // $('#i1').removeClass('hide')
             // var v = $("this + div"); 用这种太麻烦
             // $("label + input")
             // console.log(v);
             //
             // $("afsldkfja;skjdf;aksdjf")

             // 筛选器
             /*
             $(this).next()      下一个
             $(this).prev()      上一个
             $(this).parent()    父
             $(this).children()  孩子
             $('#i1').siblings() 兄弟
             $('#i1').find('#i1') 子子孙孙中查找
             // . . .
             //
             $('#i1').addClass(..)
             $('#i1').removeClass(..)
             */
             // 链式编程
             // $(...).click(function(){
             //     this..
             // })
 //            $(this).next().removeClass('hide');
 //            $(this).parent().siblings().find('.content').addClass('hide')
             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
         })
     </script>
 </body>
 </html>

s4

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <div>
         <a>1</a>
         <a>21</a>
         <a id="i1">133</a>
         <a>144</a>
         <a>155</a>
     </div>
     <script src="jquery-1.12.4.js"></script>
 </body>
 </html>

s5

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hide{
             display: none;
         }
         .modal{
             position: fixed;
             top: 50%;
             left: 50%;
             width: 500px;
             height: 400px;
             margin-left: -250px;
             margin-top: -250px;
             background-color: #eeeeee;
             z-index: 10;
         }
         .shadow{
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             opacity: 0.6;
             background-color: black;
             z-index: 9;
         }
     </style>
 </head>
 <body>
     <a onclick="addElement();">添加</a>
     <table border="1" id="tb">
         <tr>
             <td target="hostname">1.1.1.11</td>
             <td target="port">80</td>
             <td target="ip"> 80</td>
             <td>
                 <a class="edit">编辑</a > | <a class="del">删除</a>
             </td>
         </tr>
         <tr>
             <td target="hostname">1.1.1.12</td>
             <td target="port">80</td>
             <td target="ip">80</td>
             <td>
                 <a class="edit">编辑</a> | <a class="del">删除</a>
             </td>
         </tr>
         <tr>
             <td target="hostname">1.1.1.13</td>
             <td target="port">80</td>
             <td target="ip">80</td>
             <td>
                 <a class="edit">编辑</a> | <a class="del">删除</a>
             </td>
         </tr>
         <tr>
             <td target="hostname">1.1.1.14</td>
             <td target="port">80</td>
             <td target="ip">80</td>
             <td>
                 <a class="edit">编辑</a> | <a class="del">删除</a>
             </td>
         </tr>
     </table>
     <div class="modal hide">
         <div>
             <input name="hostname" type="text"  />
             <input name="port" type="text" />
             <input name="ip" type="text" />
         </div>

         <div>
             <input type="button" value="取消" onclick="cancelModal();" />
             <input type="button" value="确定" onclick="confirmModal();" />
         </div>
     </div>
     <div class="shadow hide"></div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $('.del').click(function () {
             $(this).parent().parent().remove();
         });
         function  confirmModal() {
             var tr = document.createElement('tr');
             var td1 = document.createElement('td');
             td1.innerHTML = "11.11.11.11";
             var td2 = document.createElement('td');
             td2.innerHTML = "8001";
             $(tr).append(td1);
             $(tr).append(td2);
             $('#tb').append(tr);
             $(".modal,.shadow").addClass('hide');
 //            $('.modal input[type="text"]').each(function () {
 //                // var temp = "<td>..."
 //            })
         }
         function  addElement() {
             $(".modal,.shadow").removeClass('hide');
         }
         function cancelModal() {
             $(".modal,.shadow").addClass('hide');
             $('.modal input[type="text"]').val("");
         }
         $('.edit').click(function(){
             $(".modal,.shadow").removeClass('hide');
             // this
             var tds = $(this).parent().prevAll();
             tds.each(function () {
                 // 获取td的target属性值
                 var n = $(this).attr('target');
                 // 获取td中的内容
                 var text = $(this).text();
                 var a1 = '.modal input[name="';
                 var a2 = '"]';
                 var temp = a1 + n + a2;
                 $(temp).val(text);
             });
 //            var port = $(tds[0]).text();
 //            var host = $(tds[1]).text();
 //
 //            $('.modal input[name="hostname"]').val(host);
 //            $('.modal input[name="port"]').val(port);
             // 循环获取tds中内容
             // 获取 <td>内容</td> 获取中间的内容
             // 赋值给input标签中的value
         });
     </script>
 </body>
 </html>

s6

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
     <body>
         <div class="c1">
             <p>
                 <span id="i1">Hello</span>
             </p>
             <span>Hello Again</span>
         </div>
             <script src="jquery-1.12.4.js"></script>
     </body>
 </html>

s7

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <div id="i1">asdfasdf<a>asdfasdf</a></div>
     <input id="i2" type="text" />
     <script src="jquery-1.12.4.js"></script>
 </body>
 </html>

s8

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hide{
             display: none;
         }
     </style>
 </head>
 <body>
     <input type='checkbox' id='i2'  />
     <input id="i1" type="button" value="开关" />
     <div class="c1 hide">asdfasdf</div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $('#i1').click(function(){
 //            if($('.c1').hasClass('hide')){
 //                $('.c1').removeClass('hide');
 //            }else{
 //                $('.c1').addClass('hide');
 //            }
             $('.c1').toggleClass('hide');
         })
     </script>
 </body>
 </html>

s9

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hide{
             display: none;
         }
         .menu{
             height: 38px;
             background-color: #eeeeee;
             line-height: 38px;
         }
         .active{
             background-color: brown;
         }
         .menu .menu-item{
             float: left;
             border-right: 1px solid red;
             padding: 0 5px;
             cursor: pointer; /*小手*/
         }
         .content{
             min-height: 100px;
             border: 1px solid #eeeeee;
         }
     </style>
 </head>
 <body>
     <div style="width: 700px;margin:0 auto">
         <div class="menu">
             <div  class="menu-item active" a="1">菜单一</div>
             <div  class="menu-item" a="2">菜单二</div>
             <div  class="menu-item" a="3">菜单三</div>
         </div>
         <div class="content">
             <div b="1">内容一</div>
             <div class="hide"  b="2">内容二</div>
             <div class="hide" b="3">内容三</div>
         </div>
     </div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $('.menu-item').click(function(){
             $(this).addClass('active').siblings().removeClass('active');
             var target = $(this).attr('a');
             $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
         });
     </script>
 </body>
 </html>

s10

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .hide{
             display: none;
         }
         .menu{
             height: 38px;
             background-color: #eeeeee;
             line-height: 38px;
         }
         .active{
             background-color: brown;
         }
         .menu .menu-item{
             float: left;
             border-right: 1px solid red;
             padding: 0 5px;
             cursor: pointer;
         }
         .content{
             min-height: 100px;
             border: 1px solid #eeeeee;
         }
     </style>
 </head>
 <body>
     <div style="width: 700px;margin:0 auto">
         <div class="menu">
             <div  class="menu-item active" >菜单一</div>
             <div  class="menu-item" >菜单二</div>
             <div  class="menu-item" >菜单三</div>
         </div>
         <div class="content">
             <div >内容一</div>
             <div class="hide" >内容二</div>
             <div class="hide">内容三</div>
         </div>
     </div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $('.menu-item').click(function(){
             $(this).addClass('active').siblings().removeClass('active');
             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
         });
     </script>
 </body>
 </html>

s11

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <input id="t1" type="text" />
     <input id="a1" type="button" value="添加" />
     <input id="a2" type="button" value="删除" />
     <input id="a3" type="button" value="复制" />
     <ul id="u1">
         <li>1</li>
         <li>2</li>
     </ul>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $('#a1').click(function () {
             var v = $('#t1').val();
             var temp = "<li>" + v + "</li>";
             // $('#u1').append(temp);
             $('#u1').prepend(temp);
             // $('#u1').after(temp)
             // $('#u1').before(temp)
         });
         $('#a2').click(function () {
             var index = $('#t1').val();
             //$('#u1 li').eq(index).remove();
             //$('#u1 li').eq(index).empty();
         });
         $('#a3').click(function () {
             var index = $('#t1').val();
             var v = $('#u1 li').eq(index).clone();
             $('#u1').append(v);
             //$('#u1 li').eq(index).remove();
             //$('#u1 li').eq(index).empty();
         })
     </script>
 </body>
 </html>

s12

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .container{
             padding: 50px;
             border: 1px solid #dddddd;
         }
         .item{
             position: relative;
             width: 30px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="item">
             <span>赞</span>
         </div>
     </div>
     <div class="container">
         <div class="item">
             <span>赞</span>
         </div>
     </div>
     <div class="container">
         <div class="item">
             <span>赞</span>
         </div>
     </div>
     <div class="container">
         <div class="item">
             <span>赞</span>
         </div>
     </div>
     <script src="jquery-1.12.4.js"></script>
     <script>
         $('.item').click(function () {
             AddFavor(this);
         });
         function AddFavor(self) {
             // DOM对象
             var fontSize = 15;
             var top = 0;
             var right = 0;
             var opacity = 1;
             var tag = document.createElement('span');
             $(tag).text('+1');
             $(tag).css('color','green');
             $(tag).css('position','absolute');
             $(tag).css('fontSize',fontSize + "px");
             $(tag).css('right',right + "px");
             $(tag).css('top',top + 'px');
             $(tag).css('opacity',opacity);
             $(self).append(tag);
             var obj = setInterval(function () {
                 fontSize = fontSize + 10;
                 top = top - 10;
                 right = right - 10;
                 opacity = opacity - 0.1;
                 $(tag).css('fontSize',fontSize + "px");
                 $(tag).css('right',right + "px");
                 $(tag).css('top',top + 'px');
                 $(tag).css('opacity',opacity);
                 if(opacity < 0){
                     clearInterval(obj);
                     $(tag).remove();
                 }
             }, 40);
         }
     </script>
 </body>
 </html>

s13

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <div id="i1"></div>
      <div style="height: 100px;width:100px;overflow: auto">
             <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
             <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
             <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
             <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
             <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
             <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
         </div>
      <div id="i2"></div>
     <div style="height: 1000px;"></div>
     <script src="jquery-1.12.4.js"></script>
 </body>
 </html>

s14

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
         <div id="title" style="background-color: black;height: 40px;"></div>
         <div style="height: 300px;"></div>
     </div>
 <script type="text/javascript" src="jquery-1.12.4.js"></script>
 <script>
     $(function(){
         $('#title').mouseover(function(){
             $(this).css('cursor','move');
         });
         $("#title").mousedown(function(e){
             //console.log($(this).offset());
             var _event = e || window.event;
             var ord_x = _event.clientX;
             var ord_y = _event.clientY;
             var parent_left = $(this).parent().offset().left;
             var parent_top = $(this).parent().offset().top;
             $('#title').on('mousemove', function(e){
                 var _new_event = e || window.event;
                 var new_x = _new_event.clientX;
                 var new_y = _new_event.clientY;
                 var x = parent_left + (new_x - ord_x);
                 var y = parent_top + (new_y - ord_y);
                 $(this).parent().css('left',x+'px');
                 $(this).parent().css('top',y+'px');
             })
         });
         $("#title").mouseup(function(){
             $("#title").off('mousemove');
         });
     })
 </script>
 </body>
 </html>

s15

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <input id="t1" type="text" />
     <input id="a1" type="button" value="添加" />
     <ul id="u1">
         <li>1</li>
         <li>2</li>
     </ul>
 <script src="jquery-1.12.4.js"></script>
     <script>
         $('#a1').click(function () {
             var v = $('#t1').val();
             var temp = "<li>" + v + "</li>";
             $('#u1').append(temp);
         });
 //        $('ul li').click(function () {
 //            var v = $(this).text();
 //            alert(v);
 //        })  这种添加之后不可以
 //        $('ul li').bind('click',function () {
 //            var v = $(this).text();
 //            alert(v);
 //        })  这种也不可以
 //        $('ul li').on('click', function () {
 //            var v = $(this).text();
 //            alert(v);
 //        })   这种也不可以
         //委托
         $('ul').delegate('li','click',function () {
             var v = $(this).text();
             alert(v);
         })
     </script>
 </body>
 </html>

s16

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a> <!-- Dom -->
     <a id="i1" href="http://www.oldboyedu.com">走你2</a>  <!--jQuery -->
     <script src="jquery-1.12.4.js"></script>
     <script>
         function ClickOn() {
             alert(123);
             return true;
         }
         $('#i1').click(function () {
             alert(456);
             return false;
         })
     </script>
 </body>
 </html>

s17

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .error{
             color: red;
         }
     </style>
 </head>
 <body>
     <form id="f1" action="s5.html" method="POST">
         <div><input name="n1" tex = "用户名" type="text" /></div>
         <div><input name="n2" tex = "密码" type="password" /></div>
         <div><input name="n3" tex = "邮箱" type="text" /></div>
         <div><input name="n4" tex = "端口" type="text" /></div>
         <div><input name="n5" tex = "IP" type="text" /></div>
         <input type="submit" value="提交" />
         <img src="...">
     </form>
     <script src="jquery-1.12.4.js"></script>
     <script>
         // 当页面框架加载完毕后，自动执行
         $(function(){
             $.Login('#f1')
         });
         $(function(){
             // 当页面所有元素完全加载完毕后，执行
             $(':submit').click(function () {
                 $('.error').remove();
                 var flag = true;
                 $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                     var v = $(this).val();
                     var n = $(this).attr('tex');
                     if(v.length <= 0){
                         flag = false;
                         var tag = document.createElement('span');
                         tag.className = "error";
                         tag.innerHTML = n + "必填";
                         $(this).after(tag);
                         // return false;
                     }
                 });
                 return flag;
         });
         });
 //        $(':submit').click(function () {
 //            var v = $(this).prev().val();
 //            if(v.length > 0){
 //                return true;
 //            }else{
 //                alert('请输入内容');
 //                return false
 //            }
 //        })
     </script>
 </body>
 </html>

s18

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <script src="jquery-1.12.4.js"></script>
     <script src="plugin1.js"></script>
     <script>
         var v = $.wangsen();
         alert(v);
 //        $('#i1').css()
 //        $.ajax()
         // jquery扩展
 //        $.fn.extend({
 //            "hanyang": function () {
 //                return 'db';
 //            }
 //        });
 //        var v = $('#i1').hanyang();
 //        alert(v);
 //        $.extend({
 //            'wangsen': function () {
 //                return 'sb';
 //            }
 //        });
 //        var v = $.wangsen();
 //        alert(v);
     </script>
 </body>
 </html>