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]; ...
随机推荐
- 包含jdk和nginx的基础镜像
目的 制作一个基础镜像,包含jdk和nginx,这样要将java项目或一些前端页面做成容器,可以稍作修改引用该镜像. Dockerfile FROM alpine:3.8 ENV \ LANG=C.U ...
- ElasticSearch集群介绍二
ElasticSearch集群 一个运行中的 Elasticsearch 实例称为一个 节点,而集群是由一个或者多个拥有相同 cluster.name 配置的节点组成, 它们共同承担数据和负载的压力. ...
- P4315 月下“毛景树”
P4315 月下"毛景树" 题目描述 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里. 爬啊爬~爬啊爬 ...
- Python基础【day01】：python 2和3区别（四）
许多Python初学者都会问:我应该学习哪个版本的Python.对于这个问题,我的回答通常是“先选择一个最适合你的Python教程,教程中使用哪个版本的Python,你就用那个版本.等学得差不多了,再 ...
- Linux最全vi命令
1. 关于Vim vim是我最喜欢的编辑器,也是linux下第二强大的编辑器. 虽然emacs是公认的世界第一,我认为使用emacs并没有使用vi进行编辑来得高效. 如果是初学vi,运行一下vimtu ...
- Neural Networks and Deep Learning（week4）Building your Deep Neural Network: Step by Step
Building your Deep Neural Network: Step by Step 你将使用下面函数来构建一个深层神经网络来实现图像分类. 使用像relu这的非线性单元来改进你的模型 构建 ...
- 7.SpringBoot 之 Web
添加资源处理 package org.springframework.boot.autoconfigure.web.servlet. public class WebMvcAutoConfigurat ...
- leetcode --binary tree
1. 求深度: recursive 遍历左右子树,递归跳出时每次加一. int maxDepth(node * root) { if(roor==NULL) return 0; int leftdep ...
- Eclipse文件路径
经常我们需要读取某个文件,一般情况下,在Eclipse工程中,路径为./src/....
- android 解决子线程进行UI操作
Android确实不允许在子线程中进行UI操作的,但我们有时必须在子线程里去执行一些耗时的任务,然后根据任务的执行结果来更新相应的UI控件. Android提供了一套异步消息处理机制,可以解决子线程中 ...