（1）文檔就緒函數
$(document).ready(function(){
--- jQuery functions go here ----
});
為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是具體的例子：

試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小

（2）隱藏/顯示元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。

（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 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。

$("button").click(function(){
? $("#div1").fadeTo("slow",0.15);
? $("#div2").fadeTo("slow",0.4);
? $("#div3").fadeTo("slow",0.7);
});

（5）滑動[使元素上下滑動]

示例

<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
</div>
<p class="flip">請點擊這里</p>

被隱藏的元素向下滑動[顯示div]
$(selector).slideDown(speed,callback);

$("#flip").click(function(){
? $("#panel").slideDown();
});

被隱藏的元素向上滑動[隱藏div]
$(selector).slideUp(speed,callback);

$("#flip").click(function(){
? $("#panel").slideUp();
});

上下滑動[顯示/隱藏div]
$(selector).slideToggle(speed,callback);

$("#flip").click(function(){
? $("#panel").slideToggle();
});

（6）動畫
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成后所執行的函數名稱。

實例
首先把div元素的 CSS position 屬性設置為 relative、fixed 或 absolute
再把div元素移動到左邊，直到 left 屬性等于 250 像素為止，同時可以設置其他屬性。
$("button").click(function(){
? $("div").animate({
??? left:'250px',
??? opacity:'0.5',
??? height:'150px',
??? width:'150px'
? });
});

把 <div> 元素移動到右邊，然后增加文本的字號
$("button").click(function(){
? var div=$("div");
? div.animate({left:'100px'},"slow");
? div.animate({fontSize:'3em'},"slow");
});

停止動畫效果
$(selector).stop(stopAll,goToEnd);

（7）callback參數
$(selector).hide(speed,callback);

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

（8）Chaining
鏈接技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。
這樣的話，瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。

"p1" 元素首先會變為紅色，然后向上滑動，然后向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

提示：當進行鏈接時，代碼行會變得很差。

（9）獲得元素內容和屬性

獲得內容 - 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）設置元素內容和屬性

$("#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"
? });
});

可以看出，和獲取函數唯一的區別就是以上函數里面有參數，而獲取時是沒有參數的。

?

（10）添加新的 HTML 內容/元素

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容

（11）刪除 HTML 元素

移除元素：remove() - 刪除被選元素及其子元素
清空元素子元素：empty()? - 刪除子元素,保留選中元素

過濾被刪除的元素：
$("p").remove(".italic") -刪除 class="italic" 的所有 <p> 元素

(12)操作CSS

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設置或返回樣式屬性

樣式表
.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() 方法設置或返回被選元素的一個或多個樣式屬性。

設置
$("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()? 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。

innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。

outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
?
outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。

文檔的尺寸
$(document).width();
$(document).height();

窗口[瀏覽器視窗]的尺寸
$(window).width();
$(window).height();

設置指定的 <div> 元素的寬度和高度：
$("button").click(function(){
? $("#div1").width(500).height(500);
});

（15）AJAX
load()：從服務器加載數據，并把返回的數據放入被選元素中。
$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的 callback 參數是 load() 方法完成后所執行的函數名稱。

$.get() 方法通過 HTTP GET 請求從服務器上請求數據。
$.get(URL,callback);

$("button").click(function(){
? $.get("demo_test.asp",function(data,status){
??? alert("Data: " + data + "\nStatus: " + status);
? });
});

?

$.post() 方法通過 HTTP POST 請求從服務器上請求數據。
$.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 請求
$(selector).load(url,data,callback) 把遠程數據加載到被選的元素中
$.ajax(options) 把遠程數據加載到 XMLHttpRequest 對象中
$.get(url,data,callback,type) 使用 HTTP GET 來加載遠程數據
$.post(url,data,callback,type) 使用 HTTP POST 來加載遠程數據
$.getJSON(url,data,callback) 使用 HTTP GET 來加載遠程 JSON 數據
$.getScript(url,callback) 加載并執行遠程的 JavaScript 文件

(url) 被加載的數據的 URL（地址）
(data) 發送到服務器的數據的鍵/值對象
(callback) 當數據被加載時，所執行的函數
(type) 被返回的數據的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請求的所有鍵/值對選項

示例
$.ajax(options)

$(document).ready(function(){
? $("#b01").click(function(){
? htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
? $("#myDiv").html(htmlobj.responseText);
? });
});

（16）沖突
jQuery 使用 $ 符號作為 jQuery 的簡寫。如果其他 JavaScript 框架也使用 $ 符號作為簡寫怎么辦？這時：

1）您可以通過全名替代簡寫的方式來使用jQuery

noConflict() 方法會釋放會 $ 標識符的控制，這樣其他腳本就可以使用它了。

$.noConflict();
jQuery(document).ready(function(){
? jQuery("button").click(function(){
??? jQuery("p").text("jQuery 仍在運行！");
? });
});

2）您可以創建自己的簡寫
var jq = $.noConflict();
jq(document).ready(function(){
? jq("button").click(function(){
??? jq("p").text("jQuery 仍在運行！");
? });
});

3）把 $ 符號作為變量傳遞給 ready 方法

如果你的jQuery代碼塊使用$簡寫，并且您不愿意改變這個快捷方式，那么您可以把$符號作為變量傳遞給ready方法。這樣就可以在函數內使用$符號了。而在函數外，依舊不得不使用 "jQuery"

$.noConflict();
jQuery(document).ready(function($){
? $("button").click(function(){
??? $("p").text("jQuery 仍在運行！");
? });
});

?

轉載于:https://www.cnblogs.com/avivaye/archive/2013/03/29/2988922.html

總結

以上是生活随笔為你收集整理的[jQuery] jQuery函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。