JQuery基礎語法
基礎語法是:$(selector).action()
美元符號定義 jQuery
選擇符(selector)“查詢”和“查找” HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作
eg:
獲取當前HTML元素:$(this).function();
獲取指定ID元素:$("#test").function();
獲取指定字元素:$("p").function();
獲取指定類型元素(class="test"):
$("p.test").function();類選擇
$("p#test").function();ID選擇
$("href$='.jpg'").function;? .jpg結尾元素
注:JQuery函數(shù)辟邪寫在document ready函數(shù)中,eg:
$(document).ready(function(){
......
});
設置css屬性:
$("p").css("backgroud-color","red");
JQuery內置方法:
隱藏控制:
$("p").hide();隱藏
$("p").show();顯示
$("p").togle();切換隱藏模式
淡入淡出效果:
$("p").fadeIn();淡入
$("p").fadeOut();淡出
$("p").fadeToggle(speed);切換淡入淡出? value:slow? fast? /s
$("p").fadeTo(speed,opacity,callback);自定義漸變
滑動控制:
slideDown(speed,callback);下滑
slideUp(speed,callback);上滑
slideToggle(speed,callback);切換滑動
自定義動畫:
$(selector).animate({params},speed,callback);
params
:L,R,D,U,W,H;
$(selector).stop(stopAll,goToEnd);停止動畫
獲让鸱怠:
eg:
1,$("p").text() ?獲取文本 ?
2,$("p").html() ?獲取元素內容
3,$("p").val() ?獲取表單字段內容
注:設置值為$("p").text(str)清钥;
4,$(".test").attr("href"); ?獲取屬性值
注:設置屬性值 ? $(".test").attr("href","www.reibang.com");
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";/*返回拼接數(shù)據(jù)*/
});
添加:
eg:
$("p").append() - 在被選元素的結尾插入內容
$("p").prepend() - 在被選元素的開頭插入內容
$("p").after() - 在被選元素之后插入內容
$("p").before() - 在被選元素之前插入內容
刪除:
$(".test").remove() - 刪除被選元素(及其子元素)
$(".test").empty() - 從被選元素中刪除子元素
$("p").remove(".test");刪除class=test中所有<p>
添加css樣式:
$(".test").addClass(css style) - 向被選元素添加一個或多個類
$(".test").removeClass(css style) - 從被選元素刪除一個或多個類
$(".test").toggleClass(css style) - 對被選元素進行添加/刪除類的切換操作
$(".test").css("color","red") - 設置或返回樣式屬性
注:設置多個:$(".test").css({"color":"red","font-size":"1em"}):
尺寸:
$("p").width()方法設置或返回元素的寬度(不包括內邊距设拟、邊框或外邊距)惶傻。
$("p").height()方法設置或返回元素的高度(不包括內邊距、邊框或外邊距)具帮。
$("p").innerWidth()方法返回元素的寬度(包括內邊距)。
$("p").innerHeight()方法返回元素的高度(包括內邊距)低斋。
$("p").outerWidth()方法返回元素的寬度(包括內邊距和邊框)蜂厅。
$("p").outerHeight()方法返回元素的高度(包括內邊距和邊框)。
注:$("p").outerWidth(true) value 包含內邊距膊畴、邊框和外邊距掘猿。
加載數(shù)據(jù):
語法$(selector).load(URL,data,callback);
eg:
$("#test").load("test.txt");加載文件
$("#test").load("test.txt #p1");加載文件到p1元素中
注:callback
可選的 callback 參數(shù)規(guī)定當 load() 方法完成后所要允許的回調函數(shù)〈娇纾回調函數(shù)可以設置不同的參數(shù):
responseTxt- 包含調用成功時的結果內容
statusTXT- 包含調用的狀態(tài)
xhr- 包含 XMLHttpRequest 對象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")//返回狀態(tài)
alert("外部內容加載成功稠通!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
數(shù)據(jù)請求GET
$.get(URL,callback);
eg:$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
數(shù)據(jù)請求POST
$.post(URL,data,callback);
eg:$("button").click(function(){
$.post("url",
{/*請求參數(shù)*/
name:"usrer",
city:"address"
},
function(data,status){/*返回*/
alert("Data: " + data + "\nStatus: " + status);
});
});
更改Jquery前綴
$.noConflict();
eg: var jq=$.noConflict();
jq("p").text("你好!");