day15 js jquery - 润新知

day15 js jquery

文本操作：

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

</head>
<body>

<div class="outer">
    <span class="num">23</span>
</div>
<button>click</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $("button").click(function () {

        var $val=$(".outer .num").html();
        $(".outer .num").html(parseInt($val)+1);

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

属性操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        #i3{
            color: green;
        }
    </style>
</head>
<body>

<p class="c1 c2" id="i1" egon="9000">this is P</p>
<p id="i3">this is P</p>

<input type="checkbox" >

<script>
    // 取某一个属性的值
    $(".c1").attr("id");
    $(".c1").attr("egon");

    // 赋值操作
     $(".c1").attr("id","i2");
     $(".c1").attr("egon",9999);
   // css的样式操作
   $("#i3").click(function () {
       // $(this).css("color","red");
       $(this).css({"color":"red","fontSize":"32px"})
   })

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

Iquery操作：

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

</head>
<body>

<div class="outer">
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>

   <script src="jquery-3.2.1.min.js"></script>
    <script>

        // jquery两种循环方式
        // 方式1：$.each(循环对象,function(){
        //     console.log("OK")
        // });

        // var arr=[111,222,333];
        //
        // var info={"name":"egon","age":9000};
        //
        // $.each(info,function (i,j) {
        //    console.log(i); // 下标
        //    console.log(j); // 下标对应的值
        // })

        // 方式2：
        $(".outer p").each(function () {
            console.log($(this).html()) // $(this)指的是每一次循环的对象
        })

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

表格操作：

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

<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<hr>
<table border="1">
    <tr>
        <td><input type="checkbox"></td>
        <td>张三</td>
        <td>23</td>
        <td>s5</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>23</td>
        <td>s5</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>23</td>
        <td>s8</td>
    </tr>
</table>

<script src="jquery-3.2.1.min.js"></script>

<script>

    // 全选事件
    $(".select_all").click(function () {
        // 方式1：
        // $(":checkbox").each(function () {
        //     $(this).prop("checked",true)
        // })

        // 方式2
        $(":checkbox").prop("checked",true)

    });

    // 取消事件
    $(".cancel").click(function () {

         $(":checkbox").prop("checked",false)
    });

    // 反选事件

    $(".reverse").click(function () {
        $(":checkbox").each(function () {

           // if($(this).prop("checked")){
           //     $(this).prop("checked",false)
           // }
           // else {
           //      $(this).prop("checked",true)
           // }

            // 方式2：
            $(this).prop("checked",!$(this).prop("checked"))

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

事件绑定：

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

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button>Add</button>
<script src="jquery-3.2.1.min.js"></script>

<script>
     // li的弹出文本事件
    // $("ul li").click(function () {
    //     alert($(this).html())
    // });

    // $("ul li").on("click",function () {
    //      alert($(this).html())
    // });

     // 事件委派

     $("ul").on("click","li",function () {
         alert($(this).html())
     });

    // button的追加子元素吧事件
    $("button").click(function () {

        $("ul").append("<li>444</li>")
    })
</script>
</body>
</html>

节点操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 400px;
            height: 300px;
            background-color: darkgrey;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

<div class="outer">

    <h4>hello world</h4>
    <p>123</p>
    <p>456</p>
    <p>789</p>

</div>

<hr>
<button class="add">Add</button>
<button class="del">删除</button>
<button class="set">替换</button>

<script>

     // 添加节点操作
    $(".add").click(function () {
        // 创建一个img标签对象

        var $img=$("<img>");    //   <img>
        $img.attr("src","egg.jpg");

        console.log($img[0]);

        // 添加到指定节点中： $(父标签).append(添加的子标签)

       // $(".outer").append($img);
       // $img.appendTo(".outer")
        $(".outer").after($img)

    });

    // 删除节点操作
    $(".del").click(function () {
        $(".outer").remove()
        //$(".outer").empty()     // empty 清空
    });

    // 替换节点
    $(".set").click(function () {
        var $img=$("<img>");    //   <img>
        $img.attr("src","egg.jpg");
        $(".outer p").eq(1).replaceWith($img)

    });

    // 拷贝节点
    var $copy=$(".outer").clone();
    console.log($copy[0])

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

Clone实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

<div class="style_box">
    <div class="item">
        <button class="add">+</button><input type="text">
    </div>

</div>

<script>
    // 添加事件
    $(".item .add").click(function () {

        var $clone=$(this).parent().clone();
        $clone.children(".add").html("-").attr("class","del");

        $(".style_box").append($clone);

    });

    // 删除事件(事件委派)

    $(".style_box").on("click",".del",function () {

        console.log($(this));

        $(this).parent().remove()
    })
</script>
</body>
</html>

表格的增删改操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          *{
            margin: 0;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.6;
        }

        .model{
            position: fixed;
            left:200px;
            top: 100px;
            width: 600px;
            height: 300px;
            background-color: white;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<button class="addBtn">添加</button>
<table border="1">
     <thead>
           <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
        <th>操作</th>
    </tr>
     </thead>

    <tbody id="tbody">
         <tr>
        <td>小高</td>
        <td>23</td>
        <td>s19</td>
        <td>
            <button class="del">删除</button>
             <button class="del">编辑</button>
        </td>
    </tr>
         <tr>
            <td>小李</td>
            <td>23</td>
            <td class="active">s18</td>
            <td><button class="del">删除</button>
                <button class="del">编辑</button>
            </td>
         </tr>
         <tr>
            <td>小贾</td>
            <td>28</td>
            <td>s19</td>
            <td>
                <button class="del">删除</button>
                <button class="del">编辑</button>
            </td>
         </tr>
    </tbody>

</table>

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

<div class="model hide">
    <h3>添加学生信息：</h3>
    <form action="">
        <p>姓名 <input type="text" class="item"></p>
        <p>年龄 <input type="text" class="item"></p>
        <p>班级 <input type="text" class="item"></p>
        <input type="button" value="submit" id="subBtn">
    </form>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>

    // 删除事件
   $(".del").click(function () {
       console.log($(this));
       $(this).parent().parent().remove()
   });

    // 添加事件
    $(".addBtn").click(function () {
          $(".shade").show();
          $(".model").show()
    });

    // $("#subBtn").click(function () {
    //      // 关闭对话框
    //      $(".shade").hide();
    //      $(".model").hide();
    //      // 获取用户输入值
    //      var arr=[];
    //      var $tr=$("<tr>");
    //      $(".item").each(function () {
    //          console.log($(this));
    //          arr.push($(this).val());
    //
    //          $td=$("<td>"); // <td></td>
    //          $td.html($(this).val());
    //          $tr.append($td)
    //      });
    //      $tr.append('<td><button class="del">删除</button></td>');
    //      console.log($tr[0]);
    //
    //      // 构建tr标签
    //
    //      $("#tbody").append($tr)
    //
    //
    //
    //
    //
    // })

     $("#subBtn").click(function () {
         // 关闭对话框
         $(".shade").hide();
         $(".model").hide();
         // 获取用户输入值
         var arr=[];

         $(".item").each(function () {
             console.log($(this));
             arr.push($(this).val());

         });
         console.log(arr);

         // 构建tr标签
         s='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td><button class="del">删除</button></td></tr>'
         $("#tbody").append(s)

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

动画效果1：

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

</head>
<body>

<div class="c1">DIV</div>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script src="jquery-3.2.1.min.js"></script>

<script>
    $(".xianshi").click(function () {
        // $(".c1").removeClass("hide")
       $(".c1").show(1000);

    });

     $(".yincang").click(function () {

         $(".c1").hide(1000);
    });

       $(".qiehuan").click(function () {

         $(".c1").toggle(1000)
    });
</script>
</body>
</html>

动画效果2：

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

</head>
<body>

<div class="c1">
    <div class="title">菜单1</div>
    <div class="con">
        <p>111</p>
        <p>111</p>
        <p>111</p>
    </div>
</div>
<hr>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script src="jquery-3.2.1.min.js"></script>

<script>
    $(".xianshi").click(function () {

       $(".con").slideDown(2000)

    });

     $(".yincang").click(function () {
       $(".con").slideUp(2000)
    });

      $(".qiehuan").click(function () {
       $(".con").slideToggle(1000)
    });
</script>
</body>
</html>

动画效果3：

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

    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>

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

<hr>
<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<script src="jquery-3.2.1.min.js"></script>

<script>
    $(".xianshi").click(function () {

       $(".c1").fadeIn(2000)

    });

     $(".yincang").click(function () {
       $(".c1").fadeOut(2000)
    });

      $(".qiehuan").click(function () {
      // $(".c1").fadeToggle(2000)
      // $(".c1").fadeTo(2000,0.2)
    });
</script>
</body>
</html>

Offset偏移量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .c1,.c2{
            width: 200px;
            height: 200px;
        }
        .c1{
            background-color: darkgrey;
        }
        .c2{
            background-color: cadetblue;
        }
        .c3{
            position: relative;
        }

    </style>
</head>
<body>

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

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 获取偏移量
    // console.log($(".c1").offset().left);
    // console.log($(".c1").offset().top);
    console.log($(".c2").offset().left);
    console.log($(".c2").offset().top);

    console.log($(".c2").position().left);
    console.log($(".c2").position().top);   // 不可以设置

    // 设置偏移量
    //$(".c2").offset({top:200,left:200})

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

返回顶部：

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

    <style>
        *{
            margin: 0;
        }
        .c1{
            width: 100%;
            height: 2000px;
            background-color: darkgrey;

        }

        .returnTop{
            width: 100px;
            height: 46px;
            background-color: darkcyan;
            color: white;
            text-align: center;
            line-height: 46px;
            position: fixed;
            bottom: 20px;
            right: 20px;
                }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="c1">
    <h1>yuan</h1>
</div>

<div class="returnTop hide">返回顶部</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 返回顶部事件
    $(".returnTop").click(function () {

      $(window).scrollTop(0)

    });

    // 监听滚动条的位置

    $(window).scroll(function () {

       console.log($(window).scrollTop());
        var $current_position=$(window).scrollTop()

        if($current_position>200){

           $(".returnTop").show()
        }
        else {
             $(".returnTop").hide()
        }
    })

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

模态对话框：

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

    <style>
        .backend{
            width:100%;
            height: 2000px;
            background-color: lightblue;
        }
        *{
            margin: 0;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.6;
        }

        .model{
            position: fixed;
            left:200px;
            top: 100px;
            width: 600px;
            height: 300px;
            background-color: white;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="backend">
<button>注册</button>
</div>

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

<div class="model hide">
    <h3>添加学生信息：</h3>
    <form action="">
        <p>姓名 <input type="text"></p>
        <p>年龄 <input type="text"></p>
        <p>班级 <input type="text"></p>
        <input type="button" value="submit" id="subBtn">
    </form>
</div>

<script src="jquery-3.2.1.min.js"></script>

<script>
    $("button").click(function () {
        $(".shade").show();
        $(".model").show()
    });

    $("#subBtn").click(function () {
         $(".shade").hide();
         $(".model").hide()
    })

</script>
</body>
</html>
相关阅读:
iOS开发之友盟分享的使用
 iOS开发之AFNetworking开源库的使用
 iOS开发之网络基础知识
 iOS开发之Block
iOS开发之数据库FMDB
iOS开发常用的网站
 iOS开发之下拉刷新和上拉加载更多
 iOS开发之XML解析
 iOS之网络数据下载和JSON解析
 Linux 部署项目经验总结
原文地址：https://www.cnblogs.com/huangtiandi001/p/8213916.html