jQuery Basics Learning Guide_jquery

Wenn der HTML-Code nicht vollständig geladen ist, ist es unsicher, die Elemente auf der Seite zu bedienen. Aber wie sieht es mit der Überwachung aus, ob der HTML-Code geladen wurde? jQuery stellt eine $(document).ready()-Methode bereit. Jeder Code in ready wird erst ausgeführt, wenn der HTML-Code vollständig geladen ist.

$(document).ready(function() {
  console.log('ready!');
});

Außerdem gibt es eine Abkürzung

$(function() {
  console.log('ready!');
});

$(document).ready() führt nicht nur anonyme Methoden aus, sondern führt auch eine benannte Methode aus:

function readyFn() {
  // code to run when the document is ready
}


$(document).ready(readyFn);

Element auswählen

Das grundlegendste Konzept von jQuery ist „einige Elemente auswählen und dann etwas damit machen“. jQuery unterstützt die meisten CSS3-Selektoren sowie einige nicht standardmäßige Selektoren. Weitere Informationen finden Sie unter http://api.jquery.com/category/selectors/. Hier sind die Verwendungen einiger gängiger Selektoren

$('#myId');         // 此 ID 在页面中必须唯一
$('div.myClass');      // 如果指定了元素类型，那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢，尽量避免这种用法
$('#contents ul.people li');

$('a.external:first');
$('tr:odd');
$('#myForm :input');     // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)');       // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated');      // 所有正在执行动画的 DIV

Dinge, die Sie beachten sollten

Bei der Verwendung von Pseudoselektoren wie :visible und :hidden erkennt jQuery tatsächlich, ob sie auf der Seite sichtbar sind, nicht den Anzeigewert in ihrem CSS. Das heißt, wenn die physische Breite und Höhe eines Elements auf der Seite beide größer als 0 sind, ist es sichtbar. Eine Ausnahme bildet jedoch jQuery, das anhand des Anzeigeattributs im CSS bestimmt, ob das Element sichtbar ist.

Informationen zur spezifischen Implementierung von jQuery finden Sie im Code:

jQuery.expr.filters.hidden = function( elem ) {
  var width = elem.offsetWidth, height = elem.offsetHeight,
    skip = elem.nodeName.toLowerCase() === "tr";

  // does the element have 0 height, 0 width,
  // and it's not a <tr>&#63;
  return width === 0 && height === 0 && !skip &#63;

    // then it must be hidden
    true :

    // but if it has width and height
    // and it's not a <tr>
    width > 0 && height > 0 && !skip &#63;

      // then it must be visible
      false :

      // if we get here, the element has width
      // and height, but it's also a <tr>,
      // so check its display property to
      // decide whether it's hidden
      jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
  return !jQuery.expr.filters.hidden( elem );
};

Ob die Auswahlergebnismenge Elemente enthält

Wie kann man nach der Ausführung eines Selektors feststellen, ob der Selektor ein Element ausgewählt hat? Sie können es als selbstverständlich betrachten und schreiben:

if ($('div.foo')) { ... }

Tatsächlich ist das falsch zu schreiben, denn egal, ob der Selektor ein Element auswählt oder nicht, er gibt ein Objekt zurück und der boolesche Wert des Objekts muss wahr sein, sodass diese Methode nicht funktioniert. Tatsächlich gibt es in dem vom Selektor zurückgegebenen Objekt ein Längenattribut. Mit diesem Attribut können Sie bestimmen, wie viele Elemente sich im Selektor befinden. Wenn kein Element ausgewählt ist, wird 0-false zurückgegeben. Es wird die tatsächliche Anzahl der Elemente zurückgegeben.

if ($('div.foo').length) { ... }

Speichern Sie den Selektor

Jedes Mal, wenn Sie einen Selektor erstellen, muss jQuery eine Menge Code ausführen. Wenn Sie denselben Selektor mehrmals verwenden müssen, ist es am besten, den Selektor zwischenzuspeichern, um eine wiederholte Ausführung des Selektors zu vermeiden.

var $divs = $('div');

Beachten Sie, dass der in diesem Code als Cache-Variable verwendete Variablenname mit $ beginnt. Dieses Dollarzeichen ist in JavaScript nur ein gewöhnliches Zeichen und hat keine andere besondere Bedeutung obligatorisch.

Sobald der Selektor in der Variablen zwischengespeichert ist, können Sie jQuery-Methoden für die Variable aufrufen, genau wie beim Aufrufen des Selektors.

Es ist auch zu beachten, dass der Selektor nur die Elemente auswählen kann, die sich aktuell auf der Seite befinden. Wenn Elemente nach der Ausführung des Selektors zur Seite hinzugefügt werden, werden die übermorgen hinzugefügten Elemente nicht in den vorherigen Selektor aufgenommen Der Selektor wird erneut ausgeführt, nachdem Elemente zur Seite hinzugefügt wurden.

Selektor mit Filterfunktion

Manchmal sind nach der Ausführung eines Selektors nicht alle Elemente in der Ergebnismenge das, was wir wollen, daher müssen wir die Ergebnismenge erneut filtern:

$('div.foo').has('p');     // 所有包含有 <p> 的 div.foo
$('h1').not('.bar');      // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current'); // 带有类 current 的无序列表
$('ul li').first();       // 无序列表中的第一个元素
$('ul li').eq(5);        // 第六个

Formularelemente auswählen

jQuery bietet einige Pseudo-Selektoren zur Auswahl von Formularelementen, die sehr nützlich sind.

:Tastenauswahltaste
:Kontrollkästchen mehrere Kontrollkästchen auswählen
:markiert wählt das ausgewählte Formularelement aus
:disabled wählt deaktivierte Formularelemente aus
:enabled wählt aktivierte Formularelemente
• aus
:file wählt Formularelemente mit type="file"
• aus
:image wählt Formularelemente mit type="image"
• aus
… …

$('#myForm :input'); // 选择所有可输入的表单元素

So verwenden Sie Selektoren

Nachdem Sie den Selektor ausgeführt haben, können Sie die Methoden im Selektor aufrufen. Diese Methoden sind in zwei Kategorien unterteilt: Getter und Setter. Der Getter gibt die Eigenschaften des ersten Elements in der Ergebnismenge zurück, und der Setter kann die Eigenschaften aller Elemente in der Ergebnismenge festlegen.

Kettenbetrieb

Die meisten Methoden im jQuery-Selektor geben das jQuery-Objekt selbst zurück, sodass Sie nach dem Aufruf einer Methode weiterhin andere Methoden für diese Methode aufrufen können, genau wie bei einer Kombination:

$('#content').find('h3').eq(2).html('new text for the third h3!');

Bei verketteten Operationen ist es wichtig, den Code lesbar zu halten:

$('#content')
  .find('h3')
  .eq(2)
  .html('new text for the third h3!');

Wenn sich die Elemente im Selektor während des Kettenvorgangs ändern, können Sie die Methode $.fn.end verwenden, um zum ursprünglichen Ergebnissatz zurückzukehren:

$('#content')
  .find('h3')
  .eq(2)
    .html('new text for the third h3!')
  .end() // 返回最初的结果集
  .eq(0)
    .html('new text for the first h3!');

链式操作非常好用，以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用，过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。

jQuery 对有些方法进行了“重载”，所有对某元素赋值或取值的时候所用的方法名是一样的，只是参数列表不同。当用 jQuery 方法对元素赋值的时候，它称为 setter，取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值，getter 只取得选择器中第一个元素的值。

$('h1').html('hello world'); // setter
var str = $('h1').html();  // getter

setter 返回的是 jQuery 对象，可以继续在这个对象上调用 jQuery 方法（链式操作），getter 仅放回我们想要的值，返回值不是 jQuery 对象，所以不能继续链式操作了。
jQuery 操作 CSS

jQuery 可以很方便的设置或取得元素的 CSS 属性。

    CSS 属性如果要想在 JavaScript 中使用，多要转换成骆驼命名法（camel cased），例如 CSS 中的 font-size 属性，在 JavaScript 中对应的是 fontSize，但是 jQuery 的 $.fn.css 方法对此做了特殊处理，无论使用哪种写法都可以。

例如：

var strsize1 = $('h1').css('fontSize'); // 返回 "19px"
var strsize2 = $('h1').css('font-size'); // 同上

$('h1').css('fontSize', '100px');   // 给单个属性赋值
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值

上面可以看到，一次性给多个属性赋值的时候，实际上传入的是一个对象，这个对象中包含了一些可以表示 CSS 属性的键-值对，在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性

作为一个 getter，$.fn.css 确实很好用，但是应该尽量避免将其作为 setter 使用，因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类（class），然后用 JavaScript 将类应用到元素上即可：

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

尺寸

jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。

$('h1').width('50px');  // 设置所有 h1 元素的宽度
$('h1').width();     // 得到第一个 h1 元素的宽度

$('h1').height('50px'); // 设置所有 h1 元素的高度
$('h1').height();    // 得到第一个 h1 元素的高度

$('h1').position();   // 返回第一个 h1 元素
             // 的位置信息，此返回值是一个对象
             // 此位置是相对其父元素的位置的偏移量

这里只是对 jQuery 操纵元素大小及位置信息的简单举例。