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]; ...
随机推荐
- Python IPy模块
#!/usr/bin/env python # -*- coding: utf-8 -* # Created by YangYongming at 2018/09/17 20:22 # FileNam ...
- MYCAT分库分表
一.整体架构 1.192.168.189.130:mysql master服务,两个数据库db_store.db_user,db_store做了主从复制 db_user: 用户表users为分片表 数 ...
- 【C++ STL】Set和Multiset
1.结构 set和multiset会根据特定的排序原则将元素排序.两者不同之处在于,multisets允许元素重复,而set不允许重复. 只要是assignable.copyable.comparab ...
- 使用eclipse创建web项目的项目图文步骤
在eclipse中使用maven ① maven插件:eclipse内置 ②maven插件的设置: [1]installations:指定maven核心程序的位置,不建议使用自带的maven程序而应该 ...
- javascript 回到顶部
<script type="text/javascript"> window.onload = function(){ var timer = null; //用于判断 ...
- Nginx 内核优化
内核参数的优化示例: /etc/sysctl.conf net.ipv4.tcp_max_tw_buckets = // timewait的数量,默认是180000. net.ipv4.ip_loca ...
- Java SE之向上转型与向下转型
package object; //向上转型-向下转型 public class Up_Down_convert { /* 向上转型 * * 1.上转型对象可以使用和操作子类继承或者重写的方法 * 2 ...
- python(七) Python中单下划线和双下划线
Python中单下划线和双下划线: 一.分类 (1).以单下划线开头,表示这是一个保护成员,只有类对象和子类对象自己能访问到这些变量. 以单下划线开头的变量和函数被默认是内部函数,使用from mod ...
- mysql 案例 ~ pt-io工具的使用
一 简介:如何使用pt-iopfile调查io具体信息二 目的:利用pt-iopfile分析mysql内部IO操作密集的文件,用以发现问题三 使用: pt-iopfile -p mysql_pid ...
- C 语言 register 关键字
register:这个关键字请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率.注意是尽可能,不是绝对.你想想,一个CPU 的寄存器也就那么几个或几十个,你要是定义了很 ...