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. ...
随机推荐
- Docker容器技术（目录）
Docker介绍和部署请自行搜索官方网站 [01]Docker学习:镜像管理 [02]Docker学习:容器管理 [03]Docker学习:网络管理 [04]Docker学习:Dockerfile [ ...
- JB开发之问题汇总 [jailbreak，越狱技术]
1.升级到Mac 10.9.1,Xcode 升级到5出现的问题: 1)升级前要做的事情: ①升级/重新安装iOSOpenDev,在终端输入 xcode-select --switch (xcode_d ...
- ios学习--结合UIImageView实现图片的移动和缩放
因为种种原因,需要在iphone应用中实现图片查看功能,由于iphone屏幕支持多点触摸,于是是想到用“手势”来实现图片的实时缩放和移动.借鉴无所不在的internet网络资料之后,终于实现此一功能, ...
- js截取最后一个斜杠之后的内容
var str = "/asdasf/asfaewf/agaegr/trer/rhh"; var index = str .lastIndexOf("\/"); ...
- python中的coding的格式书写形式
# -*- coding:utf-8 -*-可以改写成以下各种形式:1,# -*- coding=utf-8 -*-2,# _*_ coding=utf-8 _*_3,# coding:utf-84 ...
- 【POJ3565】ANTS KM算法
[POJ3565]ANTS 题意:平面上有2*n个点,N白N黑.为每个白点找一个黑点与之连边,最后所有边不交叉.求一种方案. 题解:KM算法真是一个神奇的算法,虽然感觉KM能做的题用费用流都能做~ 本 ...
- 安卓EmojiTextView 和EmojiEditText
https://github.com/rockerhieu/emojicon 用法和TextView一样. 发送的时候用UTF-8 String enCodedStatusCode = "& ...
- 领悟 JavaScript 中的面向对象
JavaScript是基于对象的语言,我们可以使用面向对象的思想去开发js代码. JavaScript是基于对象的语言. 可以使用面向对象的思想,但是不少人对这一点理解得并不全面. 在 JavaScr ...
- java讲讲几种常见的排序算法
java讲讲几种常见的排序算法(一) 目录 java讲讲几种常见的排序算法(一) java讲讲几种常见的排序算法(二) 以数组array={6,3,20,8,15,1}为例 冒泡排序 思路:从第0个到 ...
- .Net Ajax跨域请求总结
导语 之前写过一篇文章Ajax跨域请求COOKIE无法带上的解决办法,这两天正好好好的查了一下相关知识,做来总结一下 一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法 ...