Heim >Web-Frontend >js-Tutorial >Zusammenfassung der jQuery-Methoden (mit Beispielen)
Dieser Artikel bietet Ihnen eine Zusammenfassung der jQuery-Methoden (mit Beispielen). Freunde in Not können darauf verweisen.
Einführung in jQuery
jQuery ist eine leichte JS-Bibliothek für den Betrieb von DOM. Sie umfasst hauptsächlich die folgenden Funktionen:
HTML-Elementauswahl und -manipulation
HTML Ereignisse Funktionen
HTML-DOM-Durchquerung und -Änderung
CSS-Operationen
JavaScript-Spezialeffekte und Animationen
AJAX
jQuery-basiertes Plug-In ins
Der Vorteil von jQuery besteht darin, dass es mit allen gängigen Browsern kompatibel ist, einschließlich Internet Explorer 6!
jQuery-Syntax
$(selector).action()
Das Dokument ist bereit zum Laden. Der Unterschied zwischen Ereignis
$(document).ready(function() { // 代码... }); // 简写方式 $(function() { // 代码... });
$(document).ready und window.onload
$(document).ready und window.onload sind beide beim Seitenladen. Die vollständig ausgeführten Funktionen unterscheiden sich in den meisten Fällen nicht wesentlich.
$(document).ready: Wird ausgeführt, nachdem die DOM-Struktur gezeichnet wurde, ohne dass man warten muss, bis sie geladen ist. Dies bedeutet, dass es nach dem Laden des DOM-Baums ausgeführt wird, ohne auf das Laden der Bilder oder anderer externer Dateien auf der Seite warten zu müssen. Und Sie können mehrere .ready schreiben.
window.onload: Alle Elemente der Seite wurden geladen, einschließlich Bildern und anderen Elementen. Kann nur einmal ausgeführt werden.
jQuery-Selektor
jQuery-Selektor basiert auf vorhandenem CSS-Selektor
$('*')
$('p ')
$('ul li')
$('ul li:last-child')
...
jQuery-Ereignis
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dbclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
scroll() Scroll-Listening-Ereignis
jQuery-Effekt
变量 | 说明 |
---|---|
selector | 选择器 |
action | 事件 |
speed | 速度,毫秒,也可以为‘slow’、‘fast‘ |
callback | 回掉函数 |
fadeToggle() Das ausgeblendete Element wird eingeblendet und das ausgeblendete Element ausgeblendet
fadeTo() Ausblenden auf die angegebene Deckkraft
参数 | 说明 | 是否必须 |
---|---|---|
params | 定义形成动画的 css 属性 | 必须 |
speed | 速度,毫秒,也可以为‘slow’、‘fast‘ | 可选 |
callback | 回掉函数 | 可选 |
$(selector).animate({params},speed,callback);
InstanceAnimation stoppen$("button").click(function() { $("p").animate({ left: "250px", opacity: "0.5", height: "150px", width: "150px" }); });
参数 | 说明 | 是否必须 |
---|---|---|
stopAll | 是否应该清除动画队列,默认是 false | 可选 |
goToEnd | 是否立即完成当前动画 | 可选 |
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上,浏览器就不必多次查找相同的元素。
$("#p1") .css("color", "red") .slideUp(2000) .slideDown(2000); // "p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
获取内容
获取属性
// 获取属性 $('#test').attr('href') // 设置属性 $('#test').attr('href','http://www.baidu.com') $('#test').attr({ href: 'http://www.baidu.com', title: '百度' }) // 回掉函数 $('#test').attr('href', function(i, origValue){ // i 被选元素列表中当前元素的下标 // origValue 原始值 return origValue + '/jquery' })
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素
$('p').remove('.italic')
// 返回样式属性 $("p").css("background-color"); // 设置样式属性 $("p").css("background-color", "yellow"); // 或者 $("p").css({ "background-color": "yellow", "font-size": "200%" });
祖先元素:
$(document).ready(function() { // p > ul > li > span $("span").parentsUntil("p"); // 返回 ul 和 li });
后代元素:
$(document).ready(function() { $("p").find("span"); });
同胞元素:
元素过滤:
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目!
Das obige ist der detaillierte Inhalt vonZusammenfassung der jQuery-Methoden (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!