zoukankan      html  css  js  c++  java
  • Python3学习笔记十五

    ---恢复内容开始---

    1.  jquery的属性操作

       $().attr(属性名)    取值

          $().attr(属性名,属性值)      赋值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
    </head>
    <body>
    
    <p class="c1" id="1" egon="sb">我是谁</p>
    </body>
    </html>
    

      

             

                //针对checked  select标签

                 $().prop(属性名)           

                 $().prop(属性名,属性值)

     2.     jquery的values操作

                  $().val()          取值

                  $().val("aaaa")    赋值

                   $().val(“”)    清空操作 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
    </head>
    <body>
    
    <input type="text" class="c1" value="222">
    <script>
        $(".c1").val()
    </script>
    </body>
    </html>
    

    3.      jquery的each循环

        jquery有两种循环方式:

                 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
    
    </head>
    <body>
    <div class="outer">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
        <script>
            //jquery两种循环方式,第一种
    //        var arr=[111,222,333,444]
    //        $.each(arr,function (i,j) {
    //            console.log(i,j)
    //        })
    //        var info={"name":"egon","age":23}
    //        $.each(info,function (i,j) {
    //            console.log(i,j)
    //        })
              //第二种方式
              $(".outer p").each(function () {
                     console.log($(this).html())
              })
        </script>
    </body>
    </html>
    

      

     4.    jquery的表格正反选操作

          全选 取消 反选:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    </head>
    <body>
    <button class="select_all">全选</button>
    <button class="quxiao">取消</button>
    <button class="fanxuan">反选</button>
    <hr>
    <table border="1">
    <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>班级</td>
    <td>选择</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>22</td>
    <td>1</td>
    <td><input type="checkbox"></td>
    </tr>
    <tr>
    <td>李四</td>
    <td>23</td>
    <td>2</td>
    <td><input type="checkbox"></td>
    </tr>
    <tr>
    <td>王五</td>
    <td>24</td>
    <td>3</td>
    <td><input type="checkbox"></td>
    </tr>
    </table>
    <script>
    $(".select_all").click(function () {
    $(":checkbox").prop("checked",true)

    })

    $(".quxiao").click(function () {
    $(":checkbox").prop("checked",false)
    })
    $(".fanxuan").click(function () {
    $(":checkbox").each(function () {
    // if ($(this).prop("checked")){
    // $(this).prop("checked",false)
    // }
    // else{
    // $(this).prop("checked",true)
    // }
    $(this).prop("checked",!$(this).prop("checked"))


    })

    })


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

      

    5.   jquery的css样式操作

           

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
    </head>
    <body>
    
    <p class="c1">this is a p</p>
    <p id="3">this is a p</p>
    <script>
    //    $("#3").css("color","red")
    //      $(".c1").css("color","red")
           $("#3").click(function () {
               $(this).css("color","red")
           })
    </script>
    </body>
    </html>
    

     

    6.     jquery事件委派

            

    <!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.js"></script>
    <script>
    //    $("ul li").click(function () {
    //        alert($(this).html())
    //       })
    //     $("button").click(function () {
    //         $("ul").append("<li>444</li>")
    //     })
        $("ul").on("click","li",function () {
             alert($(this).html())
    
        });
         $("button").click(function () {
             $("ul").append("<li>444</li>")
         });
    </script>
    </body>
    </html>
    

    7.      jquery的节点操作

             每一个标签对象(Dom对象)都是一个节点对象

             jquery对象都是一个数组

             Dom对象转jquery对象:  $(Dom对象)

             jquery对象转Dom对象:  $(aaa)[0]

             

             

              创建标签,删除标签,清空标签内容,替换标签

              

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
    .c1{
    600px;
    height: 600px;
    background-color: #6fff3b;
    }
    </style>
    </head>
    <body>
    <div class="c1">
    <h4>hello word</h4>
    </div>
    <p id="p1">111</p>
    <p>222</p>
    <button class="add">add</button>
    <button class="del">delete</button>
    <button class="replace">replace</button>
    <script>
    $(".add").click(function () {
    //定义要插入的标签对象
    var $img=$("<img>")
    // console.log($img[0])
    $img.attr("src","2.jpg")
    //添加到指定节点中
    // $(".c1").append($img)
    // $img.appendTo(".c1")
    $(".c1").after($img)
    })

    $(".del").click(function () {
    //删除节点 删除整个节点
    // $(".c1 h4").remove()
    //清空节点 清空的标签内容
    $(".c1").empty()
    })
    //替换节点
    $(".replace").click(function () {
    var $img=$("<img>")
    $img.attr("src","2.jpg")
    $("#p1").replaceWith($img)
    })
    </script>
    </body>
    </html>

      

                 克隆节点(需要做一个实例)

                  

              var $copy=$(".c1").clone()
              console.log($copy[0])
    

             

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.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)[0])
            $(this).parent().remove()
        })
    </script>
    </body>
    </html>
    

      

    8.       jquery表格的增删改查

    9.       juqery的动画效果

              

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
    </head>
    <body>
    <div class="c1">
        <div class="c2">
            <p>111</p>
            <p>222</p>
            <p>333</p>
        </div>
    </div>
    <button class="xianshi">显示</button>
    <button class="yincang">隐藏</button>
    <button class="qiehuan">切换</button>
    <script>
          //快速显示与隐藏
    //    $(".xianshi").click(function () {
    //          $(".c1").show()
    //    })
    //    $(".yincang").click(function () {
    //        $(".c1").hide()
    //    })
             //1秒之内显示与隐藏
    //          $(".xianshi").click(function () {
    //                 $(".c1").show(1000)    时间单位为ms
    //            })
    //            $(".yincang").click(function () {
    //                $(".c1").hide(1000)
    //            })
                //使用上下拉的方式显示与隐藏
    //            $(".xianshi").click(function () {
    //                $(".c2").slideDown()
    //            })
    //            $(".yincang").click(function () {
    //                $(".c2").slideUp()
    //            })
           $(".xianshi").click(function () {
               $(".c1").fadeIn(2000)
           })
    
           $(".yincang").click(function () {
               $(".c1").fadeOut(2000)
           })
           //切换
           $(".qiehuan").click(function () {
    //           $(".c1").fadeToggle(2000)
                 $(".c1").fadeTo(2000,0.8)    //指定时间与透明度
           })
    
    
    </script>
    </body>
    </html>
    

    10.     jquery的css操作

              offset: 以当前窗口为参数照的偏移量。

              postion:以一定位的父亲标签的偏移量。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
        <style>
            *{
                margin: 0;
            }
            .c1{
                 50px;
                height: 50px;
                background-color: #FF0000;
            }
            .c2{
                 50px;
                height: 50px;
                background-color: #E36E18;
            }
            .c3{
                position: relative;
    
            }
        </style>
    </head>
    <body>
    <div class="c1">1111</div>
    <div class="c3"><div class="c2"></div></div>
    
    <script>
        //获取偏移量
        console.log($(".c1").offset().left)
        console.log($(".c1").offset().top)
        //设置偏移量
        $(".c2").offset({top:200,left:200})
        //相对于父亲的偏移量
        console.log($(".c2").position().top)
        console.log($(".c2").position().left)
    </script>
    </body>
    </html>
    

    11.  jquery的返回顶部实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
        <style>
            *{
                margin: 0;
            }
            .c1{
                 100%;
                height: 3000px;
                background-color: #9d9d9d;
            }
            .c2{
                 100px;
                height: 50px;
                background-color: #2aabd2;
                color: #FF0000;
                text-align: center;
                line-height: 50px;
                position: fixed;
                bottom: 10px;
                right: 10px;
    
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="c1">
    <div class="c2 hide">返回顶部</div>
        <h1>我是谁</h1>
    </div>
    <script>
        $(".c2").click(function () {
            $(window).scrollTop(0)   //可以设置参数为200,返回到距离顶部200px的位置,
        })
        //监控事件为scroll
        $(window).scroll(function () {
            if ($(window).scrollTop()>400){
                $(".c2").show()
            }
            else{
                $(".c2").hide()
            }
        })
    </script>
    </body>
    </html>
    

    11.     boostrap的使用

              栅格系统

              

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <style>
            .row  div {
                border: solid 1px;
            }
             .container  div {
                border: solid 1px;
            }
            .container-fluid div {
                border: solid 1px;
            }
        </style>
    </head>
    <body>
    <div class="row">
        <div class="col-md-6">111</div>
        <div class="col-md-6">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <div class="col-md-1">111</div>
        <!--//列偏移-->
        <!--<div class="col-md-5 col-md-offset-3">111</div>-->
        <!--//嵌套列 把8个栅格再分成12份。-->
        <!--<div class="col-md-8">-->
            <!--<div class="col-md-4">222</div>-->
            <!--<div class="col-md-4">333</div>-->
        <!--</div>-->
    </div>
        <!--//两边会有边距,并且居中-->
    <!--<div class="container">-->
        <!--<div class="col-md-6">111</div>-->
        <!--<div class="col-md-6">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
        <!--<div class="col-md-1">111</div>-->
    <!--</div>-->
    
    
    
    </body>
    </html>
    

      

    12.     jquery的模态对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
        <style>
            .backend{
                 100%;
                height: 3000px;
                background-color: #aaffaa;
            }
            * {
                margin: 0;
            }
            .shade{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #9d9d9d;
                opacity: 0.8;
            }
             .model{
                position: fixed;
                left:400px;
                top: 100px;
                 600px;
                height: 300px;
                background-color: white;
            }
    
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="backend">
    <button class="add">注册</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>
        $(".add").click(function () {
            $(".model").removeClass("hide")
            $(".shade").removeClass("hide")
        })
        $("#subBtn").click(function () {
            $(".model").addClass("hide")
            $(".shade").addClass("hide")
        })
    </script>
    </body>
    </html>
    

      

              

                 

  • 相关阅读:
    Redis主从同步原理-SYNC【转】
    redis3.0集群部署和测试
    Zabbix3.0配置邮件报警
    3分钟学会git命令的基础使用
    Rsync文件同步工具
    logstash grok 内置正则
    logrotate实现Mysql慢日志分割
    Python之unittest测试代码
    Zabbix如何实现批量监控端口状态
    Centos7搭建Confluence破解版
  • 原文地址:https://www.cnblogs.com/yangjianbo/p/8097804.html
Copyright © 2011-2022 走看看