php 43 js (点击banner显示内容 getElementByTagName ,遍历) query (取id，遍历)

最新推荐文章于 2022-06-09 09:27:18 发布

fancivez

最新推荐文章于 2022-06-09 09:27:18 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/fancivez/article/details/45767923

js 专栏收录该内容

52 篇文章

订阅专栏

本文介绍如何使用JavaScript的getElementsByTagName方法获取特定标签的元素集合，并通过jQuery的each函数实现对这些元素的高效遍历与操作，具体展示了如何通过ID控制网页内容的显示与隐藏，以及在页面中实现点击Banner控制内容展示的功能。同时，文章还对比了传统方法与现代框架在实现相同功能上的效率差异，旨在提升开发者对网页动态内容管理和交互设计的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.getElementsByTagName

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

eg.

var x=document.getElementsByTagName("input");

通过使用 length 属性来循环遍历节点列表

var x=document.getElementsByTagName("p");
    for (var i=0;i<x.length;i++) { // do something with each paragraph }

得到点击banner控制内容的函数（有效率更高的ajax方法）

function getcontent(idvalue){
   var i;
   var list = document.getElementById("channel");
   var str  = list.getElementsByTagName("div");
   //alert(str);
   for(i=0; i<str.length; i++){
<span style="white-space:pre"><span style="white-space:pre">		</span></span>str[i].style.display="none";
    }
    document.getElementById(idvalue).style.display="block"
}

2.jquery中each遍历

如果要实现如下效果

$('#channel div').hide();
$('#banner').show();

$('#channel div').each(function(){
    $(this).attr('id')
})