包括的かつ詳細な jQuery の共通開発スキル Manual_jquery

この記事は、一般的な jQuery 開発テクニックに関する非常に詳細な記事をまとめたものです。具体的な内容は次のとおりです。

1. ページ要素に関する参照
jquery の $() を介した要素の参照には、id、クラス、要素名、要素の階層関係、dom または xpath 条件などのメソッドが含まれ、返されるオブジェクトは jquery オブジェクト (コレクション オブジェクト) です。 dom 定義メソッドを直接呼び出します。

2. jQuery オブジェクトと dom オブジェクトの変換
jquery で定義されたメソッドを使用できるのは、jquery オブジェクトのみです。 dom オブジェクトと jquery オブジェクトには違いがあることに注意してください。メソッドを呼び出すときは、dom オブジェクトと jquery オブジェクトのどちらを操作しているかに注意する必要があります。
通常の DOM オブジェクトは、通常、$() を通じて jQuery オブジェクトに変換できます。
例: $(document.getElementById("msg")) は jquery オブジェクトであり、jquery メソッドを使用できます。
jquery オブジェクト自体はコレクションであるため。したがって、jquery オブジェクトを dom オブジェクトに変換する場合は、項目の 1 つを取得する必要があります。これは通常、インデックスを通じて取得できます。
例: $("#msg")[0]、$("div").eq(1)[0]、$("div").get()[1]、$("td")[ 5 ] これらは dom オブジェクトであり、dom 内のメソッドを使用できますが、Jquery メソッドは使用できなくなりました。
次の書き方はすべて正しいです:

コードは次のとおりです:

$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;

3. jQuery コレクションのアイテムを取得する方法
取得した要素セットについては、eq または get(n) メソッドまたはインデックス番号を使用して項目 (インデックスで指定) を取得できます。eq は jquery オブジェクトを返し、get(n) とインデックスを返します。 dom要素オブジェクトを返します。 jquery オブジェクトの場合は jquery メソッドのみを使用でき、dom オブジェクトの場合は dom メソッドのみを使用できます。たとえば、3 番目の

要素の内容を取得したいとします。 2 つの方法があります:

$(“div”).eq(2).html(); //调用jquery对象的方法 
$(“div”).get(2).innerHTML; //调用dom的方法属性 

4. 同じ関数で set と get
を実装します。 これは、主に次のような Jquery の多くのメソッドに当てはまります:

コードは次のとおりです:

$(“#msg”).html(); //返回id为msg的元素节点的html内容。 
$(“#msg”).html(“<b>new content</b>”); 
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content 
$(“#msg”).text(); //返回id为msg的元素节点的文本内容。 
$(“#msg”).text(“<b>new content</b>”); 
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b> 
$(“#msg”).height(); //返回id为msg的元素的高度 
$(“#msg”).height(“300″); //将id为msg的元素的高度设为300 
$(“#msg”).width(); //返回id为msg的元素的宽度 
$(“#msg”).width(“300″); //将id为msg的元素的宽度设为300 
$(“input”).val(“); //返回表单输入框的value值 
$(“input”).val(“test”); //将表单输入框的value值设为test 
$(“#msg”).click(); //触发id为msg的元素的单击事件 
$(“#msg”).click(fn); //为id为msg的元素单击事件添加函数

同様に、blur、focus、select、submit イベントには 2 つの呼び出しメソッドを含めることができます

5. 収集処理関数
jquery によって返されるコレクションのコンテンツについては、自分でループして各オブジェクトを個別に処理する必要はありません。jquery は、コレクションを処理するための非常に便利なメソッドを提供します。
2 つのフォームが含まれています:

コードは次のとおりです:

$(“p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) 
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。 
$(“tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) 
//实现表格的隔行换色效果 www.222gs.com 
$(“p”).click(function(){alert($(this).html())}) 
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6. 必要な機能を拡張します

コードは次のとおりです:

$.extend({ 
min: function(a, b){return a < b&#63;a:b; }, 
max: function(a, b){return a > b&#63;a:b; } 
}); //为jquery扩展了min,max两个方法 

拡張メソッドを使用します (「$.methodname」経由で呼び出されます):

alert(“a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7. メソッドの連結をサポートします
いわゆる連続書き込みとは、jquery オブジェクト上でさまざまなメソッドを継続的に呼び出すことができることを意味します。
例:

コードは次のとおりです:

$(“p”).click(function(){alert($(this).html())}) 
.mouseover(function(){alert(‘mouse over event')}) 
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8. 操作要素のスタイル
主に以下のメソッドが含まれます:

コードは次のとおりです:

$(“#msg”).css(“background”); //返回元素的背景颜色 
$(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色 
$(“#msg”).height(300); $(“#msg”).width(“200″); //设定宽高 
$(“#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式 
$(“#msg”).addClass(“select”); //为元素增加名称为select的class 
$(“#msg”).removeClass(“select”); //删除元素名称为select的class 
$(“#msg”).toggleClass(“select”); //如果存在（不存在）就删除（添加）名称为select的class

9. イベント処理関数の完成
Jquery はさまざまなイベント処理メソッドを提供します。HTML 要素にイベントを直接記述する必要はなく、jquery を通じて取得したオブジェクトにイベントを直接追加できます。
例:

コードは次のとおりです:

$(“#msg”).click(function(){alert(“good”)}) //为元素添加了单击事件 
$(“p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]}) 
//为三个不同的p元素单击事件分别设定不同的处理

jQuery のいくつかのカスタム イベント:
(1)hover(fn1,fn2): ホバーイベント (マウスがオブジェクト上を移動し、オブジェクトの外に移動する) をシミュレートするメソッド。マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。

コードは次のとおりです:

//当鼠标放在表格的某行上时将class置为over，离开时置为out。 
$(“tr”).hover(function(){ 
$(this).addClass(“over”); 
}, 
function(){ 
$(this).addClass(“out”); 
});

(2) ready(fn): DOM がロードされ、クエリと操作の準備ができたときに実行される関数をバインドします。

コードは次のとおりです:

$(document).ready(function(){alert(“Load Success”)})

//页面加载完毕提示“Load Success”,相当于onload事件，与$(fn)等价 

(3) toggle(evenFn,oddFn): クリックするたびに呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。

コードは次のとおりです:

//每次点击时轮换添加和删除名为selected的class。 
$(“p”).toggle(function(){ 
$(this).addClass(“selected”); 
},function(){ 
$(this).removeClass(“selected”); 
});

(4)trigger(eventtype): 一致する各要素で特定のタイプのイベントをトリガーします。
例:
$("p").trigger("click"); //すべての p 要素のクリック イベントをトリガーします
(5) binding(eventtype,fn)、unbind(eventtype): イベントのバインドとバインド解除
一致する各要素からバインドされたイベントを削除 (追加) します。
例:

コードは次のとおりです:

$(“p”).bind(“click”, function(){alert($(this).text());}); //为每个p元素添加单击事件 
$(“p”).unbind(); //删除所有p元素上的所有事件 
$(“p”).unbind(“click”) //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如

代码如下:

$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });

等价于：

代码如下:

var tempArr=[0,1,2]; 
for(var i=0;i<tempArr.length;i++){ 
alert(“Item #”+i+”: “+tempArr[ i ]); 
}

也可以处理json数据，如

$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); }); 

结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：

$.extend(settings, options); 
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。 
var settings = $.extend({}, defaults, options); 
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。 

可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); 
tempArr内容为：[4,5,6] 
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); 
tempArr内容为：[2,3] 
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 

如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(” hello, how are you? “); //返回”hello,how are you? ”
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使 用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
如：

代码如下:

jQuery.noConflict(); 
// 开始使用jQuery 
jQuery(“div p”).hide(); 
// 使用其他库的 $() 
$(“content”).style.display = ‘none';

jquery开发过程中经验丰富可以提高开发技巧，所以大家一定要注意平时经验的积累，希望本文所述对大家学习有所帮助。