技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時間:2020-2-27 22:4:44    瀏覽:

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

 jQuery find()方法

jQuery find()方法

HTML實例代碼

<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

實例分析

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

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

因此,如下代碼:

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

輸出內容是:

子元素p1

因為id是唯一的,所以find("#id")查找的內容也是唯一的。

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

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

從這看到,它查找到的內容不再是唯一的了,而是有很多。它的結果被保存在一個數組里,我們可以使用循環的方法從數組里獲得各個數據,代碼如下:

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

mp.length是數組的長度。

輸出內容是:

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

總結

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

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

標簽: JQuery  find方法  
  • IT熱文
  • 站長推薦
陕西11选5中奖助手 欢乐斗牛棋牌下载手 海南体彩飞鱼走势图 多乐彩的玩法 贵州11选5彩票平台 jx吉祥棋牌手机版app下载 vv时时彩平台黑钱 白小姐四肖必选一肖四不像 陕西11选5任五遗漏号 棋牌斗牛玩法 棋牌游戏源码出售