javascript三层,html有哪三层

如何用js实现一组图片，使用了z-index三层排布，然后点击一张图片，被点击张图片至于顶层，其他依次？

style

.box {display:flex; margin:100px 100px}

.box img {position:relative; height:200px; transition:all 0.5s; z-index:1; box-shadow:0 0 1px #000}

/style

div class="box"

img src="图片1"/img src="图片2"/img src="图片3"/img src="图片4"/img src="图片5"/

/div

script type="text/javascript"

$(function(){

$(".box img").click(function(){

$(".box img").css({"transform":"scale(1,1)","z-index":"1","box-shadow":"0 0 1px #000"});

$(this).css({"transform":"scale(1.6,1.6)","z-index":"3","box-shadow":"0 0 10px #000"});

if($(this).prev())$(this).prev().css({"transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000"});

if($(this).next())$(this).next().css({"transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000"});

});

});

/script

需要引用jquery

相关问答

Q1: JS 三层引号嵌套

eval("var star"+i+"=" + document.getElementById("star"+i).value);

就是这样，你只要记住

"var star" 是一个整体

i 是一个整体

"=" 是一个整体

document.getElementById("star"+i).value 是一个整体

再用+连接起来

他们都是字符串或数字类型

Q2: 前端页面有哪三层构成，分别是什么？作用是什么

最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。

HTML：结构层

网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实

的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。

结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用

于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。

网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的

CSS访问权限的客户（如果不是所有功能）。

CSS：样式层

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有

关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的

媒体查询。

网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需

要HTTP请求才能获取它，从而影响站点性能。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最

常用的语言，但CGI和PHP也经常被使用。

当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与

DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重

要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。

扩展资料：

分层的一些好处是：

共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果

您需要对该文件进行更改，也许更新网站上的某些排版样式，则使用该样式表的每个页面都会得到

更改。没有必要单独编辑网站的每个页面，这对于大型网站来说可能是一项艰苦的任务。

下载速度更快：首次由客户下载脚本或样式表后，Web浏览器会对其进行缓存。由于这些共享

资源现在包含在浏览器的缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高了整体页

面速度和性能。

多人团队：如果您有多个人同时在网站上工作，您可以使用允许文件签入和签出的系统，以确

保每个人都使用最新版本。如果样式和行为与结构文档交织在一起，那就更难了。

搜索引擎优化：一个明确分离风格和结构的网站可能会对搜索引擎有更好的表现，因为它们可以更有效地抓取内容并理解页面而不会陷入视觉风格和行为信息。

辅助功能：外部样式表和脚本文件更易于人们和浏览器访问。屏幕阅读器等软件可以更轻松地

处理结构层中的内容，而无需处理无论如何都无法使用的样式。

向后兼容性：使用单独的开发层设计的站点更可能向后兼容，因为无法使用某些CSS样式或禁

用了JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以使用支持它们的浏览器的功能逐

步增强您的网站。

Q3: javaScript问题 这里只有两层，我想问，怎么实现三层

从数据结构上看，

Child:{Class:[{ID:101,Name:"第一个1"} ...

继续追加 Child 即可。

比如

Child:{

Class:[{

ID:101,Name:"第一个1",

Child:{

Class:[{

ID:10101,

Name:"第一个1的第一个1"

}, {

// 第一个1的第二个，第三个 ...

}]

}

}, {

// 第一个2，第一个3 ...

}]

}

JSON 的写法也讲究缩进，这样看起来清楚。

补充：

树形结构的遍历最好用递归，比如像这样

function showChild(obj) {

if(!obj.Class) return;

for(var i=0; iobj.Class.length; i++) {

for(var k in obj.Class[i]) {

if(k == 'Child') {

showChild(obj.Class[i][k]);

} else {

$("msg").innerHTML += k + ':' + obj.Class[i][k] + 'br /';

}

}

}

}

Q4: js解析Json需三层循环，有其他好的方法吗？

使用递归，下面是一个JSON转String的函数应该会对你有所帮助

function jsonToString (obj){  

var THIS = this;   

switch(typeof(obj)){  

case 'string':  

return '"' + obj.replace(/(["\\])/g, '\\$1') + '"';  

case 'array':  

return '[' + obj.map(THIS.jsonToString).join(',') + ']';  

case 'object':  

if(obj instanceof Array){  

var strArr = [];  

var len = obj.length;  

for(var i=0; ilen; i++){  

strArr.push(THIS.jsonToString(obj[i]));  

}  

return '[' + strArr.join(',') + ']';  

}else if(obj==null){  

return 'null';  

}else{  

var string = [];  

for (var property in obj) string.push(THIS.jsonToString(property) + ':' + THIS.jsonToString(obj[property]));  

return '{' + string.join(',') + '}';  

}  

case 'number':  

return obj;  

case false:  

return obj;  

}  

}

Q5: js多维数组三层怎么定义呀，老师只讲了第二层

js不存在多维数组，只是数组可以嵌套数组而已

var a=[[[a,b],[c,d]],[[e,f],[g,h]]]