zoukankan      html  css  js  c++  java
  • 【python】-- web开发之jQuery

    jQuery

    jQuery 是一个 JavaScript 函数库,jQuery库包含以下特性(HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities)。

    jQuery目前包含三个版本:jQuery的1.x、jQuery的2.x、jQuery的3.x(jquery-2.0以上版本不再支持IE 6/7/8),每个版本中都会有两个类型提供选择uncompressed(未压缩版,用于测试和开发), minified(压缩版,用于实际的网站中),jQurey下载引用地址:点击

    jQuery的两种使用方式:

    • 下载jQuery文件放到与页面相同的目录中使用
    <script src="jquery-1.12.4.js"></script>
    • 通过 CDN(内容分发网络) 引用jQuery
    #百度压缩版引用地址:
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    
    #微软压缩版引用地址:
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
    
    #官网jquery压缩版引用地址:
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

     jQuery与Dom对象之间的转换:

    // $(Dom对象)    =>jQuery对象
    var a = document.getElementById("MySignature")
    <div id=​"MySignature">​</div>​
    $(a)
    //输出:n.fn.init [div#MySignature, context: div#MySignature]0: div#MySignaturecontext: div#MySignaturelength: 1__proto__: Object(0)
    
    
    //jquery对象[0]   => Dom对象
    $(a)[0]
    //输出:<div id=​"MySignature">​</div>​
    

    一、查找元素

    1、jQuery常用选择器,直接找到某个或者某类标签:

     1.1、id、class、标签、组合、层级查找元素

    $('#id')    					//根据id查找元素
    $(".c1")				     //根据class查找元素	
    $('a')					        //查找出所有标签为a的元素
    $('a,.c2,#i10')					//查找出所有标签为a、class=c2、id=i10的元素,并将匹配到的元素合并到一个结果内
    $('#i10 a') 					//查找出id=i10标签下的所有的后代元素
    $('#i10>a')				        //查找出id=i10标签下的子元素
    $('#i10+a') 					//查找出id=i10标签的下一个兄弟元素
    $('#i10~a')				        //查找出id=i10标签的下一个siblings元素
    

    1.2、基本筛选器、属性查找元素

    常用的基本筛选器
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    $('li:first');          //匹配第一个li元素
    $('li:last');        //匹配的最后一个li元素
    $('li:eq(2)');        //匹配下标索引为2的li元素(从0开始)
    $('li:gt(2)');        //匹配下标索引大于2的li元素(从0开始)
    $('li:even');        //匹配下标索引为偶数li元素
    $('li:odd');        //匹配下标索引为奇数li元素
    
    属性
    <input name="newsletter" />
    <input name="milkman" />
    <input name="jobletter" />
    $('[name]')                     //匹配具有name属性的所有标签
    $('[name="milkman"]')             //匹配name属性等于milkman的标签
    $("input[name='milkman']")        //匹配input标签下name属性等于milkman的标签
    $("input[name!='milkman']")        //匹配input标签下name属性不等于milkman的标签
    $("input[name^='milk']")        //匹配input标签下name属性以milk开头的标签
    $("input[name$='man']")            //匹配input标签下name属性以man结尾的标签
    $("input[name*='man']")            //匹配input标签下name属性包含man的标签
    基本筛选器、属性

    1.3、表单、表单对象属性

    表单
    <form>
      <input type="text" />
      <input type="checkbox" />
      <input type="radio" />
      <input type="image" />
      <input type="file" />
      <input type="submit" />
      <input type="reset" />
      <input type="password" />
      <input type="button" />
      <select><option/></select>
      <textarea></textarea>
      <button></button>
    </form>
    $(":input")         //匹配表单中所有 input, textarea, select 和 button 元素
    $(":text")            //匹配表单中所有单行文本框
    $(":checkbox")      //匹配表单中所有的复选框
    $(":radio")            //匹配表单中所有的单项按钮
    $(":image")            //匹配表单中所有的图像域
    $(":file")            //匹配表单中所有的文件域
    $(":submit")        //匹配表单中所有提交按钮
    $(":reset")            //匹配表单中所有重置按钮
    $(":password")        //匹配表单中所有密码框
    $(":button")        //匹配表单中所有按钮 [ <input type="button" />,<button></button> ]
    
    表单的对象属性
    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
      <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
      <input type="checkbox" name="newsletter" value="Weekly" />
      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3">Trees</option>
    </form>
    
    $("input:enabled")              //匹配所有可用元素
    $("input:disabled")              //匹配所有不可用元素         
    $("input:checked")            //匹配所有选中的被选中元素复选框、单选框等,select中的option(对于select元素来说,获取选中推荐使用 :selected)
    $("select option:selected")   //匹配所有选中的option元素
    表单、表单对象属性

     2、jQuery筛选(作为jQuery选择器的补充):

    查找
    $('#i1').next()                 //匹配id=i1标签下面的第一个同级标签
    $('#i1').nextAll()                //匹配id=i1标签下面的所有同级标签
    $('#i1').nextUntil('#ii1')        //匹配id=i1标签下面的所有同级标签,直到id=ii1的标签为止
    
    $('#i1').prev()                    //匹配id=i1标签上面的第一个同级标签
    $('#i1').prevAll()                //匹配id=i1标签上面的所有同级标签
    $('#i1').prevUntil('#ii1')        //匹配id=i1标签上面的所有同级标签,直到id=ii1的标签为止
        
    $('#i1').parent()                //匹配id=i1标签的父标签
    $('#i1').parents()                //匹配id=i1标签的所有祖先标签
    $('#i1').parentsUntil('#ii1')    //匹配id=i1标签的所有祖先标签,直到id=ii1的标签为止
    
    $('#i1').children()             //匹配id=i1标签的所有子标签,children(".i2")通过可选的表达式来过滤所匹配的子元素(parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素)
    $('#i1').siblings()             //匹配id=i1标签的所有同辈标签,.siblings(".i2") 可用的表达式进行筛选。
    $('#i1').find(".i2")            //搜索id=i1标签下的后代标签中class=i2的标签
    
    过滤
    $('li').eq(1)                        //匹配li标签中下标索引为1的li标签(当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个,与选择器$('li:eq(1)')类似)
    $('li').first()                            //匹配第一个li标签
    $('li').last()                            //匹配最后一个li标签
    $(this).hasClass("protected")            //判断当前标签中的class属性中是否有protected值,有则true,反之false
    $("p").filter(".selected, :first")        //筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
    jQuery筛选

     

    二、操作元素

    1、文本操作:

    $("p").text();                            // 获取P标签文本内容
    $("p").text("Hello world!");            //重新赋值设置P标签文本内容
                    
    $("p").html()                            //返回p元素的内容。
    $("p").html("hello <b>world</b>!");      //重新赋值设置P元素的内容  
    //区别:text是文本形式,html是html形式
    
    $("input").val();                        //获取文本框中的值
    $("input").val("hello world!");            //设定文本框的值
    View Code

    2、样式操作:

    $("p").addClass("selected1 selected2");    //为每个匹配的元素添加指定的类名(多个类名用空格分开)
    $("p").removeClass("selected selected2");  //从所有匹配的元素中删除全部(不指定类名默认删全部)或者指定的类(多个类名用空格分开)
    $("p").toggleClass("selected");            //如果存在(不存在)就删除(添加)一个类。
    View Code

    3、属性操作:

    # 专门用于做自定义属性
    $(..).attr('n')                //返回标签中的n的属性值
    $(..).attr('n','v')            //重新复制设置标签中n的属性值
    $(..).removeAttr('n')        //将标签中的为n的属性删除
    
    
    # 专门用于chekbox,radio        
    $(..).prop('checked')          //选中复选框为true,没选中为false
    $(..).prop('checked', true)      //将复选框设置为选中状态
    View Code
    <!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>
            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>
    Demo-全选/反选/取消
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .menu{
                height: 38px;
                background-color: #eeeeee;
                line-height: 38px;
            }
            .active{
                background-color: brown;
            }
            .menu .menu-item{
                float: left;
                border-right: 1px solid red;
                padding: 0 5px;
                cursor: pointer;
            }
            .content{
                min-height: 100px;
                border: 1px solid #eeeeee;
            }
        </style>
    </head>
    <body>
    
        <div style=" 700px;margin:0 auto">
    
            <div class="menu">
                <div  class="menu-item active" a="1">菜单一</div>
                <div  class="menu-item" a="2">菜单二</div>
                <div  class="menu-item" a="3">菜单三</div>
            </div>
            <div class="content">
                <div b="1">内容一</div>
                <div class="hide"  b="2">内容二</div>
                <div class="hide" b="3">内容三</div>
    
            </div>
    
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('.menu-item').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                var target = $(this).attr('a');
                $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
            });
        </script>
    </body>
    </html>
    Demo-菜单详情框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .menu{
                height: 38px;
                background-color: #eeeeee;
                line-height: 38px;
            }
            .active{
                background-color: brown;
            }
            .menu .menu-item{
                float: left;
                border-right: 1px solid red;
                padding: 0 5px;
                cursor: pointer;
            }
            .content{
                min-height: 100px;
                border: 1px solid #eeeeee;
            }
        </style>
    </head>
    <body>
    
        <div style=" 700px;margin:0 auto">
    
            <div class="menu">
                <div  class="menu-item active" >菜单一</div>
                <div  class="menu-item" >菜单二</div>
                <div  class="menu-item" >菜单三</div>
            </div>
            <div class="content">
                <div >内容一</div>
                <div class="hide" >内容二</div>
                <div class="hide">内容三</div>
    
            </div>
    
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('.menu-item').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
    
            });
        </script>
    </body>
    </html>
    Demo-菜单详情索引版

    4、文档操作:

    $("p").append("<b>Hello</b>");    //向每个匹配的元素内部追加(结尾处)内容。
    $("p").appendTo("div");           //把匹配的元素追加到另一个指定的元素元素集合中的尾部。
    $("p").prepend("<b>Hello</b>");   //向所有匹配元素内部(开始处)插入内容
    $("p").prependTo("#foo");         //把匹配的元素插入到另一个指定的元素元素集合中的开始处。
    $("p").after("<b>Hello</b>");     //在每个匹配的元素之后插入内容。
    $("p").insertAfter("#foo");       //颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面
    $("p").before("<b>Hello</b>");    //在每个匹配的元素之前插入内容。
    $("p").insertBefore("#foo");      //颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面
    $("p").remove(".hello");          //删除所有匹配的元素。
    $("p").empty();                   //把所有的子元素(包括文本节点)删除
    $("b").clone().prependTo("p");    //克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中
    View Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .modal{
                position: fixed;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 400px;
                margin-left: -250px;
                margin-top: -250px;
                background-color: #eeeeee;
                z-index: 10;
            }
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0.6;
                background-color: black;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <a onclick="addElement();">添加</a>
    
        <table border="1" id="tb">
            <tr>
                <td target="hostname">1.1.1.11</td>
                <td target="port">80</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.12</td>
                <td target="port">80</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.13</td>
                <td target="port">80</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td target="hostname">1.1.1.14</td>
                <td target="port">80</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a class="del">删除</a>
                </td>
    
            </tr>
        </table>
    
        <div class="modal hide">
            <div>
                <input name="hostname" type="text"  />
                <input name="port" type="text" />
                <input name="ip" type="text" />
            </div>
    
            <div>
                <input type="button" value="取消" onclick="cancelModal();" />
                <input type="button" value="确定" onclick="confirmModal();" />
            </div>
        </div>
    
        <div class="shadow hide"></div>
    
        <script src="jquery-1.12.4.js"></script>
        <script>
    
            $('.del').click(function () {
                $(this).parent().parent().remove();
            });
            
            function  confirmModal() {
    
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                td1.innerHTML = "11.11.11.11";
                var td2 = document.createElement('td');
                td2.innerHTML = "8001";
    
                $(tr).append(td1);
                $(tr).append(td2);
    
                $('#tb').append(tr);
    
                $(".modal,.shadow").addClass('hide');
    //            $('.modal input[type="text"]').each(function () {
    //                // var temp = "<td>..."
    //
    //
    //
    //            })
            }
    
            function  addElement() {
                $(".modal,.shadow").removeClass('hide');
            }
            function cancelModal() {
                $(".modal,.shadow").addClass('hide');
                $('.modal input[type="text"]').val("");
            }
    
            $('.edit').click(function(){
                $(".modal,.shadow").removeClass('hide');
                // this
                var tds = $(this).parent().prevAll();
                tds.each(function () {
                    // 获取td的target属性值
                    var n = $(this).attr('target');
                    // 获取td中的内容
                    var text = $(this).text();
                    var a1 = '.modal input[name="';
                    var a2 = '"]';
                    var temp = a1 + n + a2;
                    $(temp).val(text);
                });
    
    
    //            var port = $(tds[0]).text();
    //            var host = $(tds[1]).text();
    //
    //            $('.modal input[name="hostname"]').val(host);
    //            $('.modal input[name="port"]').val(port);
                // 循环获取tds中内容
                // 获取 <td>内容</td> 获取中间的内容
                // 赋值给input标签中的value
    
            });
        </script>
    </body>
    </html>
    Demo-编辑框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input id="t1" type="text" />
        <input id="a1" type="button" value="添加" />
        <input id="a2" type="button" value="删除" />
        <input id="a3" type="button" value="复制" />
    
        <ul id="u1">
    
            <li>1</li>
            <li>2</li>
    
        </ul>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('#a1').click(function () {
                var v = $('#t1').val();
    
                var temp = "<li>" + v + "</li>";
                // $('#u1').append(temp);
                $('#u1').prepend(temp);
                // $('#u1').after(temp)
                // $('#u1').before(temp)
            });
    
            $('#a2').click(function () {
                var index = $('#t1').val();
                $('#u1 li').eq(index).remove();
                //$('#u1 li').eq(index).empty();
            });
            $('#a3').click(function () {
                var index = $('#t1').val();
                var v = $('#u1 li').eq(index).clone();
                $('#u1').append(v);
    
    
                //$('#u1 li').eq(index).remove();
                //$('#u1 li').eq(index).empty();
            })
        </script>
    </body>
    </html>
    Demo-添加/复制/删除

    5、css操作:

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

    6、位置操作:

    $("div.demo").scrollTop();      //获取滚动条距离顶部的值
    $("div.demo").scrollTop(100);  //设置滚动条距离顶部的值
    $("div.demo").scrollLeft();        //获取滚动条距离左部的值
    $("div.demo").scrollLeft(300);    //设置滚动条距离左部的值
    //window表示当前浏览器的滚动条
    $(window).scrollLeft(100)
    $(window).scrollTop(100) 
    
    
    <p>Hello</p><p>2nd Paragraph</p>
    offset().left                  //指定标签在html中的坐标
    offset().top                   //指定标签在html中的坐标
    $("p:last").offset({ top: 10, left: 30 });
    position()                       //指定标签相对父标签(relative)标签的坐标
    <p>Hello</p><p>2nd Paragraph</p>
    var p = $("p:first");
    var position = p.position();
    $("p:last").html( "left: " + position.left + ", top: " + position.top );
    
    
    $('i1').height()               //获取标签的高度 纯高度
    $('i1').innerHeight()          //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
    $('i1').outerHeight()         //获取第一个匹配元素外部高度(默认包括补白和边框)
    $('i1').outerHeight(true)      //设置为 true 时,计算边距在内。
    $('i1').width()               //取得第一个匹配元素当前计算的宽度值(px)
    $('i1').innerWidth()          //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
    $('i1').outerWidth()          //获取第一个匹配元素外部宽度(默认包括补白和边框)
    $('i1').outerWidth(true)      //设置为 true 时,计算边距在内。
    View Code
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid #ddd; 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>
    Demo-拖动选中框

     7、效果:

    效果演示:点击

    三、事件

    1、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="添加" />
    
        <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);
            });
    //事件的几种绑定方式
    //        1,第一种$(".c1").click(function(){})
    //        $('ul li').click(function () {
    //            var v = $(this).text();
    //            alert(v);
    //        })
    
    //        2,第二种$('.c1').bind('click',function(){}),对应的取消绑定方式$('.c1').unbind('click',function(){})
    //        $('ul li').bind('click',function () {
    //            var v = $(this).text();
    //            alert(v);
    //        })
    
            
    //对未来元素(由脚本创建的元素)绑定事件,jquery3.0以下版本使用delegate("选择器","事件名称",function(){事件处理函数})jquery3.0+版本使用.on("事件名称","选择器",function(){})
    
    //        3,第三种方式$('.c1').on('click', function(){}), 对应的取消绑定方式$('.c1').off('click', function(){})
    //        $('ul li').on('click', function () {
    //            var v = $(this).text();
    //            alert(v);
    //        })
    
    
    //        4,第四种绑定方式$('.c').delegate('a', 'click', function(){}),对应的取消绑定方式$('.c').undelegate('a', 'click', function(){})
    //        $('ul').delegate('li','click',function () {
    //            var v = $(this).text();
    //            alert(v);
    //        })
    
        </script>
    </body>
    </html>

    2、阻止事件发生

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a onclick="return ClickOn()"  href="http://www.baidu.com">go_1</a>
    
        <a id="i1" href="http://www.baidu.com">go_2</a>
        <script src="jquery-1.12.4.js"></script>
        <script>
            //dom方式实现阻止事件发生,需要在在标签中增加return,函数中也需要return false
            function ClickOn(){
                alert(123);
                return false;  
            }
            
            //jquery方式实现实现阻止事件发生,只需要在函数中return false即可
            $('#i1').click(function () {
                alert(456);
                return false;
            })
        </script>
    </body>
    </html>
    View Code

    3、通过自执行函数自动执行事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .error{
                color: red;
            }
        </style>
    </head>
    <body>
    
        <form id="f1" action="s1.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="提交" />
        </form>
        <script src="jquery-1.12.4.js"></script>
        <script>
            // 之前接触定义事件绑定触发方式,会在当页面所有元素完全加载完毕后才会执行,这样如果有张图片过大的时候加载的慢,事件绑定效果就会随之变慢
              $(':submit').click(function () {
                    $('.error').remove();
                    var flag = true;
                    $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                        var v = $(this).val();
                        var n = $(this).attr('tex');
                        if(v.length <= 0){
                            flag = false;
                            var tag = document.createElement('span');
                            tag.className = "error";
                            tag.innerHTML = n + "必填";
                            $(this).after(tag);
    //                        return false;   如果这里不注释的return话,点击button只对当前输入框进行检查校验,注释了则对全部输入框进行校验
                        }
                    });
                    return flag;
                });
    
    
            // 通过自执行函数$(function(){绑定的事件})解决问题,这样在当页面框架加载完毕后,自动执行,这样的话,即使图片没有加载完毕,事件却已绑定
            $(function(){
                $(':submit').click(function () {
                    $('.error').remove();
                    var flag = true;
                    $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                        var v = $(this).val();
                        var n = $(this).attr('tex');
                        if(v.length <= 0){
                            flag = false;
                            var tag = document.createElement('span');
                            tag.className = "error";
                            tag.innerHTML = n + "必填";
                            $(this).after(tag);
    //                        return false;   如果这里不注释的return话,点击button只对当前输入框进行检查校验,注释了则对全部输入框进行校验
                        }
                    });
                    return flag;
                });
    
    
            });
    
    
        </script>
    </body>
    </html>
    View Code

     4、jQuery扩展

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script src="jquery-1.12.4.js"></script>
    <!--<script src="plugin.js"></script>可以将扩展的方法添加在其他文件中,然后引入-->
    <div id="i1">hello word</div>
    <script>
        //    第一种扩展方法:$.extend,通过“$.方法”使用
        $.extend({
            'print': function () {
                return 'hello word';
            }
        });
        var v = $.print();
        alert(v);
    
        //   第二种扩展方法:$.fn.extend,通过“$(..).方法”使用
        $.fn.extend({
            'print_1': function () {
                return 'hello word';
            }
        });
        var v1 = $("#i1").print_1();
        alert(v1)
                
         //在引用多个外部jquery插件时候可能会遇到公共变量命名重复的问题,这个时间可通过自执行函数解决这个问题       
        (function (arg) {
    
            var status = 1;
    
            arg.extend({
                'print_2': function () {
                    return 'hello word';
                }
            });
    
        })(jQuery);
    
    
    </script>
    </body>
    </html>
    View Code
  • 相关阅读:
    poj3669 广搜
    检索所有课程都选修的的学生的学号与姓名
    UVA10160 Servicing Stations
    uva11205 The broken pedometer 子集生成
    poj1101 the game 广搜
    poj3009 Curling 2.0 深搜
    poj 1564 Sum It Up 搜索
    HDU 2268 How To Use The Car (数学题)
    codeforces 467C George and Job(简单dp,看了题解抄一遍)
    HDU 2267 How Many People Can Survive(广搜,简单)
  • 原文地址:https://www.cnblogs.com/Keep-Ambition/p/8324272.html
Copyright © 2011-2022 走看看