一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

搜索
分享

jQuery總結(jié)

 昵稱10504424 2013-11-18

jQuery:輕量及的javaScript庫

jQiery向頁面添加jQuery庫：
<script type="text/javascript" src="jQuery.js"></script>

jQiery語法：
基礎(chǔ)語法是：$(selector).action()

文檔就緒函數(shù)：
$(document).ready(function(){
--- jQuery functions go here ----
});

一 jQiery選擇器

1 元素選擇器：
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。

2 屬性選擇器：
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。

3 CSS選擇器:
$("p").css("background-color","red");把所有 p 元素的背景顏色更改為紅色

4 更多選擇器
$(this)當(dāng)前 HTML 元素
$("p")所有 <p> 元素
$("p.intro")所有 class="intro" 的 <p> 元素
$(".intro")所有 class="intro" 的元素
$("#intro")id="intro" 的元素
$("ul li:first")每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素

二 jQiery事件函數(shù)
$(document).ready(function)將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時）
$(selector).click(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點擊事件
$(selector).dblclick(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點事件
$(selector).mouseover(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件

例子：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

三 jQuery效果
語法： $(selector).anction(speed,callback);

jQuery隱藏和顯示
hide() 隱藏 show 顯示 toggle()隱藏和顯示切換 （其中這三個函數(shù)可帶速度和回調(diào)函數(shù)參數(shù)）

jQuery淡入淡出(入：進入瀏覽器，出：出去流覽器)
fadeIn() 淡入 fadeOut 淡出 fadeToggle()淡入淡出切換 fadeTo() 淡的透明度to(0--1)

$("#div3").fadeIn(3000);
$("#div2").fadeOut("slow");
$("#div3").fadeToggle(3000);
$("#div3").fadeTo("slow",0.7);

jQuery 滑動效果
slideDown() 向下滑動 slideUp() 向上滑動 slideToggle()向上向下滑動切換

四 jQuery 動畫
語法： $(selector).animate({params},speed,callback);
例子
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

jQuery stop() 方法用于在動畫或效果完成前對它們進行停止
$(selector).stop(stopAll,goToEnd);

Callback 函數(shù)在當(dāng)前動畫 100% 完成之后執(zhí)行
語法:$(selector).hide(speed,callback)

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

Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

五 獲得Html內(nèi)容和屬性

text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
attr() 方法用于獲取屬性值。
例子 $("#test").text(); $("#test").html() ;$("#test").val();$("#w3s").attr("href")
設(shè)置Html內(nèi)容和屬性
$("#test").text("hello"); $("#test").html("<h1>hello</h1>") ;
$("#test").val(hello");$("#w3s").attr("href","http://www.baidu.com")
通過回調(diào)函數(shù)
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});

六 添加新的 HTML 內(nèi)容
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
$("p").prepend("Some prepended text.");

七 刪除已有的 HTML 元素
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

八 操作css
addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設(shè)置或返回樣式屬性
$("p").css("background-color") 返回css屬性值
$("p").css("background-color","yellow") 設(shè)置css屬性
$("p").css({"background-color":"yellow","font-size":"200%"}) 設(shè)置多個css

九 尺寸方法
width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）
$(document).height() 返回文檔（HTML 文檔）的寬度和高度
$(window).height() 返回窗口（瀏覽器視口）的寬度和高度

十 jQuery遍歷
parent() 方法返回被選元素的直接父元素 $("span").parent()
parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
children() 方法返回被選元素的所有直接子元素
find() 方法返回被選元素的后代元素的指定元素 $("div").find("span") $("div").find("*") 表示div后的所有元素
siblings() 方法返回被選元素的所有同胞元素 $("h2").siblings() h1 h2 h3 都會被找到
next() 方法返回被選元素的下一個同胞元素

first() 方法返回被選元素的首個元素
last() 方法返回被選元素的最后一個元素
eq() 方法返回被選元素中帶有指定索引號的元素 $("p").eq(1)
filter() not() 方法返回匹配標(biāo)準(zhǔn)的所有元素 $("p").filter(".intro")
not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素。

十一 Ajax
1: load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中
語法：$(selector).load(URL,data,callback)
例子
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內(nèi)容加載成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

2: $.get() 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)
語法:$.get(URL,callback)
例子
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

3: $.post(URL,data,callback) 方法通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)并發(fā)送數(shù)據(jù)。
語法:$.post(URL,data,callback)
例子
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
對應(yīng)的asp文件
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    日韩美女偷拍视频久久| 国产欧美日产久久婷婷| 日韩无套内射免费精品| 国产一区欧美一区日韩一区| 亚洲内射人妻一区二区| 欧美日韩一区二区三区色拉拉| 冬爱琴音一区二区中文字幕 | 国产欧美日产中文一区| 国产一级片内射视频免费播放 | 最近最新中文字幕免费| 日本视频在线观看不卡| 亚洲国产精品久久精品成人| 午夜精品福利视频观看| 国产免费自拍黄片免费看| 日本熟妇五十一区二区三区| 国产亚洲欧美自拍中文自拍| 日本淫片一区二区三区| 午夜激情视频一区二区| 日本人妻熟女一区二区三区 | 成人三级视频在线观看不卡| 丝袜av一区二区三区四区五区| 中文字幕人妻av不卡| 中文字幕久久精品亚洲乱码| 国产亚洲精品香蕉视频播放| 日本东京热视频一区二区三区| 日韩免费国产91在线| 太香蕉久久国产精品视频| 国产日本欧美特黄在线观看| 精品亚洲香蕉久久综合网| 欧美三级不卡在线观线看| 欧美日韩国产二三四区| 久久91精品国产亚洲| 国产精品免费精品一区二区| 精品欧美国产一二三区| 夜色福利久久精品福利| 久久精品国产第一区二区三区| 91福利免费一区二区三区| 久热99中文字幕视频在线| 亚洲色图欧美另类人妻| 欧美亚洲91在线视频| 欧洲一区二区三区蜜桃|