jquery的學習

在對javascript腳本語言有了深層次的學習後,決定來學習在他基礎上產生的jqueryjavascript

1、認識css

  jquery是一個輕量級的js庫,能夠幫助你寫的更少實現的更多,所以在學習了jquery後將能夠替換原生js的寫法(主要是查找元素而且爲其添加事件這些,還有ajax也有不一樣的寫法)html

2、使用java

  jquery能夠經過打包進入你的頁面中使用也能夠下載到你的計算機上使用,前者須要有網絡node

3、語法jquery

    理解這個名字就好了,經過這個庫進行query頁面元素並對其進行一些操做ajax

   基礎語法:$('selector').action() 美圓符號是對jquery的定義   緩存

   action是你要添加的一些事件 如{click,hide,ready,css,dbclick,mouseover,focus,mouseenter,change,one,bind(至關於addenventlistener),blur(失去焦點),服務器

slideToggle(隱藏或顯示),delegate(爲選中元素的子元素添加事件)網絡

 live\die  使用live爲選中元素添加事件,使用die去除

 error,replacewith若是所選元素錯誤時發生error事件

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

fidein\fadeout\fadetoggle\fadeto (淡入淡出)    fadeTo(3000(或者slow),0.6,callback);    也能夠添加回調函數

slidedown\slideuo\slidetoggle(滑動效果)

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

!!!!!!若是您但願在一個涉及動畫的函數以後來執行語句,請使用 callback 函數。

 

 

 

 

 

 

 

     $(document).ready(function(){ ...  })  至關於原生中的onload.function          在頁面加載完成前的事件:可能會出錯,好比事件中有隱藏不存在的元素,或獲取不存在的元素;

4、jquery選擇器

       一、jquery元素選擇器:$(.abc).onclick   #abc     p                     

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

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

        二、jquert屬性選擇器:$(「[href]」)  href=’#‘  href!=’#‘       href$='.jpg'(選取全部屬性以jpg結尾的元素)

        三、jquery樣式選擇器

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

5、jquery事件函數(指觸發的一些調用)

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

          jquery名稱衝突:                          

jQuery 使用 $ 符號做爲 jQuery 的簡介方式。

某些其餘 JavaScript 庫中的函數(好比 Prototype)一樣使用 $ 符號。

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

var jq=jQuery.noConflict(),幫助您使用本身的名稱(好比 jq)來代替 $ 符號。

  6、jquery動畫(animate())

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

     $("div").animate({left:'250px'},fast,function() {....});   callback回調函數是動畫完成後執行的

     });   //animate中能夠添加多條屬性

   !!!!!默認的html源數都有一個靜態位置,沒法移動,若是要操做位置須要設置position

    !!!!!!不能夠設置色彩  須要下載 Color Animations 插件

    使用相對值:width:‘+=150px’,

     使用預約義的值:height:‘toggle’

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

   var div = $("div");

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

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

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

     })

7、Chaining (鏈) 容許爲元素添加多個jquery方法

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

     .slideUp(2000)

 .slideDown(2000); \\標準寫法




jquery dom

   1、 text(設置或返回所選元素文本內容)

     html(設置或返回所選元素內容 包括html標記)  alert("html:"+$(.test).html());

    val() 設置返回單字段值    alert(」value:「$(.test).val());

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

    2、text、html、val,attr的回調函數(所選元素下標i,本來的值)

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

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

     3、添加\刪除\css類\

       append() 被選元素結尾插入內容

       prepend() 被選元素開頭插入內容

       after() 被選元素以後插入內容

       before()被選元素以前插入內容 

          使用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同上,更換相應事件方法名便可

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

    remove()刪除元素及其子元素                               empty刪除被選元素的子元素

     $("p").remove(.italic)刪除全部class=italic的p元素

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

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

   addclass()向被選元素添加一個或多個類   addclass(」blue important「) 括號裏的兩個爲已經設置好的css名稱  可選中         多 個元素,逗號隔開用雙引號括起來

   removeclass()  從被選元素刪除一個或多個類

   toggleclass() 對被選元素進行添加\刪除的切換操做

   css() 設置or返回樣式屬性

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

       $("div").css("color","yellow");  如需設置多個樣式使用花括號的形式({」color」:「green「,」font-size「:」16px「});

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

    !!!!!!!!!!!尺寸:width返回不包括內邊距               innerwidth返回包括內邊距

       

jquery 遍歷

要清晰後代的概念,子元素只隔了一層,後代使隔了>1層的
jquery提供多種遍歷方法,最大的遍歷種類使數遍歷

1、樹中向上,向下,同級遍歷(遍歷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 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。)
 $("#div1").load("test.txt",data,callback)
data是要發送的參數 callback是load執行完成後調用的事件
callback函數包括如下參數: reponseTxt(包含成功的結果內容) status(調用狀態) 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("數據:" + data + "\n狀態:" + status);
});
});
});
</script>
</head>
<body>

<button>向頁面發送 HTTP POST 請求,並得到返回的結果</button>

</body>
</html>

Jquery noConflict() 釋放$標識符控制:$.noConflict or 替換var jq = $.noConflict 
相關文章
相關標籤/搜索