Umfassendes und detailliertes Handbuch zu allgemeinen jQuery-Entwicklungsfähigkeiten_jquery

In diesem Artikel wurde ein sehr detaillierter Artikel über gängige jQuery-Entwicklungstechniken als Referenz zusammengestellt. Der spezifische Inhalt lautet wie folgt:

1. Referenzen zu Seitenelementen
Das Referenzieren von Elementen über $() von jquery umfasst Methoden wie ID, Klasse, Elementname, hierarchische Beziehung von Elementen, dom- oder xpath-Bedingungen usw., und das zurückgegebene Objekt ist ein jquery-Objekt (Sammlungsobjekt), was nicht möglich ist Direkt aufgerufene Dom-definierte Methode.

2. Konvertierung von jQuery-Objekten und Dom-Objekten
Nur ​​JQuery-Objekte können die von JQuery definierten Methoden verwenden. Beachten Sie, dass es einen Unterschied zwischen Dom-Objekten und JQuery-Objekten gibt. Beim Aufrufen von Methoden sollten Sie darauf achten, ob Sie mit Dom-Objekten oder JQuery-Objekten arbeiten.
Gewöhnliche DOM-Objekte können im Allgemeinen über $() in jQuery-Objekte konvertiert werden.
Beispiel: $(document.getElementById("msg")) ist ein JQuery-Objekt und Sie können JQuery-Methoden verwenden.
Da das JQuery-Objekt selbst eine Sammlung ist. Wenn das JQuery-Objekt in ein Dom-Objekt umgewandelt werden soll, muss daher eines der Elemente abgerufen werden, was im Allgemeinen über einen Index abgerufen werden kann.
Zum Beispiel: $("#msg")[0], $("div").eq(1)[0], $("div").get()[1], $("td")[ 5] Dies sind Dom-Objekte, und Sie können Methoden in Dom verwenden, aber Sie können keine Jquery-Methoden mehr verwenden.
Die folgenden Schreibweisen sind alle korrekt:

Der Code lautet wie folgt:

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

3. So erhalten Sie ein Element der jQuery-Sammlung
Für den erhaltenen Elementsatz können Sie die Methode eq oder get(n) oder die Indexnummer verwenden, um ein Element (angegeben durch den Index) zu erhalten. Bitte beachten Sie, dass eq ein JQuery-Objekt zurückgibt und get(n) und Der Index gibt das Dom-Elementobjekt zurück. Für JQuery-Objekte können Sie nur JQuery-Methoden und für Dom-Objekte nur Dom-Methoden verwenden. Sie möchten beispielsweise den Inhalt des dritten

-Elements abrufen. Es gibt zwei Methoden:

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

4. Die gleiche Funktion implementiert set und get
Dies gilt für viele Methoden in Jquery, hauptsächlich einschließlich der folgenden:

Der Code lautet wie folgt:

$(“#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的元素单击事件添加函数

Ähnlich können Unschärfe-, Fokus-, Auswahl- und Übermittlungsereignisse zwei Aufrufmethoden haben

5. Inkassoverarbeitungsfunktion
Für den von jquery zurückgegebenen Sammlungsinhalt müssen wir ihn nicht selbst durchlaufen und jedes Objekt separat verarbeiten. Jquery bietet uns eine sehr praktische Methode zur Verarbeitung der Sammlung.
Enthält zwei Formen:

Der Code lautet wie folgt:

$(“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. Erweitern Sie die von uns benötigten Funktionen

Der Code lautet wie folgt:

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

Verwenden Sie erweiterte Methoden (aufgerufen über „$.methodname“):

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

7. Unterstützung der Methodenverkettung
Das sogenannte kontinuierliche Schreiben bedeutet, dass Sie kontinuierlich verschiedene Methoden für ein JQuery-Objekt aufrufen können.
Zum Beispiel:

Der Code lautet wie folgt:

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

8. Stil der Bedienelemente
Umfasst hauptsächlich die folgenden Methoden:

Der Code lautet wie folgt:

$(“#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. Vollständige Ereignisverarbeitungsfunktion
Jquery stellt uns verschiedene Methoden zur Ereignisbehandlung zur Verfügung. Wir müssen Ereignisse nicht direkt in HTML-Elemente schreiben, sondern können Ereignisse direkt zu Objekten hinzufügen, die wir über jquery erhalten.
Zum Beispiel:

Der Code lautet wie folgt:

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

Mehrere benutzerdefinierte Ereignisse in jQuery:
(1)hover(fn1,fn2): Eine Methode, die Hover-Ereignisse simuliert (die Maus bewegt sich über ein Objekt und aus dem Objekt heraus). Wenn die Maus über ein passendes Element fährt, wird die erste angegebene Funktion ausgelöst. Wenn sich die Maus aus diesem Element herausbewegt, wird die angegebene zweite Funktion ausgelöst.

Der Code lautet wie folgt:

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

(2) ready(fn): Binden Sie eine Funktion, die ausgeführt werden soll, wenn das DOM geladen und für Abfragen und Manipulationen bereit ist.

Der Code lautet wie folgt:

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

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

(3) toggle(evenFn,oddFn): Schalten Sie die Funktion um, die jedes Mal aufgerufen werden soll, wenn darauf geklickt wird. Wenn auf ein passendes Element geklickt wird, wird die erste angegebene Funktion ausgelöst, und wenn erneut auf dasselbe Element geklickt wird, wird die zweite angegebene Funktion ausgelöst. Jeder weitere Klick wiederholt den Aufruf dieser beiden Funktionen nacheinander.

Der Code lautet wie folgt:

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

(4) Trigger (Ereignistyp): Löst für jedes übereinstimmende Element einen bestimmten Ereignistyp aus.
Zum Beispiel:
$("p").trigger("click"); //Das Klickereignis aller p-Elemente auslösen
(5) bind(eventtype,fn), unbind(eventtype): Bindung und Entbindung von Ereignissen
Entfernt (fügt) das gebundene Ereignis von jedem übereinstimmenden Element hinzu.
Zum Beispiel:

Der Code lautet wie folgt:

$(“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开发过程中经验丰富可以提高开发技巧，所以大家一定要注意平时经验的积累，希望本文所述对大家学习有所帮助。