JavaScript（JS）之Javascript对象DOM（五）
https://www.cnblogs.com/haiyan123/p/7653032.html
一、JS中for循环遍历测试
for循环遍历有两种
第一种：是有条件的那种，例如 for(var i = 0;i<ele.length;i++){}
第二种：for （var i in li ）{}
现在我们来说一下测试一下第二种（数组和obj的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [11,22,33,44,55];
var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典，而是一个对象
for (var i in obj){
console.log(i); //拿到的是键
console.log(obj[i]) //值
}
for (var j in arr){
console.log(j); //拿到索引
console.log(arr[j]) //拿到值
}
</script>
</body>
</html> 测试for循环
二、获取value属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="text" id="c1">
<select name="pro" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广东</option>
<option value="4">湖南</option>
</select>
<button>show</button> <script>
var ele_button = document.getElementsByTagName("button")[0]; ele_button.onclick = function () {
var ele_input = document.getElementById("c1");
var ele_select = document.getElementById("s1");
console.log(ele_select.value);
ele_input.value = ele_select[ele_select.value - 1].innerText;
} </script>
</body>
</html>
三、二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <select name="" id="provinces">
<option value="">请输入省份</option>
<!--<option value="1">北京</option>-->
<!--<option value="2">上海</option>-->
<!--<option value="3">广东</option>-->
<!--<option value="4">湖南</option>-->
</select> <select name="" id="citys">
<option value="">请选择城市</option>
</select> <script>
// var a={name:"alex"};
// var b={"name":"alex"};
// console.log(a.name); // alex
// console.log(b["name"]); // alex // data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
// console.log(data); // {河北省: Array(2), 山西: Array(2), 陕西: Array(2)}
// console.log(typeof data); // object
// console.log(data["河北省"]); // (2) ["石家庄", "廊坊"]
// console.log(data.河北省); // (2) ["石家庄", "廊坊"]
//
// for (var i in data) {
// console.log(i); // 键 河北省 。。。
// console.log(data[i]);
// } data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
var pro_ele=document.getElementById("provinces");
var city_ele=document.getElementById("citys") for (var i in data) {
var ele=document.createElement("option");
ele.innerHTML = i;
pro_ele.appendChild(ele);
} pro_ele.onchange = function () {
console.log(this.selectedIndex);
console.log(this.options[this.selectedIndex]); var citys = data[this.options[this.selectedIndex].innerHTML];
console.log(citys);
city_ele.options.length=1; // 请选择城市
for (var i = 0; i < citys.length; i++) {
var ele=document.createElement("option");
ele.innerHTML = citys[i];
city_ele.appendChild(ele);
} } </script>
</body>
</html>
四、表格示例（全选，反选，取消）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="select" onclick="SelectAll()">全选</button>
<button class="reserve" onclick="Reverse()">反选</button>
<button class="cancel" onclick="Cancel()">取消</button>
<table border="1">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table> <script> function SelectAll() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i ++) {
inputs[i].checked = true;
}
} function Cancel() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i ++) {
inputs[i].checked = false;
}
} function Reverse() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i ++) {
inputs[i].checked = !inputs[i].checked;
}
} </script> </body>
</html>
实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body>
<button class="select">全选</button>
<button class="reserve">反选</button>
<button class="cancel">取消</button>
<table border="1">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<script>
// 方式一：分别给每个button增加事件
var ele_select = document.getElementsByClassName('select')[0];
var ele_reserve = document.getElementsByClassName('reserve')[0];
var ele_cancel = document.getElementsByClassName('cancel')[0];
var ele_input = document.getElementsByClassName('check');
//全选
ele_select.onclick = function () {
for (var i = 0; i < ele_input.length; i++) {
//添加一个checked属性
ele_input[i].checked = 'checked'
}
};
//取消
ele_cancel.onclick = function () {
for (var i =0;i<ele_input.length;i++){
//删除checked属性，直接设置为空就行了
ele_input[i].checked = ''
}
};
//反选
ele_reserve.onclick = function () {
for (var i = 0; i < ele_input.length; i++) {
var ele = ele_input[i];
if (ele.checked) {//如果选中了就设置checked为空
ele.checked = '';
}
else {//如果没有就设置checked = checked
ele.checked = 'checked';
}
}
}; //方式二：方式一的优化循环增加事件
// var ele_button = document.getElementsByTagName('button');
// var ele_input = document.getElementsByClassName('check');
// for(var i=0;i<ele_button.length;i++) {
// ele_button[i].onclick = function () {
// if (this.innerHTML == '全选') {
// for (var i = 0; i < ele_input.length; i++) {
// //添加一个checked属性
// ele_input[i].checked = 'checked'
// }
// }
// else if (this.innerHTML == '取消') {
// for (var i = 0; i < ele_input.length; i++) {
// //删除checked属性，直接设置为空就行了
// ele_input[i].checked = ''
// }
// }
// else {
// for (var i = 0; i < ele_input.length; i++) {
// var ele = ele_input[i];
// if (ele.checked) {//如果选中了就设置checked为空
// ele.checked = '';
// }
// else {//如果没有就设置checked = checked
// ele.checked = 'checked';
// }
// }
// }
// }
// } </script>
</body>
</html>
实例2
五、模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color: white;
}
.shade{
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.7;
} .model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; }
.hide {
display: none;
}
</style>
</head>
<body> <div class="content">
<button onclick="show()">show</button>
hellohellohellohellohellohellohellohellohellohellohellohello
</div>
<div class="shade hide"></div> <div class="model hide">
<button onclick="cancel()">cancel</button>
</div> <script>
function show() {
var ele_shade = document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];
ele_shade.classList.remove("hide");
ele_model.classList.remove("hide");
} function cancel() {
var ele_shade = document.getElementsByClassName("shade")[0];
var ele_model= document.getElementsByClassName("model")[0];
ele_shade.classList.add("hide");
ele_model.classList.add("hide");
} </script> </body>
</html>
六、搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟placeholder属性的功能</title>
</head>
<body>
<input type="text" placeholder="username" id="submit">
<input type="text" value="username" id="submit1">
<script>
// var ele = document.getElementById('submit1');
var ele = document.getElementById('submit1');
ele.onfocus = function () {
//先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空
this.value=""
};
ele.onblur = function () {
// 当光标不点击那个输入框的时候就失去焦点了
//当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格
// 如果为空或者有空格，用trim()去掉空格。然后赋值为username
if (this.value.trim()==""){
this.value='username'
}
}
</script>
</body>
</html>
js的作用域
1. 全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：
（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域
var name="yuan";
function foo(){
var age=23;
function inner(){
console.log(age);
}
inner();
}
console.log(name); // yuan
//console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner();
（2）所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：
var name="yuan";
function foo(){
age=23;
var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined
（3）所有window对象的属性拥有全局作用域
一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。
2. 局部作用域(Local Scope)
和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.
如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）
JavaScript（JS）之Javascript对象DOM（五）的更多相关文章
- javascript JS递归遍历对象 使用for(variable in object)或者叫for/in和forEach方式
1.递归遍历查找特定key值(ie9以下不支持forEach) 原文http://www.cnblogs.com/ae6623/p/5938560.html var obj = { first: &q ...
- 使用原生js来操作对象dom的class属性
之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...
- 前端js之JavaScript
知识预览 一小知识 二 JavaScript的基础 BOM对象 DOM对象 实例练习 js拓展 小知识 核心(ECMAScript) 文档对象模型(DOM) Document object model ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习12 JS中定义对象的几种方式【转】
avaScript学习12 JS中定义对象的几种方式 转自: http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...
- JavaScript进阶 - 第9章 DOM对象，控制HTML元素
第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...
- JAVASCRIPT高程笔记-------第十章 DOM对象
10.1.1 node类型 --除IE外 所有浏览器都可以访问到这个类型 :JS中所有的节点类型都继承自Node类型 nodeName 与nodeValue 如果是一个元素 那么nodeName中保 ...
- JavaScript基础17——js的Date对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript基础18——js的Array对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript基础16——js的BOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- cmd & tree & bash
cmd & tree & bash bug E: Unable to locate package tree solution # 1. update $ sudo apt-get u ...
- LODOP设置判断后执行哪个
LODOP的语句是普通的语句,可以通过JS判断确定要执行哪个,或通过循环循环执行一些语句.如果需要执行某些打印项在哪些条件下不打印,不需要通过代码删除打印项,类似LODOP.SET_PRINT_STY ...
- Web API 2 使用SSL
在Server上启用SSL 稍后我会想在IIS 7 上配置SSL,现在先往下看. 本地测试,您可以启用SSL的IIS Express Visual Studio.在属性窗口中,启用SSL设置为True ...
- Nginx http2.0
109/110 HTTP2.0协议 优势必须使用TLS加密 传输数据量大幅减少 1:以二进制格式传输 2:标头压缩(header做压缩) 多路复用及相关功能 : 消息优先级 (比如样式表先渲染页面那 ...
- Nginx 如何减轻高流量下的压力
L:102 比如 Nginx 缓存服务出现问题(比如新增服务器等造成缓存失效) 所有资源请求直接穿透上游服务器 造成上游服务器压力倍增 特别热点文件 都是访问同个文件 以下可以减轻上述问题 第二种方 ...
- python时间模块time
时间模块 时间模块主要处理和时间相关的事件,我们可以通过模块获取不同数据类型的时间以便我们需求. 表现时间的三种方式: 在pythn中表现时间的方式主要有三种:时间戳(stamptime).元祖时间( ...
- 4、new一个对象的时候，初始化顺序:
父类静态块>子类静态块> 父类属性(先系统默认值,后直接你赋予的值) >父类构造器>子类属性>子类构造器
- BZOJ4205卡牌配对——最大流+建图优化
题目描述 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值使得两张卡牌该项属性值互质,且两张卡牌类别不 ...
- Codeforces1037F Maximum Reduction 【单调栈】
题目分析: 没啥好说的,会单调栈就会做. 代码: #include<bits/stdc++.h> using namespace std; ; ; int n,k; int pre[max ...
- 洛谷P1414又是毕业季二题解
题目 思想: 首先这个题必定是一个数学题,肯定不是一个一个枚举得到解,这样肯定会T,所以我们就应该想一些别的方法,. 分析: 比如,答案,一定是递减的,因为该答案所满足的条件肯定是越来越苛刻的,所以我 ...