在對javascript腳本語言有了深層次的學(xué)習(xí)后，決定來學(xué)習(xí)在他基礎(chǔ)上產(chǎn)生的jquery

一、認(rèn)識

  jquery是一個輕量級的js庫，可以幫助你寫的更少實現(xiàn)的更多，因此在學(xué)習(xí)了jquery后將可以替換原生js的寫法（主要是查找元素并且為其添加事件這些，還有ajax也有不同的寫法）

二、使用

  jquery可以通過打包進入你的頁面中使用也可以下載到你的計算機上使用，前者需要有網(wǎng)絡(luò)

三、語法

    理解這個名字就行了，通過這個庫進行query頁面元素并對其進行一些操作

   基礎(chǔ)語法：$('selector').action() 美元符號是對jquery的定義   

   action是你要添加的一些事件 如{click，hide，ready，css，dbclick,mouseover,focus,mouseenter,change,one,bind(相當(dāng)于addenventlistener),blur(失去焦點)，

slideToggle(隱藏或顯示)，delegate（為選中元素的子元素添加事件）

 live\die  使用live為選中元素添加事件，使用die去除

 error，replacewith如果所選元素錯誤時發(fā)生error事件

hide\show（顯示隱藏）   $(selector).hide(1000,callback);  toggle替代show、hide

fidein\fadeout\fadetoggle\fadeto (淡入淡出)    fadeTo(3000(或者slow),0.6,callback);    也可以添加回調(diào)函數(shù)

slidedown\slideuo\slidetoggle(滑動效果)

stop()(使有延遲speed的動畫停止)

！！！！！！如果您希望在一個涉及動畫的函數(shù)之后來執(zhí)行語句，請使用 callback 函數(shù)。

 

 

 

 

 

 

 

     $(document).ready(function(){ ...  })  相當(dāng)于原生中的onload.function          在頁面加載完成前的事件：可能會出錯，比如事件中有隱藏不存在的元素，或獲取不存在的元素；

四、jquery選擇器

       1、jquery元素選擇器：$(.abc).onclick   #abc     p                     

           $("p.intro") 選取所有 class="intro" 的 <p> 元素。

            $("p#demo") 選取所有 id="demo" 的 <p> 元素。

        2、jquert屬性選擇器:$(“[href]”)  href=’#‘  href！=’#‘       href$='.jpg'(選取所有屬性以jpg結(jié)尾的元素)

        3、jquery樣式選擇器

             $("p").css("background-color","red");

五、jquery事件函數(shù)（指觸發(fā)的一些調(diào)用）

         $（.abc).click = function () {    $(p).hide();    }

          jquery名稱沖突：                          

jQuery 使用 $ 符號作為 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函數(shù)（比如 Prototype）同樣使用 $ 符號。

jQuery 使用名為 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。

  六、jquery動畫（animate（））

     $("button").click(function(){

     $("div").animate({left:'250px'},fast,function() {....});   callback回調(diào)函數(shù)是動畫完成后執(zhí)行的

     });   //animate中可以添加多條屬性

   ！！！！！默認(rèn)的html源數(shù)都有一個靜態(tài)位置，無法移動，如果要操作位置需要設(shè)置position

    !!!!!!不可以設(shè)置色彩  需要下載 Color Animations 插件

    使用相對值：width：‘+=150px’，

     使用預(yù)定義的值：height：‘toggle’

      隊列$("button").click（function（）{

   var div = $("div");

   div.animate({},"speed",callback)  操作1

    div.animate({},"speed",callback)  操作2

     div.animate({},"speed",callback)     操作3

     }）

七、Chaining （鏈） 允許為元素添加多個jquery方法

    $("#p1").css("color","red")

     .slideUp(2000)

  .slideDown(2000);   \\標(biāo)準(zhǔn)寫法




jquery dom

   一、 text（設(shè)置或返回所選元素文本內(nèi)容）

     html（設(shè)置或返回所選元素內(nèi)容 包括html標(biāo)記）  alert("html:"+$(.test).html());

    val（） 設(shè)置返回單字段值    alert（”value：“$(.test).val()）;

      attr("獲取元素鏈接的href屬性值")

    二、text、html、val，attr的回調(diào)函數(shù)（所選元素下標(biāo)i，原本的值）

         $("#test1").text(function(i,origText){

        return "Old text: " + origText + " New text: Hello world!
        (   index: " + i + ")";

     三、添加\刪除\css類\

       append（） 被選元素結(jié)尾插入內(nèi)容

       prepend（） 被選元素開頭插入內(nèi)容

       after（） 被選元素之后插入內(nèi)容

       before（）被選元素之前插入內(nèi)容 

          使用append（prepend）添加新元素：html：var nele = ”<p>123</p>“

                     jquery var nele = $("<p></p>").text（”123“）

                      dom：  var nele = document.createelement("p");

                     $("p").append(nele); 

        使用before，after同上，更換相應(yīng)事件方法名即可

     *********************over添加****************************

    remove（）刪除元素及其子元素                               empty刪除被選元素的子元素

     $("p").remove（.italic）刪除所有class=italic的p元素

   *************************over刪除***********************

    jquery擁有若干對css進行操作的方法

   addclass（）向被選元素添加一個或多個類   addclass（”blue important“） 括號里的兩個為已經(jīng)設(shè)置好的css名稱  可選中         多 個元素，逗號隔開用雙引號括起來

   removeclass（）  從被選元素刪除一個或多個類

   toggleclass（） 對被選元素進行添加\刪除的切換操作

   css（） 設(shè)置or返回樣式屬性

       $("div").css("font-size");返回首個匹配元素的font-size值

       $("div").css("color","yellow");  如需設(shè)置多個樣式使用花括號的形式（{”color”：“green“，”font-size“：”16px“}）；

 ***************************over handle for css**********************8

    !!!!!!!!!!!尺寸：width返回不包括內(nèi)邊距               innerwidth返回包括內(nèi)邊距

       

jquery 遍歷

要清晰后代的概念，子元素只隔了一層，后代使隔了>1層的
jquery提供多種遍歷方法，最大的遍歷種類使數(shù)遍歷
 
一、樹中向上，向下，同級遍歷（遍歷dom樹）
    向上：parent（），直接父元素  parents() 所有父元素   parentsUntil（object elementnode）
    向下：children（）....   children(p.1) 返回類名為1的所有p   
        find（“div”）  返回被選元素中所有span元素    find（“*”）返回所有后代
    同胞：next  nextuntil nextall   siblings  pre  preall  preuntil
    過濾：first（）\last()\eq(1)返回被選元素中帶索引號的    filter\not

jquery ajax
( jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。)

  $("#div1").load("test.txt",data,callback)
    data是要發(fā)送的參數(shù)  callback是load執(zhí)行完成后調(diào)用的事件
   callback函數(shù)包括以下參數(shù)： reponseTxt(包含成功的結(jié)果內(nèi)容)   status（調(diào)用狀態(tài)）  xhr（包括xmlhttprequest對象） 
    xhr對象有status，statusText等屬性
    Get有緩存  Post無緩存  $.get(url,data,callback)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("數(shù)據(jù)：" + data + "\n狀態(tài)：" + status);
});
});
});
</script>
</head>
<body>

<button>向頁面發(fā)送 HTTP POST 請求，并獲得返回的結(jié)果</button>

</body>
</html>

Jquery noConflict() 釋放$標(biāo)識符控制：$.noConflict or 替換var jq = $.noConflict