代码拉取完成,页面将自动刷新
同步操作将从 Albert/前端教学项目 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。