[jQuery] jQuery函数
（1）文檔就緒函數(shù)
$(document).ready(function(){
--- jQuery functions go here ----
});
為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼。
如果在文檔沒有完全加載之前就運(yùn)行函數(shù)，操作可能失敗。下面是具體的例子：
試圖隱藏一個(gè)不存在的元素
獲得未完全加載的圖像的大小
（2）隱藏/顯示元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。
（3）顯示被隱藏的元素，并隱藏已顯示的元素：
$(selector).toggle(speed,callback);
用來切換 hide() 和 show() 方法。
$("button").click(function(){
? $("p").toggle();
});
（4）淡入淡出
$(selector).fadeIn(speed,callback);
$("button").click(function(){
? $("#div1").fadeIn();
? $("#div2").fadeIn("slow");
? $("#div3").fadeIn(3000);
});
$(selector).fadeOut(speed,callback);
$("button").click(function(){
? $("#div1").fadeOut();
? $("#div2").fadeOut("slow");
? $("#div3").fadeOut(3000);
});
$(selector).fadeToggle(speed,callback);
$("button").click(function(){
? $("#div1").fadeToggle();
? $("#div2").fadeToggle("slow");
? $("#div3").fadeToggle(3000);
});
$(selector).fadeTo(speed,opacity,callback);
opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。
$("button").click(function(){
? $("#div1").fadeTo("slow",0.15);
? $("#div2").fadeTo("slow",0.4);
? $("#div3").fadeTo("slow",0.7);
});
（5）滑動(dòng)[使元素上下滑動(dòng)]
示例
<div class="panel">
<p>W3School - 領(lǐng)先的 Web 技術(shù)教程站點(diǎn)</p>
</div>
<p class="flip">請(qǐng)點(diǎn)擊這里</p>
被隱藏的元素向下滑動(dòng)[顯示div]
$(selector).slideDown(speed,callback);
$("#flip").click(function(){
? $("#panel").slideDown();
});
被隱藏的元素向上滑動(dòng)[隱藏div]
$(selector).slideUp(speed,callback);
$("#flip").click(function(){
? $("#panel").slideUp();
});
上下滑動(dòng)[顯示/隱藏div]
$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
? $("#panel").slideToggle();
});
（6）動(dòng)畫
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
實(shí)例
首先把div元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute
再把div元素移動(dòng)到左邊，直到 left 屬性等于 250 像素為止，同時(shí)可以設(shè)置其他屬性。
$("button").click(function(){
? $("div").animate({
??? left:'250px',
??? opacity:'0.5',
??? height:'150px',
??? width:'150px'
? });
});
把 <div> 元素移動(dòng)到右邊，然后增加文本的字號(hào)
$("button").click(function(){
? var div=$("div");
? div.animate({left:'100px'},"slow");
? div.animate({fontSize:'3em'},"slow");
});
停止動(dòng)畫效果
$(selector).stop(stopAll,goToEnd);
（7）callback參數(shù)
$(selector).hide(speed,callback);
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
（8）Chaining
鏈接技術(shù)，允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令，一條接著另一條。
這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個(gè)動(dòng)作，您只需簡單地把該動(dòng)作追加到之前的動(dòng)作上。
"p1" 元素首先會(huì)變?yōu)榧t色，然后向上滑動(dòng)，然后向下滑動(dòng)：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
提示：當(dāng)進(jìn)行鏈接時(shí)，代碼行會(huì)變得很差。
（9）獲得元素內(nèi)容和屬性
獲得內(nèi)容 - text()、html() 以及 val()
<p id="test">this is <B>a</B> test.</p>
$("#btn1").click(function(){
? alert("Text: " + $("#test").text());
});
輸出：this is a test.
$("#btn2").click(function(){
? alert("HTML: " + $("#test").html());
});
輸出：this is <B>a</B> test.
<input type="text" id="test" value="123456">
$("#btn1").click(function(){
? alert("Value: " + $("#test").val());
});
輸出：123456
獲取屬性 - attr()
<a href="#" id="test">
$("button").click(function(){
? alert($("#test").attr("href"));
});
輸出：#
（9）設(shè)置元素內(nèi)容和屬性
$("#btn1").click(function(){
? $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
? $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
? $("#test3").val("Dolly Duck");
});
$("button").click(function(){
? $("#test4").attr({
??? "href" : "http://www.w3school.com.cn/jquery",
??? "title" : "W3School jQuery Tutorial"
? });
});
可以看出，和獲取函數(shù)唯一的區(qū)別就是以上函數(shù)里面有參數(shù)，而獲取時(shí)是沒有參數(shù)的。
?
（10）添加新的 HTML 內(nèi)容/元素
append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容
（11）刪除 HTML 元素
移除元素：remove() - 刪除被選元素及其子元素
清空元素子元素：empty()? - 刪除子元素,保留選中元素
過濾被刪除的元素：
$("p").remove(".italic") -刪除 class="italic" 的所有 <p> 元素
(12)操作CSS
addClass() - 向被選元素添加一個(gè)或多個(gè)類
removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
css() - 設(shè)置或返回樣式屬性
樣式表
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
例子
$("button").click(function(){
? $("h1,h2,p").addClass("blue");
? $("div").addClass("important blue");
});
$("button").click(function(){
? $("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
? $("h1,h2,p").toggleClass("blue");
});
（13） css() 方法
css() 方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性。
設(shè)置
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
?
返回
$("p").css("background-color");
$("p").css({"background-color","font-size"});
（14）尺寸
width()? 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。
innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。
outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
?
outerWidth(true) 方法返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內(nèi)邊距、邊框和外邊距）。
文檔的尺寸
$(document).width();
$(document).height();
窗口[瀏覽器視窗]的尺寸
$(window).width();
$(window).height();
設(shè)置指定的 <div> 元素的寬度和高度：
$("button").click(function(){
? $("#div1").width(500).height(500);
});
（15）AJAX
load()：從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。
$(selector).load(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢字符串鍵/值對(duì)集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。
$.get() 方法通過 HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。
$.get(URL,callback);
$("button").click(function(){
? $.get("demo_test.asp",function(data,status){
??? alert("Data: " + data + "\nStatus: " + status);
? });
});
?
$.post() 方法通過 HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(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);
? });
});
jQuery AJAX 請(qǐng)求
$(selector).load(url,data,callback) 把遠(yuǎn)程數(shù)據(jù)加載到被選的元素中
$.ajax(options) 把遠(yuǎn)程數(shù)據(jù)加載到 XMLHttpRequest 對(duì)象中
$.get(url,data,callback,type) 使用 HTTP GET 來加載遠(yuǎn)程數(shù)據(jù)
$.post(url,data,callback,type) 使用 HTTP POST 來加載遠(yuǎn)程數(shù)據(jù)
$.getJSON(url,data,callback) 使用 HTTP GET 來加載遠(yuǎn)程 JSON 數(shù)據(jù)
$.getScript(url,callback) 加載并執(zhí)行遠(yuǎn)程的 JavaScript 文件
(url) 被加載的數(shù)據(jù)的 URL（地址）
(data) 發(fā)送到服務(wù)器的數(shù)據(jù)的鍵/值對(duì)象
(callback) 當(dāng)數(shù)據(jù)被加載時(shí)，所執(zhí)行的函數(shù)
(type) 被返回的數(shù)據(jù)的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請(qǐng)求的所有鍵/值對(duì)選項(xiàng)
示例
$.ajax(options)
$(document).ready(function(){
? $("#b01").click(function(){
? htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
? $("#myDiv").html(htmlobj.responseText);
? });
});
（16）沖突
jQuery 使用 $ 符號(hào)作為 jQuery 的簡寫。如果其他 JavaScript 框架也使用 $ 符號(hào)作為簡寫怎么辦？這時(shí)：
1）您可以通過全名替代簡寫的方式來使用jQuery
noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識(shí)符的控制，這樣其他腳本就可以使用它了。
$.noConflict();
jQuery(document).ready(function(){
? jQuery("button").click(function(){
??? jQuery("p").text("jQuery 仍在運(yùn)行！");
? });
});
2）您可以創(chuàng)建自己的簡寫
var jq = $.noConflict();
jq(document).ready(function(){
? jq("button").click(function(){
??? jq("p").text("jQuery 仍在運(yùn)行！");
? });
});
3）把 $ 符號(hào)作為變量傳遞給 ready 方法
如果你的jQuery代碼塊使用$簡寫，并且您不愿意改變這個(gè)快捷方式，那么您可以把$符號(hào)作為變量傳遞給ready方法。這樣就可以在函數(shù)內(nèi)使用$符號(hào)了。而在函數(shù)外，依舊不得不使用 "jQuery"
$.noConflict();
jQuery(document).ready(function($){
? $("button").click(function(){
??? $("p").text("jQuery 仍在運(yùn)行！");
? });
});
?
轉(zhuǎn)載于:https://www.cnblogs.com/avivaye/archive/2013/03/29/2988922.html
總結(jié)
以上是生活随笔為你收集整理的[jQuery] jQuery函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英文环境下中文输入法的设置
- 下一篇： jquery创建并行对象或者叫合并对象