Jquery
這篇文章中本來有一些圖片的,但是複製粘貼不上來,附件內容中有此篇文章全部內容
1.Jquery:
是一種js框架。
除了Jquery以外還有prototype.js插件、Extjs框架
後期我們還要學習jquery的一種UI插件,有JqueryUI和Jquery-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表示排除
(4):odd 表示選擇下標爲奇數的對象,:even表示選擇下標爲偶數的對象;
(5):lt(下標) :gt(下標)小於或者大於某個下標
(6) parent() 返回指定標籤對象父標籤;
例如:$(":checkbox:first").parent();
例如: $("p").parent(".b");
<div class="a"> <p></p><div>
<div class="b"> <p></p><div>
(7):checked 表示被選中的,表示過濾,只針對radio和checkbox使用;
(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對象或者數組, function(k,v){用於遍歷數據})
7)attr()一個參數,獲取某個屬性的值;兩個參數,爲某個屬性賦值
8)Show()、hide() 如果加參數,表示多少毫秒顯示或隱藏;
9)find()方法用於過濾,表示找指定標籤內部對象
例如:$("div").find(“span”)
10):next()表示過濾, 找指定標籤後面緊跟着的對象;
例如:$("#uid").next("span");
11):not(this) 這裏this表示當前對象;
12)offset方法獲取指定標籤在頁面上的偏移量,通過left和top屬性獲取;
13)html()方法
14)is(參數)表示判斷選擇的對象處於某種狀態,返回true或者false;例如:hidden隱藏 :selected或者:checked被選中 :visible 顯示 。參數如果是標籤名,表示該對象是否是這種標籤;
15)toggle ()方法用於顯示和隱藏的切換:
注意:1.10和1.10以上版本 只針對顯示和隱藏切換起作用,而以下版本,可以綁定多個click事件的切換;看文檔;
16) bind()方法:表示可以對該對象綁定多種事件;
例如:同時綁定click、mouseover,mouseout
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) 意思是當前對象, this是js對象,那麼如果轉化爲jquery對象,需要通過$(this)