html find id,jQuery find("#id")与find(".class")实例分析与比较

JQuery find()方法是用来查找某个或某些元素，find()参数可以是元素的id，也可以是元素的class类名，但两者得到的结果是不一样的，本文将详细介绍find()方法的使用方法。

jQuery find()方法

HTML实例代码

子元素p1

子元素p2

子元素p3

子元素p4

子元素p5

子元素p6

子元素p1

子元素p2

子元素p3

子元素p4

子元素p5

子元素p6

$(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 

console.log($(mp[i]).html());   // 子元素p4 子元素p5 子元素p6

}

}, );

}, );

实例分析

1、$("#main").find("#p1")是表示在id=main的元素子元素里，查找id=p1的元素。本实例查找到的html代码是这个：

子元素p1

因此，如下代码：var mp = $("#main").find("#p1");

console.log($(mp).html());

输出内容是：

子元素p1

因为id是唯一的，所以find("#id")查找的内容也是唯一的。

2、$("#main").find(".el")是表示在id=main的元素子元素里，查找class=el的元素。本实例查找到的html代码是这个：

子元素p4

子元素p5

子元素p6

从这看到，它查找到的内容不再是唯一的了，而是有很多。它的结果被保存在一个数组里，我们可以使用循环的方法从数组里获得各个数据，代码如下：var mp = $("#main").find(".el");

for(var i=0; i 

console.log($(mp[i]).html());

}

mp.length是数组的长度。

输出内容是：

子元素p4

子元素p5

子元素p6

总结

本文介绍了JQuery如何用find()方法查找某个或某些元素。find("#id")查找的内容是唯一的，而find(".class")获得的是一个数组，内容不一定唯一。

您可能对以下文章也感兴趣