0 Star 0 Fork 72

cui/前端教学项目

forked from Albert/前端教学项目 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
js.html 4.21 KB
一键复制 编辑 原始数据 按行查看 历史
cui 提交于 2018-09-11 20:23 +08:00 . js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/base.css">
<style>
.contentBox{
border:1px solid red;
overflow: hidden;
outline:1px solid yellow;
margin:0px auto 50px;
width:300px;
height: 200px;
}
.borderBox{
margin-top:50px;
border:1px solid blue;
width:100px;
height: 100px;
}
.selected{
border:1px solid red;
background-color:yellow;
}
</style>
<script>
let btnQuery=function(){
let cssText=document.querySelector("#cssSelectorText").value;
let mainNode=document.getElementsByName("#main")[0];
let nodes=document.querySelectorAll(cssText);
// console.log(nodes instanceof NodeList);
for(let i=0,len=nodes.length;i<len;i++){
nodes[i].style.cssText="border:1px solid red;background-color:yellow";
}
/*这种方法效率较低
let allNodes=mainNode.querySelectorAll("*"); //返回文档中的所有标签
//流式操作+lambda表达式
Array.from(allNodes).
filter((item)=>item.classList.contains("selected")).
forEach((item)=>{
item.classList.remove("selected");
});
*/
Array.from(nodes).forEach((item)=>{
item.classList.remove("selected");
});
Array.from(nodes).forEach((item)=>{
item.classList.add("selected");
});
}
//加载时机:DOM树加载完成之后执行
function init(){
document.getElementById("btn_query").addEventListener("click",btnQuery,false);
document.getElementById("cssSelectorText").addEventListener("keydown",(event)=>{
if(event.keyCode==13){
btnQuery();
}
},false);
}
window.addEventListener("load",init,false); //执行时机:DOM树加载完成之前
</script>
</head>
<body>
<section>
CSS选择器查询:<input type="search" name="cssSelectorText" id="cssSelectorText">
<button type="button" id="btn_query">查询</button>
<hr>
</section>
<section style="float:left">
<h2>简单标签</h2>
<input type="text">
<figure>
<img class="borderColor borderBox" id="logo" src="../img/login_logo.jpg" alt="logo" title="一个小孩">
<figcaption>一个小朋友</figcaption>
</figure>
<div>我是一个块级标签</div>
<img hidden id="test" src="../img/ooopic_1506740284.png">
<br>
<button>注册</button>
<p class="class1 class2">
我是捣乱的。
</p>
<a class="borderColor" href="../index.html">这是一个超链接</a>我不是一个超链接
<a>我也是一个超链接</a>
<div>我是一个p标签中的div标签
<nav>
<p>我是一个P标签</p>
</nav>
<p>我也是一个p标签</p>
</div>
<p>
<nav>我是一个小导航</nav>
<a href="#">我是p标签中的a标签</a>
</p>
</section>
<hr>
<section style="float:left">
<h2>盒子属性</h2>
<div class="contentBox" style="box-sizing: content-box">
contentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBox
</div>
<div class="borderBox" style="box-sizing: border-box">
IEBox
</div>
</section>
<section>
<pre>北斗七星高,
哥舒夜带刀。
</pre>
<ol style="padding-left:0px;list-style-position: inside">
<li>熊大</li>
<li>光头强</li>
<li>熊二</li>
</ol>
<ul>
<li>熊大</li>
<a>吉吉</a>
<li>光头强</li>
<li>熊二</li>
</ul>
<dl>
<dt>张居正</dt>
<dd>明朝万历年间的首辅,....</dd>
</dl>
</section>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML/CSS
1
https://gitee.com/cuizh/frontend_teaching_project.git
git@gitee.com:cuizh/frontend_teaching_project.git
cuizh
frontend_teaching_project
前端教学项目
master

搜索帮助