前面学习了原生的DOM，现在看看如何使用JQuery。JQuery建议使用1.12的版本，这样对旧版本的IE兼容性比较好。


例1.添加，删除class

知识要点：

1. 通过<script src='jquery-1.12.4.js></script>调用jquery

2. 相对于Dom的document.getElementbyID('i1'), JQuery直接使用$('#i1')；

类似的，查找类可以用$('.c1')，查找p标签 $('p')，查找form的元素 $(':text') ，还可以组合使用。具体的选择器可以参考https://www.w3schools.com/jquery/jquery_ref_selectors.asp

3. addclass（‘hide’）直接给找到的标签添加一个样式class，removeClass('hide')删除一个class，无需使用classlist了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="hide" οnclick="hides();"/>
    <div id="i1">
        <div class="item"></div>
        <div class="item">
            <div class="c1">123</div>
            <a>百度</a>
        </div>
        <div class="item"></div>
    </div>
    <div id="i2"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        flag=true;
        function hides() {
            if (flag==true){
                 $('#i1').addClass('hide');
                 console.log(flag)
                 flag=false;
            }else{
                 $('#i1').removeClass('hide');
                     console.log(flag)
                 flag=true;
            }
        }
    </script>
</body>
</html>

点击hide按钮切换隐藏效果


wKioL1iBkNfxsfPdAAAvIfwpYIw978.jpg


例2. 全选和反选

这个例子在前面的Dom里面出现过，现在看看JQuery如何实现


知识点：

1. 选择器可以组合使用 比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素

2. 对于checkbox的属性，通过prop()来实现，如果是自定义的其他的属性，通过attr()实现

3. each()可以实现循环，循环里面如果输出this,可以看见他是一个dom的格式，如果把他转换成jquery对象的格式（数组格式），可以通过$(this)实现，如果想把jquery转为dom的格式，那么直接取第一个数组的值就行了，例子里面实现了3种方式，dom，jquery以及三元运算符的格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" οnclick="checkAll();" />
    <input type="button" value="反选" οnclick="reverseAll();" />
    <input type="button" value="取消"  οnclick="cancleAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this,代指当前循环的每一个元素
                // Dom
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
                */
              // 三元运算var v = 条件? 真值：假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>




例3 隐藏菜单

知识点：

1. click的事件可以直接选择到标签之后执行，这个比在html里面使用onclick事件要好很多。

2. Jquery支持链式的编程，因此如下所示可以一行实现很多功能


<!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>
        $('.header').click(function(){

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

        })
    </script>
</body>
</html>



例4.  复制，删除文本框

clone（）克隆标签

find（）查找标签

attr（）添加一个事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <p>
  10.             <a οnclick="Add(this);"> + </a>
  11.             <input type="text" />
  12.         </p>
  13.     </div>
  14.     <script src="jquery-1.12.4.js"></script>
  15.     <script>
  16.         function Add(ths){
  17.             var p = $(ths).parent().clone();
  18.             p.find('a').text(' - ');
  19.             p.find('a').attr('onclick', 'Remove(this);');
  20.             $(ths).parent().parent().append(p);
  21.         }
  22.         function Remove(ths){
  23.             $(ths).parent().remove();
  24.         }
  25.     </script>
  26. </body>
  27. </html>

效果：点击+自动复制一行，点击-删除自己所在


wKiom1iBmSChF11VAAAz9XaAPak887.jpg


例5. 绑定事件-例2的升级版

例2里面我们需要给每个标签都手动的添加onclick事件，如果可以统一绑定事件，会省事很多。有两种方式，如下所示;


$(function){

    ....

 }里面执行的...会在文档树加载之后自动执行，不会等待所有的图片内容的加载


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             width: 200px;
  12.             height: 600px;
  13.             border: 1px solid #dddddd;
  14.             overflow: auto;
  15.         }
  16.         .menu .item .title{
  17.             height: 40px;
  18.             line-height: 40px;
  19.             background-color: #2459a2;
  20.             color: white;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="menu">
  26.         <div class="item">
  27.             <div class="title">菜单一</div>
  28.             <div class="body">
  29.                 <p>内容一</p>
  30.                 <p>内容一</p>
  31.                 <p>内容一</p>
  32.                 <p>内容一</p>
  33.                 <p>内容一</p>
  34.             </div>
  35.         </div>
  36.         <div class="item">
  37.             <div class="title" >菜单二</div>
  38.             <div class="body hide">
  39.                 <p>内容二</p>
  40.                 <p>内容二</p>
  41.                 <p>内容二</p>
  42.                 <p>内容二</p>
  43.                 <p>内容二</p>
  44.                 <p>内容二</p>
  45.             </div>
  46.         </div>
  47.         <div class="item">
  48.             <div class="title">菜单三</div>
  49.             <div class="body hide">
  50.                 <p>内容三</p>
  51.                 <p>内容三</p>
  52.                 <p>内容三</p>
  53.                 <p>内容三</p>
  54.                 <p>内容三</p>
  55.                 <p>内容三</p>
  56.             </div>
  57.         </div>
  58.     </div>
  59.     <script src="jquery-1.12.4.js"></script>
  60.     <script>
  61. //方法一
  62. //        $(function(){
  63. //            // 当文档树加载完毕后，自动执行
  64. //            $('.item .title').click(function(){
  65. //                // this,$(this)
  66. //                $(this).next().removeClass('hide');
  67. //                $(this).parent().siblings().find('.body').addClass('hide');
  68. //            });
  69. //        });
  70.         
  71.         
  72. //方法二        
  73.         $('.item .title').bind('focus', function () {
  74.             $(this).next().removeClass('hide');
  75.             $(this).parent().siblings().find('.body').addClass('hide');
  76.         })
  77.         
  78.     </script>
  79. </body>
  80. </html>



例6  事件的延迟绑定

比如通过javascript创建的新标签，如何让他自动绑定事件？可以通过delegate实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <input type="button" οnclick="Add();" />
  9.     <ul>
  10.         <li>123</li>
  11.         <li>456</li>
  12.         <li>789</li>
  13.     </ul>
  14.     <script src="jquery-1.12.4.js"></script>
  15.     <script>
  16.         $(function(){
  17.             /*
  18.             $('li').click(function () {
  19.                 alert($(this).text());
  20.             });
  21.             */
  22.             $("ul").delegate("li","click",function(){
  23.                 alert($(this).text());
  24.             });
  25.         });
  26.         function Add(){
  27.             var tag = document.createElement('li');
  28.             tag.innerText = '666';
  29.             $('ul').append(tag);
  30.         }
  31.     </script>
  32. </body>
  33. </html>

wKiom1iBnjai7SkjAABq2g43m9Y056.jpg




例7　模态对话框　（高级版）

之前用DOM实现过模态对话框，现在用JQuery实现同样的功能。

知识要点：


1.模态对话框的HTML和CSS布局，3层，最上层居中，中间一个阴影层，最下面是主界面，上面两层默认隐藏，通过z-index区分上下顺序

2. 可以通过attr()方法来获取和设置自定义的属性；如果是checkbox或者radio，那么通过prop()方法来获取和设定属性

3.通过属性来定位元素，比如 $("[editable='false']")则可以获取editable属性为false的那个标签元素

4. 文本编辑，对于InnerText的值是通过text()实现，对于input的表单内容则是通过val()实现

5. 添加class，删除class通过addClass()和removeClass()实现

6. delegate 延迟绑定的实现，一般用于未来的新的标签，比如通过脚本创建的标签

7. 动态的创建标签，可以直接插入html字符串或者通过CreateElement()实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .modal{
  11.             position: fixed;
  12.             top: 50%;
  13.             left: 50%;
  14.             width: 500px;
  15.             height: 400px;
  16.             margin-left: -250px;
  17.             margin-top: -250px;
  18.             background-color: #eeeeee;
  19.             z-index: 10;
  20.         }
  21.         .shadow{
  22.             position: fixed;
  23.             top: 0;
  24.             left: 0;
  25.             right: 0;
  26.             bottom: 0;
  27.             opacity: 0.6;
  28.             background-color: black;
  29.             z-index: 9;
  30.         }
  31.  
  32.         .item{
  33.             position: relative;
  34.             width: 100px;
  35.             margin-top: 20px;
  36.             margin-left: 30px;
  37.  
  38.         }
  39.         .label{
  40.             width: 40px;
  41.             color: chocolate;
  42.         }
  43.         .content{
  44.             width:100px;
  45.             position: absolute;
  46.             right:-80px;
  47.  
  48.         }
  49.         .buttons{
  50.             margin-top: 20px;
  51.             margin-left: 30px;
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <a οnclick="addElement();">添加</a>
  57.  
  58.     <table border="1" id="tb">
  59.         <tr>
  60.             <td target="hostname">1.1.1.11</td>
  61.             <td target="port">80</td>
  62.             <td target="ip">80</td>
  63.             <td editable="true">
  64.                 <a class="edit" >编辑</a> | <a class="del">删除</a>
  65.             </td>
  66.         </tr>
  67.         <tr>
  68.             <td target="hostname">1.1.1.12</td>
  69.             <td target="port">80</td>
  70.             <td target="ip">80</td>
  71.             <td editable="true">
  72.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  73.             </td>
  74.         </tr>
  75.         <tr>
  76.             <td target="hostname">1.1.1.13</td>
  77.             <td target="port">80</td>
  78.             <td target="ip">80</td>
  79.             <td editable="true">
  80.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  81.             </td>
  82.         </tr>
  83.         <tr>
  84.             <td target="hostname">1.1.1.14</td>
  85.             <td target="port">80</td>
  86.             <td target="ip">80</td>
  87.             <td editable="true">
  88.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  89.             </td>
  90.  
  91.         </tr>
  92.     </table>
  93.  
  94.     <div class="modal hide">
  95.         <div >
  96.             <div class="item">
  97.                 <label class="label">主机名</label>
  98.                 <input class="content" name="hostname" type="text"  />
  99.             </div>
  100.             <div class="item">
  101.                 <label class="label">端口</label>
  102.                 <input class="content" name="port" type="text" />
  103.             </div>
  104.             <div class="item">
  105.                 <label class="label">IP地址</label>
  106.                 <input class="content" name="ip" type="text" />
  107.             </div>
  108.  
  109.         </div>
  110.  
  111.         <div class="buttons">
  112.             <input type="button" value="取消" οnclick="cancelModal();" />
  113.             <input type="button" value="添加" οnclick="addModal();" />
  114.             <input type="button" value="修改" οnclick="updateModal();" />
  115.         </div>
  116.     </div>
  117.  
  118.     <div class="shadow hide"></div>
  119.  
  120.     <script src="jquery-1.12.4.js"></script>
  121.     <script>
  122.  
  123.         $("#tb").delegate('.del',"click",function () {
  124.             $(this).parent().parent().remove();
  125.         })
  126.  
  127.         function  addModal() {
  128.  
  129.             var tr = document.createElement('tr');
  130.             var td1 = document.createElement('td');
  131.             td1.innerHTML = $(".modal input[name='hostname']").val();
  132.             var att1=document.createAttribute('target');
  133.             att1.value='hostname';
  134.             td1.setAttributeNode(att1);
  135.  
  136.             var td2 = document.createElement('td');
  137.             td2.innerHTML = $(".modal input[name='port']").val();
  138.               var att2=document.createAttribute('target');
  139.               att2.value='port';
  140.             td2.setAttributeNode(att2);
  141. 			 
  142. 			var td3 = document.createElement('td');
  143.             td3.innerHTML = $(".modal input[name='ip']").val();;
  144.               var att3=document.createAttribute('target');
  145.               att3.value='ip';
  146.             td3.setAttributeNode(att3);
  147. 			
  148. 			var td4 = document.createElement('td');
  149.             td4.innerHTML = " <a class='edit'>编辑</a> | <a class='del'>删除</a>"
  150.  
  151.             $(tr).append(td1);
  152.             $(tr).append(td2);
  153. 			$(tr).append(td3);
  154. 			$(tr).append(td4);
  155. 			
  156.  
  157.             $('#tb').append(tr);
  158.  
  159.             $(".modal,.shadow").addClass('hide');
  160.  
  161.         }
  162.  
  163.         function  addElement() {
  164.             $(".modal,.shadow").removeClass('hide');
  165.         }
  166.         function cancelModal() {
  167.             $(".modal,.shadow").addClass('hide');
  168.             $('.modal input[type="text"]').val("");
  169.         }
  170.         function updateModal(){
  171.             var host=$(".modal input[name='hostname']").val()
  172.             var port=$(".modal input[name='port']").val()
  173.             var ip=$(".modal input[name='ip']").val()
  174.             var tds=$("[editable='false']").prevAll()
  175.             console.log(tds)
  176.             tds.each(
  177.                 function () {
  178.                     console.log($(this).attr('target'))
  179.                     if($(this).attr('target')=='ip'){
  180.                         $(this).text(ip);
  181.                         console.log('update ip')
  182.                     }
  183.                     else if($(this).attr('target')=='port'){
  184.  
  185.                         $(this).text(port);
  186.                     console.log('update port')
  187.                     }
  188.                     else if($(this).attr('target')=='hostname'){
  189.  
  190.                         $(this).text(host)
  191.                         console.log('update host')
  192.                     }
  193.  
  194.                 }
  195.             )
  196.  
  197.  
  198.                  $(".modal,.shadow").addClass('hide');
  199.  
  200.  
  201.             $("[editable='false']").attr('editable','true')
  202.         }
  203.  
  204.  
  205.  
  206.         $("#tb").delegate(".edit","click",function() {
  207.             $(".modal,.shadow").removeClass('hide');
  208.             // this
  209.             $(this).parent().attr('editable', 'false')
  210.             var tds = $(this).parent().prevAll();
  211.             tds.each(function () {
  212.                 // 获取td的target属性值
  213.                 var n = $(this).attr('target');
  214.                 // 获取td中的内容
  215.                 var text = $(this).text();
  216.                 var a1 = '.modal input[name="';
  217.                 var a2 = '"]';
  218.                 var temp = a1 + n + a2;
  219.                 $(temp).val(text);
  220.             })
  221.         })
  222.  
  223.  
  224.     </script>
  225. </body>
  226. </html>

wKiom1k3i4OQuYs5AACP8qBkSCw191.jpg


例8 TAB效果


知识点：

1.AddClass和RemoveClass的使用

2.小技巧，通过自定义的属性值进行匹配，定位标签的时候因为格式为[attr=‘value’]的格式，因此做了一个字符串的拼接

3.注释掉的代码是另外一种方法，可以通过索引来进行匹配

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             height: 38px;
  12.             background-color: #eeeeee;
  13.             line-height: 38px;
  14.         }
  15.         .active{
  16.             background-color: brown;
  17.         }
  18.         .menu .menu-item{
  19.             float: left;
  20.             border-right: 1px solid red;
  21.             padding: 0 5px;
  22.             cursor: pointer;
  23.         }
  24.         .content{
  25.             min-height: 100px;
  26.             border: 1px solid #eeeeee;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div style="width: 700px;margin:0 auto">
  32.         <div class="menu">
  33.             <div  class="menu-item active" a="1">菜单一</div>
  34.             <div  class="menu-item" a="2">菜单二</div>
  35.             <div  class="menu-item" a="3">菜单三</div>
  36.         </div>
  37.         <div class="content">
  38.             <div b="1">内容一</div>
  39.             <div class="hide"  b="2">内容二</div>
  40.             <div class="hide" b="3">内容三</div>
  41.         </div>
  42.     </div>
  43.     <script src="jquery-1.12.4.js"></script>
  44.     <script>
  45.         $('.menu-item').click(function(){
  46.             $(this).addClass('active').siblings().removeClass('active');
  47.             var target = $(this).attr('a');
  48.            # $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
  49.             $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
  50.         });
  51.     </script>
  52. </body>
  53. </html>


wKiom1k3k2bBN0gsAAA49erXQgM859.jpg


例9 点赞


知识点：

1. Jquery里面通过css()来改变一个标签的style

2. 思路和Dom一样的，动态创建一个span标签，通过定时器改变大小和位置，当透明度低于一定程度，结束定时器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container{
  8.             padding: 50px;
  9.             border: 1px solid #dddddd;
  10.         }
  11.         .item{
  12.             position: relative;
  13.             width: 30px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="container">
  19.         <div class="item">
  20.             <span>赞</span>
  21.         </div>
  22.     </div>
  23.     <div class="container">
  24.         <div class="item">
  25.             <span>赞</span>
  26.         </div>
  27.     </div>
  28.     <div class="container">
  29.         <div class="item">
  30.             <span>赞</span>
  31.         </div>
  32.     </div>
  33.     <div class="container">
  34.         <div class="item">
  35.             <span>赞</span>
  36.         </div>
  37.     </div>
  38.     <script src="jquery-1.12.4.js"></script>
  39.     <script>
  40.         $('.item').click(function () {
  41.             AddFavor(this);
  42.         });
  43.         function AddFavor(self) {
  44.             // DOM对象
  45.             var fontSize = 15;
  46.             var top = 0;
  47.             var right = 0;
  48.             var opacity = 1;
  49.             var tag = document.createElement('span');
  50.             $(tag).text('+1');
  51.             $(tag).css('color','green');
  52.             $(tag).css('position','absolute');
  53.             $(tag).css('fontSize',fontSize + "px");
  54.             $(tag).css('right',right + "px");
  55.             $(tag).css('top',top + 'px');
  56.             $(tag).css('opacity',opacity);
  57.             $(self).append(tag);
  58.             var obj = setInterval(function () {
  59.                 fontSize = fontSize + 10;
  60.                 top = top - 10;
  61.                 right = right - 10;
  62.                 opacity = opacity - 0.1;
  63.                 $(tag).css('fontSize',fontSize + "px");
  64.                 $(tag).css('right',right + "px");
  65.                 $(tag).css('top',top + 'px');
  66.                 $(tag).css('opacity',opacity);
  67.                 if(opacity < 0){
  68.                     clearInterval(obj);
  69.                     $(tag).remove();
  70.                 }
  71.             }, 40);
  72.         }
  73.     </script>
  74. </body>
  75. </html>


例10 鼠标移动窗口

下面这个例子可以通过鼠标拖曳窗口


知识点：


1. offset()显示的是当前标签在整个html里面的坐标，还有一个position()显示的是在absolute在relative标签里面的位置


2. event=e || windows.event 是为了兼容旧版的IE来获取当前的事件， _event.clientX和_event.clientY这里获取的是鼠标的坐标


3. 绑定事件有几种方式，比如直接通过标签执行  $(''#title).mousover(function(){}); 或者通过on绑定，off接触绑定，例如$(''#title).on('mousemove',function(){}), $(''#title).off('mousemove'); 或者可以通bind和unbind绑定和接触绑定，比如例5；最后还可以通过delegate()来延迟绑定，比如例6 


  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
  9.         <div id="title" style="background-color: black;height: 40px;"></div>
  10.         <div style="height: 300px;"></div>
  11.     </div>
  12. <script type="text/javascript" src="jquery-1.12.4.js"></script>
  13. <script>
  14.     $(function(){
  15.         //鼠标放在标签上面自动变成移动的符号
  16.         $('#title').mouseover(function(){
  17.             $(this).css('cursor','move');
  18.         });
  19.         //鼠标单击的事件
  20.         $("#title").mousedown(function(e){
  21.             console.log($(this).offset());
  22.             //鼠标所在的坐标
  23.             var _event = e || window.event;
  24.             var ord_x = _event.clientX;
  25.             var ord_y = _event.clientY;
  26.             console.log(ord_x)
  27.             console.log(ord_y)
  28.             //标签左上角在html里面的坐标
  29.             var parent_left = $(this).parent().offset().left;
  30.             var parent_top = $(this).parent().offset().top;
  31.             $('#title').on('mousemove', function(e){
  32.                 var _new_event = e || window.event;
  33.                 var new_x = _new_event.clientX;
  34.                 var new_y = _new_event.clientY;
  35.                 //获取标签左上角的新坐标
  36.                 var x = parent_left + (new_x - ord_x);
  37.                 var y = parent_top + (new_y - ord_y);
  38.                 $(this).parent().css('left',x+'px');
  39.                 $(this).parent().css('top',y+'px');
  40.             })
  41.         });
  42.         $("#title").mouseup(function(){
  43.             //撤销绑定事件
  44.             $("#title").off('mousemove');
  45.         });
  46.     })
  47. </script>
  48. </body>
  49. </html>


wKiom1k4kNDx2fWnAAB_CPZkbfs414.jpg

例11 阻止事件的发生

有的时候，我们会希望根据一定的条件阻止某个事件的发生，比如表单验证，如果不符合格式或者内容，则无法提交。


知识点：

默认情况下，当我们执行了自定义的Click事件后，他会自动跳转到href指定的地址。但是如果我们把自定义的事件返回值为false，那么他就不会执行后面的操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a οnclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>
  9.     <a id="i1" href="http://www.oldboyedu.com">走你2</a>
  10.     <script src="jquery-1.12.4.js"></script>
  11.     <script>
  12.         function ClickOn() {
  13.             alert(123);
  14.             return false;
  15.         }
  16.         $('#i1').click(function () {
  17.             alert(456);
  18.             return false;
  19.         })
  20.     </script>
  21. </body>
  22. </html>


例12 JQuery的扩展事件


如果希望自己定义一个事件，然后让JQuery来调用的，可以通过extend

知识点：

1. extend的使用有两种方式：$. extend('name':function(){})定义，然后$.name来调用； 或者是$.fn.extend()定义，然后通过$('#id').name的方式来调用


2. 可以把这些扩展方法都写入一个专门的js文件，注意在plugin文件里面，我们是把他放在了一个自执行的方法里面，这个是为了避免和其他js文件里面变量名的冲突。这里我可以直接把JQuery作为参数传进去，这样arg.extend 就相当于$.extend了


plugin1.js

(function (arg) {
    var status = 1;
    arg.extend({
       'Hellow': function () {
           return 'HOHOH';
       }
    });
})(jQuery);


test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <script src="jquery-1.12.4.js"></script>
  9.     <script src="plugin2.js"></script>
  10.     <script>
  11.         var v = $.Hellow();
  12.         alert(v);
  13.     </script>
  14. </body>
  15. </html>

wKiom1k4mRLQRES_AAA3Uxt3lP8248.jpg