js----DOM对象(3
表格示例(取消,全选,反选)：
<!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++) {
// 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>
示例
模态对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: white;
height: 2000px;
} .shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: grey;
opacity: 0.4;
} .hide{
display: none;
} .models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: wheat; }
</style>
</head>
<body>
<div class="back">
<input class="c" type="button" value="click">
</div> <div class="shade hide handles"></div> <div class="models hide handles">
<input class="c" type="button" value="cancel">
</div> <script> var eles=document.getElementsByClassName("c");
var handles=document.getElementsByClassName("handles");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } }
else {
for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide");
} }
}
} </script> </body>
</html> 模态对话框
示例
作用域：
<script>
var s = 12;
function f() {
console.log(s); //undefined
var s=12;
console.log(s); //12
}
f();
</script>
<script>
var s = 12;
function f() {
console.log(s); //12
var t=12;
console.log(s); //12
}
f();
</script>
<script>
function func() {
console.log(num); //输出：undefined，而非报错，因为变量num在整个函数体内都是有定义的
var num = 1; //声明num 在整个函数体func内都有定义
console.log(num); //输出：1
}
func();
</script>
相当于：
<script>
function func() {
var num // 定义了num
console.log(num); //输出：undefined，而非报错，因为变量num在整个函数体内都是有定义的
num = 1; //num 赋值 1
console.log(num); //输出：1
}
func();
</script>
function bar() {
function age() {
console.log("1")
}
age() //2
function age(){
console.log("2")
}
age() //2
}
result=bar();
<script>
function bar(age) {
console.log(age); //原因age在下面的函数声明了，当发现下面代码中声明了函数，function age(){},此时age别覆盖为函数代码
var age = 99;
var sex= 'male';
console.log(age);
function age() { //函数声明
alert(123)
};
var age = function (){ // 属于函数表达式，赋值运算，和函数声明不一样
alert(123)
}
console.log(age);
return 100;
}
result=bar(5);
</script>
预解析：
<script>
var fun = 1
function fun() {
console.log("11")
}
fun()
</script>
解释：为啥会报错，在预解析的时候，先var fun(var fun = 1 得来的)，由于有函数声明，var fun = fun(){} 函数代码，结束预编译，当代码执行到var fun = 1 的时候，var fun 有被赋值了，所以 fun() 会报错，fun不是一个函数(相当于将函数调到最开头的地方)
例题：
<script>
num = 1;
function fun() {
console.log(num) //1
}
fun()
console.log(num) //1
</script>
===============================================
<script>
fun()
var num = 1;
function fun() {
console.log(num) //undefined
}
console.log(num) //1
</script>
=============================================
<script>
fun()
num = 1;
function fun() {
console.log(num) //报错，原因是num = 1 并没有生成 var num 声明 num
}
console.log(num) //1
</script>
解释：如果在函数内部打印某个参数，首先从函数里面找，如果函数里面有定义了参数，如果参数在console.log（）下面定义的，那个结果为undefined，否则，打印函数里面的参数值，如果函数里面
没有定义，则在调用函数的地方的局域里找，如果在调用函数的下面有定义，则结果为undefined，否则，为调用函数的地方上面定义的值，如果都没有，在出去找，一层一层 下面定义 结果为 undefined， 上面定义， 为 结果
<script>
var a = 11
function abd() {
console.log(a) //undefind
var a = 1
}
abd()
</script>
==============================
<script>
var a = 11
function abd() {
console.log(a) // 11
}
abd()
</script>
<script>
a = "dd"
var a
console.log(a) //dd
</script>
===================================
<script>
var a = "dd"
var a
console.log(a) //dd
</script>
==================================
<script>
function fun(){
a = "dd"
var a
}
fun()
console.log(a) //报错
</script>
==================================
<script>
function fun(){
a = "dd"
}
fun()
console.log(a) /dd
</script>
<script>
fun()
console.log(a) //报错
console.log(b) //b=9 隐式全局变量
console.log(c) //c=9
function fun(){
var a = b =c = 9 //var a=9 b=c=9 console.log(a)
console.log(b)
console.log(c)
}
</script>
<script>
f()
var f = function () {
console.log("1")
}
</script>
//会报错，原因是这段代码相当
<script>
var f
f() //f不是一个函数
f = function () {
console.log("1")
}
</script>
=========================================
f()
function f(){
console.log("此时不会报错")
}
原因欲解析的时候 变成了这样
function f(){
console.log("此时不会报错")
}
f()
js----DOM对象(3的更多相关文章
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- JS & DOM 对象
22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...
- 2018-06-19 js DOM对象
DOM对象: Doucument Object Model即文档对象 DOM对象的操作: 1.找元素 返回元素对象: var obj=document.getElementById();//通过Id查 ...
- 引用 1.9.1.min.js dom对象 没有live 绑定事件方法， 引用 1.7.js 就有live 绑定事件方法
问题:相同环境,引用 1.9.1.min.js $('div[data-role="page"]').live('pagehide', function (event, ui) { ...
- js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
- JS DOM对象与jQuery对象的转换
JS转jQuery // 直接用$()来包裹 如同$(this) $(document) var jsObj = document.getElementById('test'); var jquery ...
- js DOM对象
查找元素 根据id找 document.getElementById("b"): 根据class找 document.getElementsByClassName("aa ...
- 2018-06-24 js BOM对象
BOM对象: Browser Object Model 即浏览器对象模型: 包含: window:窗口对象 alert();//警示框 confirm();//确认框 prompt();//输入提示框 ...
- 如何判断一个js对象是否一个DOM对象
我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
随机推荐
- 继承的方式完成包装__attr__
__getattr__ 当实例要调用的属性不存在的时候会触发 __setattr__ 当实例要设置属性的时候会触发 __delattr__ 当实例要删除属性的时候会触发 这三个方法是 ...
- java实现Md5加密工具类
场景:平常我们用户注册的密码保存到数据库都不会是明文存储的.都是经过加密之后的.因为保证用户的安全性.我们通常是用md5算法来加密的. 这个只能算是一个工具类.没必要了解里面是怎么实现的.拿来用就可以 ...
- hashmap和hashtable异同
(一)继承的历史不同 Hashtable是继承自Dictionary类的,而HashMap则是Java 1.2引进的Map接口的一个实现. public class Hashtable extends ...
- 关闭MySQL数据库的几种方法
#1.使用mysqldadmin mysqladmin -uroot -p shutdown mysqladmin -u ${mysql_user} -p${mysql_pwd} -S /data/$ ...
- ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password：NO）
转自:http://blog.sina.com.cn/s/blog_586a1f3e01000b82.html 刚使用mysql, 就老是碰到这个问题,真是郁闷, 终于找到原因.. C:\Progra ...
- windows上使用mkdocs搭建静态博客
windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdoc ...
- 3 快速创建SpringBoot项目
一.Intellij IDEA 创建Spring Boot项目 1.创建工程 2.选择Spring Initializr 3.设置Maven版本管理参数 4.选择引用模块 5.命名工程名 6.选 ...
- DSO windowed optimization 公式
这里有一个细节,我想了很久才想明白,DSO 中的 residual 联系了两个关键帧之间的相对位姿,但是最终需要优化帧的绝对位姿,中间的导数怎么转换?这里使用的是李群.李代数中的Adjoint. 参考 ...
- 论文笔记系列-DARTS: Differentiable Architecture Search
Summary 我的理解就是原本节点和节点之间操作是离散的,因为就是从若干个操作中选择某一个,而作者试图使用softmax和relaxation(松弛化)将操作连续化,所以模型结构搜索的任务就转变成了 ...
- XML解析技术简介——（一）