JQuery 学习纪录 ( 5 )

创建节点

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());        // });