A.今天學到了什么

1.基本選擇器

配置jquery

 <script src="lib/jquery-3.3.1.min.js"> </script>
    <!-- 1.使用本地jquery
     2.使用在線cdn -->

    <p id="one" class="one">hello world</p>
    <script>
        var one = $("#one");
        // 修改元素樣式
        one.css({ color: "red", backgroundColor: "yellow" });
        console.log(one);
        $("p").click(function(){
            $(this).css({color:"red"})
        })       
         $("*").css({color:"green"}) 
        // 選擇器 
        /* $(“#one”) id選擇器
           $(“.two”) class選擇器
           $(“p”)    元素選擇器
           $(“*”)    所有的元素
           $(“p,div”)
        */
    </script>

2.層次選擇器

   <div id="parent">
        <p>hello world</p>
        <div>
            <p>hello world</p>
        </div>

    </div>
    <button id="btn">btn</button>   
    <script>
              //  層次選擇器
        /* $(“div >p”)
           $(“div p”)
           $(“div+p”)
           $(“div~p”)
        */ 
        $("#btn").click(function(){
            $("#parent>p").css({color:"red"})
        })
    </script>

3.兄弟選擇器

   <div>div</div>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <script>
        // $("div+p").css({color:"red"});
        $("div~p").css({color:"blue"});
    </script>

4.過濾選擇器

A.基本過濾
        $("p:first-child")
        $("p:last-child")
        $(“p:first”)
        $(“p:last”)
        :not(selector)
        $(“div:not(.one)”)

        $("p:even")  選擇所有偶數(shù)項 從0開始
         $(“p:odd”)   選擇所有奇數(shù)項
        $("p:eq(index)")    index 從0開始
        $(“p:gt(index)”)    大于
        $(“p”lt(index)”)    小于
        $(“:focus”)  配置focus事件

<div>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <input type="text" >
    </div>

  $("div>p:first-child").css({color:"red"})
        $("div>p:last-child").css({color:"red"})
        $("p:first").css({color:"blue"})
        $("p:last").css({color:"blue"})
        $("p:even").css({color:"blue"})
        $("p:eq(3)").css({color:"blue"})
        // $("p").eq(3).css({color:"blue"})
        $("p:gt(0)").css({color:"blue"})
        $("p:lt(3)").css({color:"blue"})
        $("input").focus(function(){
            $(":focus").css({backgroundColor:"red"})
        })

5.內容過濾選擇器

    $("p:contains(hello)")  //選取文本中含有”hello”的p元素
    $(“div:has(p)”)  //選取含有p元素的div元素
    $(“div:parent”)   //選取含有子元素或者文本的元素
    $(“:hidden”)     選取隱藏元素  只對dispaly：none 起作用 visibility:hidden沒用
    $(“div:visible”) 選取所有可見元素

    <p>hello world</p>
    <p>good</p>
    <p>world3</p>
    <div class="obe">
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    <div>
        <h1>h1</h1>
    </div>
    <script>
        $("p:contains(hello)").css({color:"red"})
        $("div:has(p)").css({color:"red"})
        $("div:hidden").css({display:"block"}) 
    </script>

6.Jquery中的DOM操作

   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div>
        <p>0000</p>
    </div>
    <input type="text" value="hello world">
    <script>
        // 獲取元素的文本  text 修改文本
        // attr() 獲取屬性的值
        var txt = $("li:eq(1)").text("hello world");
        var attr = $("li:eq(1)").attr("class");
        // console.log(attr)
        // html 獲取的是整個div里面的內容 包含html標簽
        // value 獲取的是輸入框的值
        var html = $("div").html();
        // console.log(html)
        var val = $("input").val();
        console.log(val);
        // a.創(chuàng)建元素節(jié)點
        var p = $("<p></p>");
        // b.創(chuàng)建文本節(jié)點
        var li4 = $("<li>04</li>")
        // c.創(chuàng)建屬性節(jié)點
        var $li = $("<li title='香蕉'>香蕉</li>");

        //   增加
        //   append  向父元素的后面添加
        // prepend 向父元素的前面添加
        $("ul").append($li4);
        $("ul").prepend($li4) ;
    </script>

7.before和after

    <div>
        div
    </div>
    <p>end</p>
    <button id="btn">btn</button>
    <script>
        // before after  在兄弟元素之間
        var $p=(" <p>one</p>")
        $("div").after($p);
        var $h4=$("<h4>h4</h4>")
        $("p:contains(end)").before($h4);
        // 刪除節(jié)點  remove
        $("#btn").click(function(){
            $("div").remove();
        })
    </script>

8.屬性操作

  <style>
        .current{
            color: blue;
        }
    </style>

<body>
    <!-- <div>hello world</div> -->
    <p class="one">hello world</p>
    <button>toggle</button>
    <script>
        // 標簽的內容消失
        // $("div").empty();
        // var $p=("<p>replace</p>");
        // 替換標簽
        // $("div").replaceWith($p);
        // 包裹標簽
        // $("p").wrap("<li>li</li>");
        // 在標簽里面嵌套標簽
        // $("p").wrapInner("<li>li</li>");

        // 屬性操作
        // 設置屬性
        // $("p").attr("class","two"); 
        // 多屬性操作
        // $("p").attr({class:"one",tittle:"two"});    
        // 刪除屬性
        // $("p").removeAttr("class");

        // 樣式操作
        // 通過屬性的方式 設置樣式
        // $("p").attr("class","current"); 
        // add class
        // $("p").addClass("current") 
        // 移出樣式
        // $("p").removeClass("cuurent");
        // 切換樣式
        // $("button").click(function(){
        //     $("p").toggleClass("current")
        // })

        // 判斷是否有某個樣式
        var one=$("p").hasClass("current");
        $("button").click(function(){
            if($("p").hasClass("current")){
                $("p").removeClass("current")
            }else{
                 $("p").addClass("current")
                }
            
        })
    </script>

9.遍歷

   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="grandfather">
        grandf
        <div class="parent">
            parent
            <p>hello world</p>
        </div>
    </div>

    <script>
        // 獲取子元素
        // var childs=$("ul").children();
        // childs.css({color:"red"});
        // 找到元素的上一個元素
        // $("li:eq(1)").prev().css({backgroundColor:"green"})
        // 找到元素的下一個元素
        // $("li:eq(1)").next().css({backgroundColor:"blue"})

        // 所有的DOM元素加載完畢之后執(zhí)行代碼塊里的js
        $(function () {
            // siblings 找到所有的兄弟元素
            // var sibs = $("li:eq(0)").siblings();
            // sibs.css({ color: "red" })
            // 獲取父元素
            // var parent = $("p").parent();
            // var parents = $("p").parents();
            // parents.css({color:"red"})
            // console.log(parents);

            // 找到你想要的父元素
            var closest= $("p").closest(".grandfather");
            closest.css({color:"red"})
        })
    </script>

10.toggle

  <div>
        <p class="one">hello world</p>
    </div>
    <button id="btn">btn</button>
    <script>     
        $("#btn").click(function(){
            $("p").toggle();
        })
    </script>

11.過濾

    <ul class="one">
        <li class="one">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        $("li").filter(".one").css({color:"red"})
    </script>

12.offset

 <style>
        *{margin: 0;padding: 0;}
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px;
        }
    </style>

  <div>
      
    </div>
    <script>
        // 偏移量
        $(function(){
            debugger;
            var left=$("div").offset().left;
        })
    </script>