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、.get、.get、.get 、.post 開發中常使用用於處理ajax

第三層，.getJSON.getJSON.getJSON .getScript 優化輔助

4.1 load函數

必須在jQuery對象上觸發函數，發送ajax請求

load(url, [data], [callback])載入遠程 HTML 文件代碼並插入至 DOM 中

   •url:待裝入 HTML 網頁網址。

   •data:發送至服務器的 key/value 數據。在jQuery 1.3中也可以接受一個字符串了。

   •callback:載入成功時回調函數。函數有三個參數:

   •data:返回內容

   •textStatus: 代表請求狀態的

   •其值可能爲: succuss, error, notmodify,timeout 4 種)

   •XMLHttpRequest 對象

默認使用 GET 方式 - 傳遞附加參數時自動轉換爲 POST 方式

可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼

4.2 $.get

 發送的就是get請求

jQuery.get(url, [data], [callback],[type]) 通過遠程 HTTP GET 請求載入信息。

   •url:待載入頁面的URL地址

   •data:待發送 Key/value 參數。

   •callback:載入成功時回調函數。

   •type:返回內容格式，xml, html, script, json, text, _default。

jQuery.getScript(url, [callback]),通過 HTTP GET 請求載入並執行一個 JavaScript 文件。

   •頁面初次加載時不需要加載全部的javascript文件，在需要時動態加載

jQuery.getJSON(url, [data], [callback]) 通過 HTTP GET 請求載入 JSON 數據。

4.3 $.post

 發送post請求

jQuery.post(url, [data], [callback],[type]),通過遠程 HTTP POST請求載入信息。

   •url:發送請求地址。

   •data:待發送 Key/value 參數。

   •callback:發送成功時回調函數。

   •type:返回內容格式，xml, html, script, json, text, _default。

4.4 $.ajax

 底層原始ajax請求方式

 格式1：jQuery.ajax(url,[settings])

 格式2：jQuery.ajax(settings); 使用json格式設置多項數據

                //4 $.ajax
                // * async 設置是否異步，true：表示異步（ajax）
                // * type 設置請求方式。例如：get、post
                // * url 設置請求路徑
                // * data 請求參數
                // * dataType 設置數據轉換類型，例如：xml, html, script, json
                // * success  成功回調
                // * error 錯誤回調
                $.ajax({
                    "async":true,
                    "type":"POST",
                    "url":url,
                    "data":params,
                    "success":function(data){
                        alert(data);
                    },
                    "error" : function(){
                        alert("錯誤");
                    }
                });

4.5 表單序列化

在客戶端與服務器端進行通信時，常常需要將客戶端瀏覽器中的內容發送至服務器端進行處理。

如果需要發送的內容較少時，處理比較方便。但在真實項目中，往往需要處理的數據內容很複雜。

jQuery提供了相應的方法幫助開發者解決這個問題。

serialize()方法

   •該方法作用於一個jQuery對象，可以將DOM元素內容序列化爲字符串。方便客戶端發送請求。



   所有內容：有name，有值（非空）--文本有數據，單選多選選中，下拉列表選中等

   字符串：key=value&key=value&....

   應用場景：$.get

serializeArray()方法

   •該方法作用於一個jQuery對象，可以將DOM元素內容序列化爲JSON數據格式。

   •注：此方法返回的是JSON對象而非JSON字符串。

serializeArray()將表單中所有內容轉成json數組

5 Javascript跨域

域名：（英語：Domain Name），又稱網域、網域名稱，是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名稱，用於在數據傳輸時標識計算機的電子方位（有時也指地理位置）。

域：服務器域名，唯一標識（協議、域名、端口）必須保證一直，說明域相同。

跨域：兩個不同域名之間的通信，稱之爲跨域。例如：http://www.baidu.com和http://www.sina.com.cn。

跨域：在一個服務器上，去訪問另一個服務器

jQuery如何實現跨域請求？使用JSONP形式實現跨域。

javascript如果調用另一個域程序，不能執行當前域js函數。

什麼是JSONP

   •JSONP（JSON with Padding）是數據交換格式 JSON 的一種“使用模式”，可以讓網頁從別的網域要資料。

   •由於同源策略，一般來說位於 server.example.com 的網頁無法與不是 server.example.com 的服務器溝通，而 HTML 的 <script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。

js方式

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //編碼
        response.setContentType("application/json;charset=UTF-8");

        //1 獲得請求方式
        String method = request.getMethod();
        System.out.println("請求方式： " + method);

        //2 獲得請求參數
        String username = request.getParameter("username");
        System.out.println(username);

        //3 服務器返回數據--json  (框架：jsonlib  fastjson flex 等)
        String jsonStr = "{\"success\":\"用戶操作成功\",\"info\":\"提示信息\"}";
        //String jsonStr = "{'success':'用戶操作成功','info':'提示信息'}";  //非法格式
        response.getWriter().print(jsonStr);

    }

    <script type="text/javascript">
        function showData(data){
            alert(data.success);    
        }
    </script>
    <script type="text/javascript" src="http://localhost/web/getData?callback=showData"></script>
</head>
<body>  
    <input type="button" value="發送ajax" />
</body>

jQuery方式

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //編碼
        response.setContentType("application/json;charset=UTF-8");

        //1 獲得請求方式
        String method = request.getMethod();
        System.out.println("請求方式： " + method);

        //2 獲得請求參數
        String username = request.getParameter("username");
        System.out.println(username);

        //3 服務器返回數據--json  (框架：jsonlib  fastjson flex 等)
        String jsonStr = "{\"success\":\"用戶操作成功\",\"info\":\"提示信息\"}";
        //String jsonStr = "{'success':'用戶操作成功','info':'提示信息'}";  //非法格式
        response.getWriter().print(jsonStr);

    }

    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $.getJSON("http://localhost/web/getData?callback=?",function(data){
            alert(data.success)
        }); 
    </script>   
</head>
<body>  
    <input type="button" value="發送ajax" />  
</body>

6 表單驗證插件Validation

1.引入插件文件 2.在頁面加載完畢之後,執行一段語句$(“#commentForm”).validate(); 3.在需要驗證的組件中增加class=”” 必填: required email url

匿名自調

(function(){ alert("TTTT"); })(); //( )();

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

1 篩選[掌握]

1.1 過濾

1.2 查找

1.3 串聯

2 事件

2.1 常見事件

2.2 頁面載入【掌握】

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

2.4 事件切換【瞭解】

3 效果【瞭解】

 基本：改變高和寬

 滑動：改變高度

 淡入淡出：改變透明度

4 Ajax【掌握】

4.1 load函數

4.2 $.get

4.3 $.post

4.4 $.ajax

4.5 表單序列化

5 Javascript跨域

6 表單驗證插件Validation

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

本地安裝谷歌的插件之 CRX格式插件離線安裝

楊老師課堂_安卓教程第一篇之入門

楊老師課堂_Java教程第二篇之變量及運算符

楊老師課堂之JavaWeb體系的MVC與三層架構有什麼區別

楊老師課堂之JavaWeb項目架構之NFS文件服務器

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結