Maison > Article > interface Web > Qu'est-ce que l'accès aux objets jquery et comment l'utiliser it_jquery

Qu'est-ce que l'accès aux objets jquery et comment l'utiliser it_jquery

WBOYoriginal: 2016-05-16 15:02:381720parcourir

Cet article fait suite à l'article précédent sur les fonctions principales de jQuery et présente comment accéder aux objets jQuery.

Accès aux objets jquery

chacun(rappel)

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

taille()

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

longueur

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

sélecteur

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

contexte

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

obtenir()

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

obtenir(index)

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

index([sujet])

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

Cas de test

Ce qui suit est un moyen de tester l'accès aux objets jQuery ci-dessus via le code, pour référence par des amis qui ne comprennent pas :

<!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>

Exécuter les résultats

Quest-ce que laccès aux objets jquery et comment lutiliser it_jquery

Résumé

Cet article présente le module d'accès aux objets de jQuery. Je n'ai pas appris jQuery systématiquement auparavant, mais maintenant je prévois d'apprendre jQuery systématiquement et de le publier pour référence par des amis qui en ont besoin. Si quelque chose ne va pas, corrigez-moi. Merci à tous d’avoir lu !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation d'un carrousel d'images basé sur les compétences javascript array_javascriptArticle suivant：Implémentation d'un carrousel d'images basé sur les compétences javascript array_javascript

Articles Liés

Voir plus