DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery中需要注意的細節問題小結
jQuery中需要注意的細節問題小結
編輯:JQuery特效代碼     
1. $.find()與$.children()的區別
有如下HTML片段:
. 代碼如下:
<div id="div_four">
<input id="one"/><input id="two"/>
<div><input id="three"/></div>
</div>

1. find() 返回元素下所有指定元素,不限制子級的深度,如:
$("#div_four").find("input")//返回one、two、three三個input元素
2.childr() 返回元素的一級子節點元素集合,如:
$("#div_four").children("input")//返回one、two兩個input元素
2. $.append()與$.appendTo()的區別
1. append():返回父元素的引用
2. appendTo():返回新創建的元素的引用
. 代碼如下:
<div id="div_1"></div>
var e = $("<h1>動態創建並添加表標題元素</h1>").appendTo($("#div_1"));
var r = $("#div_1").append("<h1>動態創建並添加表標題元素</h1>");
//e 表示新創建的<h1>元素
//r 表示$("#div_1")元素

3. 動態綁定事件和靜態添加事件的區別
有了jQuery後,給元素動態綁定事件變得很簡單,但傳統方式直接給元素添加事件也不能忘了,但綜合了jQuery和普通JavaScript的程序在使用時必須明確jQuery動態綁定事件和靜態添加事件在獲得事件源對象的不同之處。
<p id="p1">動態綁定事件和靜態添加事件的區別</p>
<p id="p2" onclick="fun()">動態綁定事件和靜態添加事件的區別</p>
<p id="p3" onclick="fun2(this)">動態綁定事件和靜態添加事件的區別</p>
//1. 動態綁定事件,this即代表事件源。如:
$("#p1").click(function(){
alert($(this).text()); //this代碼事件源
});
//2. 靜態綁定事件時,不能直接使用this。如:
function fun(){
alert($(this).text); //不能獲得<p>的內容
//3. 通過傳遞“this"後即可獲得事件源
function fun2(obj){
alert($(obj).text());//將obj包裝為jQuery對象
4. 事件處理函數中this和$(this)的區別
$("#p1").click(function(){
alert(this.innerHTML); //直接使用this
alert($(this).text()); //將this包裝為jQuery對象
});
如上代碼中this代表事件源對象,但直使用this時它是HTML DOM對象;
$(this)可以將HTML DOM對象包裝為jQuery對象,即擁有jQuery對象的屬性和方法。
5. $.remove()和$.remove(selector)的區別
兩種調用形式都返回方法前選擇器選中的元素
1. remove():將自身從父元素中刪除【自殺】
2. remove(expr):從父元素中刪除某元素【他殺】
如:
var e = $("#div_2 h1").remove();//返回刪除了的h1元素
var e = $("#div_2 h1").remove("#h2");//刪除id為h2的<h1>元素,返回所有h1元素
6. $.eq()和$.get()的區別
相同點:都可獲得元素集合中指定第n個元素
不同點:
1. eq(n) 返回的是jQuery對象,可以直接使用jQuery內置方法,如:
. 代碼如下:
$("#div_three a").eq(0).bind("click", function () {
alert($(this).text());
});

2. get(n) 返回的DOM Element對象,可以直接使用HTML DOM屬性和方法,如:
$("#div_three a").get(1).onclick = function () {
alert($(this).text());
};
或將對象封裝成jQuery對象達到一樣的效果,如:
. 代碼如下:
$($("#div_three a").get(1)).bind("click",function () {
alert($(this).text());
});

7. $.css(properties)和$.css(name,value)的區別
1. 語法的區別
css(properties) $("p").css({color:"red"}); 或 $("p").css({"color":"red"});
css(name,value) $("p").css("color":"red");
2.屬性名的區別
css(properties):
如果樣式屬性名沒有用引號,則必須用JavaScript語法的css樣式名:如
$("p").css({color:"red",fontSize:"30px"});
如果改為“font-size”就沒有效果
如果樣式屬性名有用引號 ,則兩種樣式都可以,如:
$("p").css({color:"red","font-size":"30px","fontWeight":"bold"});
css(name,value):兩種形式都可以,下面兩種效果一樣:
$("p").css("fontSize":"30px");
$("p").css("font-size":"30px");
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved