JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问关系封装</title>
<style>
li{
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body> <ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul> <script src="tools.js"></script>
<script>
//获取box改为red
var box = getEle("box");
box.style.backgroundColor="red"; //获取第一个和最后一个子节点
var parent = box.parentNode;
getFirstNode(parent).style.backgroundColor="yellow";
getLastNode(parent).style.backgroundColor="yellow"; //获取上一个下一个兄弟节点
getNextNode(box).style.backgroundColor="blue";
getPrevNode(box).style.backgroundColor="blue"; //指定兄弟节点
getEleOfIndex(box,0).style.backgroundColor="green";
getEleOfIndex(box,1).style.backgroundColor="green"; //获取所有的兄弟节点
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
} // //父节点
// div.parentNode;
//
// //兄弟节点
// div.previousSibling;
// div.previousElementSibling;
// div.nextSibling;
// div.nextElementSibling;
//
// //单个子节点
// div.firstChild;
// div.firstElementChild;
// div.lastChild;
// div.lastElementChild;
//
// //所有子节点
// div.childNodes;
// div.children;
//
// //获取指定的兄弟节点
// div.parentNode.children[index];
//
// //获取所有的兄弟节点
// function fn(ele) {
// var newArr = [];
// var arr = ele.parentNode.children;
// for (var i = 0; i < arr.length; i++) {
// //如果不是ele元素本身，添加到新数组，老数组里面包含的ele
// if (ele !== arr[i]) {
// newArr.push(arr[i]);
// }
// }
// } </script>
</body>
</html>
tool.js
function getEle(id) {
return document.getElementById(id)
}
/**
* 功能：给指定元素查找它的第一个元素子节点，并返回
* @param ele
* @returns {Element | (() => Node) | ActiveX.IXMLDOMNode | Node | SVGElementInstance}
*/
function getFirstNode(ele) {
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给指定元素查找它的最后一个元素子节点，并返回
* @param ele
* @returns {Element | ActiveX.IXMLDOMNode | Node | SVGElementInstance | (() => Node)}
*/
function getLastNode(ele) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}
*/
function getNextNode(ele) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个元素兄弟节点，并返回
* @param ele
* @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}
*/
function getPrevNode(ele) {
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟节点，并返回
* @param ele
* @param index
* @returns {Element}
*/
function getEleOfIndex(ele,index) {
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找它的所用兄弟元素，并返回数组
* @param ele
*/
function getAllSiblings(ele) {
var newArr = [];
var arr = ele.parentNode.children;
for (var i = 0; i < arr.length; i++) {
//如果不是ele元素本身，添加到新数组，老数组里面包含的ele
if (ele !== arr[i]) {
newArr.push(arr[i]);
}
}
return newArr;
}
style属性特点
1、样式少的时候使用
2、style是对象
3、值是字符串，没有设置值是""
4、命名规则，驼峰命名和css不一祥
5、设置了类样式不能获取（只和行内式交互，和内嵌式外链式无关）
6、box.style.cssText="字符串形式的样式"（可以赋值多个属性）
案例-文本焦点高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本焦点高亮显示</title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<ul>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<button>设置</button>
</ul> <script>
var inpArr = document.getElementsByTagName("input");
var button = inpArr[inpArr.length - 1].nextElementSibling;
button.onclick = function () {
for (var i = 0; i < inpArr.length; i++) {
//当button被点击，所有input绑定事件onfocus
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
};
//绑定onblur事件，取消样式
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
} </script> </body>
</html>
案例-百度皮肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度皮肤</title>
<style>
*{
padding: 0;
margin:0;
}
body{
background: url(image/3.png) no-repeat;
}
.box{
height: 200px;
padding-top: 30px;
text-align: center;
background: rgba(255,255,255,0.3);
}
img{
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="data:image/1.png" alt="" width="200px"/>
<img src="data:image/2.png" alt="" width="200px"/>
<img src="data:image/3.png" alt="" width="200px"/>
<img src="data:image/4.png" alt="" width="200px"/>
<img src="data:image/5.png" alt="" width="200px"/>
</div> <script>
//点击图片修改背景图片
var box=document.getElementsByTagName("div")[0];
//body js内部已优化
var body=document.body;
var imgArr=box.children;
for(var i=0;i<imgArr.length;i++){
imgArr[i].index=i;
imgArr[i].onclick = function () {
// body.style.backgroundImage = "url(image/"+(this.index+1)+".png)"
// body.style.background = "url(image/"+(this.index+1)+".png) no-repeat " //url("http://localhost:63343/dom3/image/2.png")
body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
dom元素的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom元素的创建</title>
</head>
<body>
<button>创建</button>
<ul>
aaa
</ul>
<script>
//1、 document.write创建；会覆盖原来内容
document.write("<li>我是document.write创建的</li>");
var btn=document.getElementsByTagName("button")[0];
var ul=document.getElementsByTagName("ul")[0]; // btn.onclick = function () {
// document.write("<li>我是document.write创建的</li>");
// } //2、直接利用元素innerHTML方法。（innerText方法不识别标签,会覆盖原来内容用+=就行）
ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>" //3、利用dom的api创建元素
var newli=document.createElement("li");
newli.innerHTML="我是createElement创建的"; //在赋元素的最后添加元素
// ul.appendChild(newli);
//指定位置添加(放在li1之前)
var li1=document.getElementById("li1");
ul.insertBefore(newli,li1)
</script>
</body>
</html>
dom元素的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的操作</title>
</head>
<body>
<ul>
<li id="li1">参照标签</li>
</ul> <script>
// document.write()不常用容易覆盖原来的页面
// innerHTML;用的比较多，绑定属性和内容比较方便
//document.createElement；用的比较多，指定数量的时候一般用它
var ul=document.getElementsByTagName("ul")[0];
var li1=document.getElementById('li1'); //创建，添加()
var li2=document.createElement("li");
li2.innerText= "我是createElment创建的标签，用的是appendChild的方法";
ul.appendChild(li2); var li3=document.createElement("li");
// li3.id="test";
li3.innerText= "我是createElment创建的标签，insertBefore添加";
//父节点.inserBefore(新节点，参照节点)
ul.insertBefore(li3,li1); //删除，替换
ul.removeChild(li3); // 父节点.replaceChild(newNode,oldNode)
// var li4=document.createElement("li");
// li4.innerText="test";
ul.replaceChild(li3,li2) //克隆 cloneNode(true)，true是深层复制
for(var i=0;i<=3;i++){
var newLi = li3.cloneNode(true);
ul.appendChild(newLi);
} </script> </body>
</html>
案例-选择水果
1、简单版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择水果</title>
<style>
select{
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head> <body>
<select name="" id="sel1" size="10" multiple>
<option value="">香蕉</option>
<option value="">苹果</option>
<option value="">鸭梨</option>
<option value="">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select> <script>
//点击>>>和<<<两个按钮 var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var inpArr=document.getElementsByTagName("input");
inpArr[0].onclick = function () {
//获取所有子元素，整体添加到另一个标签中
var arr = sel1.children;
for(var i=arr.length-1;i>=0;i--){
//放入select2，不能用push要用appendChild
sel2.appendChild(arr[0]);
} //也可以在for循环外面定义一个变量
// var arrLen=arr.length-1;
// for(var i=0;i<=arrLen;i++){
// //放入select2，不能用push要用appendChild
// console.log(i);
// // console.log(i);
// sel2.appendChild(arr[0]);
// }
};
inpArr[1].onclick = function () {
//获取所有子元素，整体添加到另一个标签中
var arr = sel2.children;
for(var i=arr.length-1;i>=0;i--){
//放入select2，不能用push要用appendChild
sel1.appendChild(arr[0]);
}
}; //被选定的子元素跑到对面
// inpArr[2].onclick = function () {
// //获取所有子元素，整体添加到另一个标签中
// var arr = sel1.children;
// for(var i=arr.length-1;i>=0;i--){
// //放入select2，不能用push要用appendChild
// if(arr[i].selected === true){
// sel2.appendChild(arr[i]);
// }
// }
// };
inpArr[2].onclick = function () {
var arr=sel1.children;
//遍历判断数组中的元素selected属性为true，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
sel2.appendChild(arr[i]);
}
}
};
inpArr[3].onclick = function () {
var arr=sel2.children;
//遍历判断数组中的元素selected属性为true，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
sel1.appendChild(arr[i]);
}
}
} </script>
</body>
</html>
2、封装版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择水果</title>
<style>
select{
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head> <body>
<select name="" id="sel1" size="10" multiple>
<option value="">香蕉</option>
<option value="">苹果</option>
<option value="">鸭梨</option>
<option value="">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select> <script>
//点击>>>和<<<两个按钮 var sel1=document.getElementById("sel1");
var sel2=document.getElementById("sel2");
var inpArr=document.getElementsByTagName("input"); inpArr[0].onclick = function () {
fn1(sel1,sel2)
}; inpArr[1].onclick = function () {
fn1(sel2,sel1)
};
inpArr[2].onclick = function () {
fn2(sel1,sel2)
}; inpArr[3].onclick = function () {
fn2(sel2,sel1)
};
function fn1(ele1,ele2) {
//获取所有子元素，整体添加到另一个标签中
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
//放入select2，不能用push要用appendChild
ele2.appendChild(arr[0]);
}
}
function fn2(ele1,ele2) {
var arr=ele1.children;
//遍历判断数组中的元素selected属性为true，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
ele2.appendChild(arr[i]);
}
}
}; </script>
</body>
</html>
案例-高级隔行变色json_str
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级隔行变色</title>
<style>
*{
padding: 0;
margin: 0;
text-align: center;
}
.wrap{
width: 500px;
margin: 100px auto 0;
}
table{
/*separate在分隔模式下，相邻的单元格都拥有独立的边框。collapse在合并模式下，相邻单元格共享边框。*/
border-collapse: collapse;
border-spacing:0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,td{
/*border: 1px solid #d0d0d0;*/
color: #404060;
padding: 10px;
}
th{
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td{
font: 14px "微软雅黑";
}
tbody tr{
background-color: #f0f0f0;
cursor: pointer; }
.current{
background-color: red!important; }
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target"> </tbody>
</table>
</div> <script>
var json_str = [
{"id":"1","name":"张三","kecheng":"英语","fenshu":"100"},
{"id":"2","name":"李四","kecheng":"英语","fenshu":"100"},
{"id":"3","name":"王二","kecheng":"英语","fenshu":"100"},
{"id":"4","name":"孙悟空","kecheng":"英语","fenshu":"100"},
{"id":"5","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"6","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"7","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"8","name":"金角大王","kecheng":"英语","fenshu":"100"},
{"id":"9","name":"金角大王","kecheng":"英语","fenshu":"100"},
];
var tbody=document.getElementById("target");
for(var i=0;i<json_str.length;i++){
console.log(json_str[i]);
tbody.innerHTML += "<tr>\n" +
"<td>"+json_str[i].id+"</td>\n" +
"<td>"+json_str[i].name+"</td>\n" +
"<td>"+json_str[i].kecheng+"</td>\n" +
"<td>"+json_str[i].fenshu+"</td>\n" +
"</tr>"
} //通过document.createElement
// for(var i=0;i<json_str.length;i++){
// tr=document.createElement("tr");
// td1=document.createElement("td");
// td2=document.createElement("td");
// td3=document.createElement("td");
// td4=document.createElement("td");
// td1.innerText =json_str[i].id;
// td2.innerText =json_str[i].name;
// td3.innerText =json_str[i].kecheng;
// td4.innerText =json_str[i].fenshu;
// tbody.appendChild(tr);
// tr.appendChild(td1);
// tr.appendChild(td2);
// tr.appendChild(td3);
// tr.appendChild(td4); // tbody.innerHTML += "<tr>\n" +
// "<td>"+json_str[i].id+"</td>\n" +
// "<td>"+json_str[i].name+"</td>\n" +
// "<td>"+json_str[i].kecheng+"</td>\n" +
// "<td>"+json_str[i].fenshu+"</td>\n" +
// "</tr>"
// } // var tbody=document.getElementById("target");
var trArr=tbody.children;
//循环判断并隔行赋值背景色
for(var i=0;i<trArr.length;i++){
if(i%2!==0){
trArr[i].style.backgroundColor = "#a3a3a3";
}else{
trArr[i].style.backgroundColor = "#ccc";
}
//鼠标经过高亮显示
//难点，鼠标移开恢复原本颜色
//计数器(进入tr立刻记录颜色，移开使用记录好的颜色)
var color="";
trArr[i].onmouseover = function () {
//赋值颜色之前记录颜色
color=this.style.backgroundColor;
this.style.backgroundColor = "#fff";
};
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
} </script>
</body>
</html>
案例-模拟百度搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟百度搜索</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 200px auto;
}
ul{
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover{
background-color: red;
}
input{
width: 400px; }
button{
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>搜索</button>
<!--<ul>-->
<!--<li>aaa</li>-->
<!--<li>bbb</li>-->
<!--<li>ccc</li>-->
<!--</ul>--> <script>
//需求：输入内容(输入事件，键盘弹起事件)
var arr = ["a","ab","abc","abcd","baa","aab"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0]; //绑定事件
inp.onkeyup = function () {
var newArr=[];
//创建一个字符串，里面添加满了li和对应的内容
//遍历老数组，那项是以input内容为开头的
for(var i=0;i<arr.length;i++){
//是否以input内容为开头的
var val=this.value;
if(arr[i].indexOf(val)===0){
newArr.push("<li>"+arr[i]+"</li>");
}
} //把创建好的内容添加到ul
var str=newArr.join("");
// var aa = document.getElementsByTagName("ul")[0]; //1 如果ul存在，删除
if(box.children[2]){
//只要存在那么就是object类型
box.removeChild(box.children[2]);
} //2 内容为空那么不能生成ul //3 如果数组中没有input字符开头的元素，切断函数
//换个说法，newArr长度为0 if(this.value.length===0 || newArr.length === 0){
//切换函数
return;
}
var ul = document.createElement("ul"); ul.innerHTML = str;
box.appendChild(ul)
}
</script> </div>
</body>
</html>
JavaScript-dom3 json_str dom元素控制 模拟百度搜索的更多相关文章
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- Splinter学习－－初探1，模拟百度搜索
Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...
- python--selenium简单模拟百度搜索点击器
python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...
- JS---DOM---案例：模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- （13）JavaScript之[HTML DOM元素][JS对象]
元素 /** * HTML DOM 元素(节点)*/ //创建新的HTML元素 var para = document.createElement('p'); var node = document. ...
随机推荐
- hdu 1058:Humble Numbers（动态规划 DP）
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- 漫游Kafka入门篇之简单介绍（1）
介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以 ...
- python3----输出所有大小写字母及数字
1. 用一行输出所有大(小)写字母,以及数字 print([chr(i) for i in range(65, 91)]) # 所有大写字母 print([chr(i) for i in range( ...
- sql语句优化 (转)
性能不理想的系统中除了一部分是因为应用程序的负载确实超过了服务器的实际处理能力外,更多的是因为系统存在大量的SQL语句需要优化. 为了获得稳定的执行性能,SQL语句越简单越好.对复杂的SQL语句,要设 ...
- __name__
__name__ 是 python 的一个内置变量,它的值等于 '__main__' ,如下: [root@localhost ~]$ cat talk.py #!/usr/bin/env pytho ...
- FragmentStatePagerAdapter写法
为了节省资源,分批加载数据//适配器class TabLayoutViewPagerAdapter extends FragmentStatePagerAdapter { public TabLayo ...
- 如何通过Keil将程序正确的下载进flash中
前面介绍了一些创建工程和调试的基本步骤,在这里准备介绍一下如何正确的将Keil程序在仿真调试中下载到flash.这里再次涉及到了debug的窗口. 工具/原料 Keil uVision 4/5 ...
- mybatis 控制台打印出来的sql 执行结果为空 但是将sql放到mysql执行有数据
mybatis中的sql如下 select airln_Cd airlnCd,city_coordinate_j cityCoordinateJ,city_coordinate_w cityCoord ...
- fopen()函数文件模板中w,w+,a,a+的区别
"w" 写入方式打开,将文件指针指向文件头并将文件大小截为零.如果文件不存在则尝试创建之. "w+" 读写方式打开,将文件指针指向文件头并将文件大小截为零.如果 ...
- 【BZOJ4872】[Shoi2017]分手是祝愿 数学+期望DP
[BZOJ4872][Shoi2017]分手是祝愿 Description Zeit und Raum trennen dich und mich. 时空将你我分开.B 君在玩一个游戏,这个游戏由 n ...