Résumé des méthodes de fonctionnement courantes de jQuery et des fonctions couramment utilisées_jquery

Un article sur les méthodes et fonctions courantes de jQuery à conserver comme mémo.

Méthodes d'implémentation des opérations courantes JQuery

$("Tag name") //Obtenir les éléments HTML document.getElementsByTagName("")

$("#ID") //Obtenir un seul document de contrôle.getElementById("")

$("div #ID") //Obtenir le contrôle dans un certain contrôle

$("#ID #ID") // Obtenez le contrôle via l'ID de contrôle

$("label.class style name") //Obtenez le contrôle via la classe

$("#ID").val(); //Obtenir la valeur

$("#ID").val(""); //Attribuer une valeur

$("#ID").hide(); //Masquer

$("#ID").show(); //Afficher

$("#ID").text(); //Équivalent à innerText

$("#ID").text(""); //Équivalent à innerText=""

$("#ID").html(); //Équivalent à innerHTML

$("#ID").html(""); //Équivalent à innerHTML=""

$("#ID").css("property","value") //Ajouter un style CSS

$("form#form id").find("#the control id found").end() //Parcourir le formulaire

$("#ID").load("*.html") //Charger un fichier

Par exemple :

$("form#frmMain").find("#ne").css("border", "1px solid #0f0").end() // end()返回表单

.find("#chenes").css("border-top","3px dotted #00f").end()

$.ajax({ url: "Result.aspx", //数据请求页面的url

type:"get", //数据传递方式(get或post)

dataType:"html", //期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")

data: "chen=h", //传递数据的参数字符串，只适合get方式

timeout:3000, //设置时间延迟请求的时间

success:function(msg)//当请求成功时触发函数
{
$("#stats").text(msg);
},
error:function(msg) //当请求失败时触发的函数
{
$("#stats").text(msg);
}
});

$(document).ready(function(){});
$("#description").mouseover(function(){});

//ajax方法

$.get( "Result.aspx", //数据请求页面的url
{ chen: "测试",age:"25"}, //传递数据的参数字符串
function(data){ alert("Data Loaded: " + data); } //触发后的函数
);
});
});

//取得下拉选单的选取值

$(#testSelect option:selected').text(); //取文本值
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();

------

Résumé des méthodes de fonction couramment utilisées dans jQuery

Gestion des événements

prêt(fn)

Code :

$(document).ready(function(){
// Your code here...
})；

Fonction : il peut considérablement améliorer la vitesse de réponse des applications Web. En utilisant cette méthode, vous pouvez appeler la fonction que vous avez liée dès que le DOM est chargé et prêt à être lu et manipulé, et 99,99 % des fonctions JavaScript doivent être exécutées à ce moment-là.

bind(type,[données],fn)

Code :

$("p").bind("click", function(){
alert( $(this).text() );
});

Fonction : lier une fonction de gestionnaire d'événements à un événement spécifique (comme un clic) de chaque élément correspondant. Joue le rôle de surveillance des événements.

basculer(fn,fn)
Code :

$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

Fonction : 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. C'est une fonction très intéressante qui peut être utilisée lors de l'implémentation dynamique de certaines fonctions.

(Les événements comme click(), focus(), keydown() ne seront pas mentionnés ici, ceux-ci sont couramment utilisés en développement.)

Apparence

addClass(class) et removeClass(class)

Code :

$(".stripe tr").mouseover(function(){ 
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});

peut également s'écrire :

$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

Fonction : ajoutez ou supprimez des styles pour les éléments spécifiés pour obtenir des effets de style dynamiques. Dans l'exemple ci-dessus, le code permettant de déplacer un tableau bicolore avec la souris est implémenté.

css(nom,valeur)

Code :
$("p").css("color","rouge");

Fonction : Très simple, il s'agit de définir la valeur d'un attribut de style dans l'élément correspondant. Ce sentiment personnel est quelque peu similaire à addClass(class) ci-dessus.

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

Code :

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

Fonction : plusieurs fonctions d'effets dynamiques couramment utilisées fournies dans jQuery. Vous pouvez également ajouter des paramètres : show(speed,[callback]) pour afficher tous les éléments correspondants dans une animation élégante et éventuellement déclencher une fonction de rappel une fois l'affichage terminé.

animer(params[,duration[,easing[,callback]]])

Fonction : La fonction utilisée pour créer des effets d'animation est très puissante et peut être utilisée en continu.

Rechercher et filtrer

carte(rappel)
Code HTML :

<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://www.fufuok.com/>
</form>

Code jQuery :

$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );

结果:
[ e388a4556c0f65e1904146cc1a846beeJohn, password, http://www.fufuok.com/94b3e26ee717c64999d7867364b1b4a3 ]

作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114, how are you?94b3e26ee717c64999d7867364b1b4a3
jQuery 代码:

$("p").find("span")
结果:

[ 45a2772a6b6107b401db3c9b82c049c2Hello54bdf357c58b8a65c66d7c19c8e4d114 ]

作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)
HTML 代码:
79d7c95122630a3791db16c5259dc98d79d7c95122630a3791db16c5259dc98d
jQuery 代码:
$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)
HTML 代码:
dc6dce4a544fdca2df29d5ac0ea9906be388a4556c0f65e1904146cc1a846beeHello94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68
jQuery 代码:
$("div").html();
结果:
e388a4556c0f65e1904146cc1a846beeHello94b3e26ee717c64999d7867364b1b4a3

作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:
e388a4556c0f65e1904146cc1a846beeTest Paragraph.94b3e26ee717c64999d7867364b1b4a3
jQuery 代码:
$("p").wrap("517f552e03c5e0683f79f0cd12aa585c16b28748ea4df4d9c2150843fecfba68");
结果:
6bab83cd2ea3b0bfa059c0c27e19c040e388a4556c0f65e1904146cc1a846beeTest Paragraph.94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68

作用：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()
HTML 代码:
e388a4556c0f65e1904146cc1a846beeHello, 45a2772a6b6107b401db3c9b82c049c2Person54bdf357c58b8a65c66d7c19c8e4d114 ee7959cc8dd4be16ef633321c03dac32and person5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
jQuery 代码:
$("p").empty();
结果:
e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

作用：删除匹配的元素集合中所有的子节点。

Ajax处理

load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。

代码：

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()
HTML 代码:

<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 代码:

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

作用：序列化表格内容为字符串。用于 Ajax 请求。

工具

jQuery.each(obj,callback)

代码：

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );//遍历对象
});

作用：通用例遍方法，可用于例遍对象和数组。

jQuery.makeArray(obj)
HTML 代码:

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

jQuery 代码:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

结果:
Fourth
Third
Second
First

作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)

作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。