jquary常用方法

Ⅰ 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中常用的元素查找方法總結

$("#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 /> ]

Ⅲ 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("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?，前面加上http://", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});

Ⅳ 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 常用使用方法

新窗口打開鏈接 XHTML Strict 版本不支持 target="_blank" 屬性 而使用 JQuery 能很好地解決這個問題 實現新窗口打開網頁

復制代碼 代碼如下:

$( a[@rel$= external ] ) click(function(){ this target = "_blank"; }); /* Usage: <a href=" target=_blank >css教程("padding" " em em" ); //B Target anything above IE if ($ browser msie && $ browser version > ) $("#menu li a") css("padding" " em em" ); //C Target IE and below if ($ browser msie && $ browser version <= ) $("#menu li a") css("padding" " em em" ); //D Target Firefox and above if ($ browser mozilla && $ browser version >= " " ) $("#menu li a") css("padding" " em em" );

字元串替換 用 JQuery 能對文本內容中的特定字元串進行替換操作

復制代碼 代碼如下:

var el = $( #id ); el (el () replace(/word/ig ""));

列高度相等 用 CSS 實現兩列高度相等並不容易 JQuery 能幫你解決

復制代碼 代碼如下:

function equalHeight(group) { tallest = ; group each(function() { thisHeight = $(this) height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group height(tallest); } /* Usage: $(document) ready(function() { equalHeight($(" recent article")); equalHeight($(" footer col")); }); */

字體大小重設 字體大小重設是一個非常常用的功能

$(" resetFont") click(function(){ $( ) css( font size originalFontSize); }); // Increase Font Size $(" increaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); // Decrease Font Size $(" decreaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); });

禁用右鍵菜單 有許多 JavaScript 代碼段可禁用右鍵菜單 但 JQuery 使操作變得更容易

復制代碼 代碼如下:

Ⅵ 怎麼通過JQuery 獲取 該對象 的 所有 屬性和值

1、JQuery的核心的一些方法
each(callback) '就像循環
$("Element").length; 『元素的個數，是個屬性
$("Element").size(); '也是元素的個數，不過帶括弧是個方法
$("Element").get(); 『某個元素在頁面中的集合，以數組的形式存儲
$("Element").get(index); '功能和上面的相同，index表示第幾個元素，數組的下標
$("Element").get().reverse(); 『把得到的數組方向
$("Element1").index($("Element2")); '元素2在元素1中的索引值是。

2、基本對象獲取(注意這里獲取的都是Jquery對象而不是Dom對象哦，但是他倆是可以轉換滴)
$("*") 『表示獲取所有對象 但是我至今沒這樣用過
$("#XXX") '獲得 id=XXX 的元素對象（id可以是標簽的id或CSS樣式id） 常用

$("input[name='username']") 獲得input標簽中name='userName'的元素對象 常用

$(".abc") ' 獲得樣式class的名字是.abc的元素對象 常用
$("div") ' 標簽選擇器 選擇所有的div元素 常用
$("#a,.b,span") '表示獲得ID是a的元素和使用了類樣式b的元素以及所有的span元素
$("#a .b p") 'ID號是a的並且使用了 b樣式的 所有的p元素

3、層級元素獲取
$("Element1 Element2 Element3 ....") '前面父級 後面是子集
$("div > p") '獲取div下面的所有的 p元素
$("div + p") 'div元素後面的第一個 p元素
$("div ~ p") 'div後面的所有的 p元素

4、簡單對象獲取
$("Element:first") 'HTML頁面中某類元素的第一個元素
$("Element:last") 'HTML頁面中某類元素的最後一個元素
$("Element:not(selector)") '去除所有與給定選擇器匹配的元素,如：$("input:not(:checked)") 表示選擇所有沒有選中的復選框
$("Element:even") '獲得偶數行
$("Element:odd「）'獲得奇數行
$("Element:eq(index)") '取得一個給定的索引值
$("Element:gt(index)") '取得給定索引值的元素 之後的所有元素
$("Element:lt(index)") '取得給定索引值的元素 之前的所有元素

5、內容對象的獲取和對象可見性
$("Element:contains(text)") '元素中是否包含text文本內容
$('Element:empty") '獲得元素不包含子元素或文本的
$("Element:partnt") '獲得元素包含子元素或文本的
$("Element:has(selector)") 『是否包含某個元素， 如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '選擇所有可見元素
$("Element:visible") '選擇所有不可見元素

6、其他對象獲取方法
$("Element[id]") '所有帶有ID屬性的元素
$("Element[attribute = youlika ]" '獲得所有某個屬性為youlika的元素
$("Element[attribute != youlika ]" '獲得所有某個屬性為不是youlika的元素
$("Element[attribute ^= youlika ]" '獲得所有某個屬性為不是youlika的開頭的元素
$("Element[attribute $= youlika ]" '獲得所有某個屬性為不是youlika的結尾的元素
$("Element[attribute *= youlika ]" '獲得所有某個屬性包含youlika的開頭的元素
$("Element[selector1][selector2][....]") '符合屬性選擇器，比如$("input[id][name][value=youlika ]")表示獲得帶有ID、Name以及value是youlika 的input元素。

7、子元素的獲取
$("Element:nth-child(index)") '選擇父級下面的第n個元素
$("Element:nth-child(even)") '選擇父級下面的偶數
$("Element:nth-child(odd)") '選擇父級下面的奇數
$("Element:nth-child(3n+1)") '表達式
$("Element:first-child") '選擇父級下面的第一個子元素
$("Element:last-child") '選擇父級下面的最後一個子元素
$("Element:only-child") '匹配父級下的唯一的一個子級元素，例如dt在dl列表中唯一，那麼將選擇dt

8、表單對象獲取
$(:input)//查找所有的Input元素，當然也包括下拉列表，文本域，單選框，復選框等。
$(:text)//匹配所有的單行文本框
$(:password)//匹配所有的密碼框
$(:radio)//匹配所有的單選按鈕
$(:checkbox)//匹配所有的復選框
$(:submit)//匹配所有的提交按鈕
$(:image)//匹配所有的圖像域，例如
$(:reset)//匹配所有的重置按鈕
$(:button)//匹配所有的按鈕
$(:file)//匹配所有的文件上傳域
$(:hidden)//匹配所有的不可見元素或者type為hidden的元素
$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的單選按鈕
$(:disabled)//匹配所有的不可用input元素，作用與上相反
$(:checked)//匹配所有選中的復選框元素
$(:selected)//匹配所有的下拉列表

9、元素屬性的設置與移除
$("Element").attr(name) '取得第一個匹配的屬性值，比如$("img").attr("src")
$("Element".attr(key,value)") '某一個元素設置屬性
$("Element".attr({key:value,key1:value,....})) 『為某個元素一次性設置多個屬性
$("Element").attr(key,function) '為所有匹配的元素設置一個計算的屬性值。
$("Element").removeAttr(name)//移除某一個屬性