zoukankan html css js c++ java

Javascript

Python开发【第十二篇】：DOM

ECMAScript是标准，javascript是实现

JS组成
JS = ECMAScript + DOM + BOM

ECMAScript（前身为欧洲计算机制造商协会）
JavaScript的语法规范
DOM（Document Object Model 的简称）
JavaScript操作网页上元素的API
BOM（Browser Object Model 的简称）
JavaScript操作浏览器部分功能的API

一. JavaScript

Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

#直接编写
    <script>
        alert('hello yuan')
    </script>
    
#导入文件
    <script src="hello.js"></script>

一个HTML网页要做到结构、样式、行为相分离

三个常用的输出语句:

document.write(“要输出的内容”)

作用：

l 它主要是用来向body标签中输出write()小括号里面的内容

l document它表示是当前的HTML文档对象

l write在英文中是“写”的意思

l 对象是由属性与方法组成的对象.属性与对象.方法从视觉上面来区分属性与方法属性不带小括号方法带有小括号

l write它是一个输出的方法

window.alert(“要输出的内容”)

作用：

l 它主要是用来向当前的浏览器窗口中弹出一个警告提示框

l window它表示的是当前的浏览器窗口对象 window对象是js中最顶级的对象可以省略不写

l alert在英文是“警告”的意思

n var 变量名1,变量名2 一次声明多个变量

修改变量的值

声明一个变量已经给其赋了值然后再来修改这个变量的值！

格式：

变量名 = “新值” //给变量名重新赋一个值

//单行注释

/*
多行注释
*/
//语句必须已分号结束
//声明变量名关键字:var 变量名="值"
//JS属于动态类型(同一个变量可以存不同类型数据,如下)
//JS的变量名可以使用_，数字，字母，$组成，不能以数字开头。
//变量名是区分大小写的,推荐使用驼峰式命名规则,保留字不能用做变量名。
var name = "zc";
var age = 29;
var $ = "男";
console.log("name:",name);
console.log("age:",age);
console.log("$:",$);

JavaScript数据类型:

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

变量的数据类型分为：两大类、七小种

两大类：基本数据类型(标量数据类型)、复合数据类型！

基本数据类型：只能存储一个值

复合数据类型：至少存储一个值，可以存储多个值

数值(Number)

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN，表示不是一个数字（Not a Number）。

常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

slice和substring的区别

substirng()的特点

布尔值(Boolean):

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

对象(Object):

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

JS中的排序(不要使用sort,鸡肋):

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){
return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
输出: [11, 22, 33, 44, 55, 100]

关于遍历数组中的元素，可以使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

JS数据类型:

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

++	自加1运算符
--	自减1运算符

注意：

不管是前加加还是后加加自身都会自加1 不管是前减减还是后减减自身都会自减1

运算符分为：

算术运算符

赋值运算符

比较运算符

逻辑运算符

字符串连接运算符

三目运算符

if-else:

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if- else if -else :

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch:

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")(上面case都不满足就执行这一句)
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句

for:

for (var i=0;i<10;i++) {
  console.log(i);
}

while:

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

函数:

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

ES6中允许使用“箭头”（=>）定义函数:

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;
}

函数中的arguments参数:

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)

#3
#2
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回

函数的全局变量和局部变量:

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域:

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层

1. 函数的调用要往回找函数的定义阶段
2. 首先在函数内部找 -> 内部找不到就往外找,直到找到全局为止

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  
//输出结果是？
ShenZhen

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret(); 
 // 打印结果是？
BeiJing

闭包:

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

ShangHai

词法分析（尝试理解）:

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 
问：执行foo()之后的结果是？
22

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo(); 

 // 执行后的结果是？
ƒ age(){
    console.log("呵呵");
  }
 22 22

词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};

最终，AO上的属性只有一个age，并且值为一个函数声明

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找

1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

1. 分析(分析的函数内部变量定义过程)
　　1. 先看参数
　　2. 看有没有局部变量
　　3. 看有没有函数定义
2. 执行(实际执行代码)

内置对象和方法:

// JS中自定义对象

// var person = {name: '小强', age: 38};
 // 在JS的对象中,键(属性)默认不用加引号;并且自动把单引号转成双引号
// console.log(person);
// // 单独取对象的属性
// console.log("name:", person.name);
// console.log("age:", person.age);
//
// // 遍历对象的属性
// for (var i in person){
//     console.log(i);
//     console.log(person[i]);
// }


// Date对象
var d1 = new Date();
console.log(d1);
console.log(typeof d1);
console.log(d1.toLocaleString());  // 转成字符串格式的本地时间
console.log(typeof d1.toLocaleString());

// 生成指定时间的Date对象
// var d2 = new Date("2004/3/20 11:12");
// console.log(d2.toLocaleString());  // 转成字符串格式的本地时间
// console.log(d2.toUTCString());  // 转成字符串格式的UTC时间

var d2 = new Date("2018-3-11 11:12");
console.log(d2.toLocaleString());  // 转成字符串格式的本地时间
console.log(d2.toUTCString());  // 转成字符串格式的UTC时间

console.log(d2.getDate());  // 获取那一天(多少号)
console.log(d2.getDay());  // 获取星期几
console.log(d2.getMonth());  // 获取月份
console.log(d2.getFullYear());  // 获取年
console.log(d2.getHours());  // 获取小时
console.log(d2.getMinutes());  // 获取分钟
console.log(d2.getSeconds());  // 获取秒
console.log(d2.getTime());  // 获取时间戳

// JSON对象
console.log("==============================");

var s = '{"name": "xiaoqiang", "age": 38}';
// 把字符串转换成JS内部的对象
var ret = JSON.parse(s);
console.log(ret);
console.log(typeof ret);
// 把JS内部的对象转换成字符串
var s2 = JSON.stringify(ret);
console.log(s2);
console.log(typeof s2);

// RegExp对象 --> Python re模块
// 生产 RegExp对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
var regexpRet1 = reg1.test("xiaoqiang");
console.log(regexpRet1);

var regexpRet2 = reg1.test("1xiaoqiang");
console.log(regexpRet2);

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang"));
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("1xiaoqiang"));

// 坑1 (正则表达式中间一定不可以有空格)
console.log("============================================");
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang"));
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("1xiaoqiang"));

// 坑2
// test()不传值相当于传了一个undefined进去
// 然后test()就把这个undefined当成是"undefined"来判断
console.log("============================================");
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined"));
console.log(/^[0-9a-zA-Z][a-zA-Z0-9_]{5,11}$/.test());
console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test(undefined));
console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test("undefined"));

// JS正则的两种模式
// 1. g 表示全局
// 2. i 忽略大小写
var ss = "Alexdashabi";
var s3 = ss.replace(/a/gi, "哈哈哈");  // 不是改变默认的字符串,而是生成了一个新的字符串
console.log(s3);

// 坑3
// 当正则表达式使用了全局模式(g)的时候,并且你还让它去检测一个字符串,此时会引出来一个lastIndex
// lastIndex会记住上一次匹配成功的位置,并把下一次要开始椒盐的位置记住
//
console.log("===============================");
var r = /alex/g;
console.log(r.test("alex"));  // true
console.log(r.lastIndex);  // 4
console.log(r.test("alex"));  // false
console.log(r.lastIndex);
console.log(r.test("alex"));  // true
console.log(r.lastIndex);
console.log(r.test("alex"));  // false

自定义对象:

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);


遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象：

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

注意：

ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

map

扩展：

// 父类构造函数
var Car = function (loc) {
  this.loc = loc;
};

// 父类方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子类构造函数
var Van = function (loc) {
  Car.call(this, loc);
};

// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = Van;
// 扩展方法
Van.prototype.grab = function () {
  /* ... */
};

JavaScript面向对象之继承

Date对象:

创建date对像:
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：
var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象:

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象:

//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式（逗号后面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式：g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


// 注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

RegExp(正则)
1. 两种定义方式:
　　1. new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")
　　2. /new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")/
2. 匹配模式
　　1. g 全局
　　2. i 忽略大小写
3. 坑
　　1. 正则表达式中间不能加空格
　　2. .test() --> .test(undefined) --> .test("undefined")
　　3. 全局模式下会有一个lastIndex属性

Math对象:

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            200px;
            height:50px;
        }
    </style>

</head>
<body>

<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>

<script>

    function showTime() {
             var current_time=new Date().toLocaleString();
             var ele=document.getElementById("id1")
             ele.value=current_time
    }
    
    var clock1;
    function begin() {
        if(clock1==undefined){
            showTime();
           clock1=setInterval(showTime,1000)
        }
    }

    function end() {
        clearInterval(clock1);
        clock1=undefined
    }
</script>
</body>
</html>

setInterval clearInterval 时间框

#打印hello
        window.alert("hello")

        #用户选择true或false
        obj = window.confirm("hello word")
        console.log(obj)

        #接收用户文本内容
        obj = window.prompt("please input content")
        console.log(obj)

        #open() 打开和一个新的窗口 并 进入指定网址
        #参数1 什么都不填 就是打开一个新窗口.
        #参数2.填入新窗口的名字(一般可以不填).
        #参数3: 新打开窗口的参数.
        open('http://www.baidu.com','','width=200,resizable=no,height=100');
 

windows 方法例子

alert confirm prompt open 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script>
    function f() {
        console.log("hello...")
    }

    setTimeout(f,1000)

</script>
</body>
</html>

setTimeout 点赞功能可能用到，执行一次退出

setTimeout 点赞功能可能用到，执行一次退出

Location 对象包含有关当前 URL 的信息:

location.reload() #刷新页面

location.assign(URL) #跳转页面，相当于链接，可以回退

location.replace(newURL) #跳转页面，覆盖当前页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button onclick="f()">click</button>

<script>

    function f() {
        location.reload()
    }

</script>
</body>
</html>

刷新页面

刷新页面

DOM 节点 :

#根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
　　#整个文档是一个文档节点(document对象)
　　#每个 HTML 元素是元素节点(element 对象)
   #HTML 元素内的文本是文本节点(text对象)
   #每个 HTML 属性是属性节点(attribute对象)
   #注释是注释节点(comment对象)
   #画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

节点(自身)属性:

attributes    #节点（元素）的属性节点
nodeType 　　　#节点类型
nodeValue     #节点值
nodeName      #节点名称
innerHTML     #节点（元素）的文本值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<a href="http://www.baidu.com">zc<span>666</span>></a>
<input id="txt" type="text" />
<select id="sel">
    <option value="1">上海</option>
    <option value="2">北京</option>
</select>
<script>
    var obj = document.getElementsByTagName("a")[0];
        alert(obj.innerText);#值的操作
        alert(obj.innerHTML);#值的操作

        var val = document.getElementById('txt').value;#标签中的值
        console.log(val);
        obj.innerText = "123";
        obj,innerHTML= "<p>123</p>";
</script>
</body>
</html>

值的操作

导航属性:

parentElement              #父节点标签元素
children                   #所有子标签
firstElementChild          #第一个子标签元素
lastElementChild           #最后一个子标签元素
nextElementtSibling        #下一个兄弟标签元素
previousElementSibling     #上一个兄弟标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1">
        <p class="p1">hello p</p>
        <div class="div1">hello div</div>
    </div>

    <script>
        var ele = document.getElementsByClassName("p1")[0];
        console.log(ele);
        console.log(ele.nodeName);
        console.log(ele.nodeType);
        console.log(ele.nodeValue);
        console.log(ele.innerText)
    </script>
</body>
</html>

节点(自身)属性 演示

节点(自身)属性演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1">
        <p class="p1">hello p</p>
        <div class="div2">hello div</div>
    </div>

    <script>
        var ele = document.getElementsByClassName("p1")[0];
        var ele2 = ele.parentNode;              #父亲标签
        console.log(ele2.nodeName);
        var ele3 = ele.nextElementSibling;      #兄弟标签
        console.log(ele3.nodeName);
        console.log(ele3.innerHTML)
    </script>
</body>
</html>

导航属性 演示

导航属性演示

节点查找:

直接查找

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

局部查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

   var ele= div1.getElementsByTagName("p");
   alert(ele.length);

   var ele2=div1.getElementsByClassName("div2");
   alert(ele2.length);
    </script>
</body>
</html>

局部查找只支持两种

局部查找只支持两种

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
 
onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
 
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
 
onload         一张页面或一幅图像完成加载。
 
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开
 
onselect       文本被选中。
onsubmit       确认按钮被点击。

DOM Event(事件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div onclick="alert('单击事件')">单击事件</div>
<div ondblclick="alert('双击事件')">双击事件</div>


<input type="text" value="请输入姓名" onfocus="enter(this)" onblur="exit(this)">


<script>
    function enter(self){
       self.value="";
    }

    function exit(self){
        if(self.value.trim()==""){
             self.value="请输入姓名";
        }
    }

</script>

</body>
</html>

onfocus onblur 表单输入例子

onfocus onblur 表单输入例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function () {
            var ele=document.getElementsByClassName("div1")[0];
            console.log(ele.innerText)
        }
    </script>
</head>
<body>

<div class="div1">hello div</div>


</body>
</html>

onload js代码最后执行演示

onload js代码最后执行演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<select name="" class="select_pro">
    <option value="1">河南省</option>
    <option value="2">湖南省</option>
    <option value="3">云南省</option>
</select>


<select name=""  class="select_city">

</select>


<script>
    var info={"河南省":["郑州","洛阳","开封"],"湖南省":["湘潭","长沙","岳阳"],"云南省":["大理","昆明"]}

    var ele=document.getElementsByClassName("select_pro")[0];
    var ele_2=document.getElementsByClassName("select_city")[0];
    ele.onchange=function(){
         var arrs=ele.children;


        var sindex=this.selectedIndex;          // 得到一个数字

        var province=arrs[sindex].innerText;    //  得到省份
        var citys_arr=info[province];
        console.log(citys_arr);

        var ele2_children=ele_2.children;


//        for (var j=0;j<ele2_children.length;j++){
//            ele_2.removeChild(ele2_children[0])
//        }

        ele_2.options.length=0;     //  清空select的子元素

        for (var i=0;i<citys_arr.length;i++){

                var option=document.createElement("option");

                option.innerText=citys_arr[i];
                ele_2.appendChild(option);
        }
    }


</script>
</body>
</html>

onchange 二级联动省份演示

onchange 二级联动省份演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            background-color: darkgray;
             80%;
            height: 600px;
            margin-top: 30px;
            word-spacing: -5px;

        }

        #left {
            display: inline-block;
             100px;
            height: 140px;
            background-color: wheat;
            text-align: center;
        }

        #choice{
            display: inline-block;
            height: 140px;
            background-color: darkolivegreen;

            vertical-align: top;
            padding:0 5px;
        }

        #choice button{
            margin-top: 20px;
        }

         #right{
            display: inline-block;
             100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;
            line-height: 140px;

        }

    </style>
</head>
<body>



<div class="outer">

    <select multiple="multiple" size="5" id="left">
        <option>红楼梦</option>
        <option>西游记</option>
        <option>水浒传</option>
        <option>JinPingMei</option>
        <option>三国演义</option>
    </select>




    <span id="choice">
        <button id="choose_move"> > </button><br>
        <button id="all_move"> >> </button>
    </span>



    <select multiple="multiple" size="10" id="right">
        <option>放风筝的人</option>
    </select>


</div>




<script>

    var choose_move=document.getElementById("choose_move");
    var all_move=document.getElementById("all_move");

    var right=document.getElementById("right");
    var left=document.getElementById("left");
    var options=left.options;



    choose_move.onclick=function(){

        for (var i=0; i<options.length;i++){

             var option=options[i];
             if(option.selected==true){

                   // var news=option.cloneNode(true);
                   // console.log(news);

                   right.appendChild(option);
                   i--;
             }
         }
    };

    all_move.onclick=function(){

        for (var i=0; i<options.length;i++){

             var option=options[i];

                   right.appendChild(option);
                   i--;

         };
    };




    /*
   var buttons=document.getElementsByTagName("button");
   for(var i=0;i<buttons.length;i++) {
        buttons[i].onclick = function () {

            for (var i = 0; i < options.length; i++) {

                var option = options[i];

                if (this.innerText == ">") {
                    if (option.selected == true) {

                        // var news=option.cloneNode(true);
                        // console.log(news);

                        right.appendChild(option);
                        i--;
                    }
                } else {
                    right.appendChild(option);
                    i--;
                }
            }
        };
    }


   */


</script>


</body>
</html>

select移动

select移动

绑定事件方式:

方式一：标签内绑定

<div id="div" onclick="foo(this)">点我呀</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("点你大爷!");
        console.log(self);   
    }
</script>

方式二：标签对象.事件=function(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>PPP</p>
    <p>PPP</p>
    <p>PPP</p>


    <script>

    //绑定方式二 标签对象.事件=function(){};


    var eles =document.getElementsByTagName("p");
       for (var i=0;i<eles.length;i++){
           eles[i].onclick=function(){
               alert(789);
           }
       }

    </script>

</body>
</html>

事件介绍

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        .outer{
             200px;
            height: 200px;
            background-color: red;

        }

         .inner{
             100px;
            height: 100px;
            background-color: yellow;

        }
    </style>
</head>
<body>

<div class="outer">
    <div class="inner"></div>
</div>


<script>
    var ele=document.getElementsByClassName("outer")[0];
    ele.onclick=function(){
        alert(123);
    };

     var ele2=document.getElementsByClassName("inner")[0];
     ele2.onclick=function(e){
        alert(456);


        e.stopPropagation();
    }
</script>
</body>
</html>

stopPropagation 阻止外层的事件传向内层

stopPropagation 阻止外层的事件传向内层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="text" id="d1">

<script>
    var ele=document.getElementById("d1");
    ele.onkeydown=function (e) {
        var num=e.keyCode;
        var alph=String.fromCharCode(num);
        alert(e.keyCode+"-----"+alph)
    }
</script>

</body>
</html>

onkeydown 演示

onkeydown 演示

onmouseout与onmouseleave事件的区别：

#1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
 
#2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            300px;
            background-color: purple;
            text-align: center;
        }
        #title{
            line-height: 50px;
        }
        #list{
            display: none;
        }
        #list div{
            line-height: 50px;
        }
        #list .item1{
            background-color: green;
        }
        #list .item2{
            background-color: yellow;
        }
        #list .item3{
            background-color: blue;
        }
    </style>

</head>
<body>

<div id="container">
    <div id="title">mouseout演示</div>
    <div id="list">
        <div class="item1">111</div>
        <div class="item2">222</div>
        <div class="item3">333</div>
    </div>
</div>

<script>

    var container=document.getElementById("container");
    var list=document.getElementById("list");
    var title=document.getElementById("title");

    title.onmouseover=function () {
        list.style.display="block"
    }

    container.onmouseleave=function(){
        list.style.display="none";
    };

</script>

</body>
</html>

mouseout演示

onsubmit:

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

Event 对象：

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        window.onload=function(){
            //阻止表单提交方式1().
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.

             var ele=document.getElementById("form");
             ele.onsubmit=function(event) {
            //    alert("验证失败 表单不会提交!");
            //    return false;

            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
             alert("验证失败 表单不会提交!");
             event.preventDefault();

    }

        };

    </script>
</head>
<body>

<form id="form">
            <input type="text"/>
            <input type="submit" value="点我!" />
</form>

</body>
</html>

阻止事件发生 两种演示

阻止事件发生两种演示

节点操作:

创建节点：

createElement(标签名) ：创建一个指定名称的元素。
 
例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

添加节点：

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
  
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点：

removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：

somenode.replaceChild(newnode, 某个节点);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1,.div2,.div3,.div4{
             300px;
            height: 200px;
        }
        .div1{
            background-color: green;
        }
        .div2{
            background-color: red;
        }
        .div3{
            background-color: blue;
        }
        .div4{
            background-color: lemonchiffon;
        }
    </style>
    
</head>
<body>

    <div class="div1">
        <button onclick="add()">add</button>
        div1</div>


    <div class="div2">
        <button onclick="del()">del</button>
        div2</div>
    <div class="div3">
        <button onclick="change()">change</button> 
        <p>div3</p>
    </div>
    <div class="div4">div4</div>

    <script>

//        把div3  的p改变为image
        function change() {
            var img=document.createElement("img");
            img.src="meinv.png";

            var ele=document.getElementsByTagName("p")[0];
            var father=document.getElementsByClassName("div3")[0];
            father.replaceChild(img,ele)
        }
        
//        删除p元素
        function del() {
            var father=document.getElementsByClassName("div1")[0];
            var son=father.getElementsByTagName("p")[0]
            father.removeChild(son)
        }


//        增加p元素
        function add() {
            var ele=document.createElement("p");
            ele.innerHTML="hello p";

            var father=document.getElementsByClassName("div1")[0];
            father.appendChild(ele)
        }

    </script>

</body>
</html>

增 删 改 查 演示

增删改查演示

节点属性操作：

改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
             300px;
            height: 200px;
        }
        .div1{
            background-color: green;
        }

    </style>
    
</head>
<body>

    <div class="div1">
        <button onclick="add()">add</button>
        div1</div>


    <script>

        function add() {
            var ele=document.createElement("p");
            ele.innerHTML="<h1>hello p</h1>";

            var father=document.getElementsByClassName("div1")[0];
            father.appendChild(ele)
        }

    </script>

</body>
</html>

改变元素内容 演示

改变元素内容演示

改变 CSS 样式

<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
             300px;
            height: 200px;
        }
        .div1{
            background-color: green;
        }

    </style>

</head>
<body>

    <div class="div1">
        <button onclick="add()">add</button>
        div1</div>


    <script>

        function add() {
            var ele=document.createElement("p");
            ele.innerHTML="<h1>hello p</h1>";
            ele.style.color="red";
            ele.style.fontSize="10px";

            var father=document.getElementsByClassName("div1")[0];
            father.appendChild(ele)
        }

    </script>

</body>
</html>

改变CSS样式 演示

改变CSS样式演示

改变 HTML 属性

elementNode.setAttribute(name,value)
 
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

关于class的操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1 div2">div1</div>

<script>
    var ele=document.getElementsByTagName("div")[0];

    console.log(ele.className);
    console.log(ele.classList[0]);
    ele.classList.add("hide");
    console.log(ele.className)
</script>

</body>
</html>

class操作 演示

class操作演示

案例　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>

     <button onclick="select('all');">全选</button>
     <button onclick="select('cancel');">取消</button>
     <button onclick="select('reverse');">反选</button>


     <table border="1" id="Table">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>


<script>
    function select(choice){
        var ele=document.getElementById("Table");

        var inputs=ele.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i=i+1){

                   var ele2=inputs[i];
            if (choice=="all"){
                ele2.checked=true;

            }else if(choice=="cancel"){
                ele2.checked=false;
            }
            else {

                if (ele2.checked){
                    ele2.checked=false;
                }else {
                    ele2.checked=true;
                }
            }

            }
    }
</script>


</body>
</html>

表格 全选 反选 取消 演示

表格全选反选取消演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        h1{
            background-color: darkgray;
            color: red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>

<h1 class="title">欢迎方少伟sb</h1>
<script>
       function test(){
            var ele=document.getElementsByClassName("title")[0];
            // console.log(ele)
            //       console.log(ele.innerText);
            //       console.log(typeof ele.innerText);
            var content=ele.innerText;
            var fist_char=content.charAt(0);
            var later_string=content.substring(1,content.length);
            var new_content=later_string+fist_char;

           // 赋值操作
           ele.innerText=new_content;
       }

       setInterval(test,1000);
</script>
</body>
</html>

跑马灯例子

跑马灯例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    <!--公共样式隐藏-->
        .hide{
            display: none;
        }
    <!--遮罩层,铺满整个屏幕,上下左右都为零-->
        .c1{
           position: fixed;#绝对定位
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #0f0f0f;
            opacity: 0.5;#设置元素的不透明级别
            z-index: 9;
        }
        <!--固定到遮罩层中间-->
        .c2{
             500px;
            height: 400px;
            background-color: #f9f9f9;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -200px;
            margin-left: -250px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
<div>
    <input type="button" value="添加" onclick="ShowMod();">
</div>
<!--遮罩层开始-->
<div id='id1' class="c1 hide">

</div>
<!--遮罩层结束-->
<!--弹出框开始-->

<div id= 'id2'class="c2 hide">
    <p class="=c3"><input type="text" placeholder="username"></p>
    <p><input type="password" placeholder="password"></p>
    <p><input type="button" value="取消" onclick="HideMod();">
        <input type="button" value="确定"></p>
</div>
<!--弹出框结束-->
<script>
    function ShowMod(){
     <!--找到标签获取所有样式,隐藏掉hide,弹窗会显现-->
        document.getElementById('id1').classList.remove('hide');
        document.getElementById('id2').classList.remove('hide');
    }
   function HideMod(){
    <!--找到标签获取所有样式,增加hide,隐藏弹窗-->
        document.getElementById('id1').classList.add('hide');
        document.getElementById('id2').classList.add('hide');
    }
</script>
</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .g{
            color: gray;
        }
        .b{
            color: black;
        }
    </style>

</head>
<body>
    <p>当鼠标进入时,移除内容</p>
    <p>当鼠标退出时,添加内容</p>
<!--默认文本方式1-->
    <input type="text" placeholder="请输入内容:" />
<!--默认文本方式2-->    
<!--onfocus得到焦点时执行,onblur光标移出时执行-->
    <input type="text" class="g" value="请输入内容:" onfocus="Fouce(this);" onblur="Blur(this);" />
    <script>
        function Fouce(ths) {
            ths.className = "b";
            var current_val = ths.value;
            <!--点击清空默认文本-->
            if (current_val == "请输入内容:"){
                ths.value = "";
            }
        }
        function Blur(ths) {
            var current_val = ths.value;
            <!--去掉空格长度为0-->
            if (current_val == "请输入内容:" ||  current_val.trim().length == 0){
                ths.value = "请输入内容:";
            ths.className = "g";
            }
        }
    </script>
</body>
</html>

搜索框默认文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <!--双击触发事件-->
        <input type="button" value="全选" ondblclick="CheckAll();"/>
        <input type="button" value="反选" onclick="ReverseAll();" />
        <input type="button" value="取消" ondblclick="CancleAll();"/>
    </div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input  class="c1" type="checkbox" /></td>
                <td>zc</td>
                <td>20</td>
            </tr>
            <tr>
                <td><input  class="c1" type="checkbox" /></td>
                <td>zc</td>
                <td>20</td>
            </tr><tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>zc</td>
                <td>20</td>
            </tr><tr>
                <td><input class="c1" type="checkbox" /></td>
                <td>zc</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll() {
           var tb = document.getElementById("tb");
           var checks = tb.getElementsByClassName("c1");
           for (var i=0; i<checks.length;i++){
                var current_check = checks[i];
                current_check.checked = true;
           }
        }
        function CancleAll() {
           var tb = document.getElementById("tb");
           var checks = tb.getElementsByClassName("c1");
           for (var i=0; i<checks.length;i++){
                var current_check = checks[i];
                current_check.checked = false;
           }
        }
        function ReverseAll() {
           var tb = document.getElementById("tb");
           var checks = tb.getElementsByClassName("c1");
           for (var i=0; i<checks.length;i++){
                var current_check = checks[i];
                if (current_check.checked) {
                   current_check.checked = false;
                }else{
                   current_check.checked = true;
                }
           }
        }
    </script>
</body>
</html>

表格全选反选取消

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <ul>
        <li><input type="radio" name="g" value="11">男</li>
        <li><input type="radio" name="g" value="12">女</li>
        <li><input type="radio" name="g" value="13">中</li>
    </ul>
    <script>
        var radios = document.getElementsByTagName("input");
    </script>

</body>
</html>

单选框

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <select id="sel">
        <option value="11">上海</option>
        <!--默认选中北京-->
        <!--selectedIndex通过索引获取值-->
        <option value="22" selected="selected">北京</option>
        <option value="33">河南</option>
        <option value="44">河北</option>
    </select>
</body>
</html>

下拉选项

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <input type="button" onclick="Func();" value="点我啊">
    <div id="i1">
        <div class="c1">123</div>
        <div class="c1" zc="sb">123</div>
        <div class="c1" zc="sb">123</div>
        <div class="c1">123</div>
        <div class="c1" zc="sb">123</div>
        <div class="c1">123</div>
        <div class="c1" zc="sb">123</div>
        <div class="c1">123</div>
        <div class="c1" zc="sb">123</div>
    </div>
    <script>
        function Func() {
        <!--获得i1所有标签,循环每一个,判断zc="sb"-->
            var i1 = document.getElementById("i1");
            var divs =i1.children;
            for (var i=0; i<divs.length;i++){
                var current_div = divs[i];
                var result = current_div.getAttribute("zc");
                console.log(result);
                if (result == "sb"){
                    current_div.innerText = "456";
                }
            }
        }
    </script>
</body>
</html>

属性操作,改变无规则标签值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    body{
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "9ED14F53", Arial, sans-serif;
    }
    h3{
        text-align: center;
        color:darkcyan;
        margin-top: 30px;
        letter-spacing: 5px;
    }
    .box{
      width: 1000px;
      margin:50px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li div{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li div a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
    #content li div span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: #2459a2;
      color: white;
        border-radius: 10%;
    }
    #content .show{
      display: block;
    }

    .show span{
        color: red!important;
        font-size: 30px;
    }
  </style>
</head>

<body>
    <h3 id="wel">京东商城欢迎您</h3>
    <!--  direction="right up down left" -->
<!--  behavior：滚动方式(包括3个值：scroll、slide、alternate) -->
<!--  说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->
<!--  scrollamount="5" 滚动速度 -->

<marquee behavior="scroll" direction="right">欢迎您苑昊先生</marquee>
    <script>

    function test(){

        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;
        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);
</script>
    <div class="box">
      <p id="title">
        <span class="select">家用电器</span>
        <span>家具</span>
        <span>汽车</span>
        <span>食品</span>
        <span>女鞋</span>
        <span>医疗保健</span>
      </p>

      <ul id="content">
        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>
          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>
          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>
        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

        </li>
        <li>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

        </li>
        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

        </li>


      </ul>
    </div>

    <script>
      var title=document.getElementById('title');
      var content=document.getElementById('content');
      var category=title.getElementsByTagName('span');
      var item=content.getElementsByTagName('li');

      for (var i = 0; i < category.length; i++) {

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {
              category[j].className='';
              item[j].className='';
            }
            this.className='select';
            item[this.index].className='show';
          }


      }

    </script>
</body>
</html>

跑马灯+tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" />
        <input type="button" value="添加" onclick="AddElement(this);"/>
    </div>
    <div>
        <ul id="commentList">
            <li>zc</li>
        </ul>
    </div>
    <!--<script>-->
        <!--function AddElement(ths) {-->
            <!--//获取输入的值-->
            <!--var val = ths.previousElementSibling.value;-->
            <!--ths.previousElementSibling.value = "";//添加后清空-->
            <!--var commentList = document.getElementById("commentList");-->
            <!--//第一种形式通过字符串的形式添加进去的-->
            <!--&lt;!&ndash;var str = "<li>"+ val + "</li>";&ndash;&gt;-->
            <!--&lt;!&ndash;commentList.insertAdjacentHTML("beforeEnd",str);//动态内部下边添加标签&ndash;&gt;-->
            <!--&lt;!&ndash;commentList.insertAdjacentHTML("beforeBegin",str);//动态往外部上边添加标签&ndash;&gt;-->
            <!--&lt;!&ndash;commentList.insertAdjacentHTML("afterBegin",str);//动态内部上边添加标签&ndash;&gt;-->
            <!--&lt;!&ndash;commentList.insertAdjacentHTML("afterEnd",str);//动态外部下边添加标签&ndash;&gt;-->
             <!--var tag = document.createElement("li");-->
            <!--tag.innerText = val;//创建了li标签,并把内容写成了val-->
            <!--commentList.appendChild(tag);//元素形式,字符串请使用上面那种-->
        <!--}-->
    <!--</script>-->


    <script>
        function AddElement(ths) {
            //获取输入的值
            var val = ths.previousElementSibling.value;
            ths.previousElementSibling.value = "";//添加后清空
            var commentList = document.getElementById("commentList");
            //第二种方式, 元素的方式(推荐使用)
            var tag = document.createElement("li");
            tag.innerText = val;//创建了li标签,并把内容写成了val

                //插入链接
                var temp = document.createElement("a");
                temp.innerText = "百度";
                temp.href = "http://baidu.com";
                tag.appendChild(temp);

            <!--commentList.appendChild(tag);//元素形式,字符串请使用上面那种-->
            commentList.insertBefore(tag,commentList.children[0]);//插在最前面
        }
    </script>
</body>
</html>

动态添加标签(两种形式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2 id="h1">333
        <span>123</span>
        <a>123</a>
    </h2>
    <div id="container">
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
    <script>
        var h = document.getElementById("h1");
        var c = document.getElementById("container");
        c.appendChild(h);//移动到下面
    </script>   
</body>
</html>

标签移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 400px;
            height: 5000px;
            border:1px solid #000;
        }
        #son{
            width: 600px;
            height: 5000px;
            background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
        }
    </style>
</head>
<body>
<div id="top">我是可爱的顶部</div>
    <div id="father">
        <div id="son"></div>
    </div>
<a href="#top">返回顶部</a>
</body>
</html>

返回顶部锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .go-top{
            position: fixed;
            right:28px;
            bottom:18px;
            backgroup-color:#2459a2;
            color:white;
            width:40px;
            height:40px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body onscroll="Func();">
//局部网页滚动条,返回顶部
<div id="=xo" style="height:200px;overflow:auto" onscroll="Func();">
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
</div>




    <div id="i1" style="height:2000px">
    <h1>nihao</h1>
    </div>
    <div id="i2" class="go-top hide">
        <!--&lt;!&ndash;<a href="#i1">返回顶部</a>&ndash;&gt;锚点-->
        <a href="#" onclick="GoTOP();">返回顶部</a>
        //#号是什么都不处理
    </div>
    <script>
        function Func() {
            //获取当前滚动高度
            var scrollTop = document.body.scrollTop;
            var ii  = document.getElementById("i2");
            if(scrollTop>10) {
                ii.classList.remove("hide");
            }else{
                ii.classList.add("hide");
            }
        }

        function GoTOP() {
            document.body.scrollTop = 0;
            //scrollTop滚动高度
        }
    </script>
</body>
</html>

全网页&局部网页返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin:0;">
<div id="xo" style="height:200px;overflow:auto; 400px;margin:0 auto;border:1px solid red;">
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
</div>
<script>
    var i = document.getElementById('xo');
    //scrollHeight文档的高度:自身+padding
    //scrollTop:滚动条距离顶部高度
    //clientHeight:可见范围的高度:自身+padding
    //clientTop:边框高度
    //offsetTop:当前标签距离顶部(body)定位标签的高度
    //offsetHeight:可见范围的高度:自身+padding+border
    console.log(i.scrollHeight);
    console.log(i.clientHeight);
    console.log(i.clientTop);
    console.log(i.offsetTop);
    console.log(i.offsetHeight);
</script>
</body>
</html>

高度相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            background-color:#dddd;
        }
        .w{
            margin:0 auto;
            width:980px;
        }
        .pg-header{
            background-color:black;
            color:white;
            height:48px;
        }
        .pg-body .menu{
            position:absolute;
            width:180px;
            background-color:white;
            float:left;
            left:200px
        }
        .pg-body .menu .active{
            background-color:#425a66;
            color:
        }
        .pg-body .fixed{
            position:fixed;
            top:50px;
        }
        .pg-body .content{
            position:absolute;
            width:800px;
            background-color:white;
            float:left;
            left:385px;
            right:200px;
        }
        .pg-body .content .item{
            height: 900px;
        }
    </style>
</head>
<body onscroll="Hua();">
<div class="pg-header">
     <div class="w">

     </div>
</div>
<div class="pg-body">
    <div class="fixed">
        <div id="menu" class="menu" >
            <ul>
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
                <li>第四章</li>
            </ul>
        </div>
        </div>
        <div id="content" class="content">
            <div class="item">床前明月光1</div>
            <div class="item">床前明月光2</div>
            <div class="item">床前明月光3</div>
            <div class="item">床前明月光4</div>
        </div>
</div>
<script>
    function Hua(){
        var huaGao = document.body.scrollTop;
        var caiDan =document.getElementById("menu");
        if (huaGao>48){
             caiDan.classList.add("fixed");
        }else{
            caiDan.classList.remove("fixed");
        }
        var items =document.getElementById("content").children;
        for (var i=0;i<items.length;i++){
            var currentItem = items[i];
               currentItem.offsetTop
        }

    }
</script>

</body>
</html>

滚动菜单(功能不全)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="fom" action="http://www.baidu.com" method="get">
        <input name="query" type="text" />
        <input type="button" onclick="SubmitForm();" value="提交" />
    </form>
    <input type="button" value="confirm" onclick="Firm();" />
    <input type="button" value="Interval" onclick="Interval();" />
    <input type="button" value="StopInterval" onclick="StopInterval();" />
    <div>
        <input type="button" value="删除" onclick="Delete();" />
        <input type="button" value="保留状态" onclick="UnDelete();" />
        <div id="status"></div>
    </div>
    <script>
        function UnDelete(){
            clearTimeout(t1);
        }
        function Delete(){
            document.getElementById("status").innerText = "已删除";
            t1 = setTimeout(ClearStatus,5000);
        }
        function ClearStatus(){
            document.getElementById("status").innerText = "";
        }
        function SubmitForm(){
            document.getElementById("fom").innerText = "";
        }
        function Firm(){
            var r = confirm("你好");
            console.log(r);
        }
        function f1(){
            console.log(123);
        }
        function Interval(){
            <!--setInterval("console.log(1)",1000);-->
            <!--setInterval(f1,1000);-->
            s1 = setInterval(function(){
                console.log(123);
            },1000);
            s2 = setInterval(function(){
                console.log(13);
            },2000);
             console.log(1);
        }
        function StopInterval() {
            clearTimeout(s1);
        }
    </script>
</body>
</html>

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function func(){
        for (var i=0;i<3;i++){
            setInterval(function(){
                console.log(i);
        },1000);
    }
    }
    func();
</script>

</body>
</html>
//作用域:每一秒输出3(跨度是3)

作用域:每一秒输出3(跨度是3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="btns">
    <input type="button" value="点我1" />
    <input type="button" value="点我2" />
    <input type="button" value="点我3" />
</div>
<script>
    var btns = document.getElementById('btns').children;
    for (var j = 0;j<btns.length;j++){
        var current_input = btns[j];
        current_input.onclick = function(){
            alert(j);
        }
    }
</script>

</body>
</html>
//作用域:点我1,点我2,点我3都输出为3,
current_input.onclick = function(){
            alert(j);
这个函数外面,没有其他函数只剩下全局变量,全局变量执行结果等于3所以输出都为3

作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--注册事件:-->
<!--a.<div onclick="xxxxx"></div>-->
<!--b.document......onclick = function()-->
<!--this:触发当前事件标签-->
<!--event:触发当前标签的事件的内容-->
<body>
<div onmouseover="Func(this);" onmouseout="Out(this);">123</div>
<input type="text" onkeydown="Down(this,event);" />//event当前事件包含的内容
<script>
    function Down(ths,evn){
        console.log(e);
    }

    function Func(ths){
        ths.style.color = "red";//鼠标放上改变颜色
    }
    function Out(ths){
        ths.style.color = "black";//去掉鼠标颜色恢复
    }
</script>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
//自定义事件:onclick="Func();
//默认事件:href="http://www.baidu.com"
//自定义事件>默认事件
//可以更改自定义事件真假来判断它是否执行
<body>
    <a href="http://www.baidu.com" onclick="Func();">baidu</a>
    <a href="http://www.baidu.com" onclick="return Func();">baidu</a>
    <form action="s10.html">
        <div id="fo">
        <input type="text" />
        </div>
        <input type="submit" value="提交" onclick="SubmitForm();" />
    </form>
    <script>
        function Func(){
            alert(123);
        }
        function Func(){
            alert(123);
            return true;
        }
        function SubmitForm(){
            var inputs = document.getElementById('fo').getElementsByTagName('input');
            for(var i = 0;i<inputs.length;i++){
                var currentInput = inputs[i];
                var val = currentInput.value;
                if(val.trim().length == 0){
                    alert('请输入内容');
                    return false;
                }
            }
            return true;
        }
    </script>
</body>
</html>

Dom事件绑定

js的作用域:

作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种

全局作用域:

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();              // Uncaught ReferenceError: inner is not defined

最外层函数和在最外层函数外面定义的变量拥有全局作用域

var name="yuan";

    function foo(){
        age=23;

        var sex="male"
    }
    foo();
    console.log(age);   //  23
    console.log(sex);   // sex is not defined

所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

变量blog拥有全局作用域，而sex在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。

局部作用域:

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.

作用域链:

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

//-----**********************例1*********************************

var s=12;
    function f(){
        console.log(s);
         var s=12;          // if s=12
        console.log(s)
    }
    f();

//-----**********************例2*********************************

var s=10;
function foo(){
  console.log(s);
  var s=5;
  console.log(s);
  function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作

  console.log(s);
}

foo();

//-----***********************例3********************************

function bar(age) {

        console.log(age);
        var age = 99;
        var sex= 'male';
        console.log(age);
        function age() {
            alert(123)
        };
        console.log(age);
        return 100;
}

result=bar(5);

//-----********************************************************


function bar(age) {

        console.log(age);
        var age = 99;
        var sex="male";
        console.log(age);
        function age(){
            alert(123);
        } ;
        console.log(age);
        return 100;
}

result=bar(5);

一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：
    1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;
    1-2 、接收参数 AO.age=5;
    1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理
    1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine;
    1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程：
    2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数
    2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99;
    2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。

          注意：执行阶段：
                        function age(){
                            alert(123)
                        } ;

            不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。

过程解析

查看全文

相关阅读:
MySQL的注入过程
 nmap 扫描器的功能
 用dvwa演示带有用户令牌（user_token）的暴力破解
 在python中安装requests模块
 如何发现struts2漏洞
 vs2017的主题颜色的配置
 在vs上开发linux c++
linux主机之间的SSH链接
 verilog 实用的小技巧
 verilog 实现DDS

原文地址：https://www.cnblogs.com/zcok168/p/9490478.html