2016 8 16 JQuery學習記錄

2022-05-05 01:42:10 字數 2304 閱讀 6910

1.$(document).ready(function(){});

這個函式會在瀏覽器載入完頁面之後,盡快執行;

2.所有的jquery函式用有個$開始表示,all jquery functions start with a$;jquery選擇器通常選擇html元素,然後做一些元素。

例如:$("button").addclass("animated bounce");     //選擇button標籤元素,呼叫animated庫中的css,使其跳動起來;

4.jquery也可以通過$(".classname").addclass("   ");    來操作同一類的元素標籤,做同樣的動作;

例如:$(".well").addclass("animated shake");

5.jquery也可以通過$("#idname").addclass("   ");    來操作乙個id名字的元素標籤,做出動作;

例如: $("#target3").addclass("fadeout");

7.我們也可以在頁面載入後,執行移除class的動作,出現動畫效果,通過函式removeclass(「」);

例如: $("button").removeclass("btn-default");

8.jquery還提供給我們,css()函式用了改變乙個元素的css樣式,在頁面載入後,產生動畫效果;

例如:$("#target1").css("color","red");

9.jquery還允許我們通過函式,改變非css屬性的html標籤的屬性,函式.prop()。prop()允許您調整元素的性質。

例如:$("#target1").prop("disabled",true);

10.jquery允許使用函式.html(),這個函式可以新增html標籤;

例如:$("#target4").html("#target4");     //這樣就在id=target4的元素上,改變了他的text的內容以及屬性

11.jquery庫的remove()函式可以,移除乙個html標籤的所有內容,包括標籤本身:

例如:$("#target4").remove();

13.jquery庫允許,除了移動元素外,你也可以將它們從乙個地方複製到另乙個地方。通過函式clone(),可以把元素從乙個地方複製到另乙個地方

14.每個html元素都有,從它的父元素繼承的屬性。也就是說,包含在中的標籤元素,繼承了class=「container-fluid」的樣式;

jquery庫,有乙個功能叫做parent()允許你訪問,僅僅是上一層的父元素,的任何乙個你選擇的元素。

例如:$("#target1").parent().css("background","red");           //這裡就是讓id=「target1」的元素的,僅僅是上一層父元素,的背景變為紅色

15.當然有通過子元素來操作父元素的函式,就有通過父元素來操作子元素的函式。那就是.children()函式

例如:$("#right-well").children().css("color","orange");

16.jquery庫允許,你通過函式nth-child(n),目標:nth-child(n)的css選擇器允許你選擇所有父元素中的第n個元素,同時做出同樣的動作。

例如:$(".target:nth-child(2)").addclass("animated bounce");   //這裡就是讓所有的target類中的第二個元素,同時跳動

17.jquery庫中,可以使用even表示偶數,odd表示奇數,所以在操作相應元素時,也可以指定父元素中所有的偶元素或者所有的奇數元素:

例如:$(".target:even").addclass("animated shake");    //這裡就是控制所有的偶數元素一起顫抖

18.當然jquery庫中用$表示的html元素可以是任何,包括,我們可以操作這個頁面,使用同乙個炫酷的效果;

例如: $("body").addclass("animated fadeout");   //這個效果是使頁面,整體消失,漸漸的

$("body").addclass("animated hinge");       //這個效果是使頁面,掛起,然後掉落的感覺,it』s amazing!

jquery 學習 一 初識jquery

1,引入jquery 2,與 jquery 的關係 first 等價於 jquery first 3,比較 document ready function window.onload 及 function window.onload document ready 執行時機 等待網頁中所有內容載入完成...

JQuery學習之jQuery尺寸

1.width 和height 方法 width 設定或返回元素的寬度 不包括內邊距,邊框或外邊距 height 設定或返回元素的高度 不包括內邊距,邊框或外邊距 button click function var txt txt width div1 width txt height div1 h...

JQuery學習筆記 如何使用JQuery

的意思是jquery window.jquery window.因此jquery document document document是網頁中的物件,這裡指代整個網頁內容。獲取乙個class的方法jquery someclass css border 1px solid red 獲取乙個id的方法j...