Jquery總結

Jquery


這篇文章中本來有一些圖片的,但是複製粘貼不上來,附件內容中有此篇文章全部內容

1.Jquery:

是一種js框架

除了Jquery以外還有prototype.js插件Extjs框架

後期我們還要學習jquery的一種UI插件,有JqueryUIJquery-EasyUI(常用重點)兩種;

2.Jquery能夠做哪些事情?

實現頁面特效

例如:顯示隱藏、動畫效果、ajax技術、以及操作DOM

簡化了我們的代碼,使開發者開發更加效率;


4.開發中常用的版本是:1.6

咱們講解1.11

5.Jquery中選擇器:

 1)id選擇器$("#id屬性值") 按照id屬性值選擇對象;返回結果是jquery的對象,不是js對象,因此沒有value或者其他區屬性;

    例如:$("#empTab").css("css屬性","").css("color",red); 注意,jquery可以這樣連續給定方法,如果是獲取到具體值了,到頭了;

例如:css{"css屬性":"","屬性":""...}

 2)class選擇器:$(".class屬性值"),按照class屬性值找標籤,返回jquery對象; 注意:$(".ood_tr")[0]錯誤的,因爲$(".ood_tr")返回不是數組; 

 3)按照標籤名找$(標籤名)

 空格表示向裏面找 

 4)表示過濾的:

   (1:eq(下標從0開始

  例如:$("table:eq(2)") table標籤且爲第三個table標籤;

        例如:$("table:eq(1) tr:eq(0)") 表示找第一個table,裏面的第一行;

   (2:last   :first 表示慮,找第一個或者最後一個: 

例如:$("table:eq(1) tr:first")

     (3:not表示排除 

   (4odd 表示選擇下標爲奇數的對象even表示選擇下標爲偶數的對象;

   (5lt(下標) gt(下標)小於或者大於某個下標  

(6) parent() 返回指定標籤對象父標籤

例如:$(":checkbox:first").parent();   

    例如: $("p").parent(".b");

     <div class="a"> <p></p><div>

     <div class="b"> <p></p><div>

 (7):checked 表示被選中的,表示過濾,只針對radiocheckbox使用; 

8:checkbox 表示找type屬性爲checkbox的標籤;(其他可以仿照)

9按照任意屬性找標籤對象,表示過濾:語法[屬性=‘值’]

 例如:$(":checkbox[name='items']")

6.Jquery事件:

   1)click事件,單擊事件;例如:

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

});

2) mouseover事件;

3) mouseout事件;

4) focus、 blur、 mousemove

7.Jquery常用方法

1)css方法:

  css("css屬性","") 對標籤對象給定一種樣式;

  css({"css屬性":"","屬性":""...});給定多種樣式;

  1.6版本沒有: 

  css"",function(){}) 給定樣式時,觸發回調函數   

2)addClass("參數") removeClass(參數);

添加或移除已有的class樣式,不能覆蓋已有的css樣式 

3)Ready方法 

4)index方法:

表示獲取指定標籤中某個標籤對象的下標

例如:$("table tr:not(:first,:last)").index($(this))

5)remove方法,移除指定標籤對象;

例如:$("table tr:first").remove(); 

6$("選擇器").each(function(){...})

  表示選擇的每一個對象像都執行該方法;相當於遍歷;注意,這個裏面使用$this) 表示該對象;

$.each(json對象或者數組, functionk,v{用於遍歷數據}) 

7)attr()一個參數,獲取某個屬性的值;兩個參數,爲某個屬性賦值

8)Show()hide()  如果加參數,表示多少毫秒顯示或隱藏

9)find()方法用於過濾,表示找指定標籤內部對象

例如:$("div").find(“span”)

10):next()表示過濾, 找指定標籤後面緊跟着的對象

例如:$("#uid").next("span");

11):not(this) 這裏this表示當前對象;

12)offset方法獲取指定標籤在頁面上的偏移量,通過lefttop屬性獲取; 

13)html()方法 

14)is(參數)表示判斷選擇的對象處於某種狀態,返回true或者false例如:hidden隱藏 :selected或者:checked被選中  :visible 顯示 。參數如果是標籤名,表示該對象是否是這種標籤; 

15toggle ()方法用於顯示和隱藏的切換

注意:1.101.10以上版本 只針對顯示和隱藏切換起作用,而以下版本,可以綁定多個click事件的切換;看文檔; 

16) bind()方法:表示可以對該對象綁定多種事件

例如:同時綁定clickmouseovermouseout 

17) Html()表示獲取文本,識別html標籤

text() 不解析html標籤;有參數爲標籤文本賦值,無參數獲取文本; 

18) append(參數)向指定標籤對象內部追加文本,不會替換已有內容;19)  after(參數)向指定標籤後面追加文本

 before(參數)向指定標籤對象前方追加文本

20) val() 一個參數:爲value屬性賦值,

沒有參數:表示獲取value屬性值; 

21) 表單序列化 $().serialize()

 $()選擇器必須選擇指定form表單, 序列化後返回字符串,字符串格式爲:&name屬性=&。。。。

22) e.pageX  e.pageY  獲取光標在頁面位置:

$("#btn").mousemove(function(e){alert(e.pageY+":"+e.pageX);});

23$.trim(參數去掉指定字符串左右空格;

8.其他:

$(this) 意思是當前對象, thisjs對象,那麼如果轉化爲jquery對象,需要通過$(this)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章