Python菜鸟之路：JQuery基础

前言

　　JQuery可以理解为是一个模块，里边封装了DOM以及JavaScript，可以方便的对JQuery对象进行操作。

版本

　　尽量选择1.X系统的Jquery版本，例如1.12.jquery.js。因为1.X系列的兼容性最好。

　　2.X系列的版本，不再考虑兼容IE9以下的版本。

JQuery操作

　　Ps：具体操作参考链接：http://www.php100.com/manual/jquery/index.html。本文不会有太多举例，仅作小结。

查找-选择器

　　JQuery的选择器常用的有以下几种：

            - ID选择器

            - 标签选择器

            - 类选择器

            - 组合选择器

            - 层级选择器

            - 基本筛选器$('#i1:first')

            - 属性选择器

查找-筛选器

　　筛选器其实是对于选择器的一个补充，用来进一步筛选对象

操作

操作CSS

addClass(class|fn)

removeClass([class|fn])

toggleClass(class|fn[,sw])

操作属性

attr(name|pro|key,val|fn)

removeAttr(name)

prop(n|p|k,v|f)

removeProp(name)

文本操作

内部插入

append(content|fn)

appendTo(content)

prepend(content|fn)

prependTo(content)

外部插入

after(content|fn)

before(content|fn)

insertAfter(content)

insertBefore(content)

包裹

wrap(html|ele|fn)

unwrap()

wrapAll(html|ele)

wrapInner(html|ele|fn)

替换

replaceWith(content|fn)

replaceAll(selector)

删除

empty()

remove([expr])

detach([expr])

复制

clone([Even[,deepEven]])

事件

1. 基本事件

blur([[data],fn])

change([[data],fn])

click([[data],fn])

dblclick([[data],fn])

error([[data],fn])

focus([[data],fn])

focusin([data],fn)

focusout([data],fn)

keydown([[data],fn])

keypress([[data],fn])

keyup([[data],fn])

mousedown([[data],fn])

mouseenter([[data],fn])

mouseleave([[data],fn])

mousemove([[data],fn])

mouseout([[data],fn])

mouseover([[data],fn])

mouseup([[data],fn])

resize([[data],fn])

scroll([[data],fn])

select([[data],fn])

submit([[data],fn])

unload([[data],fn])

2. 当文档加载完毕后，自动执行

$(function(){

				...

			});

3. 延迟绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            width: 200px;

            height: 600px;

            border: 1px solid #dddddd;

            overflow: auto;

        }

        .menu .item .title{

            height: 40px;

            line-height: 40px;

            background-color: #2459a2;

            color: white;

        }

    </style>

</head>

<body>

    <div class="menu">

        <div class="item">

            <div class="title">菜单一</div>

            <div class="body">

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

            </div>

        </div>

        <div class="item">

            <div class="title" >菜单二</div>

            <div class="body hide">

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单三</div>

            <div class="body hide">

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

            </div>

        </div>

    </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $(function(){

            // 当文档树加载完毕后，自动执行

            $('.item .title').click(function(){

                // this,$(this)

                $(this).next().removeClass('hide');

                $(this).parent().siblings().find('.body').addClass('hide');

            });

        });

        /*

        $('.item .title').bind('focus', function () {

            $(this).next().removeClass('hide');

            $(this).parent().siblings().find('.body').addClass('hide');

        })

        */

    </script>

</body>

</html>

事先绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="button" onclick="Add();" />

    <ul>

        <li>123</li>

        <li>456</li>

        <li>789</li>

    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $(function(){

            /*

            $('li').click(function () {

                alert($(this).text());

            });

            */

            $("ul").delegate("li","click",function(){

                alert($(this).text());

            });

        });

        function Add(){

            var tag = document.createElement('li');

            tag.innerText = '666';

            $('ul').append(tag);

        }

    </script>

</body>

</html>

延迟绑定

JQuery扩展的两种方法、即“插件机制”

　　自定义JQuery扩展的正确方法主要包含两要素：自执行、闭包　　

方法1：扩展 “$” 的方法

$.extend({

        'function_name1': function(arg){};

        'function_name2': function(arg){};

      })

　　调用方法：

$.function_name1(arg);

　　实际案例：改造上边的表单验证，最终以扩展方法实现绑定事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .item{

             width: 250px;

             height: 60px;

             position: relative;

         }

         .item input{

             width: 200px;

         }

         .item span{

             position: absolute;

             top: 20px;

             left: 0px;

             font-size: 8px;

             background-color: indianred;

             color: white;

             display: inline-block;

             width: 200px;

         }

     </style>

 </head>

 <body>

     <div>

         <form id="form1">

             <div class="item">

                 <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>

             </div>

             <div class="item">

                 <input  class="c1" type="password" name="pwd" label="密码"/>

             </div>

             <div class="item">

                 <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>

             </div>

             <input type="submit" value="提交" />

         </form>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script src="commons.js"></script>

     <script>

         $(function(){

             $.valid('#form1');

         });

     </script>

 </body>

 </html>

HTML部分

 /**

  * Created by ACER on 2016/8/28.

  */

 (function(jq){

     function ErrorMessage(inp,message){

         var tag = document.createElement('span');

         tag.innerText = message;

         inp.after(tag);

     }

     jq.extend({

         valid:function(form){

             // #form1 $('#form1')

             jq(form).find(':submit').click(function(){

                 jq(form).find('.item span').remove();

                 var flag = true;

                 jq(form).find(':text,:password').each(function(){

                     var require = $(this).attr('require');

                     if(require){

                         var val = $(this).val();

                         if(val.length<=0){

                             var label = $(this).attr('label');

                             ErrorMessage($(this),label + "不能为空");

                             flag = false;

                             return false;

                         }

                         var minLen = $(this).attr('min-len');

                         if(minLen){

                             var minLenInt = parseInt(minLen);

                             if(val.length<minLenInt){

                                 var label = $(this).attr('label');

                                 ErrorMessage($(this),label + "长度最小为"+ minLen);

                                 flag = false;

                                 return false;

                             }

                             //json.stringify()

                             //JSON.parse()

                         }

                         var phone = $(this).attr('phone');

                         if(phone){

                             // 用户输入内容是否是手机格式

                             var phoneReg = /^1[3|5|8]\d{9}$/;

                             if(!phoneReg.test(val)){

                                 var label = $(this).attr('label');

                                 ErrorMessage($(this),label + "格式错误");

                                 flag = false;

                                 return false;

                             }

                         }

                     }

                     // 每一个元素执行次匿名函数

                     // this

                     //console.log(this,$(this));

                     /*

                     var val = $(this).val();

                     if(val.length<=0){

                         var label = $(this).attr('label');

                         var tag = document.createElement('span');

                         tag.innerText = label + "不能为空";

                         $(this).after(tag);

                         flag = false;

                         return false;

                     }

                     */

                 });

                 return flag;

             });

         }

     });

 })(jQuery);

JS部分：扩展自定义方法

方法2：对选择器结果执行方法的扩展，也就是对选择器的选择结果的对象，进行方法扩展。适用于需要传递选择器参数的时候

$.fn.extend({

        'function_name1': function(arg){//this是特殊值，代指选择器结果};

        'function_name2': function(arg){};

      })

　　调用方法：

$(选择器).function_name1(arg);

Ajax

　　偷偷发请求（后续待补）

循环

要点：

　在JQuery的循环中，有一点和Python中有些不同。在Python中，如果遇到“return”，无论有没有返回值，函数都将终止执行。

　　但是在JQuery中，如果出现单独的“return”，则相当于continue，仅仅是跳过本次循环。当return 有返回值的时候，相当于break，函数会终止执行

选择器

基本选择器

#id

　　作用：根据给定的ID匹配一个元素

测试代码：

<div id="notMe"><p>id="notMe"</p></div> # 普通id类型

<div id="myDiv">id="myDiv"</div>

<span id="foo:bar"></span>

<span id="foo[bar]"></span>  # 带有特殊符号的id类型

<span id="foo.bar"></span>

方式1：查找普通ID

$("#myDiv");

方式2：查找带有特殊字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)的ID，它必须被两个反斜杠转义：\\

$("#foo\\[bar\\]")