jquery的常用方法和用途

⑴ 請問jQuery是用來干什麼的

用處：jquery是基於javascript類庫的框架， 它裡面提供了許多javascript類庫，和一些css樣式表的封裝， 使用起來比較方便， 簡化了用戶與瀏覽器的交互， 提高了系統的性能和開發效率。

jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

(1)jquery的常用方法和用途擴展閱讀：

語言特點

1、快速獲取文檔元素

jQuery的選擇機制構建於Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

2、提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。

3、創建AJAX無刷新網頁

AJAX是非同步的JavaScript和ML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發伺服器端網頁時，比如PHP網站，需要往返地與伺服器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效後，可以對頁面進行局部刷新，提供動態的效果。

⑵ 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 怎麼用

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

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

⑷ jquery是什麼 在網站中有什麼作用

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。

jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，做更多的事情。所以在網站設計中使用jQuery可以寫更少的代碼實現更多的功能。而且它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

(4)jquery的常用方法和用途擴展閱讀：

jQuery的語言特點：

1、快速獲取文檔元素

jQuery的選擇機制構建於Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

2、提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。

3、創建AJAX無刷新網頁

AJAX是非同步的JavaScript和XML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發伺服器端網頁時，比如PHP網站，需要往返地與伺服器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效後，可以對頁面進行局部刷新，提供動態的效果。

⑸ JQuery主要是做什麼用的

JQuery主要是做優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，做更多的事情。

它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

(5)jquery的常用方法和用途擴展閱讀：

jQuery 的文檔非常豐富，因為其輕量級的特性，文檔並不復雜，隨著新版本的發布，可以很快被翻譯成多種語言，這也為jQuery 的流行提供了條件。

jQuery 被包在語法上，jQuery 支持CSS1-3 的選擇器， 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等瀏覽器。

同時，jQuery 有約幾千種豐富多彩的插件，大量有趣的擴展和出色的社區支持，這彌補了jQuery功能較少的不足並為jQuery 提供了眾多非常有用的功能擴展

⑹ jquery中有哪些基礎事件方法

jquery基礎事件，包括綁定事件、簡寫事件、復合事件；

(6)jquery的常用方法和用途擴展閱讀

1、綁定事件fn函數

1)使用點擊事件

$('input').bind('click', function () {//點擊按鈕後執行匿名函數

alert('點擊！');

});

2)普通處理函數

$('input').bind('click', fn); //執行普通函數式無須圓括弧

function fn() {

alert('點擊！');

}

2、簡寫事件函數

1）.mouseover()和.mouseout()表示滑鼠移入和移出的時候觸發。而.mouseenter()和.mouseleave()表示滑鼠穿過和穿出的時候觸發。

2）.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字元編碼。

3）.focus()和.blur()分別表示游標激活和丟失，事件觸發時機是當前元素。而.focusin()和.focusout()也表示游標激活和丟失，但事件觸發時機可以是子元素。

3、復合事件示例，背景移入移出切換效果

$('div').hover(function () {

$(this).css('background', 'black'); //mouseenter 效果

}, function () {

$(this).css('background', 'red'); //mouseleave 效果，可省略

});

參考資料

jQuery官方網站-事件

⑺ 面試題jquery常用方法有哪些

animate() 對被選元素應用「自定義」的動畫 clearQueue() 對被選元素移除所有排隊的函數（仍未運行的） delay() 對被選元素的所有排隊函數（仍未運行）設置延遲 dequeue() 運行被選元素的下一個排隊函數 fadeIn() 逐漸改變被選元素的不透明度，從隱藏到可見 fadeOut() 逐漸改變被選元素的不透明度，從可見到隱藏 fadeTo() 把被選元素逐漸改變至給定的不透明度 hide() 隱藏被選的元素 queue() 顯示被選元素的排隊函數 show() 顯示被選的元素 slideDown() 通過調整高度來滑動顯示被選元素 slideToggle() 對被選元素進行滑動隱藏和滑動顯示的切換 slideUp() 通過調整高度來滑動隱藏被選元素 stop() 停止在被選元素上運行動畫 toggle() 對被選元素進行隱藏和顯示的切換

⑻ jQuery常用屬性和方法有哪些

屬性：

獲得標簽：$("#id")
獲得標簽內的代碼：.html()
獲得標簽內的文本：.text()
修改標簽內的代碼：.html("內容");
修改標簽內的文本：.html("內容");

獲得標簽屬性：.attr("屬性");
修改標簽屬性：attr("屬性","屬性值");

添加樣式：addClass("樣式名");
動態切換樣式：toggleClass("樣式名");
獲取樣式：css

添加元素：append("元素");
移去元素：.remove();
清空節點： .empty();

獲取第二個li節點： var $li=$("ul li:eq(1)");
獲取第二個li節點的文本內容： var li_txt=$
方法：
一：插入節點：
append() 向每個匹配的元素文本內部的後面追加內容
eg：<p>我想說：</p>

代碼：

$("p").append("<b>你好</b>");

結果為：<p>我想說：<b>你好</b></p>

appendto() 將所有的匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是B追加到A中，而是將A追加到B文本的後面中。
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").appendTo("p");

結果為：<p>我想說：<b>你好</b></p>

prepend() 向每個匹配的元素文本的內部前置內容。
eg：<p>我想說：</p>

代碼：

$("p").prepend("<b>你好</b>");

結果為：<p><b>你好</b>我想說：</p>

prependto() 將所有的匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是B前置到A中，而是將A前置到B中
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").prependto("p");

結果為：<p><b>你好</b>我想說：</p>

after() 向每個匹配的元素之後插入內容 。
eg：<p>我想說：</p>

代碼：

$("p").after("<b>你好</b>");

結果為：<p>我想說：<b>你好</b></p>

insertAfter 將所有的匹配的元素插入到指定的元素後面。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是B插入到A後面，而是將A插入到B後面。
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").after("p");

結果為：<p>我想說：<b>你好</b></p>
before() 在每個匹配的元素之前插入內容
eg：<p>我想說：</p>

代碼：

$("<b>你好</b>").after("p");

結果為：<p>我想說：<b>你好</b></p>
insertBefore():將A標簽插入到B標簽的前面

二：刪除：
①remove 該節點所包含的所有的後代節點將同時被刪除 也可以通過參數來選擇
②empty 清空節點，它能清空元素中的所有後代節點

三：替換節點：
①replaceWith() 作用是將所有匹配的元素都替換成指定的HTML或DOM元素
②replaceAll()

四：包裹節點:
①warp() 作用是是將所有元素進行單獨包裹
②warpAll() 作用元素的是所有匹配的元素用一個元素來包裹
③warpinner() 作用是將每一個的子內容（包括文本節點）用其他結構化的標記包裹起來

五：設置和獲取HTML、文本值
1、html()：
2、text
3、val

六：遍歷節點
1、children（）： 取得匹配元素的子元素
2、next（）：取得匹配元素後面緊鄰的同輩元素
3、prev（）：取得匹配元素前面緊鄰的同輩元素
4、siblings（）：取得匹配元素前後所有的同輩元素
5、closest（）：取得最近的匹配元素

七：css-dom
css 獲取樣式的屬性

offset（）
position
scroll
scrollLeft

樣式操作：
1：獲取樣式和設置樣式 attr
eg：<p class="myClass" title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
獲取樣式： var p_class=$("p").attr("class");
設置樣式：$("p").attr("class","high");
2：追加樣式 addClass
<style>
.high{
font-weight:bold 粗體字
color:red 字體顏色
}
.another{
font-weight:italic 斜體字
color:blue 字體顏色
}
</style>

追加樣式：

$("input:eq(2)").click(function(){$("p".addClass("another"))})

☆在css中有以下規定：
①如果給一個元素添加了多個class值，那麼就相當於合並了他們的樣式
②如果不同的class設置了同一樣式，則後者覆蓋前者
addClass attr
對同一個網頁元素進行操作 <p>test</p> <p>test</p>
第一次使用 $<"p">.addClass("high"); $<"p">.attr("class","high");
第一次結果 <p class="high">test</p> <p class="high">test</p>
再次使用 $<"p">.addClass("another"); $<"p">.attr("class","another");
最終結果 <p class="high another">test</p> <p class="another">test</p>

3：移除樣式 removeClass
<p class="high another">test</p>
移除一個：$<"p">.removeClass("high");
移除二個：$<"p">.removeClass("high").removeClass("another");==$<"p">.removeClass("high another")
移除全部：$<"p">.removeClass();

4：切換樣式 toggle

5：判斷是否含有摸個樣式 hasClass
可以用來判斷元素中是否含有某個class，如果有返回true否則返回false

⑼ jquery中所用到的常用的一些方法有哪些

按以下幾類分解
一、選擇器(定位元素方法)方法
$("各種類型選擇器")

二、篩選方法
$("xxx").find()等

三、對DOM元素的增、刪、改方法
如append/remove/html/clone等

四、對DOM元素屬性的增、刪、改方法
如attr/css/val等方法

五、對集合的處理方法
如json/each等方法

六、對事件的綁定方法
如click/bind/live/toggle等方法

七、其它常用方法
如ajax等