Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der jQuery-Methoden (mit Beispielen)

不言
Freigeben: 2019-03-20 11:53:15
nach vorne
2421 Leute haben es durchsucht

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() {
  // 代码...
});
Nach dem Login kopieren

$(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

Mausereignisse Tastaturereignisse Formularereignisse th>Dokument-/Fensterereignisse klicken Tastendruck Senden laden dbclick keydown ändern Größe ändern tr>mouseenter keyup focus scrollen mouseleave td>
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave
blur unload
hover


Unschärfe Entladen schweben

  • Häufig verwendete jQuery-Ereignismethoden
  • klicken () Klickereignis
  • dbclick() Doppelklickereignis
  • mouseenter() Maus geht durch Elementereignis
  • mouseleave() Maus verlässt Elementereignis
  • mousedown() Mouse-Press-Ereignis, wenn die Maus über das Element bewegt wird
  • mouseup() Mouse-Release-Ereignis, wenn die Maus gedrückt und über das Element bewegt wird
  • hover() Mouse-Hover-Ereignis
  • focus() Formularelement-Fokusereignis
  • blur() Formularelement-Fokusverlustereignis
  • submit() Formularübermittlungsereignis
  • change() Formularelementwertänderungsereignis
  • keypress() Ereignis zum Drücken der Tastaturtaste
  • keydown() Ereignis zum Drücken der Tastaturtaste
  • keyup() Ereignis zum Loslassen der Tastaturtaste
  • load() Angegebenes Element Ausführungsereignis für Ladeabschluss (veraltet nach Version 1.8)
  • resize() Fenstergrößenänderungsereignis

    scroll() Scroll-Listening-Ereignis

    jQuery-Effekt
    变量 说明
    selector 选择器
    action 事件
    speed 速度,毫秒,也可以为‘slow’、‘fast‘
    callback 回掉函数

    $(selector).action(speed,callback)

    • Ausblenden anzeigen
    • hide() Element ausblenden
    • show() Elemente anzeigen

    toggle() Ausgeblendete Elemente anzeigen und angezeigte Elemente ausblenden

    • Ein- und Ausblenden
    • fadeIn( ) Einblenden
    • fadeOut() Ausblenden
    • fadeToggle() Das ausgeblendete Element wird eingeblendet und das ausgeblendete Element ausgeblendet


      fadeTo() Ausblenden auf die angegebene Deckkraft
    • $(selector).fadeTo(speed,opacity,callback);
    Der Deckkraftwert liegt zwischen 0 und 1

    • Gleitend
    • slideDown() Nach unten schieben, um das Element zu erweitern
    • slideDown() Nach oben schieben, um das Element zu reduzieren

    slideToggle() Nach oben schieben, um das erweiterte Element zu reduzieren, und nach unten schieben, um das reduzierte Element anzuzeigen

    Animation
    参数 说明 是否必须
    params 定义形成动画的 css 属性 必须
    speed 速度,毫秒,也可以为‘slow’、‘fast‘ 可选
    callback 回掉函数 可选

    $(selector).animate({params},speed,callback);

    Instance
    $("button").click(function() {
      $("p").animate({
        left: "250px",
        opacity: "0.5",
        height: "150px",
        width: "150px"
      });
    });
    Nach dem Login kopieren
    Animation stoppen
    参数 说明 是否必须
    stopAll 是否应该清除动画队列,默认是 false 可选
    goToEnd 是否立即完成当前动画 可选
    $(selector).stop(stopAll, goToEnd);

    jQuery 链(Chaining)

    通过 jQuery,可以把动作/方法链接在一起。

    Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上,浏览器就不必多次查找相同的元素。

    $("#p1")
      .css("color", "red")
      .slideUp(2000)
      .slideDown(2000);
    
    // "p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动
    Nach dem Login kopieren

    jQuery HTML

    jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

    获取内容和属性

    获取内容

    • text() 设置或返回所选元素的文本内容
    • html() 设置或返回所选元素的内容(包括 HTML 标记)
    • val() 设置或返回表单字段的值

    获取属性

    • attr() 设置或者返回所选的属性的值
    // 获取属性
    $('#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'
      })
    Nach dem Login kopieren

    添加删除元素

    • append() 在被选元素的结尾插入内容
    • prepend() 在被选元素的开头插入内容
    • after() 在被选元素之后插入内容
    • before() 在被选元素之前插入内容
       
    • remove() 删除被选元素(及其子元素)
    • empty() 从被选元素中删除子元素

    jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素

    $('p').remove('.italic')

    获取并设置 css 类

    • addClass() 向被选元素添加一个或多个类
    • removeClass() 从被选元素删除一个或多个类
    • toggleClass() 对被选元素进行添加/删除类的切换操作
    • css() 设置或返回样式属性
    // 返回样式属性
    $("p").css("background-color");
    
    // 设置样式属性
    $("p").css("background-color", "yellow");
    // 或者
    $("p").css({ "background-color": "yellow", "font-size": "200%" });
    Nach dem Login kopieren

    尺寸方法

    • width() 元素宽度
    • height() 元素高度
    • innerWidth() 包含 padding 宽度
    • innerHeight() 包含 padding 高度
    • outerWidth() 包含 padding、border 宽度
    • outerHeight() 包含 padding、border 高度
    • outerWidth(true) 包含 padding、border、margin 宽度
    • outerHeight(true) 包含 padding、border、margin 高度

    元素遍历

    祖先元素:

    • parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历。
    • parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
    • parentsUntil() parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
    $(document).ready(function() {
      // p > ul > li > span
      $("span").parentsUntil("p");
      // 返回 ul 和 li
    });
    Nach dem Login kopieren

    后代元素:

    • children() 返回被选元素的所有直接子元素。
    • find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
    $(document).ready(function() {
      $("p").find("span");
    });
    Nach dem Login kopieren

    同胞元素:

    • siblings() 返回被选元素的所有同胞元素。
    • next() 返回被选元素的下一个同胞元素。
    • nextAll() 返回被选元素的所有跟随的同胞元素。
    • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
    • prev() 返回被选元素的上一个同胞元素。
    • prevAll() 返回被选元素之前的所有的同胞元素。
    • prevUntil() 返回介于两个给定参数之间的所有前方的同胞元素。

    元素过滤:

    • first() 返回被选元素的首个元素。
    • last() 返回被选元素的最后一个元素。
    • eq() 返回被选元素中带有指定索引号的元素。
    • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
    • not() 方法返回不匹配标准的所有元素。

    本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注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!

  • Verwandte Etiketten:
    Quelle:segmentfault.com
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage