Web基础（5）jQuery，基本操作及代码案例

其他 2018-07-17 23:29:28 阅读次数: 0

完整的jquery中文文档请参见：jquery.cuishifeng.cn


1. JQuery的基本格式：

$(selector).action()


2.选择器

1）基本选择器

#id

element

.class

*

扫描二维码关注公众号，回复： 2205665 查看本文章

selector1, selector2, selector3


2）层级选择器

ancestor descendant 后代选择器

parent > child 子级选择器

prev + next 下一个选择器

prev ~ siblings 兄弟选择器


3）基本筛选器

:first 选择众多相同元素当中的第一个，例$("li :first").css("color", "green")

:last 选择出最后一个

:not(selector) 非

:even 选择出索引为偶数的结果

:odd 选择出索引为奇数的结果

:eq(index) 选择出固定索引值的结果

:gt(index) 选择出大于某索引值的结果

:lt(index) 选择出小于某索引值的结果

:header 选出标题类型，例如<h1></h1>


4）内容筛选器

:contains(text) 通过内容进行筛选，例$("div :contains('Steve')")

:empty 内容为空的标签

:has(selector) 选出包含某个标签的，例$("div:has(p)").addClass("test")，找出div标签中有p标签的


5）可见性筛选器

:hidden 隐藏的

:visible 可见的


6）属性筛选器

[attribute] 根据属性进行选择，例$("div[id]")

[attribute=value] 根据属性值进行筛选

[attribute!=value] 根据属性不等于某个值进行筛选

[attribute^=value] 选取以某个属性值开头的标签

[attribute$=value] 选取以某个属性值结尾的标签

多个属性进行筛选用中括号进行分割，例$("input[id][name='man'")


7） 表单选择器

选取表单元素的简写形式，例，$(":checkbox")

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file


8）表单对象属性

:enabled 查找所有表单对象中启用的元素

:disabled 查找所有表单对象中禁用的元素

:checked 查找所有选中的选项元素（复选框、单选框等，select中的option），对于select元素来说，获取选中推荐使用

:selected 查找所有选中的选项元素


3. 筛选器

1）过滤

eq(index|-index) 例$("li").eq(1).css("fontSize","30px")

first 获取第一个元素

last 获取最后一个元素


2）查找

children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素，例$("div").children()。注意：parents()将查找所有祖辈元素，而children()之查找子元素，而不查找所有后代元素。

next([expr]) 获取满足条件的下一个元素

nextAll([expr]) 获取满足条件的以下所有元素

nextUtil([ele][.f]) 获取满足条件的所有元素，直到某个条件（不包含某条件），例$(".div1").nextUntil(".div4") ,不包含id为div4的标签元素

parent([expr]) 获取满足条件的父级元素

parents([expr]) 获取满足条件的所有父级元素，例$("p").parents()

parentsUntil([ele][.f]) 获取满足条件的父级元素，直到某个条件

prev([expr]) 获取满足条件的上一个元素

prevAll([expr]) 获取满足条件的所有之前的元素

prevUntil([ele][.f]) 获取满足条件的之前元素，直到某元素

siblings 获取满足条件的所有兄弟元素

find 搜索于指定表达式匹配的元素


4. 左侧折叠菜单代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Left-Menu</title>
    <style>
        *{
            maring:0;
            padding:0;
        }
        .menu{
            width:20%;
            height:500px;
            background-color:#ddd;
            float:left;
        }
        .content{
            width:80%;
            height:500px;
            background-color: #9b9ca9;
            float:left;
        }
        .title{
            color:black;
            font-size:20px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="Show(this);">一线城市</div>
                <div class="title-content">
                    <div>北京</div>
                    <div>上海</div>
                    <div>广州</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">二线城市</div>
                <div class="title-content hide">
                    <div>天津</div>
                    <div>重庆</div>
                    <div>深圳</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this);">三线城市</div>
                <div class="title-content hide">
                    <div>南京</div>
                    <div>苏州</div>
                    <div>武汉</div>
                </div>
            </div>
        </div>

        <div class="content"></div>
    </div>

    <script src="jquery.js"></script>
    <script>
        function Show(arg){
            // arg代表点击的标签，先都隐藏，再将点击的标签去掉hide
            $(".title-content").addClass("hide");
            $(arg).next().removeClass("hide");
        }
    </script>
</body>
</html>



5.tab菜单代码案例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab-Menu</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .tab-outer{
            width:70%;
            background-color: gray;
            margin:0 auto;
            height:600px;
        }
        .menu{
            background-color:navajowhite;
        }
        .menu li{
            display:inline-block;
            height:30px;
            line-height:30px;
            cursor:pointer;
        }
        .content{
            background-color:violet;
            padding:50px;
            height:auto;
        }
        .current{
            background-color:aliceblue;
            color:red;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="tab-outer">
        <ul class="menu">
            <li index="c1" class="current" onclick="Show(this);">菜单一</li>
            <li index="c2" onclick="Show(this);">菜单二</li>
            <li index="c3" onclick="Show(this);">菜单三</li>
        </ul>
        <div class="content">
            <div id="c1">内容一</div>
            <div id="c2" class="hide">内容二</div>
            <div id="c3" class="hide">内容三</div>
        </div>
    </div>

    <script src="jquery.js"></script>
    <script>
        function Show(arg){
            $(arg).addClass("current").siblings().removeClass("current");
            var index = $(arg).attr("index");
            $("#" + index).siblings().addClass("hide");
            $("#" + index).removeClass("hide");
        }
    </script>
</body>
</html>



6. 属性操作（属性CSS和文档处理）

1）属性操作

$("p").text() 获取文本，在括号中输入值可设置标签的文本内容

$("p").html() 获取到包含标签的文本内容

$(":radio").val() 获取value值

$(".test").attr("tab-index") 获取test样式下属性为tab-index的属性值，在attr输入第二个参数可设置对应的属性值，如要设置多个值，则需要放入字典中，如下例所示：$("img").attr({src : "logo.jpg", alt: "Test Image"});

$(".test").removeAttr("checked") 删除某标签下的属性

$("input[type='checkbox']").prop("checked", true) 获取在匹配的元素集中的第一个元素的属性值，如设定了第二个属性则赋值。尽量使用prop方式来操作属性值


checkbox的全选、取消、反选的代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab-Menu</title>
    <style>

    </style>
</head>
<body>
    <form>
        <div>
            <input type="button" value="全选" onclick="SelectAll();">
            <input type="button" value="取消" onclick="Cancel();">
            <input type="button" value="反选" onclick="Reverse();">
        </div>
        <table>
            <tr>
                <td><input type="checkbox" value="Basketball"></td>
                <td>篮球</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>足球</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>网球</td>
            </tr>
        </table>

    </form>

    <script src="jquery.js"></script>
    <script>
        function SelectAll(){
            $("table :checkbox").attr("checked", true);
        }
        function Cancel(){
            $("table :checkbox").prop("checked", false);
        }
        function Reverse(){
            var checkboxes = $("table :checkbox");
            for(var i = 0; i < checkboxes.length; i++){
                if($(checkboxes[i]).prop("checked") == false){
                    $(checkboxes[i]).prop("checked", true);
                }else{
                    $(checkboxes[i]).prop("checked", false);
                }
            }
        }
    </script>
</body>
</html>

2）CSS类

addClass(class) 添加CSS样式

removeClass(class) 移除CSS样式



7. CSS操作

1）CSS

$("#c1").css("backgroundColor", "gray") 设置css样式

2）位置

scrollTop([val]) 滑轮的高度

scrollLeft([val]) 滑轮的向右移动距离


返回顶部的代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Return-Top</title>
    <style>
        .content{
            width:80%;
            margin:0 auto;
            height:800px;
            background-color:gray;
        }
        .returnTop{
            position:fixed;
            right:10px;
            bottom:20px;
            background-color:blue;
            width:40px;
            height:20px;
            font-size:10px;
            color:white;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="content">Hello World</div>
    <div class="content">Hello World</div>
    <div class="content">Hello World</div>

    <div class="returnTop hide" onclick="ReturnTop();">返回顶部</div>

    <script src="jquery.js"></script>
    <script>
        window.onscroll=function(){
            var current = $(window).scrollTop();
            if(current > 100){
                $(".returnTop").removeClass("hide");
            }else{
                $(".returnTop").addClass("hide");
            }
        };

        function ReturnTop(){
            $(window).scrollTop(0);
        };
    </script>
</body>
</html>



3）尺寸

height([val]) 获取高度值

width([val]) 获取宽度值


菜单滑动代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rolling Menu</title>
    <style>
        body{
            margin:0;
            background-color:#dddddd;
        }
        .w{
            margin:0 auto;
            width:980px;
        }
        .pg-header{
            background-color: #555555;
            color:white;
            height:48px;
        }

        .pg-body .menu{
            width:180px;
            background-color:white;
            float:left;
        }

        .fixed{
            position:fixed;
            top:10px;
        }

        .pg-body .menu .active{
            background-color:#425a66;
            color:white;
        }
        .pg-body .content{
            position:absolute;
            background-color: whitesmoke;
            left:345px;
            right:200px;
            float:right;
        }
        .pg-body .content .item{
            height:900px;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w"></div>
    </div>

    <div class="pg-body">
        <div class="w">
            <div id="menu" class="menu">
                <ul>
                    <li i="1">第一部分</li>
                    <li i="2">第二部分</li>
                    <li i="3">第三部分</li>
                </ul>
            </div>
            <div id="content" class="content">
                <div class="item" t="1">法兰西</div>
                <div class="item" t="2">英吉利</div>
                <div class="item" t="3">美利坚</div>
            </div>
        </div>
    </div>

    <script src="jquery.js"></script>
    <script>
        // 监听窗体滑动事件
        window.onscroll=function(){
            var distance = $(window).scrollTop();
            // 如果滚轮滑动超过50，将左侧menu菜单固定住
            if(distance > 50){
                $(".menu").addClass("fixed");
            }else{
                $(".menu").removeClass("fixed");
            }

            if($(document).height() == $(window).height() + distance){
                $(".menu").children(":last").css("fontSize", "30px").siblings().css("fontSize", "15px");
                return
            }

            // 根据滑动的高度，左侧菜单动态变化
            $("#content").children().each(function(){
            var offset = $(this).offset().top;
            var total = $(this).height() + offset;
            if(distance > offset && distance < total){
                var index = $(this).attr("t");
                var new_index = "[i=" + index + "]";
                $(new_index).css("fontSize", "30px").siblings().css("fontSize","15px");

                return
            }
        });

        };

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


8. 关于each的return补充

 // 1. $.each return，跟外层函数无关
        // 2. $.each return false，表示each退出
        function f1(){
            var li = [1, 2, 3];
            $.each(li, function(k, v){
                console.log(k, v);
                if(k == 1){
                    return false;
                }
            });
            // end能够给在日志中输出
            console.log('end');
        }



9. 文档处理

内部插入：

 $("#c1").append("<p>hello</p>") 在某标签后添加相应内容

$("p").appendTo("div") 将某内容添加到某标签后

prepend() 在某标签前添加相应内容

prependTo() 将某标签添加到某标签前


外部插入：
before() 

insertBefore() 

after()

insertAfter() 

replaceWith() 

remove() 移除整个标签

empty() 清空标签内的内容

clone() 复制



10. 事件

$(document).ready(function(){}) --------> $(function(){}) 先等待文档流加载完，再执行jQuery代码

$("p").click(function(){})

$("p").bind("click", function(){})

$("ul").delegate("li", "click", function(){}) 什么时候使用再绑定

事件代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rolling Menu</title>
    <style>

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button>添加</button>

    <script src="jquery.js"></script>
    <script>
        $(function(){
            // 这样绑定的事件在页面载入完成后就无法给新添加的标签绑定事件
            $("li").click(function(){
                alert("666");
            });

            // 将某标签下的标签进行委托管理可解决上述问题
            // 批量处理最好选用delegate方式
            $("ul").delegate("li", "click", function(){
                alert("666");
            });

            $("button").click(function(){
               $("ul").append("<li>N</li>")
            });
        });
    </script>
</body>
</html>


11. jQuery扩展

jQuery.extend(object) 在jQuery命名空间上增加两个函数

jQuery.extend({
            min:function(a,b){return a < b ? a : b},
            max:function(a,b){return a > b ? a : b}
        });
        
        jQuery.min(10, 20) // 结果为10
        jQuery.max(10, 20) // 结果为20

jQuery.fn.extend(object) 扩展jQuery元素集来提供新的方法（通常用来制作插件）

增加两个插件方法的代码案例：

jQuery.fn.extend({
            check:function(){
                return this.each(function(){this.checked = true; });
            },
            uncheck:function(){
                return this.each(function(){this.checked = false; });
            }
        });
        
        $("input[type='checkbox']").check();
        $("input[type='checkbox']").uncheck();



12. 动画效果

1）隐藏与显示代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hide and Show</title>
    <style>

    </style>
</head>
<body>
    <p>Hello World!</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
            });
            $("#show").click(function(){
                $("p").show(1000);
            });

            // 用于切换被选元素的hide()和show()方法
            $("#toggle").click(function(){
                $("p").toggle(500);
            });

        });

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

2）淡入与淡出代码案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fade In and Fade Out</title>
    <style>

    </style>
</head>
<body>
    <div id="1" style="display:none;width:80px;height:80px;background-color: blue"></div>
    <div id="2" style="display:none;width:80px;height:80px;background-color: red"></div>
    <div id="3" style="display:none;width:80px;height:80px;background-color: green"></div>

    <button id="in">fadein</button>
    <button id="out">fadeout</button>
    <button id="toggle">fadetoggle</button>
    <button id="fadeto">fadeto</button>

    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            $("#in").click(function(){
                $("#1").fadeIn(1000);
                $("#2").fadeIn(1000);
                $("#3").fadeIn(1000);
            });
            $("#out").click(function(){
                $("#1").fadeOut(1000);
                $("#2").fadeOut(1000);
                $("#3").fadeOut(1000);
            });
            $("#toggle").click(function(){
                $("#1").toggle(1000);
                $("#2").toggle(1000);
                $("#3").toggle(1000);
            });
            $("#fadeto").click(function(){
                $("#1").fadeTo(1000, 0.4);
                $("#2").fadeTo(1000, 0.5);
                $("#3").fadeTo(1000, 0);
            });
        });

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


3）下滑/隐藏代码案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide Down And Slide Up</title>
    <style>
        div{
            background-color:black;
            color:white;
            padding:5px;
            border:solid 1px grey;
        }
        #content{
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>
    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="toggle">Toggle</div>
    <div id="content">Hello World</div>


    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            $("#flipshow").click(function(){
                $("#content").slideDown(1000);
            });

            $("#fliphide").click(function(){
                $("#content").slideUp(1000);
            });

            $("#toggle").click(function(){
                $("#content").slideToggle(1000);
            });
        });

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

4）轮播图代码案例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rolling Panel</title>
    <style rel="stylesheet">
        *{
            margin:0;
            padding:0;
        }
        ul li{
            list-style: none;
        }
        .outer{
            height:625px;
            width:1024px;
            border:dashed blue 5px;
            margin:0 auto;
            position:relative;
        }
        .outer .img li{
            position:absolute;
            left:0;
            top:0;
        }
        .outer .num{
            position:absolute;
            left:0;
            bottom:10px;
            text-align:center;
            width:100%;
            font-size:0px;
        }
        .outer .num li{
            height:20px;
            width:20px;
            background-color:gray;
            border-radius: 60%;
            font-size:16px;
            color:white;
            text-align:center;
            line-height: 20px;
            display:inline-block;
            margin:5px;
            cursor:pointer;
        }
        .button{
            height:60px;
            width:24px;
            background-color:darkgray;
            position:absolute;
            /*left:0px;*/
            top:50%;
            margin-top:-30px;
            opacity: .4;
            font-size:25px;
            font-weight:bolder;
            text-align: center;
            line-height:60px;
            color:white;
            display:none;
        }
        .btn-right{
            right:0;
        }
        .outer:hover .button{
            display:block;
        }
        .outer .num li.current{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="img">
            <li><img src="picture/2.jpg"></li>
            <li><img src="picture/3.jpg"></li>
            <li><img src="picture/4.jpg"></li>
        </ul>


        <ul class="num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <div class="btn-left button"><</div>
        <div class="btn-right button">></div>
    </div>


    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function() {
            $(".num li").first().addClass("current");
            // 手动控制轮播
            $(".num li").mouseover(function(){
                $(this).addClass("current").siblings().removeClass("current");
                var index = $(this).index();
                i = index;
                $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });

            // 自动轮播
            i = 0;
            var time = setInterval(move, 1500);
            function move(){
                i++;
                if(i == 3){
                    i = 0;
                }
                $(".num li").eq(i).addClass("current").siblings().removeClass("current");
                $(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);

            }

            $(".outer").hover(function(){
                clearInterval(time);
            },function(){
                time = setInterval(move, 1500);
            });

            $(".btn-right").click(function(){
                move();
            });
            $(".btn-left").click(function(){
                if(i == 0){
                    i = 3;
                }
                i = i - 2;
                move();
            });
        });




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


5）拖动面板代码案例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Moving Panel</title>
    <style rel="stylesheet">

    </style>
</head>
<body>
    <div style="border:1px solid #ddd;width:600px;position:absolute">
        <div id="title" style="background-color: black;height:40px;color:white;">
            标题
        </div>
        <div style="height:300px;">
            内容
        </div>
    </div>

    <script src="jquery-3.2.1.js"></script>
    <script>
        // 页面加载完成之后自动执行
        $("#title").mouseover(function(){
            $(this).css('cursor', "move");
        }).mousedown(function(e){
            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;

            $(this).bind('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');
            }).mouseup(function(){
                $(this).unbind('mousemove');
            });
            
        });
    </script>
</body>
</html>



6）模态对话框代码案例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Model Input Window</title>
    <style rel="stylesheet">
        .shadow{
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background:rgba(0,0,0,0.4);
            z-index:5;
        }
        .model{
            position:fixed;
            left:50%;
            top:50%;
            width:400px;
            height:300px;
            margin-top:-150px;
            margin-left:-200px;
            z-index:10;
            border:1px solid #ddd;
            background-color:slategrey;
        }
        .hide{
            display:none
        }

    </style>
</head>
<body>
    <button onclick="Add();">添加</button>
    <table border="1px;">
        <thead>
            <tr>
                <th>主机名</th>
                <th>IP</th>
                <th>端口</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td target="host">t1.com</td>
                <td target="ip">1.1.1.1</td>
                <td target="port">80</td>
                <td onclick="Edit(this);">Edit</td>
            </tr>
            <tr>
                <td>t2.com</td>
                <td>1.1.1.1</td>
                <td>8888</td>
                <td>Edit</td>
            </tr>
            <tr>
                <td>t3.com</td>
                <td>1.1.1.1</td>
                <td>9999</td>
                <td>Edit</td>
            </tr>
        </tbody>
    </table>

    <div class="shadow hide"></div>
    <div class="model hide">
        <form action="" method="get">
            <p><input type="text" id="host" name="host"></p>
            <p><input type="text" id="ip" name="ip"></p>
            <p><input type="text" id="port" name="port"></p>
            <input type="submit" value="提交" onclick="return SubmitForm();">
            <input type="button" value="取消" onclick="Hide();">
        </form>
    </div>

    <script src="jquery-3.2.1.js"></script>
    <script>
        function SubmitForm(){
            var flag = true;
            $(".model").find("input[type='text']").each(function(){
                var value = $(this).val();
                if(value.trim().length == 0){
                    flag = false;
                }
            });
            return flag;
        }
        
        function Edit(arg){
            $(".shadow, .model").removeClass("hide");

            var prevList = $(arg).prevAll();
            prevList.each(function(k, v){
                var text = $(this).text();
                var target = $(this).attr("target");
                $("#" + target).val(text);
            });
        }
        function Hide(){
            $(".shadow, .model").addClass("hide");
            $(".model").find("input[type='text']").val("");
        }
        function Add(){
            $(".shadow, .model").removeClass("hide");
        }
    </script>
</body>
</html>



7）clone方法应用的代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Clone</title>
    <style rel="stylesheet">
        .outer .section ul li{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="section">
            <ul>
                <li><div class="icons"><button onclick="Add(this);">+</button></div></li>
                <li><div class="inputs"><input type="checkbox"></div></li>
                <li><div class="inputs"><input type="text" value="IP"></div></li>
            </ul>
        </div>
    </div>

    <script src="jquery-3.2.1.js"></script>
    <script>
        function Add(arg){
            // 找到class = "section"的父级标签进行克隆
            var item = $(arg).parent().parent().parent().parent().clone();
            $(".outer").append(item);

            item.find("button").text("-");
            item.find("button").attr("onclick","Remove(this);");
        }

        function Remove(arg){
            $(arg).parent().parent().parent().parent().remove();
        }
    </script>
</body>
</html>


8）编辑框代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editing Panel</title>
    <style rel="stylesheet">

    </style>
</head>
<body>
    <div>
        <button onclick="CheckAll('#edit_mode', '#tb1')">全选</button>
        <button onclick="CheckReverse('#edit_mode', '#tb1')">反选</button>
        <button onclick="CheckCancel('#edit_mode', '#tb1')">取消</button>
        <button id="edit_mode" class="edit-mode" onclick="EditMode(this,'#tb1');">进入编辑模式</button>
    </div>

    <table border="1px;">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox"></td>
                <td edit="true">t1</td>
                <td edit="true">t11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td edit="true">t2</td>
                <td edit="true">t22</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td edit="true">t3</td>
                <td edit="true">t33</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">下线</td>
            </tr>

        </tbody>
    </table>

    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        STATUS = [
            {"id":1, "value": "在线"},
            {"id":2, "value": "下线"}
        ];

        // 监听是否已经按下ctrl键
        window.globalCtrlKeyPress = false;
        window.onkeydown = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = true;
            }
        };
        window.onkeyup = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = false;
            }
        };
        
        // 按下ctrl，联动表格中正在编辑的select
        function MultiSelect(ths){
            if(window.globalCtrlKeyPress){
                var index = $(ths).parent().index();
                var value = $(ths).val();
                $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                    $(this).parent().parent().children().eq(index).children().val(value);
                });
            }
        }

        $(function(){
            BindSingleCheck("#edit_mode", "#tb1");
        });

        function BindSingleCheck(mode, tb){
            $(tb).find(":checkbox").bind("click", function(){
                var tr = $(this).parent().parent();
                // 是否进入编辑模式
                if($(mode).hasClass("editing")){
                    // 是否已经选中
                    // 如果没有选中，进入编辑模式
                    // 如果已经选中，退出编辑模式
                    // checkbox默认事件优先于自定义事件
                    if($(this).prop('checked')){
                        RowIntoEdit(tr);
                    }else{
                        RowOutEdit(tr);
                    }
                }
            });
        }

        function CreateSelect(attrs, csses, option_dict, item_key, item_value, current_val){
            var sel = document.createElement("select");
            // {"k1":"v1", "k2":"v2"}
            // 在sel中设置属性<select k1='v1' k2='v2'>
            $.each(attrs, function(k, v){
                $(sel).attr(k, v);
            });
            // csses:{'fontSize':18px; color:red;}
            // sel中设置样式<select style="font-size:18px; color:red">
            $.each(csses, function(k,v){
                $(sel).css(k, v);
            });
            $.each(option_dict, function(k,v){
                var opt1 = document.createElement("option");
                var sel_text = v[item_value];
                var sel_value = v[item_key];
                
                if(sel_value == current_val){
                    $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected', true).appendTo($(sel));
                }else{
                    $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
                }
             });
        }

        function RowIntoEdit(tr){
            tr.children().each(function(){
                if($(this).attr("edit") == "true"){
                    if($(this).attr("edit-type") == "select"){
                        var select_val = $(this).attr("sel-val");
                        var global_key = $(this).attr("global-key");
                        // "STATUS" window[global_key]
                        // 生成select标签，并且将其设置默认值select_val
                        var select_tag = CreateSelect({"onchange":"MultiSelect(this);",});
                        $(this).html(select_tag);
                    }else{
                        var origin_value = $(this).text();
                        var temp = "<input value='" + origin_value + "'/>";
                        $(this).html(temp);
                    }
                }
            });
        }

        function RowOutEdit(tr){
            tr.children().each(function(){
                if($(this).attr("edit") == "true"){
                    if($(this).attr("edit-type") == "select"){
                        var new_val = $(this).children(":first").val();
                        var new_text = $(this).children(":first").find("option[value='" + new_val + "']").text();
                        $(this).attr("sel-val", new_val);
                        $(this).text(new_text);
                    }else{
                        var origin_value = $(this).children().first().val();
                        $(this).text(origin_value);
                    }
                }
            });
        }

        function CheckAll(mode, tb){
            // mode = #edit_mode => 用于检测用户是否点击进入编辑模式
            // tb = #tb1 => table中的tbody
            if($(mode).hasClass("editing")){

                $(tb).children().each(function(){
                    // tr为循环的当前行
                    var tr = $(this);
                    var checkbox = tr.children().first().find(":checkbox");

                    if(checkbox.prop("checked")){

                    }else{
                        checkbox.prop("checked", true);
                        // 进入编辑模式
                        RowIntoEdit(tr);
                    }
                });
            }else{
                $(tb).find(":checkbox").prop("checked", true);
            }
        }

        function CheckReverse(mode, tb){
            if($(mode).hasClass("editing")){
                $(tb).children().each(function(){
                    var tr = $(this);
                    var check_box = tr.children().first().find(":checkbox");
                    if(check_box.prop("checked")){
                       check_box.prop("checked", false);
                       RowOutEdit(tr);
                    }else{
                       check_box.prop("checked", true);
                       RowIntoEdit(tr);
                    }
                });
            }else{
                $(tb).children().each(function(){
                   var tr = $(this);
                   var check_box = tr.children().first().find(":checkbox");
                   if(check_box.prop("checked")){
                       check_box.prop("checked", false);
                   }else{
                       check_box.prop("checked", true);
                   }
                });
            }
        }

        function CheckCancel(mode, tb){
            if($(mode).hasClass("editing")){
                $(tb).children().each(function(){
                    var tr = $(this);
                    var check_box = tr.children().first().find(":checkbox");

                    if(check_box.prop("checked")){
                        check_box.prop("checked", false);
                        // 当前行退出编辑模式
                        RowOutEdit(tr);
                    }else{

                    }
                });
            }else{
                $(tb).find(":checkbox").prop("checked", false);
            }
        }

        function EditMode(ths, tb){
            if($(ths).hasClass("editing")){
                $(ths).removeClass("editing");
                $(tb).children().each(function(){
                   var tr = $(this);
                   var check_box = tr.children().first().find(":checkbox");
                   if(check_box.prop("checked")){
                       RowOutEdit(tr);
                   }else {

                   }
                });
            }else{
                $(ths).addClass("editing");
                $(tb).children().each(function(){
                    var tr = $(this);
                    var check_box = tr.children().first().find(":checkbox");
                    if(check_box.prop("checked")){
                        RowIntoEdit(tr);
                    }else{

                    }
                });
            }
        }


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


9）jQuery放大镜代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scale up</title>
    <style rel="stylesheet">
        *{
            margin:0;
            padding:0;
        }
        .outer{
            width:240px;
            height:157px;
            border: 2px dashed lightgray;
        }
        .outer .small-box{
            position:relative;
        }
        .outer .small-box .float{
            width:120px;
            height:78px;
            background-color:grey;
            opacity:0.4;
            position:absolute;
        }
        .outer .big-box{
            position:absolute;
            left:250px;
            top:0;
            width:400px;
            height:200px;
            overflow:hidden;
            border:1px solid lightcyan;
        }
        .outer .big-box img{
            position:absolute;
            z-index:10;
        }
        .hide{
            display:none;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="small-box">
            <div class="float hide"></div>
            <img src="picture/small.jpg">
        </div>
        <div class="big-box hide">
            <img src="picture/big.jpg">
        </div>
    </div>

    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(".small-box").mouseover(function(){
            $(".float").removeClass("hide");
            $(".big-box").removeClass("hide");
        });

        $(".small-box").mouseout(function(){
            $(".float").addClass("hide");
            $(".big-box").addClass("hide");
        });

        $(".small-box").mousemove(function(e){
            var _event = e || window.event;

            var small_box_height = $(".small-box").height();
            var small_box_width = $(".small-box").width();

            var float_panel_height = $(".float").height();
            var float_panel_width = $(".float").width();

            var float_panel_height_half = $(".float").height() / 2;
            var float_panel_width_half = $(".float").width() / 2;

            mouse_left = _event.clientX - float_panel_width_half;
            mouse_top = _event.clientY - float_panel_height_half;

            if(mouse_left < 0){
                mouse_left = 0;
            }else if(mouse_left > small_box_width - float_panel_width){
                mouse_left = small_box_width - float_panel_width;
            }

            if(mouse_top < 0){
                mouse_top = 0;
            }else if(mouse_top > small_box_height - float_panel_height){
                mouse_top = small_box_height - float_panel_height;
            }

            // 面板的移动
            $(".float").css("left", mouse_left + "px");
            $(".float").css("top", mouse_top + "px");

            // 确定大图片上移动的比例
            var percentX = ($(".big-box img").width() - $(".big-box").width()) / (small_box_width - float_panel_width);
            var percentY = ($(".big-box img").height() - $(".big-box").height()) / (small_box_height - float_panel_height);

            // 大图片上的移动
            $(".big-box img").css("left", -percentX * mouse_left + "px");
            $(".big-box img").css("top", -percentY * mouse_top + "px");

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





猜你喜欢

转载自blog.csdn.net/wayne12081213/article/details/79182180
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
LogN级别的区间查询算法(线段树), 你学会了吗
数论概论(英文版.第4版)
idea 更新后和新的直接安装前，都需要配置 idea64.exe.vmoptions 后再使用
CANOpen系列教程04_CAN总线波特率、位时序、帧类型及格式说明
Java序列化基础
java排序算法整理
异常：org.apache.ibatis.reflection.ReflectionException
（算法练习）——二路归并排序
go 闭包函数
好程序员web前端技术分享媒体查询
每日归档
更多
2024-05-21(8)
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022