Compétences de développement communes jQuery complètes et détaillées manual_jquery

Cet article a compilé un article très détaillé sur les techniques de développement jQuery courantes pour votre référence. Le contenu spécifique est le suivant

.

1. Références sur les éléments de la page
Le référencement des éléments via $() de jquery inclut des méthodes telles que l'identifiant, la classe, le nom de l'élément, la relation hiérarchique des éléments, les conditions dom ou xpath, etc., et l'objet renvoyé est un objet jquery (objet de collection), qui ne peut pas être directement appelée méthode définie par dom.

2. Conversion des objets jQuery et des objets dom
Seuls les objets jquery peuvent utiliser les méthodes définies par jquery. Notez qu'il existe une différence entre les objets dom et les objets jquery. Lorsque vous appelez des méthodes, vous devez faire attention si vous opérez sur des objets dom ou jquery.
Les objets DOM ordinaires peuvent généralement être convertis en objets jQuery via $().
Par exemple : $(document.getElementById("msg")) est un objet jquery et vous pouvez utiliser les méthodes jquery.
Puisque l'objet jquery lui-même est une collection. Par conséquent, si l'objet jquery doit être converti en objet dom, l'un des éléments doit être récupéré, qui peut généralement être récupéré via un index.
Par exemple : $("#msg")[0], $("div").eq(1)(0], $("div").get()[1], $("td")[ 5 ] Ce sont des objets dom, et vous pouvez utiliser des méthodes dans dom, mais vous ne pouvez plus utiliser les méthodes Jquery.
Les manières d'écrire suivantes sont toutes correctes :

Le code est le suivant :

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

3. Comment obtenir un élément de la collection jQuery
Pour l'ensemble d'éléments obtenu, vous pouvez utiliser la méthode eq ou get(n) ou le numéro d'index pour obtenir un élément (spécifié par index). Veuillez noter que eq renvoie un objet jquery, et get(n) et The index). renvoie l'objet élément dom. Pour les objets jquery, vous ne pouvez utiliser que les méthodes jquery, et pour les objets dom, vous ne pouvez utiliser que les méthodes dom. Par exemple, vous souhaitez obtenir le contenu du troisième élément dc6dce4a544fdca2df29d5ac0ea9906b Il existe deux méthodes :

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

4. La même fonction implémente set et get
Cela est vrai pour de nombreuses méthodes dans Jquery, notamment les suivantes :

Le code est le suivant :

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

De même, les événements flou, focus, sélection et soumission peuvent avoir deux méthodes d'appel

5. Fonction de traitement de la collecte
Pour le contenu de la collection renvoyé par jquery, nous n'avons pas besoin de le parcourir nous-mêmes et de traiter chaque objet séparément, jquery nous a fourni une méthode très pratique pour traiter la collection.
Comprend deux formulaires :

Le code est le suivant :

$(“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. Développez les fonctions dont nous avons besoin

Le code est le suivant :

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

Utiliser des méthodes étendues (appelées via "$.methodname") :

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

7. Prise en charge de la concaténation des méthodes
L'écriture dite continue signifie que vous pouvez appeler en continu diverses méthodes sur un objet jquery.
Par exemple :

Le code est le suivant :

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

8. Style des éléments de commande
Inclut principalement les méthodes suivantes :

Le code est le suivant :

$(“#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. Fonction complète de traitement des événements
Jquery nous a fourni diverses méthodes de gestion des événements. Nous n'avons pas besoin d'écrire des événements directement sur des éléments HTML, mais pouvons directement ajouter des événements aux objets obtenus via jquery.
Tel que :

Le code est le suivant :

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

Plusieurs événements personnalisés dans jQuery :
(1)hover(fn1,fn2) : une méthode qui simule des événements de survol (la souris se déplace sur un objet et hors de l'objet). Lorsque la souris passe sur un élément correspondant, la première fonction spécifiée sera déclenchée. Lorsque la souris quitte cet élément, la deuxième fonction spécifiée sera déclenchée.

Le code est le suivant :

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

(2) ready(fn) : Lier une fonction à exécuter lorsque le DOM est chargé et prêt pour la requête et la manipulation.

Le code est le suivant :

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

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

(3) toggle(evenFn,oddFn) : changez la fonction à appeler à chaque fois que vous cliquez. Si un élément correspondant est cliqué, la première fonction spécifiée est déclenchée, et lorsque le même élément est cliqué à nouveau, la deuxième fonction spécifiée est déclenchée. Chaque clic suivant répète tour à tour l’appel à ces deux fonctions.

Le code est le suivant :

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

(4) trigger(eventtype) : Déclenchez un certain type d'événement sur chaque élément correspondant.
Par exemple :
$("p").trigger("click"); //Déclenche l'événement click de tous les p éléments
(5) bind(eventtype,fn), unbind(eventtype) : liaison et dissociation des événements
Supprime (ajoute) l'événement lié de chaque élément correspondant.
Par exemple :

Le code est le suivant :

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