Part15 – 前端之jQuery

本节内容

1. jQuery

一、jQuery

jQuery是对DOM的封装

 jQuery

     中文在线文档：http://jquery.cuishifeng.cn/

     模块(Python) <--> 类库(其他语言中)
     jQuery：集合DOM/BOM/JavaScript的类库

     版本：
         .x  1.12   推荐(可以兼容旧版本浏览器)
         .x
         .x

     转换：
         jQuery对象[]   ->   Dom对象
         Dom对象         ->   $(Dom对象) = jQuery对象

     一、查找元素
         a、DOM
             10左右
         b、jQuery：
             选择器，直接找到某个或者某类标签（跟CSS类似）
             . id
                 $('#id')        //id为id的标签

             . class
                 <div class='c1'></div>
                 $(".c1")        //所有class为c1的标签

             . 标签
                 <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')        //所有的a标签

             . 组合(一次查询多个，用逗号分隔)
                 <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')

             . 层级(层层过滤)
                 $('#i10 a') 子子孙孙
                 $('#i10>a') 只找儿子

             . 基本
                 :first
                 :last
                 :eq()

             . 属性
                 $('[alex]')       具有alex属性的所有标签
                 $('[alex="123"]') alex属性等于123的标签

                 --------------------
                 代码：
                 <input type='text'/>
                 <input type='text'/>
                 <input type='file'/>
                 <input type='password'/>

                 通过属性选择器查找：
                 $("input[type='text']")
                 通过表单选择器查找：
                 $(':text')

             . 实例：
                 多选，反选，全选
                 - 选择权
                 -
                     $('#tb:checkbox').prop('checked');        获取值
                     $('#tb:checkbox').prop('checked', true);  设置值
                 -
                     jQuery方法内置循环,批量操作简单的这样做即可： $('#tb:checkbox').xxxx

                 -   $('#tb:checkbox').each(function(k){
                         // k当前索引
                         // this代指DOM对象，$(this)代指jQuery对象，都是指当前循环的元素 

                     })

                 -   三元运算：var v = 条件? 条件为真时值：条件为假时值
                     var v = $(this).prop('checked')?false:true;

             . 筛选器

                 通过选择器定位到标签后，需要通过筛选器定位其关联标签                        --------------
                 <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').next()
                 $('#i1').nextAll()
                 $('#i1').nextUntil('#ii1')

                 $('#i1').prev()
                 $('#i1').prevAll()
                 $('#i1').prevUntil('#ii1')                

                 $('#i1').parent()
                 $('#i1').parents()
                 $('#i1').parentsUntil()

                 $('#i1').children()
                 $('#i1').siblings()
                 $('#i1').find()
                 $('li:eq(1)')
                 $('li').eq()
                 first()
                 last()
                 hasClass(class)

     二、操作

         a、文本操作：
             $(..).text()           # 不加内容获取文本
             $(..).text(“<a></a>”) # 加内容设置文本

             $(..).html()            # 不加内容获取内容
             $(..).html("<a>1</a>")

             $(..).val()            #获取值，相当于DOM的value
             $(..).val(..)

         b、样式操作：
             addClass()        #给对象增加类
             removeClass()        #给对象减少类
             toggleClass()        #开关,点击切换增加、减少类

         c、属性操作：
             # 专门用于做自定义属性
             $(..).attr('n')        #获取属性n的值
             $(..).attr('n','v')        #设置属性n的值
             $(..).removeAttr('n')    #移除属性n

             //示例
             <input type='checkbox' id='i1'  />

             # 专门用于chekbox,radio等选中操作(.attr在jQury的1.x和2.x中不好用)
             $(..).prop('checked')
             $(..).prop('checked', true)

             PS:
                 $(..).index() 获取索引位置

         d、文档处理：
             append        向匹配元素内部追加内容在最后（孩子标签）
             prepend        向匹配元素内部追加内容在最前（孩子标签）
             after        向匹配元素后追加（兄弟标签）
             before

             remove        删除标签及内容
             empty        仅清空标签内容

             clone        克隆

         e、css处理

             $('t1').css('样式名称', '样式值')    //更细的处理对象的样式
             点赞：
                  - $('t1').append()
                  - $('t1').remove()
                  - 定时器setInterval
                  - 透明度 opacity  ->
                  - 位置变化position
                  - 字体大小，位置

         f、位置：
             $(window).scrollTop()  获取windows窗口滚动了多少
             $(window).scrollTop() 设置
             scrollLeft([val])

             $('i1').offset()              指定标签在html中的坐标
             $('i1').offset().left         指定标签在html中左边的坐标
             $('i1').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(){

                 })

                 *******************
                 //委托，只有事件发生时才绑定
                 //函数解释之后添加的标签，也可以被绑定
                 $('.c').delegate('a', 'click', function(){

                 })
                 $('.c').undelegate('a', 'click', function(){

                 })

                 *******************
                 $('.c1').on('click', function(){

                 })
                 $('.c1').off('click', function(){

                 })

         、阻止事件发生
             return false

         、函数外边加$(),当页面框架加载完毕后，函数自动执行（提前绑定事件时机）
             $(function(){

                 $(...)

             })

     四、jQuery扩展：
         、jquery扩展，两种方式调用方式不一样
             - $.extend        $.方法
             - $.fn.extend     $(..).方法
         、引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
             (function(){
                 var status = ;
                 // 封装变量
             })(jQuery)

 ===》实例：

 作业：
     一：
             $('i1').height()           # 获取标签的高度(纯高度)
             $('i1').innerHeight()      # 获取标签的高度(纯高度+内边距)
             $('i1').outerHeight()      # 获取标签的高度(纯高度+内边距+边框)
             $('i1').outerHeight(true)  # 获取标签的高度(纯高度+内边距+边框+外边距

             # 纯高度，边框，外边距，内边距

     二、所有示例敲一遍

     三、编辑框
             

jQuery笔记

1、引入jQuery

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

     <!--引入jQuery，1.x版本兼容的旧版本浏览器更多-->
     <script src="jquery-1.12.4.js"></script>
     <script>
         //调用jQuery(jQuery. 或 $.)
         //找到标签 -> $("#i1")
         $("#i1")
     </script>
 </body>
 </html>

2、示例之多选、取消、反选

 <!DOCTYPE html>
 <html lang="en">
 <!--示例多选、取消、反选 - 选择器、三元运算-->
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
     <input type="button" value="全选" onclick="checkAll();" />
     <input type="button" value="反选" onclick="reverseAll();" />
     <input type="button" value="取消"  onclick="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>
         //查到的结果->jQury会自动循环，DOM需要手动循环
         function checkAll() {
             $('#tb :checkbox').prop('checked',true);
         }
         function cancleAll() {
             $('#tb :checkbox').prop('checked',false);
         }
         function reverseAll() {
             //.each是jQuery中的循环
             $(':checkbox').each(function(k){
                 // k是索引值，this代指当前循环的每一个元素(DOM对象)
                 /*
                 if(this.checked){
                     this.checked = false;
                 }else{
                     this.checked = true;
                 }
                 */

                 //*****************************************
                 // $(this)代指当前循环的每一个元素(jQuery对象)
                 /*
                 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、示例之左侧菜单

 <!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)
             // 获取某个标签的下一个标签
             // 获取某个标签的父标签
             // 获取所有的兄弟标签
             // 添加样式和移除样式
                 // $('.i1').addClass('hide')
                 // $('#i1').removeClass('hide')

             //通过层级选择器筛选过于麻烦
             // $("label + input");
             // var v = $("this + div"); 这样写this就无效了
             // console.log(v);

             // 筛选器:结构-> 选择器.筛选方法()
             /*
             $(this).next()      当前对象下一个
             $(this).prev()      上一个
             $(this).parent()    父
             $(this).children()  孩子
             $('#i1').siblings() 兄弟
             $('#i1').find('#i1') 子子孙孙中查找
             //
             $('#i1').addClass('hide')
             $('#i1').removeClass('hide')
             */

             // 链式编程
             // $(...).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>

选择器、筛选器

4、示例之模态编程框

 <!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绑定鼠标点击事件(点击编辑弹出编辑框)
         // 1.循环获取tds中内容
         // 2.获取 <td>内容</td> 获取中间的内容
         // 3.赋值给input标签中的value
         $('.edit').click(function(){
             //弹出模态框
             $(".modal,.shadow").removeClass('hide');
             // this,获取所有标签
             var tds = $(this).parent().prevAll();
             //循环标签.each，获取值赋给input
             tds.each(function () {
                 // 获取td的target属性值
                 var n = $(this).attr('target');
                 // 获取td中的内容，拼接成选择器字符串，用来选择input框
                 var text = $(this).text();
                 var a1 = '.modal input[name="';
                 var a2 = '"]';
                 var temp = a1 + n + a2;      //选择器条件 --> .modal input[name="hostname"]
                 $(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);
             });
         });
     </script>
 </body>
 </html>

循环、属性操作(添加、编辑、删除、取消、确定)

5、jQuery样式操作

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

6、示例之TAB切换菜单

 <!DOCTYPE html>
 <html lang="en">
 <!--TAB切换菜单，自定义属性方式-->
 <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">
             <!--自定义属性a,与b相对应-->
             <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');
             //字符串拼接 "[b='"  +   target  +   "']"
             $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');
         });
     </script>
 </body>
 </html>

TAB切换菜单，自定义属性方式

 <!DOCTYPE html>
 <html lang="en">
 <!--TAB切换菜单，索引方式方式-->
 <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()对象的索引值
             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

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

TAB切换菜单，索引方式方式

7、jQuery文档处理

 <!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>";
             //append向匹配元素内部追加内容在最后（孩子标签）
             // $('#u1').append(temp);
             //prepend向匹配元素内部追加内容在最前（孩子标签）
             $('#u1').prepend(temp);
             //after向匹配元素后追加（兄弟标签）
             // $('#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);
         })
     </script>
 </body>
 </html>

8、示例之点赞特效

 <!DOCTYPE html>
 <html lang="en">
 <!--点赞以及jQuery的css操作-->
 <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;
             //tag是DOM对象，转换成jQuery对象$(tag)
             //创建标签
             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);
             //在.item的标签内添加标签对象tag
             $(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>

点赞以及jQuery的css操作

9、示例之可拖动标签

 <!DOCTYPE html>
 <html>
 <!--可拖动标签，jQuery标签位置操作-->
 <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>

可拖动标签，jQuery标签位置操作

10、jQuery绑定的三种方式

 <!DOCTYPE html>
 <html lang="en">
 <!--jQuery绑定的三种方式-->
 <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>

11、阻止事件发生

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

     <a id="i1" href="http://www.oldboyedu.com">走你2</a>
     <script src="jquery-1.12.4.js"></script>
     <script>
         //标签事件绑定的函数先执行，在函数中输入return false;标签后边的操作终止
         //DOM中标签也要写onclick="return ClickOn()"
         function ClickOn() {
             alert(123);
             return true;
         }
         //jQuery只在函数中输入return false;就可以了
         $('#i1').click(function () {
             alert(456);
             return false;
         })
     </script>
 </body>
 </html>

DOM和jQuery写法上的不同

 <!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>
         // 函数外边加$(),当页面框架加载完毕后，函数自动执行
         // 提前绑定事件时机
         // $.Login('#f1'),jQuery已经写好的方法，同下面一大堆代码
         $(function(){
             $.Login('#f1')
         });

         $(function(){
             // 当页面所有元素完全加载完毕后，执行
             $(':submit').click(function () {
                 //执行表单验证之前，先清空所有的.error标签
                 $('.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);
                         //终止循环，相当于break
                         // 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>

表单提交验证示例

12、jQuery扩展

 <!DOCTYPE html>
 <html lang="en">
 <!--jQuery扩展-->
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>

     <script src="jquery-1.12.4.js"></script>
     <!--可以引入别人写好的jQuery代码，扩展名可能重复(无法解决)-->
     <!--引入的代码全局变量问题(引入的代码中写一个自执行函数)-->
     <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>

jquery扩展的两种方式，其调用方式不一样

/**
 * Created by alex on 2016/11/26.
 */

status = 1;

$.extend({
   'wangsen': function () {
       return 'sb';
   }
});

plugin1.js

/**
 * Created by alex on 2016/11/26.
 */
//引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
(function (arg) {

    var status = 1;

    arg.extend({
       'wangsen': function () {
           return 'sb';
       }
    });

})(jQu$ery);

plugin2.js(使用自执行函数,对全局变量进行封装))

更多内容参考：http://www.cnblogs.com/wupeiqi/articles/5369773.html