jQuery

一、簡介

二、jQuery的導入

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    // var obj = document.querySelector(".box");
    // console.log(obj.innerText);
    $(document).ready(function () {
        console.log($(".box").text());
        console.log(jQuery(".box").text());
    });

    $(function (){
        console.log($(".box").text());
        console.log(jQuery(".box").text());
    });
</script>
</head>
<body>
    <div class="box">好好學習，天天向上</div>


</body>
</html>

補充說明

三、jQuery的基本使用

3.1 選擇器

3.2 篩選器

3.2.1 篩選器：元素選擇示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>篩選器</title>
</head>
<body>
    <div>元素一</div>
    <div>元素二</div>
    <div>元素三</div>
    <h4>以下爲children</h4>
    <div class="box">
        <span>無class</span><br>
        <span class="test">有class</span><br>
        <p>無class</p>
        <p class="test">有class</p>
        <div>無class</div>
        <div class="test">有class</div>
    </div>

    <h4>以下是parent</h4>
    <div class="div1">div1
        <div class="div2">div2
            <div class="div3">div3
                <div class="div4">div4
                    <div class="div5">div5
                        <div class="div6">div6
                            <div class="div7">div7</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h4>以下是sibling</h4>
    <div>1</div>
    <div class="box2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // first、last、eq
        // $("div").first().css('font-size', '30px');//第一個，設置樣式
        // $("div").last().text("ok");//最後一個，修改元素文本內容
        // $("div").eq(1).css("color", "skyblue");// 指定元素，設置顏色

        // children、find:後代選擇器,注意，find必須含參
        // $(".box").children().css("color", "skyblue");
        // $(".box").children(".test").css("font-size", "20px");
        //
        // $(".box").find(".test").css("color", "red");

        // parent、parents、parentsUntil
        // parent:唯一父級和全部子級
        // $(".div5").parent().css("color","red"); // 4567
        // parents：祖先元素及全部後代
        // $(".div5").parents().css("fontSize", "30px"); //1-7全變
        // parentsUntil: 祖先元素及全部後代(除掉until指定的元素以及它之前的全部祖先元素）
        // $(".div5").parentsUntil(".div2").css("color", "skyblue"); //3-7

        // siblings:找到全部同級元素
        $(".box2").siblings().css("color","red");
    </script>
</body>
</html>

3.2.2 選擇器與篩選器的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>足球</li>
        <li>籃球</li>
        <li>乒乓球</li>
    </ul>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $("li:eq(1)").css("color", "skyblue"); // 選擇器
        $("li").eq(2).css("color","red"); // 篩選器

        function f(obj, index){
            obj.eq(index).css("color","red");
        }
        f($("li"), 1);
    //    總結
        // 簡單操作時，選擇器和篩選器效果是一樣的
        // 但是在函數操作中，篩選器在字符拼接上有優勢

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

3.2.3 屬性操作示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            color:peru;
            font-size:30px;
        }
        .test1{
            color:red;
        }
    </style>
</head>
<body>
    <div>1<span>你好</span></div>
    <div>2</div>
    <input type="text" name="usr"><br>
    <input type="text" name="psw"><br>
    <input class="btn" type="button" value="獲取value值">

    <h4>屬性操作</h4>
    <ul>
        <li>足球</li>
        <li>籃球</li>
        <li>乒乓球</li>
    </ul>

    <h4>class屬性操作</h4>
    <p>我是一段文字</p>
    <button>addClass</button>
    <button>removeClass</button>
    <button>toggleClass</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    // html():多個元素，取第一個
    console.log($("div").html());
    // text():取全部的文本內容
    console.log($("div").text());
    // val():多個元素，取第一個
    $(".btn").click(function () {
        console.log($("input").val());
    });

    // 屬性的增刪改查
    $("li").attr("class", "test"); // 增
    $("li").attr("class", "test1"); // 改
    console.log($("li").attr("class")); // 查

    // 刪除
     $("li").removeAttr("class");

     // class屬性操作addClass()/removeClass().toggleClass()
      $("button").eq(0).click(function () {
          $("p").addClass("test");
      });
      $("button").eq(1).click(function () {
          $("p").removeClass("test");
      });
      $("button").eq(2).click(function () {
          $("p").toggleClass("test");
      });
</script>
</body>
</html>

3.2.4 樣式操作示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
            /*height:200px;*/
            /*width:200px;*/
            /*background: skyblue;*/
        /*}*/
        .one{
            height:200px;
            width:200px;
            background: antiquewhite;
            position:relative;
        }
        .two{
            height:100px;
            width:100px;
            background: peru;
            position:absolute;
            top:20px;
            left:20px;
        }
        .three{
            margin-top:100px;
            border:1px solid red;
            width:100px;
            height:100px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>我就是我</div>
    <h4>offset和position</h4>
    <div class="one">
        <div class="two">測試對象</div>
    </div>

    <div class="three">基本選擇器：標籤選擇器$("p")、id選擇器$("#id名")、class選擇器(".class名")層級選擇器：子代$("parent>child")，後代$("parent child")，相鄰$("prev+next")，兄弟$("prev~siblings")</div>
    <button>獲取scrollTop</button>
    <button>設置scrollTop</button>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 獲取樣式
        // console.log($("div").css("background-color")); //rgb(135, 206, 235)
        // console.log($("div").css(["background-color","height", "width"])); // {background-color: "rgb(135, 206, 235)", height: "200px", width: "200px"}

        // 設置
        // $("div").css("backgroundColor","red");
        // $("div").css({ // 設置多個樣式
        //     "backgroundColor":"red",
        //     "font-size":"30px",
        //     "text-align":"center",
        //     "line-height":"200px"
        // });

        // 位置offset()/position()/scrollTop/scrollLeft
        // offset():距離窗口的top/left值
        var $obj=$(".two").offset();
        console.log($obj); // {top: 92.53125, left: 8}
        console.log($obj.left);
        console.log($obj.top);

        // position():定位
        var $obj1=$(".two").position();
        console.log($obj1); // {top: 20, left: 20}
        console.log($obj1.left);
        console.log($obj1.top);

        // scrollTop()/height()/width()
        $("button").eq(0).click(function () {
            alert($(".three").scrollTop()+"px");
            alert($(".three").height()+"px");

        });
        $("button").eq(1).click(function () {
            $(".three").scrollTop(200);
            $(".three").height(200);
        });

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

3.2.5 js與jQ的相互轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>元素一</div>
    <div>元素二</div>
    <div class="box">元素三</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    //jq--->js
    //1.利用數組下標
    var $div = $("div"); //jq對象
    var div = $div[0]; // 轉換爲js對象
    div.style.color = "red"; // js操作方法

    // 2.通過jq的get方法
     var $div = $("div"); //jq對象
     var div = $div.get(1); // 轉換爲js對象
     div.style.color = "skyblue";// js操作方法

    //js--->jq
    var div = document.getElementsByTagName("div");//js對象
    var $div = $(div);//jq對象
    $div.last().css("color","blue");

    // this
    var obj = document.querySelector(".box");
    obj.onclick=function () {
        console.log(this); // this指向obj
    };

    var $obj = $(".box");
    $obj.click(function(){
        var $this = $(this);
        $this.css("fontSize","50px");
    });
</script>
</body>
</html>

3.2.6 標籤操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤操作</title>
</head>
<body>
    <div class="div1">
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
        <div class="div5">div5</div>
    </div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 內部插入：append()/appendTo()/prepend()/prependTo()
        // 在目標元素的內容後添加一個"<p>append</p>"
        // $(".div3").append("<p>append</p>");
        // prepend()在目標元素的內容前添加一個"<p>prepend</p>"
        //  $(".div3").prepend("<p>prepend</p>");
         // appendTo():將"<p>appendTo</p>"添加到目標元素的內容後
        // $("<p>appendTo</p>").appendTo(".div3");
        // prependTo():將"<p>prependTo</p>"添加到目標元素的內容前
        // $("<p>prependTo</p>").prependTo(".div3");

        // 外部插入：before()/insertBefore()/after()/insertAfter()/replaceWith()/remove()/empty()/clone()
        // before()/insertBefore()/after()/insertAfter()
        //  after:在目標元素後添加一個"<p>after</p>"
        //  before:在目標元素前添加一個"<p>before</p>"
        // $(".div4").after("<p>after</p>");
        // $(".div4").before("<p>before</p>");
        // insertBefore()
        // insertAfter()
        // $("<p>insertBefore</p>").insertBefore(".div4");
        // $("<p>insertAfter</p>").insertAfter(".div4");

        // replaceWith()/remove()/empty()/clone()
        // replaceWith():替換標籤及內容
         $(".div3").replaceWith("<p>我是來替換div3的</p>")
        // remove():移除標籤及內容
        $(".div2").remove();
        // empty():清空標籤內容（標籤保留）
        $(".div4").empty();
        // clone()
        $(".div5").clone().appendTo("p");
    </script>
</body>
</html>

3.2.7 事件操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件操作</title>
    <style>
        ul{
            list-style:none;
        }
        li{
            height:20px;
            width:20px;
            background:#a7ca1b;
            float:left;
            margin-left:10px;
        }
        div{
            height:100px;
            width:100px;
            background: #a7ca1b;
        }
    </style>
</head>
<body>
    <!--<ul>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    <!--</ul>-->

    <div>我就是我</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // each遍歷
        // $("li").each(function (index) {
        //     console.log(index);
        // });
        // for循環+綁定事件
        // var btn = document.querySelectorAll("li");
        // for(let i=0; i<btn.length;i++){
        //     btn[i].onclick=function () {
        //         console.log(i);
        //     }
        // }
        // $("li").each(function (index) {
        //     $("li").eq(index).click(function () {
        //         console.log(index);
        //     });
        // });

        // index
        // $("li").click(function () {
        //     console.log($(this).index());
        // });

        // 鼠標的移入移出事件hover
        // $("div").hover(f1,f2);
        $("div").hover(function () {
            console.log("我是鼠標移入函數");
        },function () {
            console.log("我是鼠標移出函數");
        });
    </script>
</body>
</html>

3.2.8 動畫操作

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫操作</title>
    <style>
        .box1{
            height:400px;
            width:400px;
            background: skyblue;
        }
        .div1,.div2,.div3{
            height:100px;
            width:100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="div1" style="background: #a7ca1b"></div>
        <div class="div2" style="background: red"></div>
        <div class="div3" style="background: blue"></div>
    </div>
    <div class="box2">
        <button>隱藏</button>
        <button>顯示</button>
        <button>切換</button>
    </div>
    <div class="box3">
        <button>淡出</button>
        <button>淡入</button>
        <button>切換</button>
        <button>fadeTo</button>
    </div>

    <div class="box4" style="height:200px;width:200px;background: peru; display: none;">
        <h4>標題</h4>
        <p>段落一</p>
        <p>段落二</p>
    </div>
    <div class="box5">
        <button>slideDown</button>
        <button>slideUp</button>
        <button>slideToggle</button>
    </div>
    <div class="box6">
        <button>自定義動畫1</button>
        <button>自定義動畫2</button>
    </div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    // 隱藏和顯示
    var $box = $(".box1");
    $("button").first().click(function () {
        $box.hide(3000);
    });
    $("button").eq(1).click(function () {
        $box.show(3000);
    });
    $("button").eq(2).click(function () {
        $box.toggle(3000);
    });
    // 淡入淡出:fadeOut/fadeIn/fadeToggle/fadeTo
    var $button = $(".box3>button");
    $button.first().click(function () {
        $box.fadeOut(3000).css("backgroundColor", "red");
    });
    $button.eq(1).click(function () {
        $box.fadeIn(3000).css("backgroundColor", "skyblue");
    });
    $button.eq(2).click(function () {
        $box.fadeToggle(3000).css("backgroundColor", "skyblue");
    });
    $button.eq(3).click(function () {
        $(".div1").fadeTo("slow",0.15);
        $(".div2").fadeTo("slow",0.5);
        $(".div3").fadeTo("slow",0.7);
    });

    // 滑動
    var $button = $(".box5>button");
    var $box = $(".box4");
    $button.first().click(function () {
        $box.slideDown("slow");
    });
    $button.eq(1).click(function () {
        $box.slideUp("slow");
    });
    $button.eq(2).click(function () {
        $box.slideToggle("slow");
    });

    // animate:自定義動畫
    var $button = $(".box6>button");
    $button.first().click(function () {
        $box.animate({height:"300px"}).delay(5000); // 延遲5s後再發生下一個動畫
    });
    $button.eq(1).click(function () {
        $box.animate({height:"200px"});
    });
</script>
</body>
</html>

jQuery

jQuery

一、簡介

二、jQuery的導入

三、jQuery的基本使用

3.1 選擇器

3.2 篩選器

3.2.1 篩選器：元素選擇示例

3.2.2 選擇器與篩選器的區別

3.2.3 屬性操作示例

3.2.4 樣式操作示例

3.2.5 js與jQ的相互轉換

3.2.6 標籤操作

3.2.7 事件操作

3.2.8 動畫操作

django上下文處理器

會話技術之session

django簡單表單

auth系統

url配置及模板渲染

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結