首頁 > web前端 > js教程 > jQuery基本語法總結

jQuery基本語法總結

怪我咯
發布: 2017-06-27 11:13:36
原創
1742 人瀏覽過

jQuery語法:

jQuery 語法是為 HTML 元素的選取而編製的,可以對元素執行某些動作。 此是重點,初學一定要知道你學的東西的用途是做什麼。

基礎語法是:$(selector).action()。 所有的jQuery就是圍繞著這個進行的,選取頁面的元素再對元素進行某些操作。

範例

$(this).hide() - 隱藏目前元素

文件就緒函數:

是為了防止文件在完全載入(就緒)之前執行jQuery 程式碼。由jQuery的約定,所有的JavaScript程式碼最好都放在這裡面。


$(document).ready(function(){
});
登入後複製





jQuery元素選擇器和屬性選擇器:它們允許您透過標籤名稱、屬性名稱或內容對HTML 元素進行選擇。 對應$(selector).action()的前半部。

jQuery 元素選擇器:

$("p") 選取

元素。

$("p.intro") 選取所有 class="intro" 的

元素。

$("p#demo") 選取所有 id="demo" 的

元素。

 

jQuery 屬性選擇器:


$("[href]") 選取所有帶有href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。


$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

 

jQuery CSS 選擇器:

#$("p").css("background-color","re​​d");

如需完整的jquery選擇器的參考手冊:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp





jQuery 事件函數:對應$(selector).action()的後半部。


事件處理程序指的是當 HTML 中發生某些事件時所呼叫的方法。



<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>
登入後複製


Event 函數綁定函數至
$(document).ready(function)將函數綁定到文件的就緒事件(當文件完成載入時)
$(selector).click(function)觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)觸發或將函數綁定到被選元素的獲得焦點事件
#$(selector).mouseover(function)觸發或將函數綁定到被選元素的滑鼠懸停事件
#

完整的jQuery事件:http://www.w3school.com.cn/jquery/jquery_ref_events.asp




约定:


  • 把所有 jQuery 代码置于事件处理函数中

  • 把所有事件处理函数置于文档就绪事件处理器中

  • 把 jQuery 代码置于单独的 .js 文件中

  • 如果存在名称冲突,则重命名 jQuery 库





jQuery 效果对应$(selector).action()的后半部分。

隐藏、显示、切换,滑动,淡入淡出,以及动画

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);


可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。











这是一个段落。


这是另一个段落。


可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);










这是一个段落。


这是另一个段落。







jQuery 淡入淡出方法

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  • fadeIn()

  • fadeOut()

  • fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度(值介于 0 与 1 之间,0为透明,1为不透明)。





jQuery 滑动方法


通过 jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

  • slideDown()

  • slideUp()

  • slideToggle()





jQuery 动画 - animate() 方法


jQuery animate() 方法用于创建自定义动画。


$(selector).animate({params},speed,callback);
登入後複製


必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。


可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

可以用animate() 方法來操作所有CSS 屬性, 需要記住一件重要的事情:當使用animate() 時,必須使用Camel 標記法書寫所有的屬性名,例如,必須使用paddingLeft 而不是padding-left,使用marginRight 而不是margin-right,等等。


它把

元素移到左邊,直到left 屬性等於250 像素為止:





< ;body>


< ;/p>

jQuery 提供動畫的佇列功能, 這表示如果您在彼此之後寫更多個animate() 調用,jQuery 會建立包含這些方法調用的「內部」隊列。然後逐一運行這些 animate 調用。

$("button").click(function(){
  var p=$("p");
  p.animate({height:'300px',opacity:'0.4 '},"slow");
  p.animate({width:'300px',opacity:'0.8'},"slow");
  p.animate({height:'100px',opacity: '0.4'},"slow");
  p.animate({width:'100px',opacity:'0.8'},"slow");

#});

#可以用下面這種格式代替

p.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8 '},"slow");




#jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。

可選的 goToEnd 參數規定是否立即完成目前動畫。預設是 false。






<script><br>$(document).ready(function(){<br>  $("#flip").click(function( ){<br>    $("#panel").slideDown(5000);<br>  });<br>  $("#stop").click(function(){<br>  <strong>  $(" #panel").stop();</strong><br>  });<br>});<br></script>







點擊這裡,向下滑動面板< /p>

Hello world!






#Callback 函數在目前動畫100% 完成之後執行。

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("The paragraph is now hidden" );

});

完整的動畫:http://www.w3school.com.cn/jquery/jquery_ref_effects.asp




#jQuery 擁有可操作HTML 元素和屬性的強大方法。

jQuery DOM 操作:

DOM = Document Object Model(文件物件模型), 「W3C 文件物件模型獨立於平台和語言的介面,允許程式和腳本動態存取和更新文件的內容、結構以及樣式。個簡單實用的DOM 操作的jQuery 方法:


text() - 設定或傳回所選元素的文字內容


html () - 設定或傳回所選元素的內容(包括HTML 標記)

val() - 設定或傳回表單欄位的值

    $("#btn1 ").click(function(){
  •   alert("Text: " + $("#test").text());

    });

    $("#btn2").click (function(){
  •   alert("HTML: " + $("#test").html());
  • });

    $("#btn1").click(function(){
      alert("Value: " + $("#test").val());
    });

    $("button").click(function(){
      alert($("#w3s").attr("href"));
    });

設定DOM值:

$("#btn1").click(function(){
  $("#test1") .text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");

});

text()、html() 以及val() 的回呼函數, 回呼函數由兩個參數:被選元素清單中目前元素的下標,以及原始(舊的)值。然後以函數return 的傳回內容作為使用的新值。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2")#  });
});

$("#btn2").click (function(){
  $("#test2").html(function(i,origText){

    return "Old html: " + origText + " New html:Hello < /b>

    (index: " + i + ")";

  });


});

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

  $("#w3s").attr("href", function(i,origValue){

    return origValue + "/jquery";

  });


})) ;



#在DOM中加入新的值:

  • append() - 在被選元素的結尾插入內容

  • prepend() - 在被選元素的開頭插入內容

  • after() - 在被選元素之後插入內容

#before() - 在被選元素之前插入內容


$("p").append("Some appended text.");


$("p").prepend("Some prepended text.");

$("img").after("Some text after");


$("img").before(" Some text before");



#刪除DOM中的元素:

  • ##如需刪除元素和內容,一般可使用以下兩個jQuery 方法:

  • remove() - 刪除被選元素(及其子元素)

empty() - 從被選元素中刪除子元素

$("#p1").remove();


$("#p1").empty();

#jQuery remove() 方法也可接受一個參數,讓您對被刪除元素進行過濾。


此參數可以是任何 jQuery 選擇器的語法。







<script><br>$(document).ready(function(){<br>  $("button").click(function(){<br>    $("p" ).remove(".italic");<br>  });<br>});<br></script>





This is a paragraph in the p.


This is another paragraph in the p.

This is another paragraph in the p.


#





#jQuery CSS

##########jQuery 擁有若干進行CSS 操作的方法。我們將學習下面這些:############addClass() - 在被選元素中新增一個或多個類別############removeClass() - 從被選元素刪除一個或多個類別############toggleClass() - 對被選元素進行新增/刪除類別的切換操作###########css( ) - 設定或傳回樣式屬性##################






##

標題1< ;/h1>

標題2


這是一個段落。


這是另一個段落。


這是非常重要的文本!







您也可以在addClass() 方法中規定多個類別:

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

  $("#p1"). addClass("important blue");
});


#jQuery css() 方法


css () 方法設定或傳回被選元素的一個或多個樣式屬性。

如需傳回指定的CSS 屬性的值,請使用下列語法

##$("p").css("background-color");

如需設定指定的CSS 屬性,請使用下列語法:

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

如需設定多個CSS 屬性,請使用下列語法:

$("p").css({"background-color":"yellow","font-size":"200%"});




#jQuery處理元素尺寸:

透過jQuery,很容易處理元素和瀏覽器窗口的尺寸。


    width()
  • #height()
  • # #innerWidth()
  • innerHeight()
  • ##width() 方法設定或傳回元素的寬度(不包括內邊距、邊框或外邊距)。

height() 方法設定或傳回元素的高度(不包括內邊距、邊框或外邊距)。

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

  var txt="";
  txt+="Width: " + $("#p1").width() + "
";

  txt+="Height: " + $("#p1").height();

  $("#p1").html(txt);

});




innerWidth() 方法傳回元素的寬度(包括內邊距)。

innerHeight() 方法傳回元素的高度(包括內邊距)。


outerWidth() 方法傳回元素的寬度(包括內邊距和邊框)。

outerHeight() 方法傳回元素的高度(包括內邊距和邊框)。


outerWidth(true) 方法傳回元素的寬度(包括內邊距、邊框和外邊距)。

outerHeight(true) 方法傳回元素的高度(包括內邊距、邊框和外邊距)。


下面的範例設定指定的

元素的寬度與高度:

$("button").click(function (){ $("#p1").width(500).height(500); });

 



jQuery的移動:


#jQuery 遍歷,意為“移動”,用於根據其相對於其他元素的關係來「尋找」(或選取)HTML 元素。以某項選擇開始,並沿著這個選擇移動,直到抵達您期望的元素為止。


在家族樹中透過jQuery 遍歷,您能夠從被選(目前的)元素開始,輕鬆地在家族樹中向上移動(祖先),向下移動(子孫),水平移動(同胞)。這種移動稱為對 DOM 進行遍歷。

jQuery 提供了多種遍歷 DOM 的方法。遍歷方法中最大的種類是樹遍歷(tree-traversal)。

向上遍歷DOM 樹

#這些jQuery 方法很有用,它們用於向上遍歷DOM 樹:

parent()


parents()

  • parentsUntil()

  • parent() 方法傳回被選元素的直接父元素。此方法只會向上一級對 DOM 樹進行遍歷。

  • $(document).ready(function(){
  •   $("span").parent();

    });

  • parents() 方法回傳被選元素的所有祖先元素,它一路向上直到文檔的根元素()。


您也可以使用可選參數來過濾對祖先元素的搜尋。

下面的範例傳回所有 元素的所有祖先,而且它是

    元素:

    $(document).ready(function(){
      $("span ").parents("ul");
    });


    #parentsUntil() 方法傳回介於兩個給定元素之間的所有祖先元素,不包括開始也不包括結尾。

    下面的範例回傳介於

    元素之間的所有祖先元素:

    $(document).ready(function(){
      $ ("span").parentsUntil("p");
    });


    下遍歷DOM 樹


    下面是兩個用於向下遍歷DOM 樹的jQuery 方法:

    • #children()

    • ##find()


    jQuery children() 方法


    ##children() 方法傳回被選取元素的所有直接子元素。此方法只會向下一層對 DOM 樹進行遍歷。

    您也可以使用可選參數來過濾子元素的搜尋。


    $(document).ready(function(){

      $("p").children("p.1");     // class為1的p元素

    });

    find() 方法傳回被選元素的後代元素,一路向​​下直到最後一個後代。

    下面的範例回傳屬於

    後代的所有 元素:

    $(document).ready(function(){

      $("p") .find("span");

    });

    下面的範例回傳

    的所有後代:

    $(document).ready(function(){

      $("p").find("*");


    });


    #有許多有用的方法讓我們在DOM 樹進行水平遍歷:

      siblings()
    • #next()
    • ##nextAll()
    • nextUntil()
    • prev()
    • prevAll()
    • prevUntil()
    • siblings() 方法傳回所有被選元素的同胞元素。不包括自身。
    您也可以使用可選參數來過濾同胞元素的搜尋。

    $(document).ready(function(){

      $("h2").siblings("p");

    });


    next() 方法傳回被選元素的下一個同胞元素。該方法只傳回一個元素。

    $(document).ready(function(){

      $("h2").next();

    });


    nextAll() 方法回傳被選元素的所有跟隨的同胞元素。返回後面的所有元素。

    nextUntil() 方法傳回介於兩個給定參數之間的所有跟隨的同胞元素。不包括兩端的元素。

    prev(), prevAll() 以及prevUntil() 方法的工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元素(在DOM 樹中沿著同胞元素向後遍歷,而不是向前)。



    三個最基本的篩選方法是:first(), last() 和eq(),它們允許您基於其在一組元素中的位置來選擇一個特定的元素。其他過濾方法,例如 filter() 和 not() 可讓您選取符合或不符合某項指定標準的元素。

    first() 方法傳回被選元素的首個元素。



    <script><br>$(document).ready(function(){<br>  $("p p").first( ).css("background-color","yellow");<br>});<br></script>




    歡迎來到我的首頁




    這是p 中的一個段落。

                 





    <p>這是p>


    <p 中的另一個段落。


    這也是段落。


    eq() 方法傳回被選元素中指定索引號碼的元素。索引號碼從 0 開始,因此首個元素的索引號碼是 0 而不是 1。下面的範例選取第二個

    元素(索引號1):





    #

    #
    <script><br>$(document).ready(function(){<br> $("p").eq(1).css("background-color","yellow");<br>});<br></script>

    ###

    歡迎來到我的首頁

    ######

    我是唐老鴨(index 0)。

    ###

    唐老鴨 (index 1)。

                                

    我住在 Duckburg (index 2)。


    我最好的朋友是米老鼠 (index 3)。



    filter() 方法可讓您規定一個標準。不符合這個標準的元素會被從集合中刪除,符合的元素會被回傳。





    <script><br>$(document).ready(function(){<br>  $("p").filter(".intro").css(" background-color","yellow");<br>});<br></script>




    #

    歡迎來到我的首頁


    我是唐老鴨。


    我住在 Duckburg。


    我愛 Duckburg。


    我最好的朋友是 Mickey。



    not() 方法傳回所有不符合標準的元素。提示:not() 方法與 filter() 相反。

    以上是jQuery基本語法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板