Python3學(xué)習(xí)筆記十五

---恢復(fù)內(nèi)容開始---

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標(biāo)簽

$().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循環(huán)

　　　　jquery有兩種循環(huán)方式：

<!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兩種循環(huán)方式，第一種
//        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的節(jié)點(diǎn)操作

每一個(gè)標(biāo)簽對象(Dom對象)都是一個(gè)節(jié)點(diǎn)對象

jquery對象都是一個(gè)數(shù)組

Dom對象轉(zhuǎn)jquery對象： $(Dom對象)

jquery對象轉(zhuǎn)Dom對象： $(aaa)[0]

創(chuàng)建標(biāo)簽,刪除標(biāo)簽，清空標(biāo)簽內(nèi)容，替換標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .c1{
            width: 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 () {
           //定義要插入的標(biāo)簽對象
           var $img=$("<img>")
//           console.log($img[0])
           $img.attr("src","2.jpg")
           //添加到指定節(jié)點(diǎn)中
//           $(".c1").append($img)
//           $img.appendTo(".c1")
             $(".c1").after($img)
       })

        $(".del").click(function () {
            //刪除節(jié)點(diǎn)     刪除整個(gè)節(jié)點(diǎn)
//            $(".c1 h4").remove()
            //清空節(jié)點(diǎn)   清空的標(biāo)簽內(nèi)容
              $(".c1").empty()
        })
            //替換節(jié)點(diǎn)
         $(".replace").click(function () {
             var $img=$("<img>")
              $img.attr("src","2.jpg")
             $("#p1").replaceWith($img)
         })
</script>
</body>
</html>

克隆節(jié)點(diǎn)（需要做一個(gè)實(shí)例）

          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的動(dòng)畫效果

<!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秒之內(nèi)顯示與隱藏
//          $(".xianshi").click(function () {
//                 $(".c1").show(1000)    時(shí)間單位為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)    //指定時(shí)間與透明度
       })


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

10. jquery的css操作

offset: 以當(dāng)前窗口為參數(shù)照的偏移量。

postion：以一定位的父親標(biāo)簽的偏移量。

<!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{
            width: 50px;
            height: 50px;
            background-color: #FF0000;
        }
        .c2{
            width: 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)
    //設(shè)置偏移量
    $(".c2").offset({top:200,left:200})
    //相對于父親的偏移量
    console.log($(".c2").position().top)
    console.log($(".c2").position().left)
</script>
</body>
</html>

11. jquery的返回頂部實(shí)例

<!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{
            width: 100%;
            height: 3000px;
            background-color: #9d9d9d;
        }
        .c2{
            width: 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)   //可以設(shè)置參數(shù)為200，返回到距離頂部200px的位置，
    })
    //監(jiān)控事件為scroll
    $(window).scroll(function () {
        if ($(window).scrollTop()>400){
            $(".c2").show()
        }
        else{
            $(".c2").hide()
        }
    })
</script>
</body>
</html>

11. boostrap的使用

柵格系統(tǒng)

<!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個(gè)柵格再分成12份。-->
    <!--<div class="col-md-8">-->
        <!--<div class="col-md-4">222</div>-->
        <!--<div class="col-md-4">333</div>-->
    <!--</div>-->
</div>
    <!--//兩邊會(huì)有邊距，并且居中-->
<!--<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的模態(tài)對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .backend{
            width: 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;
            width: 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>添加學(xué)生信息：</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>

posted @ 2017-12-24 12:59 奮斗史閱讀(313) 評論(0) 收藏舉報(bào)

刷新頁面返回頂部

奮斗吧，加油！

Python3學(xué)習(xí)筆記十五

公告