Exemple détaillé de la façon dont jquery récupère chacun des objets-js tutoriel-php.cn

Exemple détaillé de la façon dont jquery récupère chacun des objets

伊谢尔伦

Libérer： 2017-07-19 14:08:18

original

1468 Les gens l'ont consulté

Comment JQuery récupère les objets

$('#id') : via l'identifiant de l'élément

$('tagName') : via la balise de l'élément Name

$('tagName tagName') : Passe le nom de la balise de l'élément, par exemple : $('ul li')

$('tagName#id) : Passe le identifiant et balise de l'élément Nom

$(':checkbox'): Récupère tous les éléments dont le type d'entrée est checkbox':

<input type="checkbox" name="appetizers"

 value="imperial"/>

$(&#39;span[price] input[type=text]&#39;) ：拿取下面的input元素

<span price="3">
<input type="text" name="imperial.quantity"
         disabled="disabled" value="1"/>
</span>

$(&#39;p&#39;,$(this).parents(&#39;p:first&#39;))：拿取该p的上（至少都是父节点）的第一个p节点

$(&#39;~ span:first&#39;,this)： locates the first sibling of this that&#39;s a <span> element.

Copier après la connexion

Lazy chargement du fichier js : $.getScript

Exemple :

Fichier HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>$.getScript Example</title>
  <link rel="stylesheet" type="text/css" href="../common.css">
  <script type="text/javascript"
      src="../scripts/jquery-1.2.1.js"></script>
  <script type="text/javascript">
   $(function(){
    $(&#39;#loadButton&#39;).click(function(){
     $.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)
      &#39;new.stuff.js&#39;//,function(){$(&#39;#inspectButton&#39;).click()}
     );
    });
    $(&#39;#inspectButton&#39;).click(function(){
     someFunction(someVariable);
  test()
    });
   });
  </script>
</head>

<body>
  <button type="button" id="loadButton">Load</button>
  <button type="button" id="inspectButton">Inspect</button>
</body>
</html>

Copier après la connexion

Fichier Js :

alert("I&#39;m inline!"); 

var someVariable = &#39;Value of someVariable&#39;; 

function someFunction(value) { 
alert(value); 
} 

function test() { 
alert(&#39;test&#39;); 
}

alert("I&#39;m inline!");

var someVariable = &#39;Value of someVariable&#39;;

function someFunction(value) {
alert(value);
}

function test() {
alert(&#39;test&#39;);
}

Copier après la connexion

Traitement du tableau jquery :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Hi!</title>
  <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
  </script>
  <script type="text/javascript">
   var $ = &#39;Hi!&#39;;
   jQuery(function(){
    alert(&#39;$ = &#39;+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
  //alert(jQuery)

   });
  jQuery(function($){
  //------------遍历数组 .each的使用-------------
  var anArray = [&#39;one&#39;,&#39;two&#39;,&#39;three&#39;];
  $.each(anArray,function(n,value) {
  //do something here
  //alert(n+&#39; &#39;+value);
  });
  var anObject = {one:1, two:2, three:3};
  $.each(anObject,function(name,value) {
  //do something here
  //alert(name+&#39; &#39;+value);
  });

  //-----------过滤数组 .grep的使用------------
  var originalArray =[99,101,103];
 
  var bigNumbers = $.grep(originalArray,&#39;a>100&#39;);//第2种写法,还可以用正则表达式来过滤
  $.each(bigNumbers,function(n,value) {
  //do something here
  //alert(n+&#39; &#39;+value);
  });

  //------------转换数组 .map的使用------------
  var strings = [&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;S&#39;,&#39;K&#39;,&#39;6&#39;];
  var values = $.map(strings,function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;//如果result不是数字则返回null（返回null在这里相当于不返回）
  });
  $.each(values,function(n,value) {
  //do something here
  //alert(value);
  });

  var characters = $.map(
  [&#39;this&#39;,&#39;that&#39;,&#39;other thing&#39;],
  function(value){return value.split(&#39;&#39;);}//分离字符串用返回给characters
  );
  //alert(characters.length);

  //------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回

-1
  var index = $.inArray(2,[1,2,3,4,5]);
  //alert(index);

  //------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
  var arr = jQuery.makeArray(document.getElementsByTagName_r("p"));
  //arr.reverse(); // 使用数组翻转函数
  $.each(arr,function(n,value) {
  //do something here
  //alert(n+&#39; &#39;+value);
  //alert(value.html());
  });
  var arr2 =$.unique(document.getElementsByTagName_r("p")); //获得唯一的对象，看API,说得很模

糊,http://docs.jquery.com/Utilities/jQuery.unique
  alert();
  $.each(arr2,function(n,value) {
  //do something here
  alert(n+&#39; &#39;+value);
  });
  });
  </script>
</head>
<body>
<p>First</p><p>Second</p><p>Third</p><p>Fourth</p><p>Fourth</p>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!