jqiery常用方法

『壹』 jquery的引用方式有幾種分別是什麼

總共有三種引用方式。

1、最常用的，引入樣式表，在樣式表中編寫樣式，引入方式如下：

<link href="css/style.css" rel="stylesheet" type="text/css">

2、在Html頭部用<style></style>包起來，在這裡面編寫樣式：

<style type="text/css">

*{

padding: 0;margin: 0

}

</style>

3、在標簽裡面直接編寫行內樣式。

<div style="color: #333"><div>

當然還有一種方式是用JS直接更改或者賦值給某個標簽，但是其實是屬於第三種的范圍的。

『貳』 jquery中的常用事件bind、hover、toggle等示例介紹

1.$(document).ready()
$(document).ready()是jQuery中響應JavaScript內置的onload事件並執行任務的一種典型方式。它和onload具有類似的效果。但是也有一些差異：
當一個文檔完全下載到瀏覽器中時，會觸發window.onload事件。而使用$(document).ready()注冊的事件處理程序會在html下載完成並解析為Dom樹之後，代碼就可以運行，但並不意味著所有關聯文件都已經下載完畢。
一個頁面中一般只有一個onload事件處理程序，而且只能一次保存對一個函數的引用；而$(document).ready()是可以有多個。
一般來說$(document).ready()都要優於使用onload事件處理程序。但是如果關聯文件還沒有載入完成，則類似圖像高度、寬度的屬性的調用就會有問題，因此需要在不同的時候選擇合適的方法。
$(document).ready()有三種寫法，分別是：
$(document).ready(function(){
//thisis
the
coding...
});
$().ready(function(){
//thisis
the
coding...
});
$(function(){
//thisis
the
coding...
});
2.事件綁定
語法
$(selector).bind(event,data,function)
參數和描述：
event：必需。規定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data
可選。規定傳遞到函數的額外數據。
function
必需。規定當事件發生時運行的函數。
對應的有unbind()：移除事件
Eg:
$(『#idchoose').unbind(「click」,Function_Name)
簡寫綁定事件：一般比較喜歡偏向簡寫
$("#dividelement").bind("click",function(){//do
something})改寫為：
$("#dividelement").click(function(){//do
something
}
jQuery通過使用.bind()方法為元素進行事件綁定，通過使用.unbind()方法為元素進行解除綁定。而且.bind()方法是可以執行多次綁定的，如果沒有綁定，在進行解除綁定的時候，這都是安全的。
很多時候某一個事件只需要觸發一次，隨後就要立即解除綁定，按照傳統的做法，我們可能會先進行事件綁定，然後在事件執行完畢後進行解除綁定。jQuery為我們提供了一種簡寫的方法.one來專門解決上述情景下的繁瑣的代碼編寫，示例如下：
$(document).ready(function(){
$('#swotcjer').one('click',toggleStyleSwitcher);
});
附帶說下，用bind綁定事件的好處是可以定義自定義的事件，而且可以一次綁定多個事件。
3.合成事件
在進行事件捕獲的時候，常常需要捕獲組合的用戶操作，並且以多個函數作為響應，這些事件我們稱為復合事件。
jQuery提供的.ready()方法就是最常用的符合事件方法之一，除此之外，還有進行交互處理的時候用到的兩個函數：
.hover(enter,leave)
一個模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種「保持在其中」的狀態。
$(function(){
$("#panelh5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
.toggle(fn1,fn2,..fnN)
每次點擊時切換要調用的函數。用於模擬滑鼠連續單擊事件。示例:
$(function(){
$("#panelh5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
4.事件對象與事件冒泡
事件對象：在程序中使用事件對象非常簡單，只需要為函數添加一個參數，eg:
$(「element」).click(function(event){
//event:事件對象
})
當點擊「element」元素時候，事件對象就被創建了。這個對象只有事件處理函數能訪問。當事件處理函數執行完畢，事件對象就被銷毀了。
事件捕獲：
允許多個元素響應事件的一種策略。在事件捕獲的過程中，事件首先會交給最外層的元素，接著再交給更具體的元素。
(body->div->span)
事件冒泡：另外一種相反的策略叫時間冒泡，當事件發生時，會首先發送給最具體的元素，在這個元素獲得響應機會之後，事件會向上冒泡到更一般的元素。事件冒泡有時候會產生副作用，導致始料不及的行為。
(span->div->body)
阻止事件冒泡的三種方法
通過調用.preventDefault()方法可以在出發默認操作之前終止事件。
調用event.stopPropagation()停止事件傳播
jQuery提供了一個.stopPropagation()方法，使用該方法可以完全阻止事件冒泡。
5.使用event.tatget屬性明確事件對象
事件處理程序中event保存著事件對象。而event.tatget屬性保存著發生事件的目標元素。這個屬性是DOMAPI中規定的，但是沒有被所有瀏覽器實現。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都能夠使用這個屬性。通過.target，可以確定DOM中首先接收到事件的元素。而且，我們知道this引用的是處理事件的DOM元素。
使用event.tatget屬性
明確事件對象阻止事件冒泡的代碼如下：
$(document).ready(function(){
$('switcher').click(function(event){
if(event.target==
this)
{
$('switcher.button').toggleClass('hidden');
}
};)
});
其他事件對象屬性可以參考w3c上的介紹。

『叄』 Jquery中常用的AJax的方法有哪幾個

jQuery中ajax的4種常用請求方式：

1.$.ajax()返回其創建的 XMLHttpRequest 對象。
$.ajax() 只有一個參數：參數 key/value 對象，包含各配置及回調函數信息。詳細參數選項見下。
如果你指定了 dataType 選項，請確保伺服器返回正確的 MIME 信息，(如 xml 返回 "text/xml")。
實例：
保存數據到伺服器，成功時顯示信息。
$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);

}
}
});

2.通過遠程 HTTP GET 請求載入信息。
這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
實例：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

3. 通過遠程 HTTP POST 請求載入信息。
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
實例：
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})

4.通過 HTTP GET 請求載入 JSON 數據。
實例：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});

『肆』 jquery 怎麼用

1、首先在官網下載jQuery，共有兩個版本。Proction version - 用於實際的網站中，已被精簡和壓縮。Development version - 用於測試和開發（未壓縮，是可讀的代碼）。

2、把 jQuery 添加到您的網頁。jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的 <script> 標簽引用它。

『伍』 淺析jQuery中常用的元素查找方法總結

$("#myELement") 選擇id值等於myElement的元素 id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素 $("div") 選擇所有的div標簽元素 返回div元素數組 $(" myClass") 選擇使用myClass類的css的所有元素 $("*") 選擇文檔中的所有的元素 可以運用多種的選擇方式進行聯合選擇 例如$("#myELement div myclass")

層疊選擇器 $("form input") 選擇所有的form元素中的input元素 $("#main > *") 選擇id值為main的所有的子元素 $("label + input") 選擇所有的label元素的下一個input元素節點 經測試選擇器返回的是label標簽後面直接跟一個input標簽的所有input標簽元素 $("#prev ~ div") 同胞選擇器 該選擇器返回的為id為prev的標簽元素的所有的屬於同一個父元素的div標簽

基本過濾選擇器 $("tr:first") 選擇所有tr元素的第一個 $("tr:last") 選擇所有tr元素的最後一個 $("input:not(:checked) + span")

過濾掉 checked的選擇器的所有的input元素 $("tr:even") 選擇所有的tr元素的第 個元素（注意 因為所選擇的多個元素時為數組 所以序號是從 開始） $("tr:odd") 選擇所有的tr元素的第 個元素 $("td:eq( )") 選擇所有的td元素中序號為 的那個td元素 $("td:gt( )") 選擇td元素中序號大於 的所有td元素 $("td:ll( )") 選擇td元素中序號小於 的所有的td元素 $(":header") $("div:animated")

內容過濾選擇器 $("div:contains( John )") 選擇所有div中含有John文本的元素 $("td:empty") 選擇所有的為空（也不包括文本節點）的td元素的數組 $("div:has(p)") 選擇所有含有p標簽的div元素 $("td:parent") 選擇所有的以td為父節點的元素數組

可視化過濾選擇器 $("div:hidden") 選擇所有的被hidden的div元素 $("div:visible") 選擇所有的可視化的div元素

屬性過濾選擇器 $("div[id]") 選擇所有含有id屬性的div元素 $("input[name= newsletter ]") 選擇所有的name屬性等於 newsletter 的input元素 $("input[name!= newsletter ]") 選擇所有的name屬性不等於 newsletter 的input元素 $("input[name^= news ]") 選擇所有的name屬性以 news 開頭的input元素 $("input[name$= news ]") 選擇所有的name屬性以 news 結尾的input元素 $("input[name*= man ]") 選擇所有的name屬性包含 news 的input元素 $("input[id][name$= man ]") 可以使用多個屬性進行聯合選擇 該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

子元素過濾選擇器 $("ul li:nth child( )") $("ul li:nth child(odd)") $("ul li:nth child( n + )") $("div span:first child") 返回所有的div元素的第一個子節點的數組 $("div span:last child") 返回所有的div元素的最後一個節點的數組 $("div button:only child") 返回所有的div中只有唯一一個子節點的所有子節點的數組

表單元素選擇器 $(":input") 選擇所有的表單輸入元素 包括input textarea select 和 button $(":text") 選擇所有的text input元素 $(":password") 選擇所有的password input元素 $(":radio") 選擇所有的radio input元素 $(":checkbox") 選擇所有的checkbox input元素 $(":submit") 選擇所有的submit input元素 $(":image") 選擇所有的image input元素 $(":reset") 選擇所有的reset input元素 $(":button") 選擇所有的button input元素 $(":file") 選擇所有的file input元素 $(":hidden") 選擇所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器 $(":enabled") 選擇所有的可操作的表單元素 $(":disabled") 選擇所有的不可操作的表單元素 $(":checked") 選擇所有的被checked的表單元素 $("select option:selected") 選擇所有的select 的子元素中被selected的元素 選取一個name 為」S_ _ ″的input text框的上一個td的text值 $(」input[@name =S_ _ ]「) parent() prev() text() 名字以」S_」開始 並且不是以」_R」結尾的 $(」input[@name ^= S_ ]「) not(」[@name $= _R ]「) 一個名為radio_ 的radio所選的值 $(」input[@name =radio_ ][@checked]「) val(); $("A B") 查找A元素下面的所有子節點 包括非直接子節點 $("A>B") 查找A元素下面的直接子節點 $("A+B") 查找A元素後面的兄弟節點 包括非直接子節點 $("A~B") 查找A元素後面的兄弟節點 不包括非直接子節點

$("A B") 查找A元素下面的所有子節點 包括非直接子節點 例子 找到表單中所有的 input 元素 HTML 代碼: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代碼: $("form input") 結果: [ <input name=name /> <input name=newsletter /> ]

$("A>B") 查找A元素下面的直接子節點 例子 匹配表單中所有的子級input元素 HTML 代碼: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代碼: $("form > input") 結果: [ <input name=name /> ]

$("A+B") 查找A元素後面的兄弟節點 包括非直接子節點 例子 匹配所有跟在 label 後面的 input 元素 HTML 代碼: <form> <label>Name:</label> <input name=name /> <fieldset> <label>Newsletter:</label> <input name=newsletter /> </fieldset> </form> <input name=none /> jQuery 代碼: $("label + input") 結果: [ <input name=name /> <input name=newsletter /> ]