几个简单常用的jQuery实例

最新推荐文章于 2024-07-04 12:16:35 发布

天为我蓝

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量598

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/paulwhw/p/9249077.html

版权

　　000模态框+事件委托+data实现编辑

　　000-1、效果如下

　　000-2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }

        .input-box {
            margin: 40px;
        }
    </style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>wanghw</td>
        <td>Coding</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>naruto</td>
        <td>螺旋丸</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Sasuke</td>
        <td>千鸟流</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
    <div class="input-box">
        <div>
            <label>姓名：
                <input type="text" id="name">
            </label>
        </div>
        <div>
            <label>爱好：
                <input type="text" id="hobby">
            </label>
        </div>
        <button id="cancel" type="button">取消</button>
        <button id="submit" type="button">提交</button>
    </div>


</div>
<script src="jquery-3.4.1.js"></script>
<script>
    // 定义一个清空输入框并且隐藏模态框的方法
    function hideModal() {
        // 1. 清空input的值
        $("#name,#hobby").val('');
        // 2. 隐藏起来
        $(".cover,.modal").addClass('hide');
    }

    // 定义一个显示模态框的方法
    function showModal() {
        // 1. 移除cover和modal的hide样式
        $(".cover,.modal").removeClass('hide');
    }

    // 开除按钮的功能
    $("table").on('click', '.fire', function () {
        // 点击开除按钮要做的事儿
        // 把当前行移除掉
        //this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
    });
    // 新增按钮的功能
    $("#add").click(function () {
        // 点击新增按钮要做的事儿
        showModal();
    });
    // 点击modal中的cancel按钮
    $("#cancel").click(function () {
        hideModal();
    });

    // 点击modal中的submit按钮
    $("#submit").click(function () {
            // 1. 获取用户输入的值
            var name = $("#name").val();
            var hobby = $("#hobby").val();
        // 判断是添加操作还是编辑操作
        var $editTr = $(this).data('xyh');
        if ( $editTr === undefined) {
            // 3. 创建一个tr标签，把数据塞进去
            var trEle = document.createElement("tr");
            $(trEle).append('<td><input type="checkbox"></td>');
            $(trEle).append('<td>' + name + '</td>');
            var tdTmp = document.createElement('td');
            tdTmp.innerText = hobby;
            $(trEle).append(tdTmp);
            $(trEle).append('<td><button class="fire">开除</button> <button class="edit">编辑</button></td>')
            // 4. 把上一步的tr追加到表格的tbody后面
            $('tbody').append(trEle);
        } else {
            // 进入编辑模式
            // 1. 取出用户之前编辑的那一行
            // 2. 修改对应td的文本
            $editTr.children().eq(1).text(name);
            $editTr.children().eq(2).text(hobby);
            // 3. 清空submit 按钮身上的data
            $('#submit').removeData('xyh');
        }
        // 2. 隐藏模态框，清空输入框
        hideModal();
    });
    // 点击编辑按钮要做的事儿
    $('body').on('click', '.edit', function () {
        // 1. 弹出模态框
        showModal();
        // 2. 把当前行的信息显示到模态框的input中
        // 2.1 获取当前行的姓名和爱好
        var $currentTr = $(this).parent().parent();
        var nameValue = $currentTr.children().eq(1).text();
        var hobbyValue = $currentTr.children().eq(2).text();
        // 第二种方式：
        // var name = $(this).parent().prev().prev().text();
        // var hooby = $(this).parent().prev().text();
        // 2.2 把上一步获取的值设置给input标签
        $('#name').val(nameValue);
        $('#hobby').val(hobbyValue);
        // 3. 给模态框中的提交按钮绑定一个data
        $('#submit').data('xyh', $currentTr);
    })
</script>

</body>
</html>

View Code

　　00模态框+事件委托

　　00-1、效果如下

　　00-2、代码如下　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0}

        .shadow{
            background-color: grey;
            opacity:0.5;
            position: fixed;
            top:0;
            left:0;
            right: 0;
            bottom: 0;
            z-index:66;
        }

        .bord{
            position: fixed;
            left:12%;
            top:10%;
            z-index: 88;
            width:400px;
            height:300px;
            background-color:white;
        }

        .hide{display: none}

        .error{
            color:red;
            font-size: 12px;
        }


    </style>

</head>
<body>

<button id="add">添加</button>
<table border="1px solid orange">
    <thead>
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>爱好</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>wanghw</td>
            <td>Coding</td>
            <td><button class="del">删除</button></td>
        </tr>
         <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>Naruto</td>
            <td>螺旋丸</td>
            <td><button class="del">删除</button></td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>Sasuke</td>
            <td>千鸟流</td>
            <td><button class="del">删除</button></td>
        </tr>

    </tbody>
</table>

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

<div class="bord hide">
    <div><input type="text" id="name" autocomplete="off"><span class="error"></span></div>
    <div><input type="text" id="hobby" autocomplete="off"><span class="error"></span></div>
    <div>
        <button id="cancel">取消</button>
        <button id="confirm">确定</button>
    </div>
</div>


<script src="jquery-3.4.1.js"></script>
<script>
    //新增
    $('#add').click(function(){
        $('.shadow,.bord').removeClass('hide');
    });
    //取消
    $('#cancel').click(function () {
       $('.shadow,.bord').addClass('hide');
       //再把input的内容删除
        $('#name,#hobby').val('');
    });
    //确定
    $('#confirm').click(function(){
        //获取用户的输入并校验用户输入的内容不能为空
        var name = $('#name').val();
        var hobby = $('#hobby').val();
        if(name.trim().length===0){
            $('#name').next().text('用户名不能为空');
            return;
        }else{
             $('#name').next().text('');
        }
        if(hobby.trim().length===0){
            $('#hobby').next().text('爱好不能为空');
            return;
        }else{
            $('#hobby').next().text('');
        }
        //组合一行表格并添加到table中
        var addStr = '<tr><td><input type="checkbox"></td><td>'+name+'</td><td>'+hobby+'</td><td><button class="del">删除</button></td></tr>'
        //添加
        $('tbody').append(addStr);
        //再把input的内容删除
        $('#name,#hobby').val('');
        //关闭模态对话框
        $('.shadow,.bord').addClass('hide');
    });
    //删除
    //注意这种方法~新增的标签没有删除的功能！
    // $('.del').click(function(){
    //     //$(this)表示的是当前的删除按钮
    //     $(this).parent().parent().remove();
    // })

    //需要用事件委托
    //新增的删除按钮没有被绑定上点击事件
    //因为绑定点击事件的动作在页面加载完成后就已经过去了
    //给新增的删除按钮也具备点击事件~需要用到时间委托
    //因为tr标签也是新加的，所以需要给tbody加事件委托
    //现在最常用on方法！
    $('tbody').on('click','.del',function(){
        //注意这里的$(this)依然是class为del的button！
        $(this).parent().parent().remove();
    });

    //也可以用delegate做委托 —— jquery的delegate底层其实也是利用了on方法
    //现在常用on的方法
    // $('tbody').delegate('.del','click',function(){
    //     $(this).parent().parent().remove();
    // })

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

View Code

　　0、多选、反选、取消　

　　0-1、效果如下

　　0-2、代码如下

<!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>端口</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.2</td>
                <td>81</td>
            </tr><tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.3</td>
                <td>83</td>
            </tr>

        </tbody>

    </table>





    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkall() {
            $('#tb :checkbox').prop('checked',true);
        }

        function cancleall() {
            $('#tb :checkbox').prop('checked',false)
        }

        function reverseall() {
            $('#tb :checkbox').each(function () {
             //this代指当前循环的每一个元素,这个this其实是dom对象
            //1-dom的写法
//            if(this.checked){
//                this.checked = false;
//            }else {
//                this.checked = true;
//            }

            //2-jQuery的写法
//            if($(this).prop('checked')){
//                $(this).prop('checked',false);
//            }else {
//                $(this).prop('checked',true);
//            }

            //3-三元运算
            var v = $(this).prop('checked')? false:true;
            $(this).prop('checked',v)

            })

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

View Code

　　　一、点赞效果：

　　1.1 效果：

　　1.2 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            cursor: pointer;
        }

        .item{
            border: 1px red solid;
            height:555px;
            width:555px;
            position: fixed;
            left:33%;
            top:10%;
        }

        .content{
            width:36px;
            //background-color: yellowgreen;
            /*position必须是relative*/
            position: relative;
            top:123px;
            left:123px;
        }

    </style>
</head>
<body>
    <div class="item">
        <div class="content">
            <span>赞</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.content').click(function () {
            var span = document.createElement('span');
            var top = 0;
            var fontSize = 15;
            var right = 0;
            var opacity = 1;

            $(span).text('+1');
            $(span).css('color','green');
            $(span).css('position','absolute');
            $(span).css('top',top + 'px');
            $(span).css('right',right + 'px');
            $(span).css('fontSize',fontSize + 'px');
            $(span).css('opacity',opacity);

            var f = setInterval(function () {
                top -= 5;
                fontSize += 5;
                right -= 5;
                opacity -= 0.1;

                $(span).css('top',top + 'px');
                $(span).css('right',right + 'px');
                $(span).css('fontSize',fontSize + 'px');
                $(span).css('opacity',opacity);

                if(opacity < 0){
                    //清除定时器
                    clearInterval(f);
                    //清除新建的span标签
                    $(span).remove();
                }

            },50);

            $(this).append(span);

        })


    </script>


</body>
</html>

View Code

　　二、选项卡功能

　　2.1 效果：

　　2.2 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            margin:0 auto;
            border: 1px red solid;
            height:555px;
            width:555px;
            position: fixed;
            left:30%;
        }

        .item{
            height:50px;
        }

        .item .item-c{
            float: left;
            width:30%;
            border:1px greenyellow solid;
            height:45px;
            text-align: center;
            line-height:45px;
            cursor: pointer;
        }

        .content .cc{
            height:300px;
            text-align: center;
            line-height:300px;
            border: 1px blue solid;
        }

        .hide{
            display:none;
        }

        .active{
            background-color: #2b84da;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="item">
            <div a="1" class="item-c active">标题1</div>
            <div a="2" class="item-c">标题2</div>
            <div a="3" class="item-c">标题3</div>
        </div>
        <div class="content">
        <div b="1" class="cc">内容1</div>
        <div b="2" class="cc hide">内容2</div>
        <div b="3" class="cc hide">内容3</div>
        </div>
    </div>


    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item-c').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>

属性方式实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            margin:0 auto;
            border: 1px red solid;
            height:555px;
            width:555px;
            position: fixed;
            left:30%;
        }

        .item{
            height:50px;
        }

        .item .item-c{
            float: left;
            width:30%;
            border:1px greenyellow solid;
            height:45px;
            text-align: center;
            line-height:45px;
            cursor: pointer;
        }

        .content .cc{
            height:300px;
            text-align: center;
            line-height:300px;
            border: 1px blue solid;
        }

        .hide{
            display:none;
        }

        .active{
            background-color: #2b84da;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="item">
            <div class="item-c active">标题1</div>
            <div class="item-c">标题2</div>
            <div class="item-c">标题3</div>
        </div>
        <div class="content">
        <div class="cc">内容1</div>
        <div class="cc hide">内容2</div>
        <div class="cc hide">内容3</div>
        </div>
    </div>


    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item-c').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            //索引方式实现 index获取索引！
            var v = $(this).index();
            $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
        })

    </script>

</body>
</html>

索引方式实现

　　三、拖动框体

　　3.1 效果：

　　3.2 代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 400px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 100px;"></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

　　四、登陆验证(规定用户名及密码必须只能是字母跟数字的组合)

　　4.1 效果如下：

　　4.2 代码如下：

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

    <form id="f1" action="jq1.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(){
             //找到所有input的type=submit的input标签
            // 当页面“元素”加载完毕后，才执行
            $(':submit').click(function () {
                $('.error').remove();
                //注意这里flag的位置
                var flag = true;
                //##遍历每一个input输入框
                $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                    var v = $(this).val();
                    var n = $(this).attr('tex');
                    //规定只能是字母跟数字的组合
                    var reg = /^\w+$/;
                    if(v.length <= 0 || !(reg.test(v))){
                        flag = false;
                        //在相应的input后面添加一个span标签用于提示
                        var tag = document.createElement('span');
                        tag.className = "error";
                        tag.innerHTML = n + "为空或者格式错误";
                        $(this).after(tag);
                    }
                });
                //如果把return false放到循环里，只让当前的循环终止，要让整个click终止得在外面加return false
                return flag;
        });

    });

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

View Code

　　五、左侧菜单

　　5.1效果如下

　　5.2代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        *{padding:0;margin:0;}

        .hide{display:none}

        #left{height: 666px;width:333px;background-color: #58619a;}

        .sanguo div,.xiyou div,.shuihu div
        {cursor: pointer;
            color: white;
            /*background-color: #2aabd2;*/
            text-align: center;
            font-size: 28px;

        }

        .top:hover{
            background-color: orangered;
        }

        .sanguo{
            padding-top: 23px;
        }

        .content{
            background-color: #5cb85c;
        }

    </style>

</head>
<body>
<div id="left">
    <div class="sanguo">
        <div class="top" style="">***三国演义***</div>
        <div class="content">
            <div>刘备</div>
            <div>关羽</div>
            <div>张飞</div>
        </div>
    </div>
    <div class="xiyou">
        <div class="top">***西游记***</div>
        <div class="content hide">
            <div>孙悟空</div>
            <div>唐僧</div>
            <div>猪八戒</div>
            <div>白骨精</div>
        </div>
    </div>
    <div class="shuihu">
        <div class="top">***水浒传***</div>
        <div class="content hide">
            <div>武松</div>
            <div>松江</div>
            <div>公孙胜</div>
            <div>鲁智深</div>
            <div>高俅</div>
        </div>
    </div>
</div>



<script src="jquery-3.4.1.js"></script>
<script>
    $('.top').click(function(){

        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        //分为两步：当前点击的标签的下一个标签移除hide类；
        // 然后找到parent标签的兄弟们下面包含content类的标签给它加上hide类
        // $(this).next().removeClass('hide');
        // $(this).parent().siblings().find('.content').addClass('hide');
    })

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

View Code

　　六、模态对话框

　　6-1 效果如下：

　　6-2代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
        a button{
            cursor: pointer;
        }

        .hide{
            display:none;
        }

        .c1{
            border: 1px red solid;
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            z-index: 9;
            opacity:0.5;/* 透明度*/
            background-color: grey;
        }

        .c2{
            border: 1px red solid;
            position:fixed;
            left:40%;
            top:20%;
            height:323px;
            width:423px;
            z-index: 10;
            background-color: white;
        }
    </style>

</head>
<body>
    <button id="m1">模态对话框</button>
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="port">90</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="port">91</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.3</td>
            <td target="port">93</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.4</td>
            <td target="port">94</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>

    </table>

    <div id="i1" class="c1 hide"></div>
    <div id="i2" class="c2 hide">
        <input type="text" name="hostname">
        <input type="text" name="port">
        <button id="f1">返回</button>
        <button id="f2">确定添加</button>
    </div>


    <script src="jquery-1.12.4.js"></script>
    <script>
        //0.删除 删除当前的tr
        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        //1.id选择器直接改对应id的class值就行了！
        $('#m1').click(function () {
            $('#i1,#i2').removeClass('hide');
        });
        $('#f1').click(function () {
            $('#i1,#i2').addClass('hide');
            //返回前清空所有的输入框
            $('#i2 input[type="text"]').val('');
        });

        //2.编辑 将那一行的值传给input
        $('.edit').click(function () {
            $('#i1,#i2').removeClass('hide');
            var tds = $(this).parent().prevAll();
            tds.each(function () {
               //this代指每个td
               //获取td的target属性值
               var n = $(this).attr('target');
               //获取td中的内容
               var text = $(this).text();
               //实际中会用到——实际中增加一列的话不需要调整
               //拼接字符串的方式设置################注意input里的name属性的值要跟td标签里target的属性值一样！
               var a1 = '#i2 input[name="';
               var a2 = '"]';
               var temp = a1 + n + a2;
               $(temp).val(text);
             });

//            $('#i2 input[name="hostname"]').val(host);
//            $('#i2 input[name="port"]').val(port);
        });


        //3. 确定
        $('#f2').click(function () {
            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            var td2 = document.createElement('td');

            var hostname = $('#i2 input[name="hostname"]').val();
            var port = $('#i2 input[name="port"]').val();

            td1.innerHTML = hostname;
            td2.innerHTML = port;
            if(hostname === '' || port === ''){
                alert('不能输入空值！');
                return;
            }else {
                $(tr).append(td1,td2);
                $('#tb').append(tr);
            }
            //清空输入框
            $('#i2 input[name="hostname"]').val('');
            $('#i2 input[name="port"]').val('');

            $('#i1,#i2').addClass('hide');

            });

    </script>

</body>
</html>

View Code

　　七：jq3-delegate(委托)方法例子

　　7-1效果如下：

　　7-2代码如下：

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

        //bind不行
//        $('ul li').bind('click',function () {
//            var v = $(this).text();
//            alert(v);
//        })

            //默认on不行
//        $('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

　　八、单击展示、双击隐藏

　　8-1、效果如下：

　　8-2、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            background-color: yellowgreen;
            margin:10px 0 0 0;
            display: none;
            height:123px;
        }

    </style>
</head>
<body>

    <button id="btn">单击展示;双击隐藏</button>
    <div></div>
    <div></div>
    <div></div>


    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                $('div').css('display','block');
                $('div').html('div展示了')
            });
            //双击隐藏
            $('#btn').dblclick(function () {
                $('div').css('display','none')
            })

        })
    </script>

</body>
</html>

View Code

　　九、animate方法——常用

　　9-1.效果如下

　　9-2代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         #box{
            width:80px;
            height:50px;
            border: 1px red solid;
            display:block;
            background-color: #2b84da;
            position: absolute;
            top:35px;
            left:0;
        }

    </style>
</head>
<body>
    <button id="btn">开始</button>
    <button id="stop">停止</button>
    <div id="box">Naruto</div>



    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                $('#box').animate({
                    width:'100px',
                    height:'100px',
                    left:'80px'
                },1500).animate({top:'95px'},1500)
            });
            $('#stop').click(function () {
                $('#box').stop();
            })

        });

    </script>



</body>
</html>

View Code

　　十、fadeToggle方法——常用

　　10-1、效果如下：

　　10-2、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         #box{
            width:100px;
            height:100px;
            border: 1px red solid;
            display:none;
            background-color: #2b84da;
        }

    </style>
</head>
<body>
    <button id="btn">fadeToggle方法</button>
    <div id="box"></div>


    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {

            $('#btn').hover(function () {
              $('#box').fadeToggle(1000);
            })
        })

    </script>



</body>
</html>

View Code

　　十一、slideToggle方法

　　11-1、效果如下

　　11-2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         #box{
            width:100px;
            height:100px;
            border: 1px red solid;
            display:none;
            background-color: #2b84da;
        }

    </style>
</head>
<body>
    <button id="btn">slide方法</button>
    <div id="box"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
//            $('#btn').hover(function () {
//                $('#box').slideDown(1000);
//            },function () {
//                $('#box').slideUp(1000);
//
//            })
//            这段代码与上面的效果一样
            $('#btn').hover(function () {
              $('#box').slideToggle(1000);
            })
        })

    </script>



</body>
</html>

View Code

　　十二、toggle方法

　　12-1、效果如下

　　12-2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:100px;
            height:100px;
            border: 1px red solid;
            display:none;
        }


    </style>
</head>
<body>
    <button id="btn">显示</button>
    <div id="box"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        //toggle方法改变display方式达到显示与隐藏的效果
        var flag = true;
        $('#btn').click(function () {
            if(flag){
                $('#box').toggle();
                flag = false;
                $('#btn').text('隐藏');
            }
            else{
                $('#box').toggle();
                flag = true;
                $('#btn').text('显示');
            }
        });
    </script>



</body>
</html>

View Code

　　十三、弹出小广告

　　13-1、效果如下

　　13-2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:130px;
            height:140px;
            position: absolute;
            right:10px;
            bottom: 20px;
            display: none;
        }

        img{
            height:100%;
            width:100%;
        }

    </style>
</head>
<body>
    <div id="box" >
        <img src="naruto.jpeg" alt="Naruto" >
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
                $(this).fadeOut(1000);
            })

        })

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

View Code

　14、jq5-操作input的value值-重要

　　14-1、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wanghw</title>
    <style>
        /*p{*/
            /*border: 1px blue solid;*/
        /*}*/

    </style>
</head>
<body>
    <form action="">
        <p>
            <input type='text' name="input_text" id="" placeholder="请输入内容" > <input type="button" value="点击">
        </p>

        <p>
            性别：男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="2" />
        </p>

        <p>
            爱好：足球<input type="checkbox" name="favor" checked="checked" value="a"/>
            篮球 <input type="checkbox" name="favor" checked="checked" value="b" />
            网球 <input type="checkbox" value="c" name="favor"/>
        </p>

        <p>
            <input type="reset" value="reset"/>
        </p>

        <p>
            上传文件：<input type="file" >
        </p>

        <p>
        <select id="city" name="select_whw">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">天津</option>
        </select>
        </p>

        <p>
            <!--如果label的for与input的id一样——点击label光标会直接到达input里面去-->
            <label for="user_name">用户名</label>
            <input id="user_name" type="text" value="">
        </p>

        <!--<p>-->
            <!--输入框 <textarea name="text_area"  cols="30" rows="10"></textarea>-->
        <!--</p>-->

    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.获取单选框被选中的value值
            var a = $('input[type=radio]:checked').val();
            console.log(a);

            //2.复选框被选中的value 仅仅获取到第一个被选中的值
            var b = $('input[type=checkbox]:checked').val();
            console.log(b);

            //3.下拉列表被选中的值
            var c = $('#city option:selected').text();
            console.log(c);

            //4.设置value 设置选中的项目 默认选中第一个 单选
            $('input[type=radio]').val('222');
            console.log($('input[type=radio]').val());

            //5.设置复选框——效果是:b跟c被选中了！
            $('input[type=checkbox]').val(['b','c']);

            //6.设置下拉列表 这里必须用select——效果是:出现1对应的text
            $('select').val(['1'])


        })

    </script>

</body>
</html>

jquery操作input的value值

　15、jq的文档操作实例——重要

　　15-1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button id="btn">复制</button>
    <br>
    <button id="btn1">替换</button>
    <br>
    <span id="sp">YES！</span>

    <ul></ul>

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

        //append相关方法######
        //append相关方法一
        var obj = document.createElement('li');
        obj.innerHTML = '哈哈';
        $('ul').append(obj);
        //append相关方法二
        $('ul').append('<li>Naruto</li>');
        //append相关方法三 直接插入jQuery对象
        //如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
        $('ul').append($('#sp'));
        //append相关方法四 appendTo方法——子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
        $('<a href="#">HelloWorld</a>').appendTo($('ul'));

        //prepend方法——与append方法一样，######
        //只不过append是向后插入元素，prepend是在前面插入

        //after方法 在匹配的元素之后插入内容 是兄弟关系######
        $('ul').after('obj');

        //before方法 在匹配的元素之后插入内容 是兄弟关系######
        $('ul').before('obj');

        //clone方法 复制######
        // 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
        // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
        //
        $('#btn').click(function () {
            //如果这里不加true，复制出来的按钮没有“复制"的能力！
             var o = $(this).clone(true);
            $(this).after(o);

        });

        //替换操作 replaceWith ######
        //方式一：
        $('#btn1').replaceWith('<a>哈哈哈哈哈哈</a>');
        //方式二:注意 要是用这种方法 #btn的元素会消失
        //$('#btn1').replaceWith($('#btn'));

        //删除方法：
        //一、remove() 删除节点后，事件也会删除（简言之，删除了整个标签）
        //$('ul').remove();

        //二、detach() 删除节点后，事件会保留
        //var $btn = $('button').detach()
        //此时按钮能追加到ul中
        //$('ul').append($btn)

        //三、empty(): 清空元素中的所有后代节点
        //清空掉ul中的子元素，保留ul
        //$('ul').empty()

    </script>

</body>
</html>

jquery的文档操作实例

　16、jq的表单事件

　　16-1、代码

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

    <form action="https://www.baidu.com">
        <select name="sweets" id="se" multiple="">
            <option value="">巧克力</option>
            <option value="">糖果</option>
            <option value="" selected="">焦糖</option>
            <option value="">曲奇饼</option>
            <option value="">烧饼</option>
            <option value="" selected="">麦香饼</option>
            <option value="">巧克力</option>
        </select>

        <input type="text" placeholder="hello" id="target" />
        <input type="submit" value="123">
    </form>

    <textarea id="other">
        Trigger the handler
    </textarea>

    <div class="show"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.change事件
            //此事件仅限于input textarea select
            $('#se').change(function () {
                var text = $('#se option:selected').text();
                $('.show').text(text);
            });

            //2.select事件
            //仅限于用在input[type='text'] 与textarea
            $('#other').select(function () {
                console.log($(this).text());
            });

            //3
            $('form').submit(function (e) {
                //加上这句 不会触发action了——阻止默认事件
                //跟服务端有很大挂钩，与ajax有关
                e.preventDefault();
                alert(1111);
            })
        })


    </script>


</body>
</html>

View Code

“回到顶部”：滚轮向下移动100px显示，点击返回顶部

　　17-1、效果如下

　　17-2、代码如下　　

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

    <style>
        .c1{
            height: 400px;
            background-color: orangered;
        }
        .c2{
             height: 400px;
            background-color: orchid;
        }

        .huidao{
            width: 100px;
            height: 100px;
            position: fixed;
            left:40px;
            bottom:40px;
            background-color: yellow;
            cursor: pointer;
        }

        .hide{
        display: none;
        }

    </style>


</head>
<body>

<div>顶部位置</div>

<div class="c1"></div>
<div class="c2"></div>
<div class="c1"></div>
<div class="c2"></div>


<div id="top" class="huidao hide">
    回到顶部
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    $(window).scroll(function () {
        // console.log($(window).scrollTop());
        if($(window).scrollTop()>100){
            $('#top').removeClass('hide');
        }else{
            $('#top').addClass('hide');
        }

        $('#top').click(function () {
            $(window).scrollTop(0);
        })

    })

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

View Code

　　18、clone方法

　　18-1、效果如下：

　　18-2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button class="btn">屠龙宝刀</button>


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

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

        //clone里面加true的话也会clone方法，
        //不加true的话只复制标签不clone方法
        var b = $(this).clone(true);
        $(this).after(b);

    })


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

View Code

　　19、hove事件示例

　　19-1、效果如下：

　　19-2、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>hover示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
      height: 40px;
      width: 100%;
      background-color: #3d3d3d;
      position: fixed;
      top: 0;
    }

    .nav ul {
      list-style-type: none;
      line-height: 40px;
    }

    .nav li {
      float: left;
      padding: 0 10px;
      color: #999999;
      position: relative;
    }
    .nav li:hover {
      background-color: #0f0f0f;
      color: white;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .son {
      position: absolute;
      top: 40px;
      right: 0;
      height: 50px;
      width: 100px;
      background-color: #00a9ff;
      display: none;
    }

    .hover .son {
      display: block;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li>登录</li>
    <li>注册</li>
    <li>购物车
      <p class="son hide">
        空空如也...
      </p>
    </li>
  </ul>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
//hover事件（不是原生dom的那个hover，并且js里面没有onhover事件，这个是jQuery的hover事件，是jQuery封装的，原生js里面没有）

$(".nav li").hover(
　//hover事件分为两步，事件中有两个匿名函数
  //第一步：鼠标移动上去
  function () {
    $(this).addClass("hover");
  },
  //第二步：鼠标移走
  function () {
    $(this).removeClass("hover");
  }
);
</script>
</body>
</html>

View Code

　　20、input值变化事件

　　20-1、效果：

　　20-2、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">

<script src="jquery-3.2.1.min.js"></script>
<script>
  /*
  * oninput是HTML5的标准事件
  * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
  * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
  * */
  $("#i1").on("input propertychange", function () {  //可以支持IE9以下的版本
    console.log($(this).val());
  })
</script>
</body>
</html>

View Code

　　21、shift按键批量操作

　　21-1、效果如下

　　21-2、代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>


<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>wanghw</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>naruto</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>sasuke</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>whw</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>www</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<script src="jquery-3.4.1.js"></script>
<script>
    //按下shift就进入批量操作的模式
    var flag = false;
    // shift按键被按下的时候，键盘上每个按键都对应有一个keyCode值
    $(window).keydown(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = true;
        }
    });
    // shift按键被抬起的时候
    $(window).keyup(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = false;
        }
    });
    // select标签的值发生变化的时候
    $("select").change(function (event) {
        // 如果shift按键被按下，就进入批量编辑模式
        // shift按键对应的code是16
        // 判断当前select这一行是否被选中
        console.log($(this).parent().siblings().first().find(":checkbox"));
        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
        console.log(isChecked);
        if (flag && isChecked) {
            // 进入批量编辑模式
            // 1. 取到当前select选中的值
            var value = $(this).val();//别忘了this是个dom对象，要用$(this)包裹起来变成jQuery对象
            // 2. 给其他被选中行的select设置成和我一样的值
            // 2.1 找到那些被选中行的select //被选中的行就是$('input:checked')
            var $select = $("input:checked").parent().parent().find("select")  //一般jQuery中的变量名，我们在变量名前面加一个$符号区分一下
            //var $select = $('tr:has(input:checked)').find('select') 这个也可以，选择某些标签的方法有很多昂
            // 2.2 给选中的select赋值
            $select.val(value);
        }
    });
</script>
</body>
</html>