創建節點

js創建節點方法

            // var box = document.getElementById('box');
            // var a = document.createElement('a');
            // box.append(a);
            // a.setAttribute('href', "https://www.google.com/");
            // a.setAttribute('traget', "_blank");
            // a.innerHTML = 'Google';

jq創建節點方法:直接在append放進節點即可，或是將節點放進$(),並賦值給變數,在將其放進append。

        // 1.直接在append放進節點即可
        $('#box').append('<a href = "https://www.google.com/" target = "_blank" > Google </a>')
        // 2.直接將節點放進$(),並賦值給變數,在將其放進append
        $ok = $('<a href = "https://www.google.com/" target = "_blank" > Google </a>');
        $('#box').append($ok);

jq添加節點方法:append將節點添加至子元素的最後面，prepend 將節點添加至子元素最前面，appendTo 功能與 append一樣，只是append是父元素添加子元素，而appendTo為子元素添加至父元素，而prepend也是如此。

after()、before()做為同級元素，前者為放置後面，後者為前面

            // 在父元素box中,將p節點添加至子元素最後面
            // $('#box').append($('p'));
            // 將子元素添加至父元素
            // $('p').appendTo($('div'));

            // 在父元素box中,將p節點添加至子元素最前面
            // $('#box').prepend($('p'));
            // 將子元素添加至父元素
            // $('p').prependTo($('div'));
         
            $('div').after($('p'));
            $('div').before($('span'));
            

清空及刪除節點

html('')清空一個元素的內容(少用,會發生如果元素上有套用事件,但事件並不會被清除,會有問題)。
empty()連同事件也會清除,避免內存洩漏問題。
remove() 是刪除對應元素的全部，與empty區別在於，empty是清除自己全部的內容事件等，不包括本身元素。
clone ()複製，不傳參數也可深層複製，預設參數為false不會複製事件，true可複製事件。

            // $('div').html('');
            // $('div').empty();
            // $('div').remove();

            // 當clone出的p參數為true時才會觸發
            $('.ds').click(function () {
                alert('clone參數為true');
            });
            // 複製,不傳參數也可深層複製
            // 預設參數為false不會複製事件 , true可複製事件
            $('.ds').clone().appendTo('div');

val () 方法

沒傳參數就當獲取，有傳就可改變當前value。

            //console.log($("#btn").val()); // 呵呵
            //$("#btn").val("哈哈"); // 哈哈
            //console.log($("#btn").attr("value")); // 呵呵
            //$("#txt").val("123"); // 123

text(),html()

html:相當於innerHTML，text:相當於innerText。

        //console.log($("div").html());//<h3>我是標題</h3>
        //console.log($("div").text());//我是標題
        

scrollTop(),scrollLeft()

獲取滾動時的x距離及y距離

        $(window).scroll(function () {
            console.log($(window).scrollTop());
            console.log($(window).scrollLeft());
        });
        

offset(),position()

offset()獲取元素的相對於document的位置
position() 獲取元素相對於有定位的父元素的位置

        console.log($(".son").offset());
        // object {top:200,left:200}

        console.log($(".son").position());
        // object {top:100,left:100}
        

width/height ()

用css方法獲取div的寬度,及改變寬度。

        //console.log($("div").css("width"));
        //$("div").css("width", "400px");

用width,heighy方法直接獲取寬/高度，給予參數，直接改變寬/高度
innerWidth() 可獲取 padding + width 的大小。
outerWidth() 可獲取 padding + width + border 的大小。

        console.log($("div").width()); // width  200 

        console.log($("div").innerWidth()); // padding+width  220 

        console.log($("div").outerWidth()); // padding+width+border  240 
        
        //console.log($("div").outerWidth(true));//padding+width+border+margin  260

resize()當調整瀏覽器視窗大小時，動態獲取其寬高。

需要頁面視窗的寬度及高度

        // $(window).resize(function () {
        //     console.log($(window).width());
        //     console.log($(window).height());
        // });