一、jQuery對象與DOM對象的轉(zhuǎn)換
只有jQuery對象才能使用jQuery定義的方法。使用進要區(qū)分操作的是DOM還是jQuery
$(document.getElementById("myDiv"))可以將DOM對象轉(zhuǎn)換為jQuery對象
jQuery對象本身是集合，如果jQuery對象要轉(zhuǎn)換為DOM則必須取出其中的某一項，一般通過索引
$("#myDiv")[0]
$("div").eq(1)[0]
$("div").get()[1]
$("td")[6]
以下幾種寫法都是正確的
$("#MyDiv").html()
$("#MyDiv")[0].innerHTML
$("#MyDiv").eq(0)[0].innerHTML
$("#MyDiv").get(0).innerHTML
獲取jQuery集合的某一項
$("div").eq(2).html(); //調(diào)用jquery對象的方法
$("div").get(2).innerHTML; //調(diào)用dom的方法屬性

?

?

$("#msg").html(); //返回id為msg的元素節(jié)點的html內(nèi)容。
$("#msg").html("<b>new content</b>");
//將“<b>new content</b>” 作為html串寫入id為msg的元素節(jié)點內(nèi)容中,頁面顯示粗體的new content

$("#msg").text(); //返回id為msg的元素節(jié)點的文本內(nèi)容。
$("#msg").text("<b>new content</b>");
//將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節(jié)點內(nèi)容中,頁面顯示<b>new content</b>

$("#msg").height(); //返回id為msg的元素的高度
$("#msg").height("300"); //將id為msg的元素的高度設(shè)為300
$("#msg").width(); //返回id為msg的元素的寬度
$("#msg").width("300"); //將id為msg的元素的寬度設(shè)為300

$("input").val("); //返回表單輸入框的value值
$("input").val("test"); //將表單輸入框的value值設(shè)為test

$("#msg").click(); //觸發(fā)id為msg的元素的單擊事件
$("#msg").click(fn); //為id為msg的元素單擊事件添加函數(shù)

同樣blur,focus,select,submit事件都可以有這兩種調(diào)用方法

對于jquery返回的集合內(nèi)容無需我們自己循環(huán)遍歷并對每個對象分別做處理，jquery已經(jīng)為我們提供的很方便的方法進行集合的處理。
包括兩種形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//為索引分別為0，1，2的p元素分別設(shè)定不同的字體顏色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//實現(xiàn)表格的隔行換色效果

$("p").click(function(){alert($(this).html())})
//為每個p元素增加了click事件，單擊某個p元素則彈出其內(nèi)容

$("#msg").css("background"); //返回元素的背景顏色
$("#msg").css("background","#ccc") //設(shè)定元素背景為灰色
$("#msg").height(300); $("#msg").width("200"); //設(shè)定寬高
$("#msg").css({ color: "red", background: "blue" });//以名值對的形式設(shè)定樣式
$("#msg").addClass("select"); //為元素增加名稱為select的class
$("#msg").removeClass("select"); //刪除元素名稱為select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就刪除（添加）名稱為select的class

$("#msg").click(function(){alert("good")}) //為元素添加了單擊事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //為三個不同的p元素單擊事件分別設(shè)定不同的處理

（1）hover(fn1,fn2)：一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。當鼠標移動到一個匹配的元素上面時，會觸發(fā)指定的第一個函數(shù)。當鼠標移出這個元素時，會觸發(fā)指定的第二個函數(shù)。

//當鼠標放在表格的某行上時將class置為over，離開時置為out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});

（2）ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。

$(document).ready(function(){alert("Load Success")})
//頁面加載完畢提示“Load Success”,不同于onload事件，onload需要頁面內(nèi)容加載完畢（圖片等），而ready只要頁面html代碼下載完畢即觸發(fā)。與$(fn)等價

（3）toggle(evenFn,oddFn): 每次點擊時切換要調(diào)用的函數(shù)。如果點擊了一個匹配的元素，則觸發(fā)指定的第一個函數(shù)，當再次點擊同一元素時，則觸發(fā)指定的第二個函數(shù)。隨后的每次點擊都重復對這兩個函數(shù)的輪番調(diào)用。

//每次點擊時輪換添加和刪除名為selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});

（4）trigger(eventtype): 在每一個匹配的元素上觸發(fā)某類事件。
例如：
$("p").trigger("click"); //觸發(fā)所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定
從每一個匹配的元素中（添加）刪除綁定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());});
//為每個p元素添加單擊事件
$("p").unbind(); //刪除所有p元素上的所有事件
$("p").unbind("click") //刪除所有p元素上的單擊事件

1.綁定事件
(1)
$("p").bind("click", function(e){});

(2)
$("p").click(function() {})

2.刪除事件

(1)刪除特定事件
$("div").unbind("click");

(2)刪除所有事件
$("div").unbind();

3.觸發(fā)事件

(1)trigger方法 觸發(fā)特定元素事件
$("div").trigger('click');

(2)triggerHandler方法 與trigger方法相似,但不觸發(fā)瀏覽器默認事件,如focus事件,使用此方法,將會阻止焦點到元素上
$("input").triggerHandler("focus");

?

4.特殊事件
(1)one(string event,function data)
此事件只執(zhí)行一次則被刪除
$("p").one("click", function(){
alert("test");
});

?

(2)hover(over, out)
切換mouseover與mouseout事件
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

可用unbind mouseover與mouseout方法來刪除此事件
(3)toggle(oldclick,newclick)
切換執(zhí)行click事件
$("li").toggle(
function () {
$(this).css("list-style-type", "disc")
.css("color", "blue");
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);

可用unbind click方法來刪除此事件

5. 1.2.3版本新增功能
(1)事件命名空間(便于管理)

實際使用方面:
1.當不需要全部事件,刪除特定2個以上的事件.

示例:
$("div").bind("click.plugin",function() {} );
$("div").bind("mouseover.plugin", function(){});
$("div").bind("dblclick", function(){});
$("button").click(function() {$("div").unbind(".plugin"); })

在事件名稱后面加命名空間,在刪除事件時,只需要指定命名空間即可.以上代碼執(zhí)行以后,dbclick仍然存在.

(2)相同事件名稱,不同命名的事件執(zhí)行方法

示例:
$("div").bind("click", function(){ alert("hello"); });
$("div").bind("click.plugin", function(){ alert("goodbye"); });
$("div").trigger("click!"); // alert("hello") only

以上trigger方法則根據(jù)事件名稱來執(zhí)行事件.

簡單的寫幾句.以上的幾個方法還是非常實用方便的

jquery實現(xiàn)iframe高度自適應

<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});

轉(zhuǎn)載于:https://www.cnblogs.com/lingyuan/archive/2010/11/12/1875395.html

總結(jié)

以上是生活随笔為你收集整理的jquery总结_代码收藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。