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以及模块动态导入
一.实现自省的四个函数 1.hasattr判断一个对象中有没有一个name字符串对应的方法或属性 class BlackMedium: feture="Ugly" def __in ...
- webserver apache 2.2.22-7/ apache webdav / redhat 6.3
s 问题1:Failed to resolve server name for 10.24.41.161 (check DNS) / RedHat 6.3 64位系统 / apache htt ...
- springboot的注解详解
配置类相关: @PropertySource(value = "classpath:test.properties") //我们都把配置文件写到application.yml中 ...
- PHP7 学习笔记（三）关于PHP7如何安装调试工具Xdebug扩展以及Zephir的问题
前言: 1.自己摸索安装 2.快速安装 安装这个扩展是由于Zephir 编译不能始终通过,迫不得已啊,使用Zephir写扩展,总是出现以下错误: www@ubuntu1:~/phalcon-zephi ...
- nginx配置url中带问号的rewrite跳转
今天收到一个需求,要将一个带查询参数的url跳转到另外一个静态url,安装常规的rewrite规则,如: rewrite ^/a.html?id=67$ http://zt.epython.cn/20 ...
- 去除inline-block出现间距的几种方法
display:inline-block,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会排列在同一行 比如两个input,默认中间会产生一些间距 &l ...
- 5、利用两个栈实现队列，完成push和pop操作
题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 1.一个栈用来做push 2.另一个栈用来做pop 3.将push操作的栈的元素放入另一个栈中, ...
- escape、encodeURI和encodeURIComponent的区别
1.简单解释 简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读. 编码之后的效果是%XX或者%uXXXX这种形式. 其中 ASCII字母. ...
- 【Eclipse】Eclipse中打开cmd窗口和terminal窗口
在IDEA的时候可以直接使用terminal打开类似于cmd窗口的功能,于是想着在eclipse也使用类似的功能. 1.Eclipse打开类似于cmd窗口的功能.(DOS) 1.window——> ...
- 【转】Python之日志处理（logging模块）
[转]Python之日志处理(logging模块) 本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程 使用logging ...