suchen

Heim >Web-Frontend >js-Tutorial >Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

WBOY
WBOYOriginal
2016-05-16 15:02:381816Durchsuche

Dieser Artikel folgt dem vorherigen Artikel über die Kernfunktionen von jQuery und stellt den Zugriff auf jQuery-Objekte vor.

JQuery-Objektzugriff

each(callback)

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

size()

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

Länge

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

Selektor

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

Kontext

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

get()

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

get(index)

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

index([subject])

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

Testfall

Das Folgende ist eine Möglichkeit, den oben genannten jQuery-Objektzugriff über Code zu testen, als Referenz für Freunde, die es nicht verstehen: 

<!DOCTYPE html>
<html>
<head>
  <title>jquery对象访问</title>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
  jquery对象访问之一each(callback)
-->
<div>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
  <span>span4</span>
  <span>span5</span>
</div>
<script type="text/javascript">
  var spanList = $("div span");
  spanList.each(function(){
    // alert(this.innerHTML);  //这个获取的是span元素而不是jQuery对象，这点需要注意。依次输出span1 ... span5
    // alert($(this).html()); //输出结果同上 只是$(this)会将元素转为jQuery对象
    if($(this).html() == "span4")
      return false;      //可以提前使用return 退出循环
  });
</script>
<!--
  jquery对象访问之二size()
-->
<script type="text/javascript">
  // alert($("div span").size());  //输出结果5 size()函数是获取jQuery集合中元素的个数
</script>
<!--
  jquery对象访问之三length
-->
<script type="text/javascript">
  // alert($("div span").length);  //输出结果5 当前匹配的元素个数.同size 返回相同的值
</script>
<!--
  jquery对象访问之四selector
-->
<ul id="ul1"></ul>
<script type="text/javascript">
  $("#ul1")
   .append("<li>" + $("ul").selector + "</li>")
   .append("<li>" + $("ul li").selector + "</li>")
   .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
</script>
<!--
  jquery对象访问之五context
-->
<ul id="ul2"></ul>
<script type="text/javascript">
  $("#ul2")
   .append("<li>" + $("ul").context + "</li>")
   .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
</script>
<!--
  jquery对象访问之六get()
-->
<div id="get">
  <span>get1</span>
  <span>get2</span>
  <span>get3</span>
  <span>get4</span>
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get();
  // alert(span1);  // 返回的是span元素的集合
  // alert($(span1).html()); //输出结果get1 将节点元素包装成jQuery对象
</script>
<!--
  jquery对象访问之七get(index)
-->
<div id="get">
  <span>get1</span>
  <span>get2</span>
  <span>get3</span>
  <span>get4</span>
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get(0);
  // alert(span1.innerText); //输出结果是get1 通过节点元素
  // alert($(span1).html()); //输出结果同上   将节点元素包装成jQuery对象
</script>
<!--
  jquery对象访问之八index([subject])
-->
<ul id="ul8">
 <li id="foo">foo</li>
 <li id="bar">bar</li>
 <li id="baz">baz</li>
</ul>
<script type="text/javascript">
  alert($('#ul8 li').index(document.getElementById('bar'))); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
  alert($('#ul8 li').index($('#bar'))); //1，传递一个jQuery对象
  alert($('#ul8 li').index($('#ul8 li:gt(0)'))); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
  alert($('#bar').index('#ul8 li'));   //1，传递一个选择器，返回#bar在所有li中的做引位置
  alert($('#bar').index()); //1，不传递参数，返回这个元素在同辈中的索引位置。
</script>
</body>
</html>

Ergebnisse ausführen

Was ist Jquery-Objektzugriff und wie wird it_jquery verwendet?

Zusammenfassung

In diesem Artikel wird das Objektzugriffsmodul von jQuery vorgestellt. Ich habe jQuery vorher nicht systematisch gelernt, aber jetzt habe ich vor, jQuery systematisch zu lernen und es als Referenz für Freunde zu veröffentlichen, die es benötigen. Wenn etwas nicht stimmt, korrigieren Sie mich bitte. Vielen Dank an alle fürs Lesen!

Stellungnahme：
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
Vorheriger Artikel：Implementierung eines Bildkarussells basierend auf Javascript-Array_Javascript-KenntnissenNächster Artikel：Implementierung eines Bildkarussells basierend auf Javascript-Array_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen