2. 程式人生 > >楊老師課堂之Jquery的篩選,事件,效果,Ajax,javascript跨域)

楊老師課堂之Jquery的篩選,事件,效果,Ajax,javascript跨域)

阿新 • • 發佈：2018-11-08

1 篩選[掌握]

 篩選與之前“選擇器”雷同，篩選提供函式

1.1 過濾

  • eq(index|-index)，獲取第N個元素

    •index：一個整數，指示元素基於0的位置,這個元素的位置是從0算起。

    •-index：一個整數，指示元素的位置，從集合中的最後一個元素開始倒數。(1算起)

  • first()，獲取第一個元素

  • last()，獲取最後個元素
  • hasClass(class)，檢查當前的元素是否含有某個特定的類，如果有，則返回true。
  • filter(expr|obj|ele|fn)，篩選出與指定表示式匹配的元素集合。

  • 返回值:Booleanis(expr|obj|ele|fn)，根據選擇器、DOM元素或 jQuery 物件來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表示式就返回true。

  • map(callback)，將一組元素轉換成其他陣列（不論是否是元素陣列）

  • has(expr|ele)，保留包含特定後代的元素，去掉那些不含有指定後代的元素。
  • not(expr|ele|fn)，刪除與指定表示式匹配的元素

  • slice(start, [end])選取指定範圍匹配的子集

    •start 開始選取子集的位置。第一個元素是0.如果是負數，則可以從集合的尾部開始選起。

    •end 結束選取自己的位置，如果不指定，則就是本身的結尾

1.2 查詢

  • children([expr])，取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

    •注意：考慮子元素而不考慮所有後代元素。

  • find(expr|obj|ele)，搜尋所有與指定表示式匹配的元素

  • next([expr])，取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
  • nextAll([expr])，查詢當前元素之後所有的同輩元素。
  • nextUntil([exp|ele][,fil])，查詢當前元素之後所有的同輩元素，直到遇到匹配的那個元素為止。

  • offsetParent(),返回第一個匹配元素用於定位的父節點。

    •這返回父元素中第一個其position設為relative或者absolute的元素。此方法僅對可見元素有效。

  • parent([expr]),取得一個包含著所有匹配元素的唯一父元素的元素集合

  • parents([expr]),取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。
  • map(callback)，將一組元素轉換成其他陣列（不論是否是元素陣列）
  • has(expr|ele)，保留包含特定後代的元素，去掉那些不含有指定後代的元素。
  • not(expr|ele|fn)，刪除與指定表示式匹配的元素

  • slice(start, [end])選取指定範圍匹配的子集

    •start 開始選取子集的位置。第一個元素是0.如果是負數，則可以從集合的尾部開始選起。

    •end 結束選取自己的位置，如果不指定，則就是本身的結尾。

  • prev([expr]),取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

  • prevAll([expr]),查詢當前元素之前所有的同輩元素
  • prevUntil([exp|ele][,fil]),查詢當前元素之前所有的同輩元素，直到遇到匹配的那個元素為止。
  • siblings([expr]),取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合
<A>
  <B>
              <C></C>
              <D></D>
              <E></E>
              <F></F>
  </B>
</A>

點選並拖拽以移動

B.children() 獲得所有子元素（CDEF）

A.find(D) 從A子元素中查詢D

D.parent() 獲得D的父元素（B）

C.next() 下一個兄弟（D）

C.nextAll() 後面的所有兄弟（DEF）

E.prev() 上一個兄弟（D） –> previous()

E.prevAll() 前面的所有（CD）

E.siblings() 所有兄弟(CDF)

瞭解

C.nextUntil(E) C最後的所有兄弟，直到指定元素截止（DE）

F.prevUntil(D) （DE）

D.parents() 獲得D所有父元素（B、A）

D.closest()獲得D所有父元素,含自己（D、B、A）與 D.parents() 對比

closest和parents的主要區別是：

1，前者從當前元素開始匹配尋找，後者從父元素開始匹配尋找；

2，前者逐級向上查詢，直到發現匹配的元素後就停止了，後者一直向上查詢直到根元素，然後把這些元素放進一個臨時集合中，再用給定的選擇器表示式去過濾；

3，前者返回0或1個元素，後者可能包含0個，1個，或者多個元素。

1.3 串聯

  • add(expr|ele|html|obj[,con]),把與表示式匹配的元素新增到jQuery物件中

A.add(B) 將A和B拼湊在一起，等效 $(A,B)

  • andSelf(),加入先前所選的加入當前元素中

A.children().andSelf() 所有孩子，再新增自己

  • contents(),查詢匹配元素內部所有的子節點（包括文字節點）。如果元素是一個iframe，則查詢文件內容

    contents() 獲得所有節點（子元素、文字）

    abc xxx

  • end() 回到最近的一個”破壞性”操作之前

end() 回到最近的一個”破壞性”操作之前

A.children().end()… end將返回開始A位置

2 事件

2.1 常見事件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02{
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#e01").blur(function(){
                $("#textMsg").html("文字框失去焦點：blur");
            }).focus(function(){
                $("#textMsg").html("文字框獲得焦點：focus");
            }).keydown(function(){
                $("#textMsg").append("鍵盤按下：keydown");
            }).keypress(function(){
                $("#textMsg").append("鍵盤按住：keypress");
            }).keyup(function(){
                $("#textMsg").append("鍵盤彈起：keyup");
            }).select(function(event){
                //支援谷歌
                var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
                $("#textMsg").html("文字內容被選中：select ， " + sub);
            });

            var i = 0;
            $("#e02").mouseover(function(){
                $("#divMsg").html("滑鼠移上：mouseover");
            }).mousemove(function(){
                $("#divMsg").html("滑鼠移動：mousemove , " + i++ );
            }).mouseout(function(){
                $("#divMsg").html("滑鼠移出：mouseout");
            }).mousedown(function(){
                $("#divMsg").html("滑鼠按下：mousedown");
            }).mouseup(function(){
                $("#divMsg").html("滑鼠彈起：mouseup");
            });

            $("#e03").click(function(){
                $("#buttonMsg").html("單擊：click");
            }).dblclick(function(){
                $("#buttonMsg").html("雙擊：dblclick");
            });

        });

    </script>

</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span> <br/>
    <hr/>
    <div id="e02" ></div><span id="divMsg"></span> <br/>
    <hr/>
    <input id="e03" type="button" value="可以點選"/><span id="buttonMsg"></span> <br/>
</body>
</html>

  • focus和 focusin 對比

     focus獲得焦點

 foucsin獲得焦點。可以在父元素上檢測子元素獲取焦點的情況。

  • blur和 focusout 失去焦點[同理]

  • mouseover和 mouseenter 移進

     mouseover, 如果滑鼠指標穿過任何子元素，同樣會觸發 mouseover 事件

  • mouseout和 mouseleave 移出[同理]

2.2 頁面載入【掌握】

方式1：

$(document).ready(function(){         // $ == jQuery
   ....
});
  • 變種

jQuery(document).ready(function(){         // $ == jQuery
   ....
});

方式2：簡化版

$(function(){
  .....
});
  • ready函式可以使用多次。而window.onload只能一次

2.3 事件處理和委派【掌握】

  • on(events,[selector],[data],fn)，在選擇元素上繫結一個或多個事件的事件處理函式。

  • off(events,[selector],[fn])，在選擇元素上移除一個或多個事件的事件處理函式。

  • bind(type,[data],fn)為每個匹配元素的特定事件繫結事件處理函式。

  • unbind(type,[data|fn]])，bind()的反向操作，從每一個匹配的元素中刪除繫結的事件。

  • one(type,[data],fn)，為每一個匹配元素的特定事件（像click）繫結一個一次性的事件處理函式。

    one 繫結一次事件

 繫結和解綁

在文件裝載完成以後,如果打算為元素繫結事件來處理完成某些操作,則可以使用

bind()方法來對匹配元素進行特定的事件繫結,bind()方法的呼叫格式如下:

bind(type,[,data],fn);

第1個引數是事件型別,.當然也可以是自定義名稱

第2個引數是可選引數,作為event.data屬性值傳遞給事件物件的額外的資料物件

第3個引數則是用來繫結的處理函式

bind 繫結事件，一直使用，直到解綁。

   例如：$username.bind("click",function(){})   --> $username.click(function(){});

unbind 解綁事件

   繫結是可以指定別名 ，格式： 事件.別名

          bind("click.xxx",fn)

          unbind("click.xxx")

 觸發（瞭解）

trigger(type,[data])，在每一個匹配的元素上觸發某類事件。

triggerHandler(type, [data])，這個特別的方法將會觸發指定的事件型別上所有繫結的處理函式。但不會執行瀏覽器預設動作，也不會產生事件冒泡。

   trigger()觸發所有的事件（包括瀏覽器預設的）

   triggerHandler()觸發所有的事件（不包括瀏覽器預設的）

事件冒泡

1.什麼是冒泡

案例介紹

之所以稱之為冒泡,是因為事件會按照DOM的層次結構像水泡一樣不斷向

上直至頂部.

2.事件冒泡引發的問題.

事件冒泡可能會引起預料之外的效果,上例中,本來只想觸發元素

的click事件,然而

元素和元素的click事件也同時被觸

發了.因此有必要對事件的作用範圍進行限制.當單擊元素時,只

觸發元素的click事件,而不觸發

和元素上的

click事件.當單擊

元素時,只觸發 元素上的click事件,

而不觸發元素上的click事件.

為了儘快解決這些問題,我們我們先介紹以下內容:

。

事件物件:

  由於IE-DOM和標準DOM實現事件物件的方法各不相同,導致在不同

瀏覽器中獲取事件物件變得比較困難.針對這個問題,jquery進行了必要的擴

展和封裝,從而使得在任何瀏覽器中能很好的輕鬆的訪問獲取事件物件以及事

件物件的一些屬性在程式中使用事件物件非常簡單,只需要為函式新增一個參

數.

//event:事件物件

$(“element”).bind(“click”,function(event){

//coding…

})

這樣,當單擊”element”時,事件物件就被建立了,這個事件物件只有事件處理函式才能訪問到.事件處理函式在執行完畢後,事件物件就會被銷燬.

停止事件冒泡

停止時間冒泡可以阻止事件中其他物件的事件處理函式被執行.在jquery中提供了stopPropagation()方法來阻止冒泡事件.

$(“span”).bind(“click”,function(){

vartxt=$("#msg").html();+"<p>內是span元素被單擊</p>";

$(“#msg”).html(txt);

event.stopPropagation();//停止冒泡事件

})

當單擊span元素時,只會觸發span元素上的click事件,而不會觸發

div元素和body元素的click事件.

可以用同樣的方法解決

元素上的問題

阻止預設行為

網頁中的元素都有自己預設的行為,例如:單擊超連結後悔跳轉,單擊”提交”按鈕會表單會提交,有時需要阻止元素的預設行為

在jquery中,提供了preventDefault()方法來阻止元素的預設行為.

舉一個例子,在專案中,經常需要驗證表單,在單擊”提交”按鈕是,驗證表單內容,例如元素是否是必填欄位,某元素長度是否夠6位,單表單不符合提交條件時,要阻止表單的提交

eg:

$(“#sub”).bind(“click”,function(event){

 var username = $("#username").val();  //獲取元素的值

 if(username==""){     //判斷值是否為空

$("#msg").html("<p>文字框的值不能為空.</p>");  //提示資訊

event.preventDefault();  //阻止預設行為 ( 表單提交 )

} })

事件物件的屬性

(1) event.type()方法

該方法的作用是可以 獲取到事件的型別

$(“a”).click(function(event){

alert(event.type); //獲取事件型別

return false;  //阻止連結被跳轉

})

以上程式碼會返回”click”

(2)event.preventDefault()方法

阻止預設事件行為.js中符合W3C規範的preventDefault()方法在IE瀏覽器中無效.

jquery對其進行了封裝,使之能相容各大瀏覽器

(3)event.stopPropagation()方法

阻止事件的冒泡.js真符合W3C規範的stopPropagation()方法在IE瀏覽器中無效.jquery

對其進行了封裝,使之能相容各大瀏覽器

(4) event.target()方法

event.target()方法的作用是獲取到觸發事件的元素.jquery對其封裝後，避免了

W3C,IE和 Safari瀏覽器不同標準的差異

$(“a[href=’http://www.google.com‘]”).click(function(event){

    alert(event.target.href); //獲取觸發事件的a元素的href屬性值

    return false;//阻止連結跳轉

});//output “http://google.com”

(5)event.relateTarget()方法.

在標準DOM中,mouseover和mouseout所發生的元素可以通過event.target()方法

來訪問.相關元素是通過event.relateTarget()方法來訪問的.event.relatedTarget()

方法是在mouseover中相當於 IE瀏覽器的event.fromElement()方法,在mouse

中相當於IE瀏覽器的event.toElement方法. jquery對其進行了封裝,使之能相容各大瀏覽器

(6)event.pageX和event.pageY.

該方法的作用是獲取到游標相對於頁面的x座標和y座標.如果沒有使用jquery時,那麼IE瀏覽器中

是使用event.pageX()和event.pageY()方法.如果頁面上有滾動條,則還要加上滾動條的寬度和高

度.在IE瀏覽器中還應該減去預設的2px的邊框.

$(“a”).click(function(){

//獲取滑鼠相對於當前頁面的座標

alert("Current mouse position:"+event.pageX+","+event.pageY);   

  return false;//阻止連結跳轉

});

(7)event.which()方法 

 該方法的作用是在滑鼠單擊事件中獲取到滑鼠左中右鍵,在鍵盤事件中獲取鍵盤的按鍵.

$(function(){

$(“body”).mousedown(function(e){

alert(e.which); //1==滑鼠左鍵 left 2==滑鼠中鍵 3=滑鼠右鍵

});});

(8)event.originaIEvent()方法. 該方法的作用是指向原始的事件物件

 委派

live(type, [data], fn)，給所有匹配的元素附加一個事件處理函式，即使這個元素是以後再新增進來的也有效。

A標籤新增事件，之後再追加a標籤都具有相同的事件。

die(type, [fn])，從元素中刪除先前用.live()繫結的所有事件

die解綁

2.4 事件切換【瞭解】

hover([over,]out) 當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函式。當滑鼠移出這個元素時，會觸發指定的第二個函式

toggle(fn,fn2,[fn3,fn4,…])用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件

hover 在mouseover和mouseout之間進行切換

toggle 點選事件切換，點選第一次執行 fn，點選第二次執行fn2…..

    <script type="text/javascript">
        $(function(){
            //1 點選事件切換
            $("#e01").toggle(function(){
                alert("第一次");
            } ,function(){
                alert("第二次");
            });
            //2. 滑鼠移進出切換
            /*
            $("#e02").hover(function(){
                //over
                $("#divMsg").html("over");
            },function(){
                //out
                $("#divMsg").html("out");
            });
            */
            $("#e02").mouseover(function(){
                $("#divMsg").html("over");
            }).mouseout(function(){
                $("#divMsg").html("out");
            });

        });
    </script>

案例 文字提示

 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        //將預設提示去掉，改成自定義提示

        $(".tooltip").mouseover(function(event){
            if($(this).attr("title")){
                //1獲得title並記錄
                $(this).data("title",$(this).attr("title"));

                //2 刪除title提示
                $(this).removeAttr("title");
            }

            //3 顯示自定義提示
            var divObj = $("<div id='tooltip'>"+$(this).data("title")+"</div>");
            $("body").append(divObj);
            //顯示,確定顯示位置
            divObj.css({"left":event.pageX + 20 + "px" , "top" : event.pageY + 10 + "px"}).show(1000);
        }).mouseout(function(){
            $("#tooltip").remove();
        }).mousemove(function(){
            $("#tooltip").css({"left":event.pageX + 20 + "px" , "top" : event.pageY + 10 + "px"});
        });

    });

</script>
</head>
<body>
<p><a href="#" class="tooltip" title="這是我的超連結提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="這是我的超連結提示2.">提示2.</a></p>
<p><a href="#" title="這是自帶提示1.">自帶提示1.</a></p>
<p><a href="#" title="這是自帶提示2.">自帶提示2.</a> </p>
</body>
</html>

案例 圖片放大提示

<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
img{border:none;}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
    border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
</style>
<script type="text/javascript">
    $(function(){
        var x = 10;
        var y = 20;
        var href;

        $("a[class=tooltip]").mouseover(function(e){
            //1 獲取對應標籤的自帶提示
            //var title = $("a[class=tooltip]").attr("title");
            //this代表的是DOM物件(頁面中的元素)
            href = this.href;

            //刪除自帶提示
            this.href = "";

            //2 建立標籤用於自定義提示
            var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>");

            //3 將自定義提示的標籤，新增到body標籤下
            $("body").append($div);

            //4 如何調整顯示位置(相對滑鼠的座標值:e.pageX和e.pageY)
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            }).show(1000);

        }).mouseout(function(){
            this.href = href;
            $("#tooltip").remove();
        }).mousemove(function(e){
            $("#tooltip").css({
                "top" : e.pageY + y + "px",
                "left" : e.pageX + x + "px"
            });
        });
    });
</script>

</head>
<body>
<h3>有效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
    </ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>無效果：</h3>
<ul>
        <li><a href="images/apple_1_bigger.jpg" title="蘋果 iPod"><img src="images/apple_1.jpg" alt="蘋果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="蘋果 iPod nano"><img src="images/apple_2.jpg" alt="蘋果 iPod nano"/></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="蘋果 iPhone"><img src="images/apple_3.jpg" alt="蘋果 iPhone"/></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="蘋果 Mac"><img src="images/apple_4.jpg" alt="蘋果 Mac"/></a></li>
    </ul>
</body>
</html>

3 效果【瞭解】

  • show([speed,[easing],[fn]])，顯示隱藏的匹配元素。

    •三種預定速度之一的字串(“slow”,”normal”,or “fast”)或表示動畫時長的毫秒數值

  • hide([speed,[easing],[fn]])，隱藏顯示的元素

  • toggle([speed],[easing],[fn]) 如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

    •speed: 隱藏/顯示效果的速度。預設是 “0”毫秒。可能的值：slow，normal，fast。”

    •easing:(Optional) 用來指定切換效果，預設是”swing”，可用引數”linear”

    •fn:在動畫完成時執行的函式，每個元素執行一次

 基本：改變高和寬

   show(速度，fn) 顯示

          當顯示成功後觸發fn

   hide()隱藏

   toggle(speed[,fn]) 切換,如果隱藏就顯示，如果顯示就隱藏。

—————————————-

slideDown([speed],[easing],[fn])，通過高度變化（向下增大）來動態地顯示所有匹配的元素

slideUp([speed,[easing],[fn]])，通過高度變化（向上減小）來動態地隱藏所有匹配的元素

slideToggle([speed],[easing],[fn]) 通過高度變化來切換所有匹配元素的可見性

   •這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示

 滑動：改變高度

   slideDown，顯示（從上往下）

   slideUp，隱藏（從下往上）

   slideToggle()切換

———————————————————-

fadeIn([speed],[easing],[fn])，通過不透明度的變化來實現所有匹配元素的淡入效果

   •speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如：1000)

   •easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"

   •fn:在動畫完成時執行的函式，每個元素執行一次。

fadeOut([speed],[easing],[fn])，通過不透明度的變化來實現所有匹配元素的淡出效果

fadeTo([[speed],opacity,[easing],[fn]])

   •speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如：1000)

   •opacity:一個0至1之間表示透明度的數字。

   •easing:(Optional) 用來指定切換效果，預設是"swing"，可用引數"linear"

   •fn:在動畫完成時執行的函式，每個元素執行一次。

fadeToggle([speed,[easing],[fn]])，通過不透明度的變化來開關所有匹配元素的淡入和淡出效果

 淡入淡出：改變透明度

   fadeIn顯示

   fadeOut  隱藏

   fadeToggle切換

   fadeTo指定物件透明度

案例抽獎資訊顯示

    <script type="text/javascript">
        $(document).ready(function(){
            //1 建立5區域
            for(var i = 0 ; i < 5 ; i++){
                createDiv();
            }
            //2 定時器
            setInterval("showDiv()",1000);

        });

        // 顯示div
        function showDiv(){
            //2 第一次隱藏
            $("div").first().slideUp("1000",function(){
                //將當前物件追加到最後
                $(this).appendTo($("body")).fadeIn("1000");
            });
        }

        var num = 1;
        //建立div
        function createDiv(){
            var divObj = $("<div></div>");
            divObj.html(num++);
            divObj.css({
                "border": "1px solid #000",
                "height": "50px",
                "width": "500px",
                "margin":"5px",
                "font-size":"30px"
            });
            $("body").append(divObj);
        }

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

動態載入內容(缺ajax填充資料)

    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(function(){
            //1 建立5區域
            for(var i = 0 ; i < 10 ; i++){
                createDiv();
            }

            //2 視窗滾動事件
            $(window).scroll(function(){
                // 1 顯示區域高度
                var windowHeight = $(this).height();
                // 2 滾動位置
                var top = $(this).scrollTop();
                // 3 文件高度
                var documentHeight = $(document).height();

                // 1 + 2 接近 3 時 新增
                if(windowHeight + top + 100 > documentHeight){
                    createDiv();
                    //傳送ajax填充div內容
                }
                //$("#showMsg").html(height + " - " + top + " - " + h);
            });

        });

        var num = 1;
        //建立div
        function createDiv(){
            var divObj = $("<div></div>");
            divObj.html(num++);
            divObj.css({
                "border": "1px solid #000",
                "height": "100px",
                "width": "500px",
                "margin":"5px",
                "font-size":"30px"
            });
            $("body").append(divObj);
        }
    </script>

    <style type="text/css">
        #showMsg{
              position: fixed;
              border: 1px solid #000;
              width: 300px;
              height: 30px;
              left: 600px;
              bottom: 0px;
        }
    </style>
</head>

<body>
    <div id="showMsg"></div>
</body>
</html>

4 Ajax【掌握】

第一層，最原始層，$.ajax,一般不使用，完成更強大功能時需要使用。例如：如果出錯了，給出提示。

第二層，load、 . g e t 、 .post 開發中常使用用於處理ajax

第三層，