cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery each拿取对象的方式实例详解

jquery each拿取对象的方式实例详解

伊谢尔伦
伊谢尔伦asal
2017-07-19 14:08:181491semak imbas

JQuery拿取对象的方式

$(‘#id') ：通过元素的id

$(‘tagName') : 通过元素的标签名

$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li')

$(‘tagName#id): 通过元素的id和标签名

$(‘:checkbox'):拿取input的 type为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.

延迟加载js文件：$.getScript

例子：

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>

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;);
}

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>

Atas ialah kandungan terperinci jquery each拿取对象的方式实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于div的onmouseover事件失效的问题解决Artikel seterusnya：jQuery中find()和filter()操作用法实例详解

Artikel berkaitan

Lihat lagi