技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

jQuery find("#id")與find(".class")實(shí)例分析與比較

作者:admin    時(shí)間:2020-2-27 22:4:44    瀏覽:

JQuery find()方法是用來查找某個(gè)或某些元素，find()參數(shù)可以是元素的id，也可以是元素的class類名，但兩者得到的結(jié)果是不一樣的，本文將詳細(xì)介紹find()方法的使用方法。

 jQuery find()方法

jQuery find()方法

HTML實(shí)例代碼

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<br />
<textarea style="width:300px;height:130px">
  <div id="main">
    <p id="p1">子元素p1</p>
    <p id="p2">子元素p2</p>
    <p id="p3">子元素p3</p>
    <p class="el">子元素p4</p>
    <p class="el">子元素p5</p>
    <p class="el">子元素p6</p>
  </div>
</textarea>
<div id="main">
  <p id="p1">子元素p1</p>
  <p id="p2">子元素p2</p>
  <p id="p3">子元素p3</p>
  <p class="el">子元素p4</p>
  <p class="el">子元素p5</p>
  <p class="el">子元素p6</p>
</div>

<br>
<input type=button id="btn" value="$('#main').find('#p1')"> 
<input type=button id="btn2" value="$('#main').find('.el')">

<script type="text/javascript">
$(function () {
  $("#btn").click(function () {
    var mp = $("#main").find("#p1");
    console.log($(mp).html());  // 子元素p1
  }, );
}, );

$(function () {
  $("#btn2").click(function () {
    var mp = $("#main").find(".el");
    //console.log($(mp).html()); // 子元素p4
    //console.log($(mp).length); // 3
    for(var i=0; i < mp.length; i++){
      console.log($(mp[i]).html());   // 子元素p4 子元素p5 子元素p6
    }
  }, );
}, );
</script>

</body>
</html>

execcodegetcode

實(shí)例分析

1、$("#main").find("#p1")是表示在id=main的元素子元素里，查找id=p1的元素。本實(shí)例查找到的html代碼是這個(gè)：

<p id="p1">子元素p1</p>

因此，如下代碼：

var mp = $("#main").find("#p1");   
console.log($(mp).html());

輸出內(nèi)容是：

子元素p1

因?yàn)?strong>id是唯一的，所以find("#id")查找的內(nèi)容也是唯一的。

2、$("#main").find(".el")是表示在id=main的元素子元素里，查找class=el的元素。本實(shí)例查找到的html代碼是這個(gè)：

<p class="el">子元素p4</p>
<p class="el">子元素p5</p>
<p class="el">子元素p6</p>

從這看到，它查找到的內(nèi)容不再是唯一的了，而是有很多。它的結(jié)果被保存在一個(gè)數(shù)組里，我們可以使用循環(huán)的方法從數(shù)組里獲得各個(gè)數(shù)據(jù)，代碼如下：

var mp = $("#main").find(".el");
for(var i=0; i < mp.length; i++){
  console.log($(mp[i]).html());
}

mp.length是數(shù)組的長度。

輸出內(nèi)容是：

子元素p4
子元素p5
子元素p6

總結(jié)

本文介紹了JQuery如何用find()方法查找某個(gè)或某些元素。find("#id")查找的內(nèi)容是唯一的，而find(".class")獲得的是一個(gè)數(shù)組，內(nèi)容不一定唯一。

您可能對以下文章也感興趣

標(biāo)簽: JQuery  find方法  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */