Ein Artikel über die gängigen Methoden und Funktionen von jQuery zum Aufbewahren als Notiz.
JQuery-Methoden zur Implementierung allgemeiner Operationen
$("Tag name") //HTML-Elemente abrufen document.getElementsByTagName("")
$("#ID") //Ein einzelnes Kontrolldokument abrufen.getElementById("")
$("div #ID") //Holen Sie sich die Kontrolle in einem bestimmten Steuerelement
$("#ID #ID") // Holen Sie sich die Kontrolle über die Kontroll-ID
$("label.class style name") //Erhalten Sie die Kontrolle über die Klasse
$("#ID").val(); //Wert abrufen
$("#ID").val(""); //Wert zuweisen
$("#ID").hide(); //Ausblenden
$("#ID").show(); //Anzeigen
$("#ID").text(); //Entspricht der Einnahme von innerText
$("#ID").text(""); //Entspricht innerText=""
$("#ID").html(); //Entspricht der Einnahme von innerHTML
$("#ID").html(""); //Entspricht innerHTML=""
$("#ID").css("property","value") //CSS-Stil hinzufügen
$("form#form id").find("#die Steuerelement-ID gefunden").end() //Das Formular durchlaufen
$("#ID").load("*.html") //Eine Datei laden
Zum Beispiel:
$("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();------
Zusammenfassung häufig verwendeter Funktionsmethoden in jQuery
Ereignisabwicklung
bereit(fn)
Code:
$(document).ready(function(){
// Your code here...
})；Funktion: Es kann die Reaktionsgeschwindigkeit von Webanwendungen erheblich verbessern. Mit dieser Methode können Sie die von Ihnen gebundene Funktion aufrufen, sobald das DOM geladen und zum Lesen und Bearbeiten bereit ist. 99,99 % der JavaScript-Funktionen müssen in diesem Moment ausgeführt werden.
bind(type,[data],fn)
Code:
$("p").bind("click", function(){
alert( $(this).text() );
});Funktion: Binden Sie eine Event-Handler-Funktion an ein bestimmtes Ereignis (z. B. einen Klick) jedes passenden Elements. Spielt die Rolle der Ereignisüberwachung.
toggle(fn,fn)
Code:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);Funktion: Wechseln Sie die Funktion, die bei jedem Klicken aufgerufen werden soll. 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. Es handelt sich um eine sehr interessante Funktion, die bei der dynamischen Implementierung bestimmter Funktionen verwendet werden kann.
(Ereignisse wie click(), focus(), keydown() werden hier nicht erwähnt, diese werden häufig in der Entwicklung verwendet.)
Aussehen
AddClass(Klasse) und RemoveClass(Klasse)
Code:
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
}); kann auch geschrieben werden als:
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });Funktion: Stile für bestimmte Elemente hinzufügen oder entfernen, um dynamische Stileffekte zu erzielen. Im obigen Beispiel ist der Code zum Verschieben einer zweifarbigen Tabelle mit der Maus implementiert.
css(name,value)
Code:
$("p").css("color","red");
Funktion: Sehr einfach, es besteht darin, den Wert eines Stilattributs im übereinstimmenden Element festzulegen. Dieses persönliche Gefühl ähnelt in gewisser Weise dem oben genannten addClass(class).
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
Code:
$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });Funktion: Mehrere häufig verwendete dynamische Effektfunktionen, die in jQuery bereitgestellt werden. Sie können auch Parameter hinzufügen: show(speed,[callback]), um alle passenden Elemente in einer eleganten Animation anzuzeigen und optional eine Callback-Funktion auszulösen, nachdem die Anzeige abgeschlossen ist.
animate(params[,duration[,easing[,callback]]])
Funktion: Die Funktion zum Erstellen von Animationseffekten ist sehr leistungsstark und kann kontinuierlich verwendet werden.
Suchen und filtern
map(callback)
HTML-Code:
<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>
jQuery-Code:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );结果:
[
John, password, http://www.fufuok.com/
]作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。
find(expr)
HTML 代码:
Hello, how are you?
$("p").find("span")
结果:
[ Hello ]
作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
文档处理
attr(key,value)
HTML 代码:
jQuery 代码:
$("img").attr("src","test.jpg");
作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。
html()/html(val)
HTML 代码:
Hello
Hello
作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。
wrap(html)
HTML 代码:
Test Paragraph.
Test Paragraph.
作用：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。
empty()
HTML 代码:
Hello, Person and person
作用：删除匹配的元素集合中所有的子节点。
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)
作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。
