【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="width: 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="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()).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;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>
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

 

posted @ 2018-01-21 15:02  Wilson_Blogs  阅读(380)  评论(0)  编辑  收藏  举报