zoukankan html css js c++ java

Python之路-jQuery

参考网址：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>

View Code

　　　　3.3：引用$.和jQuery

方法一

方法二

Dom和jquery之间的转换：

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

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

总结：

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

二、查找元素：

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

　　基本：

　　1、id

　　　　$('id')

　　2、class

　　　　$('.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>

View Code

$('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>

View Code

实例二（下拉菜单）：

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

View Code

筛选：

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

View Code

样式操作：

　　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>

View Code

属性操作：

　　一般做自定义属性操作

　　$('..').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]

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

View Code

示例（下选框）：

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

View Code

　　.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=" 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>

View Code

文档处理：

　　append 把某个值追加到最后

　　prepend 把某个值追加到最上面

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

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

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

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

　　clone 克隆

样式操作（css）：

　　$('').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>

View Code

位置操作：

　　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]

View Code

　　$('#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>

View Code

示例（多个事件判断）

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

View Code

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

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

View Code

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>

View Code

test1.js

/**
 * Created by Administrator on 2016/11/30.
 */
    $.fn.extend({
        "zhangsan": function () {
            return 'zhangsan';
        }
    });

View Code

　　扩展方法二：

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>

View Code

test2.js

/**
 * Created by Administrator on 2016/11/30.
 */
        $.extend({
            'lisi': function () {
                return 'lisi';
            }
        });

View Code

查看全文

相关阅读:
一、linux 挂起进程 nohup
1.C#窗体和控件
 C#笔记——5.迭代器
 C#笔记——4.集合
 设计模式——3.观察者模式
 设计模式——2.策略模式
 Code基础——1.数据结构
 设计模式——1.模板方法
 C#笔记——3.泛型
 C#笔记——2.委托

原文地址：https://www.cnblogs.com/lei0213/p/6114096.html