jQuery知識盲點

時間 2019-12-11

標籤 jquery 知識盲點欄目 JQuery 简体版

原文原文鏈接

1、屬性操做html

元素的尺寸jquery

width() height()app

innerWidth() innerHeight()spa

outerWidth() outerHeight()code

$('div').width() ;  //width
 $('div').innerWidth() ;  //width + padding
 $('div').outerWidth() ;  //width + padding + border
 $('div').outerWidth(true);  //width + padding + border + margin

//$('#div1').width(200);
    
    //$('#div1').innerWidth(200); //width : 200 - padding
    
    //$('#div1').outerWidth(200); //width : 200 - padding - border
 $('#div1').outerWidth(200,true);   //width : 200 - padding - border - margin

    
    //alert( $('#div1').get(0).offsetWidth ); //原生JS是獲取不到隱藏元素的尺寸
 alert( $('#div1').width() );  //JQ是能夠獲取隱藏元素的尺寸

//alert( $(window).height() ); //可視區的高
 alert( $(document).height() ); //頁面的高

//alert( $(document).scrollTop() ); //滾動距離
        
        //$(document).scrollTop() == $(document).height() - $(window).height()

2、DOM操做htm

insertBefore() before()對象

insertAfter() after()blog

appendTo() append()事件

prependTo() prepend()ip

append() : 把元素添加到指定的節點的裏面的最後

prepend() : 把元素添加到指定的節點的裏面的最前面

before() : 把元素添加到指定的節點的前面

after() : 把元素添加到指定的節點的後面

1.insertBefore

<body>
<div>div</div>
<span></span>

<script> $(function () { $('span').insertBefore($('div')); //把span 標籤放到div的前面，相似剪切功能與js的用法一致
        //結果顯示
       /* <span>span</span> <div>div</div> */ }); </script>

</body>

二、insertAfter()

在原生js中是沒有改方法的，用法與insertBefore相似

3.appendTo()

與原生的js中appendchild 用法相似的

<body>
<span>span</span>
<div>div</div>

<script> $(function () { $('span').appendTo($('div')); //結果顯示 span在div裏面的最後位置
        /* <div> div <span>span</span> </div> */ }); </script>

</body>

4.prependTo()

<body>
<span>span</span>
<div>div</div>
<script> $(function () { $('span').prependTo($('div')); //結果顯示 span在div裏面的最前的位置
        /* <div> <span>span</span> div </div> */ }); </script>
</body>

before() after() append() prepend()與以前是對應的

如before()

<body>
<span>span</span>
<div>div</div>
<script> $(function () { $('span').before($('div')); //結果顯示 這個before更像動詞，把div放到了span的前面，
        /* <div>div</div> <span>span</span> */ }); </script>
</body>

3、get JQ轉爲原生的

$(function(){ //alert( $('div').get(0).innerHTML );get() : 把JQ轉成原生JS , 默認狀況獲取的是一個原生的集合，那麼能夠經過參數來找到集合中的指定項
 alert( $('div').eq(0).html() ); });

4、事件細節

ev : event對象

在jquery中直接用ev 不須要再向js要作兼容處理var ev=ev || window.event

<body>
<span>span</span>
<div>div</div>
<script>

    /*$('div').click(function(ev){ //ev : event對象 //ev.pageX(相對於文檔的) 與js中的 clientX(相對於可視區)相似 //ev.which(鍵值) : js keyCode ev.preventDefault(); //阻止默認事件 ev.stopPropagation(); //阻止冒泡的操做 return false; //阻止默認事件 + 阻止冒泡的操做 });*/ $('div').one('click',function(){ //只執行事件一次
 alert(123); }); </script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。