python-day59--前端 jQuery

一、什么是jQuery?          http://jquery.cuishifeng.cn/


    类似Python里面的模块

    是js的一个库/插件/工具

二、JS和jQuery的关系

    - jQuery就是JS写的
    - JS是基础,jQuery是工具

三、为什么要用jQuery?

短小、精悍,写起来简单,省事儿,开发效率高,兼容性好

四、jQuery介绍

    - 版本
        - 1.x    
            兼容IE8及8以前版本
        - 3.x
            兼容最新浏览器
    - .min.xx
        压缩的
        生产环境用
    -  没有压缩的
        开发用

五、如何使用jQuery?

    - 1. 导入 <script src="jquery-3.2.1.js"></script>      对比python: import re
    - 2. jQuery.xxxxx  --> $('')      $等于jQuery     对比python:  re.xxxx 
   注意:要先导入jQuery ,再导入js ,因为bootstrap里的js内引用了jQuery的方

六、jQuery知识点:   http://jquery.cuishifeng.cn/

jQuery知识点:

    - HTML:裸体的人
    - CSS :穿上衣服
    - JS  :动起来
        
        给GDP戴上绿帽子
        
        让八级哥和GDP比长短
        
        找到比翔哥还短的人
        
        在全班找不仅短还细的人
        
        
       总结:找到谁, 然后让谁做什么

         找到标签,修改标签

 1. 找 -  用jQuery找到目的标签

- 选择器           语法规则:$("xxx")
        
          基本选择器:
          
            - ID选择器                   $("#id的值")
            - 类选择器(class)          $(".class的值")
            - 标签选择器(html标签)       $("标签的名字")
            - 所有标签                   $("*")
          
            - 组合选择器             $("xx,xxx")
            
            
          层级选择器
          
            - 从一个标签的子子孙孙去找   $("父亲 子子孙孙")
            - 从一个标签的儿子里面找     $("父亲>儿子标签")
            - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
            - 找后面所有同级的           $("翔哥~女人")

-jQuery对象:
            - 用jQuery选择器查出来的就是jQuery对象
            - jQuery对象,他就可以使用jQuery方法,不能使用DOM的方法
          
            - DOM对象和jQuery对象转换:
                - $(".c1")[0] --> DOM对象
                - $(DOM对象)  --> jQuery对象

- 常用的筛选器
            - 写在引号里面的
            
                $(" :first")     第一个
                $(" :not('')")   非
                $(" :eq()")     索引等于
                $(" :gt()")     大于等于索引
                $(" :last")     最后一个
                
                内容

                $(" :has('')")    有
                
                可见性
                $(" :hidden)     隐藏的
                
                属性
        
                input[type='password']  --> 类型是password的input标签
                
                表单
                :input
                :text
                :password
                :checkbox
                :radio
                :submit
                :button
                :image
                :file
                
                表单对象属性
                :enable     可以用的标签
                :disable    不可以选的标签
                :checked    选中的标签
                :selected   下拉框选中的标签
            
            - 写在引号外面当方法用的
            
              过滤
                $("").first()
                $("").last()
                $("").eq()
                $("").hasClass()
                
              查找
                .children()
                .find()
                .next()
                .nextAll()
                .nextUntil()   不包含括号内的标签
                
                .parent()
                .parents()
                .parentsUntil()    不包含括号内的标签
                
                .prev()
                .prevAll()
                .prevUntil()
                
                .siblings()

  2.属性操作

    一 、属性
            如果你的选择器选出了多个对象,那么默认只会返回第一个的属性
            
            1.    .attr(x)
                    - 一个参数 获取属性的值
                 .attr(x,y)
                    - 两个参数 设置属性的值
                    - 应用练习1  点击加载图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击加载图片</title>
    <style>
        img{
            height: 600px;
            width: 800px;
        }
    </style>
</head>
<body>

<img src="xxx.png" alt="美女" data-src="Bootstrap_i1.png">

<script src="jquery-3.2.1.js"></script>
<script>
    $("img").on("click", function () {
        var imgPath = $(this).attr("data-src");
        $(this).attr("src", imgPath)
    })

</script>
</body>
</html>
图片省流量模式
- 应用场景2  从数据库中取数据时,往往id都是不连续的,那么我们在表格中存数据的时候
                                就把数据库中的id存到表格下的tr标签中方便到数据库中取数据,并且不与表格中的id冲突,方便以后到数据库中找数据
                             存:tr.attr("data-id",111)
                             取:tr.attr("data-id")
.removeAttr(name)
- 删除属性 2. .prop(x) 一个值是获取 属性的返回值是布尔类型 .prop(x,y) 两个值是设置 .removeProp(name) - 删除属性 - 例子 全选、反选、取消的例子 - 循环 each - $.each(数组/对象, function(i, v){}) - i 是数组/对象的 索引 - v 是数组/对象的 值 - $("jQuery数组对象").each(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <button id="all" class="btn-btn-default">全选</button>
                <button id="cancel" class="btn-btn-default">取消</button>
                <button id="reverse" class="btn-btn-default">反选</button>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
    // 统一的操作
$(":checkbox").prop("checked", true);
})

    //取消
    $("#cancel").on("click", function () {
        $(":checkbox").prop("checked", false);
    })


//    // 反选
    $("#reverse").on("click", function () {
        // 取出所有的checkbox
        var checkboxEles = $(":checkbox");

//         要循环checkbox
        // 选中的就取消
        // 没选中的就选中
        checkboxEles.each(function () {
            var thisCheckbox = $(this);  // 在教室里走的那个人
            var isChecked = thisCheckbox.prop("checked");  // 是否选中

//            方法一:判断的方式
            if (isChecked){
                // 取消选中
                thisCheckbox.prop("checked", false);
            }else {
                // 选中
                thisCheckbox.prop("checked", true);
            }

//            // 方法二:直接取反的方式
//            thisCheckbox.prop("checked", !isChecked);

        })
    })


</script>

</body>
</html>
View Code
   二、 css类
  addClass()   removeClass()   toggleClass(
class|fn[,sw]) 切换,有就去掉,没有就加上


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <style>
        .c11 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 1px solid #cccccc;
            display: inline-block;
        }

        .c12 {
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="c11"></div>

<button id="switch" class="btn btn-default">开关</button>
<script src="jquery-3.2.1.js"></script>
<script>

//jQuery绑定事件
    $("#switch").on("click", function () {
        // 找灯泡
        $(".c11").toggleClass("c12");
    })

</script>
</body>

</html>
灯泡的例子

    三、文档处理

     没有参数就是获取对应的值,有参数就是设置对应的值

    html() 获取标签 加 html标签 .html(
"<span>老师,我好饿。</span>") 注意:添加新标签之后原标签会消失 text() 获取文本 加文本 .text("老师,我好饿。") 注意:标签内的所有文本/标签 都会改变成设置的文本 val() - input - 获取的是输入的内容 - 有参数就是设置对应的值 - checkbox - 获取的是value值 (如果你的选择器选出了多个对象,那么默认只会返回第一个的属性) - 有参数就是设置对应的值 - select - 单选 就是获取值 - 多选 得到的是一个数组,设置的时候也要是数组

 3.  CSS 操作

CSS
    .css()
        - .css("color")  -> 获取color css值
        - .css("color", "#ff0000") -> 设置值
        - .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值
        - .css(["color", "border"])  -> 获取多个值

位置
    .offset()
        - 获取相对位置
        - 比较的对象是 html(可视窗口)
    
    .position()
        - 获取相对已经定位的父标签的位置
        - 比较的是最近的那个做过定位的祖先标签

     .scrollTop()
    
        - 例子:页面返回顶部    ,也可以给一个很大的标签(有滚动效果的标签)使用
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #b1{
            position: fixed;
            right: 15px;
            bottom: 15px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="c1" GDP="111">戴帽子1</div>
<div class="c1" GDP="111">戴帽子2</div>
<div class="c1" GDP="111">戴帽子3</div>
<div class="c1" GDP="111">戴帽子4</div>
<div class="c1" GDP="111">戴帽子5</div>
<div class="c1" GDP="111">戴帽子6</div>
<div class="c1" GDP="111">戴帽子7</div>
<div class="c1" GDP="111">戴帽子8</div>
<div class="c1" GDP="111">戴帽子9</div>
<div class="c1" GDP="111">戴帽子10</div>
<div class="c1" GDP="111">戴帽子11</div>
<div class="c1" GDP="111">戴帽子12</div>
<div class="c1" GDP="111">戴帽子13</div>
<div class="c1" GDP="111">戴帽子14</div>
<div class="c1" GDP="111">戴帽子15</div>
<div class="c1" GDP="111">戴帽子16</div>
<div class="c1" GDP="111">戴帽子17</div>
<div class="c1" GDP="111">戴帽子18</div>
<div class="c1" GDP="111">戴帽子19</div>
<div class="c1" GDP="111">戴帽子20</div>
<div class="c1" GDP="111">戴帽子21</div>
<div class="c1" GDP="111">戴帽子22</div>
<div class="c1" GDP="111">戴帽子23</div>
<div class="c1" GDP="111">戴帽子24</div>
<div class="c1" GDP="111">戴帽子25</div>
<div class="c1" GDP="111">戴帽子26</div>
<div class="c1" GDP="111">戴帽子27</div>
<div class="c1" GDP="111">戴帽子28</div>
<div class="c1" GDP="111">戴帽子29</div>
<div class="c1" GDP="111">戴帽子30</div>
<div class="c1" GDP="111">戴帽子31</div>
<div class="c1" GDP="111">戴帽子32</div>
<div class="c1" GDP="111">戴帽子33</div>
<div class="c1" GDP="111">戴帽子34</div>
<div class="c1" GDP="111">戴帽子35</div>
<div class="c1" GDP="111">戴帽子36</div>
<div class="c1" GDP="111">戴帽子37</div>
<div class="c1" GDP="111">戴帽子38</div>
<div class="c1" GDP="111">戴帽子39</div>
<div class="c1" GDP="111">戴帽子40</div>
<div class="c1" GDP="111">戴帽子41</div>
<div class="c1" GDP="111">戴帽子42</div>
<div class="c1" GDP="111">戴帽子43</div>
<div class="c1" GDP="111">戴帽子44</div>
<div class="c1" GDP="111">戴帽子45</div>
<div class="c1" GDP="111">戴帽子46</div>
<div class="c1" GDP="111">戴帽子47</div>
<div class="c1" GDP="111">戴帽子48</div>
<div class="c1" GDP="111">戴帽子49</div>
<div class="c1" GDP="111">戴帽子50</div>
<div class="c1" GDP="111">戴帽子51</div>
<div class="c1" GDP="111">戴帽子52</div>
<div class="c1" GDP="111">戴帽子53</div>
<div class="c1" GDP="111">戴帽子54</div>
<div class="c1" GDP="111">戴帽子55</div>
<div class="c1" GDP="111">戴帽子56</div>
<div class="c1" GDP="111">戴帽子57</div>
<div class="c1" GDP="111">戴帽子58</div>
<div class="c1" GDP="111">戴帽子59</div>
<div class="c1" GDP="111">戴帽子60</div>
<div class="c1" GDP="111">戴帽子61</div>
<div class="c1" GDP="111">戴帽子62</div>
<div class="c1" GDP="111">戴帽子63</div>
<div class="c1" GDP="111">戴帽子64</div>
<div class="c1" GDP="111">戴帽子65</div>
<div class="c1" GDP="111">戴帽子66</div>
<div class="c1" GDP="111">戴帽子67</div>
<div class="c1" GDP="111">戴帽子68</div>
<div class="c1" GDP="111">戴帽子69</div>
<div class="c1" GDP="111">戴帽子70</div>
<div class="c1" GDP="111">戴帽子71</div>
<div class="c1" GDP="111">戴帽子72</div>
<div class="c1" GDP="111">戴帽子73</div>
<div class="c1" GDP="111">戴帽子74</div>
<div class="c1" GDP="111">戴帽子75</div>
<div class="c1" GDP="111">戴帽子76</div>
<div class="c1" GDP="111">戴帽子77</div>
<div class="c1" GDP="111">戴帽子78</div>
<div class="c1" GDP="111">戴帽子79</div>
<div class="c1" GDP="111">戴帽子80</div>
<div class="c1" GDP="111">戴帽子81</div>
<div class="c1" GDP="111">戴帽子82</div>
<div class="c1" GDP="111">戴帽子83</div>
<div class="c1" GDP="111">戴帽子84</div>
<div class="c1" GDP="111">戴帽子85</div>
<div class="c1" GDP="111">戴帽子86</div>
<div class="c1" GDP="111">戴帽子87</div>
<div class="c1" GDP="111">戴帽子88</div>
<div class="c1" GDP="111">戴帽子89</div>
<div class="c1" GDP="111">戴帽子90</div>
<div class="c1" GDP="111">戴帽子91</div>
<div class="c1" GDP="111">戴帽子92</div>
<div class="c1" GDP="111">戴帽子93</div>
<div class="c1" GDP="111">戴帽子94</div>
<div class="c1" GDP="111">戴帽子95</div>
<div class="c1" GDP="111">戴帽子96</div>
<div class="c1" GDP="111">戴帽子97</div>
<div class="c1" GDP="111">戴帽子98</div>
<div class="c1" GDP="111">戴帽子99</div>
<div class="c1" GDP="111">戴帽子100</div>
<button id="b1" class="hide">dianwo</button>
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>
    $(window).scroll(function(){
        if ($(window).scrollTop()>100){     //如果屏幕滚动距离大于100
            $('#b1').removeClass('hide');
        }
        else{
            $('#b1').addClass('hide');
        }
        })
    $('#b1').on('click',function(){
                $(window).scrollTop(0);    //屏幕滚动到 最顶

    })
</script>
</body>
</html>
回到顶部

     .scrollLeft()

 尺寸
     height()
          - 元素的高度
      width()
      innerHeight()
          - 带padding的高度
      innerWidth()
      outerHeight()
          - 在innerHeight的基础上再加border的高度
      outerWidth() 

 4.文档操作

内部插入
    append() --> 往后加
    appendTo()
    
    A.append(B)   -> 把B添加到A的后面
    A.appendTo(B) -> 把A添加到B的后面
    
    prepend()  --> 往前加
    prependTo()
    
    A.prepend(B)   -> 把B添加到A的前面
    A.prependTo(B) -> 把A添加到B的前面


注意:111 是挪动 不是复制 外部插入 after()
--> 往后加 insertAfter() A.after(B) --> 把B添加到A的后面 A.insertAfter(B) --> 把A添加到B的后面 before() --> 往前加 insertBefore() A.before(B) --> 把B添加到A的前面 A.insertBefore(B) --> 把A添加到B的前面

包裹
    wrap()
        A.wrap(B)  --> B包A
    unwrap()
        - 不要加参数
        
    wrapAll()
    wrapInner()
注意:

    wrapAll()
    wrapInner()


 替换
    replaceWith()
        A.replaceWith(B)  --> B替换A

        
    replaceAll()
        A.replaceAll(B)   --> A替换B





 删除
     empty()
         - 清空 内部清空
     remove([expr])
         - 删除 整体都删除
     detach([expr])
         - 剪切  多保存在变量中,方便再次使用


        
    复制
    clone([Even[,deepEven]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆</title>
</head>
<body>
<button class="c1">一刀999</button>

<script src="jquery-3.2.1.js"></script>
<script>
    $(".c1").on("click", function () {
        $(this).clone(true).insertAfter($(this));   //.clone(true) 表示把标签的绑定的事件也克隆了
    })
</script>
</body>
</html>
clone练习

5.事件

 1 事件处理

之前绑定事件的方式:
1. onclick=clickMe(); function clickMe() {} 2. ele.onclick = function(){} 3. ele.addEventListener("click", function(){}) jQuery绑定事件的方式: 1. $(ele).on("click", function(){}) 2. $("tbody").delegate(".btn-warning", "click", function(){}) 在$("tbody")内所有带有btn-warning类的标签,点击时就会执行函数内内容 3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派


 2 常用事件
      blur() - 失去焦点
    
      focus()
          - 获取焦点
          - 搜索框例子
        
      change()
          - select
        
      click()
          - 点击
    
      dblclick()
          - 双击

      scroll()
          - 滚动

      submit()
          -提交
        
        
      补充:
          文档树加载完之后绑定事件(绝大部分情况下)
          $(document).ready(function(){
              // 绑定事件的代码
              ....
          })
        
          简写:
          $(function($){
              // 绑定事件的代码
              ....
          });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用事件示例</title>
</head>
<body>

<input type="text" name="search" value="苹果手机" data-show="">
<button>搜索</button>

<select name="" id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<script src="jquery-3.2.1.js"></script>
<script>
    $(":input").focus(function () {
        var data = $(this).val();
        $(this).val("");
        $(this).attr("data-show", data);
    });
    
    $(":input").blur(function () {
        $(this).val($(this).attr("data-show"));
    });

    // change 通常用与select标签
    $("#s1").change(function () {
        console.log($(this).val());
    });
</script>
</body>
</html>
常用事件练习

6.效果(动画)

基本
    show()
    hide()
    toggle()
    
滑动
    slideDown()
    slideUp()
    slideToggle()
    
淡入淡出
    fadeIn()
    fadeOut()
    
    fadeTo()
        - 淡出到0.66透明度
    fadeToggle()
        - .fadeToggle(3000, function () {
            alert("真没用3");
        });
        
自定义
animate(p,[s],[e],[fn])
    - css属性值都可以设置
    - 女朋友变小(漏气)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画示例</title>

    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<img src="http://www.iyi8.com/uploadfile/2017/0523/20170523114637271.jpg" alt="">

<button id="b1">召唤</button>
<button id="b2">淡出</button>
<button id="b3">淡入</button>
<button id="b4">淡出到0.66</button>
<button id="b5">淡入淡出</button>
<button id="b6">边框变大</button>
<script src="jquery-3.2.1.js"></script>
<script>
    $("#b1").on("click", function () {
//        $("img").show();
        $("img").toggle();

    })
    // 淡出
    $("#b2").on("click", function () {
        $("img").fadeOut("fast");
    })
    // 淡入
  $("#b3").on("click", function () {
      // 掌握了增加时间的方法
        $("img").fadeIn(3000, function () {
            alert("真没用");
        });
    })
    // 淡出到0.66透明度
  $("#b4").on("click", function () {
      // 掌握了新知识
        $("img").fadeTo(3000, 0.66, function () {
            alert("真没用2");
        });
    })
    // 淡入淡出
  $("#b5").on("click", function () {
        $("img").fadeToggle(3000, function () {
            alert("真没用3");
        });
    })
    // 动画-图片变小
  $("#b6").on("click", function () {
        $("img").animate({
            width: "100px",
            height: "60px"
        }, 3000, function () {
            // 这是回调函数
            alert(123);
        });
    })
</script>
</body>
</html>
动画练习

 7. jQuery扩展

    1.    $.extend({
            "GDP": function () {
                console.log("戴小红花");
            }
        });
        
        - 给jQuery添加扩展
        - $.GDP()
        
    
    2.    $.fn.extend({
            "BJG": function () {
                console.log("英语八级就是好!");
            }
        })
        
        - 给jQuery对象添加扩展
        - $(":input").BJG()
/**
 * Created by Administrator on 2017/10/17.
 */
//写在js文件内,从而在html中直接调用就可以了

(function (jq) {                   //匿名函数    
   jq.extend({
        "GDP": function () {
            func1();
            console.log("戴小红花");
        },                              //扩展多个方法时,用 逗号 隔开
       "SGS": function () {
           console.log("三国杀真好玩,我都不听课");
       }
    });

    function func1() {             //在内部定义函数 是为了把函数变成私有的方法,在外部不能调用
        console.log("这是func1");
    }
})(jQuery);       //把jQuery 当作参数传进去 是为了避免 $被 赋值给其他的值
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录校验</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <style>
        .c1 {
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 c1 col-md-offset-4">
            <form class="form-horizontal" id="login">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" placeholder="username" aria-describedby="helpBlock1" required="true">
                        <span id="helpBlock1" class="help-block"></span>
                    </div>

                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" aria-describedby="helpBlock2">
                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!--<script src="myValidate.js"></script>    myValidate.js 的引用-->
<script src="myValidate2.js"></script>          <!--myValidate2.js 的引用-->
<script>
    $(document).ready(function () {
        // 给jQuery扩展
        //$.myValidate("#login")              myValidate.js  的调用

        // 给jQuery对象扩展
        // $.fn.extend()
        $("#login").myValidate({"username": {"min-length": 6}});   // myValidate2.js的 调用
    })                                       //{"username": {"min-length": 6}}  是动态的校验规则
</script>
</body>
</html>
自定义插件练习html代码
/**
 * Created by Administrator on 2017/10/17.
 */

(function (jq) {
    jq.extend({
        "myValidate": function (form) {
            var formObj = jq(form);

            formObj.find(":submit").on("click", function () {
                // 先清空状态
                formObj.find(".form-group").removeClass("has-error");
                formObj.find("span").text("");

                // each循环
                formObj.find("input").each(function () {
                    // 做判断
                    if (jq(this).val().length === 0) {
                        // 给他的爸爸加has-error
                        jq(this).parent().parent().addClass("has-error");
                        // 给span写内容
                        // 找到我这是什么input  --> 找到对应的label的文本内容
                        var name = jq(this).parent().prev().text();
                        jq(this).next().text(name + "不能为空");
                        return false;
                    }
                });
                return false;
            });
        }
    })

})(jQuery);
自定义插件练习1 js代码
/**
 * Created by Administrator on 2017/10/17.
 */

(function (jq) {
    jq.fn.extend({
        "myValidate": function (arg) {
            // this --> .前面的那个jQuery对象
            var formObj = this;
            formObj.find(":submit").on("click", function () {
                // this --> 提交的submit按钮
                // 先清空状态
                formObj.find(".form-group").removeClass("has-error");
                formObj.find("span").text("");
                // each循环
                var flag = true;
                formObj.find("input[required='true']").each(function () {
                    // this --> input框
                    // 做判断
                    if (jq(this).val().length === 0) {
                        // 给他的爸爸加has-error
                        jq(this).parent().parent().addClass("has-error");
                        // 给span写内容
                        // 找到我这是什么input  --> 找到对应的label的文本内容
                        var name = jq(this).parent().prev().text();
                        jq(this).next().text(name + "不能为空");
                        flag = false;
                        return flag;
                    }

                    var inputID = jq(this).attr("id");
                    var minLength = arg[inputID]["min-length"];
                    if (minLength !== undefined) {
                        if (jq(this).val().length < minLength) {
                            console.log("长度太短");
                             // 给他的爸爸加has-error
                        jq(this).parent().parent().addClass("has-error");
                        // 给span写内容
                        // 找到我这是什么input  --> 找到对应的label的文本内容
                        var name = jq(this).parent().prev().text();
                        jq(this).next().text(name + "长度太短");
                            flag = false;
                            return flag;
                        }
                    }
                });
                return flag;
            })
        }
    })
})(jQuery);
自定义插件练习2 js代码

 

posted @ 2017-10-12 15:28  Cool·  阅读(229)  评论(0编辑  收藏  举报