Python之路-jQuery

时间：2024-11-09 17:37:20

参考网址：http://jquery.cuishifeng.cn/

1、安装环境

2、查找元素

3、操作元素

一、安装环境：

　　1、我们需要去官网下载jQuery，地址：http://jquery.com/download/

　　2、版本选择。

　　　　2.1：目前jQuery版本分为1.x、2.x、3.x。为了更好的兼容性，我们通常使用1.x版本，因为它兼容IE8以下的版本，但是所有的命令不分版本，都适当用。

　　　　2.2：一般同一个版本有两个安装包jquery-1.x.x.js和jquery-1.x.min.js。min顾名思义是压缩过的。调试的时候我们为了方便，一般使用非压缩版的，但是上线必须是min（压缩版）。

　　3、安装。

　　　　3.1：下载完jQuery安装包，直接放到你的python项目的目录下。

　　　　3.2：导入方法，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--导入jquery-->

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

    <!--下面开始写方法-->

    <script>

    </script>

</body>

</html>

　　　　3.3：引用$.和jQuery

方法一

Python之路-jQuery

方法二

Python之路-jQuery

Dom和jquery之间的转换：

　　Dom转成jquery对象：$(Dom对象名)

　　jQuery转换成Dom对象：$('#id名')[0]

Python之路-jQuery

总结：

　　我们发现jquery第0个元素才是Dom对象，所以jQuery的对象内容要比Dom对象的内容多。

二、查找元素：

选择器（直接找到某些或某类标签）：

　　基本：

　　1、id

　　　　$('id')

　　2、class

　　　　<div class='c1'><div>

　　　　$('.c1')

　　3、标签

　　　　3.1：例如找a标签，下面这种方法找到所有的a标签

　　　　　　$('a')

　　　　3.2：组合（例如我想同时找到class是c1和a标签及id等于i1的标签）

　　　　　　$('.c1,a,#i1')

　　　　　　你可以理解为把不同的查找方法，都放到引号里面用逗号隔开就行

　　　　3.3：层级（例如我要找到id是id1下的a标签）

　　　　　　$('#i1 a')跟上面一样，如果是组合的话用逗号隔开，如果是空格的话是找它下面的子子孙孙

　　　　　　$('#i1>a')要是这么写的话只找到id等于i1下的a标签

　　　　3.4:基本筛选

　　　　　　$('.c1:first')在找到所有class等于c1的标签里面的第一个标签

　　　　　　:first(找到的标签里面的第一个标签)

　　　　　　:last(找到的标签里面的最后一个标签)

　　　　　　:even奇数

　　　　　　:odd偶数

　　　　　　:eq（例如$('#i1 a:eq(0)'，找到id等于i1下的a标签里面索引等于0的标签）

　　　　　　:gt(大于多少)

　　　　3.5：属性

　　　　　　　　简单操作：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <a zhangsan='1'>123</a>

    <a zhangsan='2'>123</a>

    <a zhangsan='3'>123</a>

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

    <script>

    </script>

</body>

</html>

Python之路-jQuery

$('zhangsan') 找到所有具有zhangsan属性的标签

$('[zhangsan="1"]')找到zhangsan属性等于1的标签(注意单、双引号的不能隔开)

表单：　　　　

　　如果我想找到html中所有input标签中type等于text的标签，用属性查找的话可以这么写$('input[type="text"]')

　　表单的话可以这么查找：

　　$(':text')

实例一（全选、反选、取消）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="button" value="全选" onclick="checkAll();" />

    <input type="button" value="反选" onclick="resverseAll();" />

    <input type="button" value="取消" onclick="cancleAll();" />

    <table>

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

//        全选，首先我找到id等于td的标签，然后找它下面的checkbox标签，用prop方法让checked等于true就选择上了

        function checkAll(){

            $('#tb :checkbox').prop('checked',true);

        }

//        全选，首先我找到id等于td的标签，然后找它下面的checkbox标签，用prop方法让checked等于flase就选择上了

        function cancleAll(){

            $('#tb :checkbox').prop('checked',false);

        }

        function resverseAll(){

            //循环所有的checkbox对象，然后用匿名函数，里面加上条件判断

            $("#tb :checkbox").each(function () {

                //我们说了checked后面有false或true就是设置属性，没有就是获取对象属性。如果选择上了，让他等于false

                if($(this).prop("checked")){

                $(this).prop("checked",false);

                    //否则就更改为true

            }else{

                $(this).prop("checked",true);

            }

            })

        }

    </script>

</body>

</html>

实例二（下拉菜单）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .header{

            background-color: black;

            color: wheat;

        }

        .content{

            min-height: 50px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div style="height:400px;width: 200px;border: 1px solid #dddddd">

        <div class="item">

            <div class="header">标题一</div>

            <div id="i1" class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题二</div>

            <div class="content hide">内容</div>

        </div>

        <div class="item">

            <div class="header">标题三</div>

            <div class="content hide">内容</div>

        </div>

    </div>

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

    <script>

        //查找class等于header的标签，给个click事件。这个事件里面添加一个匿名函数

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

            // 当前点击的标签 $(this)

            // 获取某个标签的下一个标签

            // 获取某个标签的父标签

            // 获取所有的兄弟标签

            // 添加样式和移除样式

            // $('.i1').addClass('hide')

            // $('#i1').removeClass('hide')

            // var v = $("this + div");

            // $("label + input")

            // console.log(v);

            //

            // $("afsldkfja;skjdf;aksdjf")

            // 筛选器

            /*

            $(this).next()      下一个

            $(this).prev()      上一个

            $(this).parent()    父

            $(this).children()  孩子

            $('#i1').siblings() 兄弟

            $('#i1').find('#i1') 子子孙孙中查找

            // . . .

            //

            $('#i1').addClass(..)

            $('#i1').removeClass(..)

            */

            // 链式编程

            // $(...).click(function(){

            //     this..

            // })

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

//            $(this).parent().siblings().find('.content').addClass('hide')

            //this代指谁点击谁就是谁

            //被点击的这个标签的下一个标签（也就是内容的标签），移除hide属性（不隐藏），然后我们要让其它的内容标签隐藏，

            //也就是它父亲的的兄弟标签，就是其它class等于item属性，在这里面找到classs等于.content属性里面，增加hide（让它隐藏）

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

        })

    </script>

</body>

</html>

筛选：

　　.next(下一个)

　　.nextAll(下面所有的)

　　.nextUntil()(直到找到那个，包含直到那个标签)

.prev() 上一个

　　.prevall() 上面所有的

.parent() 父

.parents() 往上找，一直找到所有的长辈

.parentsUntil() 往上找，一直找到，直到到哪里，类似于next的Until

.children() 孩子

.siblings() 兄弟

.find('#i1') 子子孙孙中查找

内容操作：

　　.text() 获取内容，赋值就变成了更改 $('#i1').text = 123

　　.html ()获取标签及内容,赋值就变成了更改（$('#i1').html = <a>123 </a>）

　　.val()获取值，类似于.value（注意，只是有value的属性都可以应用）

实例：模态框（添加、编辑等操作）

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

        <tr>

            <td>1.1.1.11</td>

            <td>80</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

        <tr>

            <td>1.1.1.12</td>

            <td>80</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

        <tr>

            <td>1.1.1.13</td>

            <td>80</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

        <tr>

            <td>1.1.1.14</td>

            <td>80</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

    </table>

    <div class="modal hide">

        <div>

            <input name="hostname" type="text"  />

            <input name="port" type="text" />

        </div>

        <div>

            <input type="button" value="取消" onclick="cancelModal();" />

        </div>

    </div>

    <div class="shadow hide"></div>

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

    <script>

//        添加

        function addElement() {

//            找到这两个class，然后删除之前设置的hide隐藏

            $('.modal,.shadow').removeClass('hide');

            //因为当用户点击编辑后会遗留垃圾，所以让用户点击添加的时候先清除一下模态框里面的数据

            $('.modal input[type="text"]').val('')

        }

//        取消

        function cancelModal(){

//            找到这两个class，然后添加之前hide隐藏

            $('.modal,.shadow').addClass('hide');

//            这里是设置如果用户点击编辑后，我们在点击添加，上次添加进去的数据就会存在，所以当点击添加时，先清除上次的编辑垃圾。

            $('.modal,.input[type="text"]').val("");

        }

//        需求是（当用户点击编辑时候，把它前面的数据写到弹出框里）

//          找到定义在每个编辑上的edit,并定义事件，再来个匿名函数

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

//            首先让弹出框（背景框和输入框）这两个显示，去除之前的hide隐藏属性

            $('.modal,.shadow').removeClass('hide');

            //this代表的是click获得的当前标签

//            然后找到这个标签的父标签的上面所有标签

            var tds = $(this).parent().prevAll();

//            tds是获得的第1个标签，并获取内容

            var port = $(tds[0]).text();

//            tds是获得的第2个标签，并获取内容

            var host = $(tds[1]).text();

//            找到弹出框，并传入值

            $('.modal input[name="hostname"]').val(host);

            $('.modal input[name="port"]').val(port);

        });

    </script>

</body>

</html>

样式操作：

　　addClass

　　removeClass

　　toggleClass

实例（开关灯）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <input type='checkbox' id='i2'  />

    <input id="i1" type="button" value="开关" />

    <div class="c1 hide">asdfasdf</div>

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

    <script>

        $('#i1').click(function(){

//           方法一：

//            if($('.c1').hasClass('hide')){

//                $('.c1').removeClass('hide');

//            }else{

//                $('.c1').addClass('hide');

//            }

    //     方法二：

            $('.c1').toggleClass('hide');

        })

    </script>

</body>

</html>

属性操作：

　　一般做自定义属性操作

　　$('..').attr

　　$('..').removeAttr('')删除某个属性

　　$('..').prop

attr（如果有属性，就把属性的值改掉，如果没有该属性名就会新增,注意：jquery1.x和2.x不要使用对checked等做选中的不建议使用attr）:

('#i1')

[input#i1]

$('#i1')[0]

<input id=​"i1" type=​"button" value=​"开关">​

$('#i1').attr('type')

"button"

$('#i1').attr('id')

"i1"

$('#i1').attr('value')

"开关"

$('#i1').attr('value',"哈哈")\\这样的话就修改了原来value的值

[input#i1]

$('#i1')[0]

<input id=​"i1" type=​"button" value=​"哈哈">​

$('#i1').attr('name',"zhangsan")

[input#i1]

$('#i1')[0]

<input id=​"i1" type=​"button" value=​"哈哈" name=​"zhangsan">​

('#i1').removeAttr('value')
[input#i1]

prop：　

　　$('').prop('checked'）获取值

　　$('').prop('checked',false)设置值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <input type='checkbox' id='i2'  />

    <input id="i1" type="button" value="开关" />

    <div class="c1 hide">asdfasdf</div>

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

    <script>

    </script>

</body>

</html>

//让标签checkbox不选中

$('#i2').prop('checked',false)

[input#i2]

//让标签checkbox选中

$('#i2').prop('checked',true)

[input#i2]

实例（表格编辑增强版）：

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

        <tr>

            <td target="hostname">1.1.1.11</td>

            <td target = "port">80</td>

            <td target = "ip">1</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">1.1.1.12</td>

            <td target = "port">80</td>

            <td target = "ip">2</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">1.1.1.13</td>

            <td target="port">80</td>

            <td target="ip">3</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">1.1.1.14</td>

            <td target="port">80</td>

            <td target="ip">4</td>

            <td>

                <a class="edit">编辑</a> | <a>删除</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();" />

        </div>

    </div>

    <div class="shadow hide"></div>

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

    <script>

//        添加

        function addElement() {

//            找到这两个class，然后删除之前设置的hide隐藏

            $('.modal,.shadow').removeClass('hide');

        }

//        取消

        function cancelModal(){

//            找到这两个class，然后添加之前hide隐藏

            $('.modal,.shadow').addClass('hide');

//            这里是设置如果用户点击编辑后，我们在点击添加，上次添加进去的数据就会存在，所以当点击添加时，先清除上次的编辑垃圾。

            $('.modal,.input[type="text"]').val("");

        }

//        需求是（当用户点击编辑时候，把它前面的数据写到弹出框里）

//          找到定义在每个编辑上的edit,并定义事件，再来个匿名函数

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

//            首先让弹出框（背景框和输入框）这两个显示，去除之前的hide隐藏属性

            $('.modal,.shadow').removeClass('hide');

            //this

            var tds = $(this).parent().prevAll();

            tds.each(function(){

                //获取td的target属性值

                var n = $(this).attr('target');

                //获取td标签中的内容（hostname、port、ip）

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

                //利用input属性named等于hostname、port、ip

                var a1 = '.modal input[name="';

                var a2 = '"]';

                //然后让它们拼接起来。如：.modal样式下的 input框，name等于hostname。因为这样写$(.modal input[name="n")，这样的话n是个字符串，所以我们只能拼接起来，这样你随便增加几列

                var temp = a1 + n + a2;

                $(temp).val(text)

            })

        });

    </script>

</body>

</html>

示例（下选框）：

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

        //给class等于menu定义一个事件，并建立一个匿名函数

        $('.menu-item').click(function(){

            //点击菜单几就给他应用一个actinve标红的样式，再把它的兄弟标签取出背景为红的样式

            $(this).addClass('active').siblings().removeClass('active');

            //用attr获取到这个菜单a的值

            var target = $(this).attr('a');

            //这里又用到里字符串拼接的方法。

            //让内容里面属性b的值等于a的值得标签取出hide隐藏属性，再让它的兄弟标签加上隐藏的样式

            $('.content').children("[b='"+ target + "']").removeClass('hide').siblings().addClass('hide');

        });

    </script>

</body>

</html>

　　

　　.index(索引位置)

示例（下选框增强版）：

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

文档处理：

　　append 把某个值追加到最后

　　prepend 把某个值追加到最上面

　　after　　把某个值加到最后和当前标签的父级标签同级

　　before  把某个值加到最前面和当前标签的父级标签同级

　　remove　　删除（内容和所属的标签都删）

　　empty 删除（只删除标签的内容）

　　clone 克隆

样式操作（css）：

　　$('').css('color','red')

　　$('').css('color','red')

示例（点赞）：

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

位置操作：

　　scrollTop([val])

　　scrollLeft([val])

　　$(window).scrollTop() 获取

　　$(window).scrollTop(0) 有值就是定位当前标签位置（下拉按钮的位置）

　　

　　$('#id'').scrollTop()获取当前标签位置

　　$('#id'').scrollTop(0)设置值（如置顶）

　　offset().left 指定标签在html中的坐标

　　offset().top 指定标签在html中的坐标

　　

　　postion() 指定标签相对父级标签（relative）标签的坐标

　　

　　$('#i1').height 获取标签的高度（标签设置的高度（纯高度））

$('.test').height()

200

$('.test').height(true)

[div.test]

$('.test').height(false)

[div.test]

　　$('#i1').innerHeight()   #纯高度+内边距（padding（padding-top加padding-bottom））

$('.test').innerHeight()

200

$('.test').innerHeight(true)

[div.test]

$('.test').innerHeight(false)

[div.test]

　　$('#i1').outerHeight()  #纯高度+上下边框的和+内边距（padding（padding-top加padding-bottom））

　　$('#i1').outerHeight(true)类似这样的话直接打印id等于1的这个标签

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

事件：

　　绑定方法一：

　　$('#i1').click 绑定事件

　　

　　绑定方法二：

　　$('#i1').bind('click',function(){

　　})

　　解绑

　　$('#i1').unbind('click',function(){

　　})

　　绑定方法三：

　　例如：class样式c1下的a标签绑定一个事件

　　$('.c1').delegate('a','click',function(){

　　})

　　解绑

　　$('.c1').delegate('a','click',function(){

　　})

　　绑定方法四：

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

　　})

　　解绑

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

　　})

绑定方法三示例：

　　使用场景：一般在新增标签中，delegate是实时绑定，委托。

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

        });

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

//            var v = $(this).text();

//            alert(v);

//        })

//        $('ul li').bind('click',function () {

//            var v = $(this).text();

//            alert(v);

//        })

//        $('ul li').on('click', function () {

//            var v = $(this).text();

//            alert(v);

//        })

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

            var v = $(this).text();

            alert(v);

        })

    </script>

</body>

</html>

示例（多个事件判断）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

    <a id="i1" href="http://www.oldboyedu.com">走你2</a>

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

    <script>

        //当return为true的话就继续执行href的跳转操作

        function ClickOn() {

            alert(123);

            return true;

        }

        //当return为flase的话就不执行href的跳转操作

        $('#i1').click(function () {

            alert(456);

            return false;

        })

    </script>

</body>

</html>

示例(表单提交前的验证):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .error{

            color: red;

        }

    </style>

</head>

<body>

    <form id="f1" action="http://www.baidu.com" 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>

        //当网页框架加载完成后，自动执行操作

        $(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 flag;

        });

        });

    </script>

</body>

</html>

jQuery扩展：

　　　　  $.extend         $.方法
 　　　　$.fn.extend            $(..).方法

　　扩展方法一：

　　

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="i1"></div>

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

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

    <script>

        var v = $('#i1').zhangsan();

            alert(v);

    </script>

</body>

</html>

test1.js

/**

 * Created by Administrator on 2016/11/30.

 */

    $.fn.extend({

        "zhangsan": function () {

            return 'zhangsan';

        }

    });

　　扩展方法二：

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div></div>

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

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

    <script>

        var v = $.lisi();

        alert(v);

    </script>

</body>

</html>

test2.js

/**

 * Created by Administrator on 2016/11/30.

 */

        $.extend({

            'lisi': function () {

                return 'lisi';

            }

        });

相关文章