JavaScript 之 jQuery

jQuery是集合了DOM / BOM / javaScript 的类库(python中叫模块)

jquery 本质上封装了dom，小公司直接拿来用，大型公司不再原生用jquery,自己开发原生的模块

中文文档：http://jquery.cuishifeng.cn/

版本：
　　1.x (推荐,兼容IE低版本)
　　2.x
　　3.x

jQuery与Dom对象之间的转换：
jquery对象[索引] => Dom对象
　　如：$('#i1')[0] => document.getElementById('i1')
Dom对象 => $(Dom对象)
　　d=document.getElementById('i1')
　　$(d) => $('#i1')

一、查找元素
jQuery：选择器+筛选器

选择器 直接找到某个或者某类标签
1. id 选择器
　　<div id='i1'></div>
　　> $('#id')
　　< [div#i1]
2. class 选择器
　　<div class='c1'></div>
　　> $(".c1")
　　< [div.c1]

3. 标签选择器
　　$('a') // 找到所有的a标签

4. 组合选择器

　　> $('a,.c1,#i1') // 找到所有a标签，class为c1 或 id为i1的标签
　　< [div#i1.c1, a, a, a, div.c2]

5. 层级选择器
　　<div id='i1' class='c1'>
　　　　<a id='a1' href="" >1</a>
　　　　<a id='a2' href="" >2</a>
　　　　<a id='a3' href="" >3</a>
　　　　<span></span>
　　</div>
　　<div class='c2'>
　　　　<div>
　　　　　　<a href=""></a>
　　　　</div>
　　</div>

　　$('.c1 a') // 递归查找class为c1下的所有a标签
　　$('.c2 a') // 递归查找class为c2下的所有a标签
　　$('.c1>a') // 查找标签class为c1下一级的a标签
　　$('.c2>a') // 查找标签class为c2下一级的a标签
　　$('#i1+div') // 查找标签id为i1的下一个div标签 [div.c2]
　　$('#a2~') // 查看标签id为a1后面的所有兄弟标签 [a#a3, span]
　　$('#a2~a') // 查看标签id为a1后面的所有兄弟中的a标签 [a#a3]

6. 基本筛选器
　　:first // 第一个
　　:last // 最后一个
　　　　> $('#i1>a:first')
　　　　< [a#a1]
　　:not(selector) // 排除某一个
　　　　> $('#i1>a:not(#a2)')
　　　　< [a#a1, a#a3]
　　:even // 奇数
　　:odd // 偶数
　　:eq(index) // 根据索引匹配，索引不一定从0开始，使用前先测试
　　:gt(index) // 匹配大于某个索引
　　:lt(index) // 匹配小于某个索引
　　　　> $('#i1>a:eq(2)')
　　　　< [a#a3]
　　　　> $('#i1>a:gt(1)')
　　　　< [a#a2, a#a3]

　　内容筛选
　　:contains(text)
　　:empty
　　:has(selector)
　　:parent
　　可见性筛选
　　:hidden
　　:visible

　　> $(':disabled') // 找到所有不可编辑的标签

7. 属性选择器

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]　　> $('[abc]') // 具有abc属性的所有标签

　　> $('[abc="123"]') // abc属性等于123的标签
　　> $("input[type='text']") 等于 $(':text')
　　<input type='text'/>
　　<input type='file'/>
　　<input type='password'/>

示例：多选，反选，全选

1、三元运算

var v = 条件?v1:v2，如果条件为真 v=v1,如果条件为假v=v2

2、each循环

jqeuryObj.each(function(k){
　　// k当前索引
　　// this 代指DOM对象，当前循环的元素 $(this)
})

<!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> 
        //  obj.prop('checked');   获取值
        //  obj.prop('checked', true);  设置值   
        function checkAll() {  
            $('#tb :checkbox').prop('checked',true);    // jquery自己会循环，无需手动去循环每个元素
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this代指当前循环的每一个元素(DOM对象)，
                // console.log(k,this) k为下标
                // console.log(this), console.log($(this)) 

                // 方法一：使用DOM对象操作
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */

                // 方法二：使用jQuery对象操作，prop()传一个参数表示获取值，传两个参数表示设置值
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
                */

                // 方法三：三元运算 var v = 条件?v1:v2，如果条件为真 v=v1,如果条件为假v=v2
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

View Code

筛选器

obj.next() 下一个标签
obj.nextAll()
obj.nextUntil('xxx')

obj.prev() 上一个标签
obj.prevAll()
obj.prevUntil('xxx')

obj.parent() 父标签
obj.parents() 所有"长辈"标签
obj.parentsUntil()

obj.children() 子标签
obj.siblings() 兄弟标签
obj.find('#i1') 递归查找

obj.eq() 如：$('li').eq(1) 等价于 $('li:eq(1)')

obj.first()
obj.last()
obj.hasClass(class)

二操作元素

jQuery方法内置循环： jqeuryObj.操作
each循环：循环jqeury对象数组中的元素进行多个操作
　　jqeuryObj.each(function(k){
　　　　// 操作
　　})

样式操作
对css整体操作

addClass
removeClass
toggleClass

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>

    <input id="i1" type="button" value="开关" />
    <div class="c1 hide">asdf</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

jQuery支持链式编程如：$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

示例：左侧菜单

<!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>
        $('.header').click(function(){
            // 1. 当前点击的标签 $(this)
            // 2. 获取某个标签的下一个标签 
            // 3. 获取某个标签的父标签
            // 4. 获取所有的兄弟标签
            // 5. 添加样式和移除样式  $('.i1').addClass('hide') | $('#i1').removeClass('hide')


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

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
        })
    </script>
</body>
</html>

View Code

对css里的属性操作

obj.css('样式名称', '样式值')

　　示例：点赞

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

    <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

　位置操作　

obj.scrollTop() 　// 获取滚轮位置
obj.scrollTop(0)　// 设置滚轮位置
boj.scrollLeft([val]) // 左右滚轮

　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div style="height: 100px;width:100px;overflow: auto">
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
    </div>
    <div style="height: 1000px;"></div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

<!-- 
> $('div').scrollTop()  
> $('div').scrollTop(0)
> $(window).scrollTop()  获取窗口滚轮位置
> $(window).scrollTop(0) 设置窗口滚轮位置
 -->

View Code

obj.offet() 　　// 获取标签在整个html中的横坐标
obj.offset().left　　// 获取标签在整个html中的横坐标
obj.offset().top 　　// 获取标签在整个html中的纵坐标

　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1"></div>
     <div style="height: 100px;width:100px;overflow: auto">
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
        </div>
     <div id="i2"></div>
    <div style="height: 1000px;"></div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>
<!-- 
> $('#i1').offset()
> $('#i2').offset().top
> $('#i2').offset().left
 -->

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>

View Code

obj.position() // 指定标签相对父标签(relative)标签的坐标(直到找到relative)
obj.height() // 获取标签的高度纯高度
obj.innerHeight() // 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
obj.outerHeight(true) // 获取第一个匹配元素外部高度（默认包括补白和边框）。设置为 true 时，计算边距在内。

文本操作

obj.text() // 获取文本内容,不解析标签
obj.text("<a>1</a>") // 设置文本内容,不解析标签
obj.html() // 获取文本内容,解析标签
obj.html("<a>1</a>") // 设置文本内容,解析标签
obj.val() 　　// 获取属性值，实际上是封装了dom的domObj.value
obj.val(..) 　　// 设置属性值 input,select,textarea。注：select标签设置 multiple 后 obj.val() 获得的是一个列表，obj.val([1,2]) 给select标签设置多个值

示例：模态对话框一

<!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>1.1.1.11</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.12</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.13</td>
            <td>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" />
        </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() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // 循环获取tds中内容            
            var tds = $(this).parent().prevAll();
            // 获取 <td>内容</td> 获取中间的内容 
            var port = $(tds[0]).text();
            var host = $(tds[1]).text();
            // 赋值给input标签中的value
            $('.modal input[name="hostname"]').val(host);
            $('.modal input[name="port"]').val(port);

        });
    </script>
</body>
</html>

View Code

属性操作

obj.attr('id') // 获取某个属性的值
obj.attr('id','i1') // 添加或修改谋个属性的值
obj.removeAttr('id') // 移除某个属性
obj.index // 获取索引位置

以上用于做自定义属性

obj.prop('checked') // 获取值
obj.prop('checked', true) // 设置值

prop 专门用于对chekbox,radio标签的属性定义，PS: jQuery 1.x 或 2.x 使用attr对 checkbox,radio做属性操作可能会有问题

示例：模态对话框二

<!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>
                <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>
                <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>
                <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" />
        </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() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }  

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            var tds = $(this).parent().prevAll(); 
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');  //  this代指每个td
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="'; 
                var a2 = '"]';
                var temp = a1 + n + a2;  // 字符串拼接  $('.modal input[name="'+ n + '"]')
                $(temp).val(text);
            });

        });
    </script>
</body>
</html>

View Code

示例：Tab菜单一

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

View Code

示例：Tab菜单二

<!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');
            // var v = $(this).index();
            // $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');  
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

        });
    </script>
</body>
</html>

View Code

文档处理

obj.append() // append的标签追加到obj中的标签
obj.prepend() // prepend的标签追加到obj中的标签
obj.appendTo() // obj的标签追加到 appendTo中的标签
obj.prependTo() // obj的标签追加到 prependTo中的标签
obj.after()
obj.before()
obj.remove()
obj.empty()
boj.clone()

示例：

<!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="复制" />

    <!-- $('#u1').before(temp) -->
    <ul id="u1">
        <!-- $('#u1').prepend(temp);  -->
        <li>1</li>
        <li>2</li>
        <!-- $('#u1').append(temp); -->
    </ul>
    <!-- $('#u1').after(temp)  -->

    <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);
        })
    </script>
</body>
</html>

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>
                <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>
                <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>
                <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" />
        </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 = $(".modal [name='hostname']").val();
            var td2 = document.createElement('td');
            td2.innerHTML = $(".modal [name='port']").val();

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

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

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }

        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            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);
            });

        });
    </script>
</body>
</html>

View Code

事件

jQuery绑定事件的三种方式

obj.event(function{})

obj.on('click', function(){}) // 其他绑定方式实际内部都调用on off这种方式
obj.off('click', function(){})

// 常用
obj.bind('event',function(){})
obj.unbind('event',function(){})

　// 特殊: s15.html 委托
obj.delegate('a', 'click', function(){})
obj.undelegate('a', 'click', function(){})

示例：

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

阻止事件发生：return false

有些标签自带默认事件，再给它绑定事件，则自己绑定的事件先执行，默认事件后执行。通过return是否允许默认事件执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()"  href="http://www.baidu.com"> rewrite1</a>

    <a id="i1" href="http://www.baidu.com"> rewrite2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 有些标签自带默认事件，再给它绑定事件，则自己绑定的事件先执行，默认事件后执行。通过return是否允许默认事件执行
        // Dom 方式 
        function ClickOn() {
            alert(123); 
            return true;
        }

        // jQuery 方式
        $('#i1').click(function () {
            alert(456);
            return false;
        })

        //应用：登录注册提交表单，提交时如果用户名密码错误则不能提交 
    </script>
</body>
</html>

View Code

对于大多数标签如<a>，自己绑定的事件先执行，默认事件后执行。但有些标签默认事件先执行如<input type="checkbox">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="checkbox">
    <script src="jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(':checkbox').click(function(){
            var v= $(this).prop('checked');
            console.log(v);     // 如果自己绑定的事件先执行，则输出false. 结果输出true，说明默认事件先执行
        })
    </script>
</body>
</html>

View Code

当页面框架加载完成之后，自动执行：$(function(){...})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

    <form id="f1" action="s5.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="提交" />
        <img src="...">
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 当页面框架加载完毕后，自动执行(如遇到 img标签时，图片还没完全加载完毕，但仍然执行)
        $(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 flag;
            });
        });

//        $(':submit').click(function () {
//            var v = $(this).prev().val();
//            if(v.length > 0){
//                return true;
//            }else{
//                alert('请输入内容');
//                return false
//            }
//        })

    </script>
</body>
</html>

View Code

jQuery扩展

当不想写 jQuery功能时，可以去网上找

$.extend

　　- 调用方式： $.方法

$.fn.extend

　　- 调用方式： $().方法 // 通过选择器调用

示例1 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
       $.extend({
           'ext1': function () {
               return 'sb';
           }
       });
       var v = $.ext1();
       alert(v);
    </script>
</body>
</html>

示例 2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
       $.fn.extend({
           "ext2": function () {
               return 'db';
           }
       });
       var v = $('#i1').ext2();  
       alert(v);
    </script>
</body>
</html>

示例3：引入扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script src="plugin1.js"></script>  // 引入扩展
    <script>
        var v = $.ext1();
        alert(v);
    </script>
</body>
</html>

<!-- plugin1.js -->
status = 1;
$.extend({
   'ext1': function () {
       return 'sb';
   }
});

注：不同插件中的扩展名重复不可避免

jQuery 扩展封装变量

解决插件和插件之间全局变量相同共用的问题

(function(){
　　var status = 1; // 使用自执行函数封装全局变量
})(jQuery)

示例：

(function (arg) {
    var status = 1;
    arg.extend({
       'ext': function () {
           return 'sb';
       }
    });
})(jQuery);  // 或 })($);

示例：登录注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

    <form id="f1" action="s5.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="提交" />
        <img src="...">
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        
        $(function(){
            $.Login('#f1')
        });

        /* .Login扩展封装以下内容 
        $(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 flag;
            });
        });
        */

    </script>
</body>
</html>

View Code

对于表单验证，我们一般前端做一套基本验证,拦截一部分用户。后端再做验证，拦截所有用户，如果通过验证则做业务处理并返回给用户
前端JS的表单验证，为了减少数据库请求。PS: 浏览器js可以被禁用，如果被禁用，验证规则就失效

标签自定义属性
<input type='text' require='true' label='用户名' Field='string' range='4-40'> // require='true' 不能为空；Field='string' 只支持数字、下划线及字符串；range 定义长度
<input type='text' require='true' label='手机号' mobile='true' name='telphone'>
<input type='password' require='true' label='登录密码' min-len='6' name='pwd'>
<input type='password' require='true' label='确认密码' confirm-to='pwd' name='confirmpwd'>

posted @ 2017-11-10 18:29 bobo0609 Views(180) Comments(0) 收藏举报

刷新页面返回顶部

bobo0609

JavaScript 之 jQuery

公告