从基本的编程知识，到用HTML,CSS配合JS实现动态页面
基础知识
- 基本操作引入
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 弹出一个警告框
alert('出入平安！！')
// 在计算机页面输出东西
document.write('我在页面中显示')
// 在控制台显示
console.log('猜猜我在哪啊')
// 也可以使用:<script src="" type="text/javascript" charset="utf-8">
<!-- 这样引入外面的Javascript 引入之后 不能在编写代码了 写了计算机也是忽略 -->
</script>
</head>
<body>
<!-- 写在属性中不方便维护 不推荐使用 -->
<!-- 将js写在onclick中 -->
<button onclick="alert('讨厌点我干啥')">点我一下</button>
<!-- 将js写在超链接的href中 点击超链接时会执行js代码 -->
<a href="javascript:alert('让你点你就点!!');">你也点我一下呗</a>
<a href="javascript:;"></a>
</body>
- 基本知识
<script type="text/javascript">
// 字面量(不可改变)：像 1，2，3等
// 变量(用来保存字面量) 以后常用
// 不能数字开头 可以含有字母，数字，_，$
// 标识符--utf-8中的东西都可以当作标识符(例如中文)
var a=123;
// 不可以输出var
console.log(a);
</script>
- 数据类型
/**
* 基本数据类型：
* String,Number,Boolean,Null,Undefined
* 引用数据类型：
* Object
*
* 可以利用 \ 来进行转义
* \n(表示换行) \t(制表符) \"(表示 ") \'(表示 ')
* \\\\ 表示两个反斜杠
*/
- number
<script type="text/javascript">
/**
* 最大值：Number.MAX_VALUE
* 如果使用计算超过最大数字之后就会返回一个 number类型的
* Infinity 表示正无穷
* -Infinity 表示负无穷
* NaN是一个特殊的数字 表示Not A Number
* 例如a='abc'*'abc'
*/
var a=Number.MAX_VALUE;
a=Number.MIN_VALUE;
var b=0.3+0.3;
// js进行浮点数进行计算 可能得到一个不准确的数字
console.log(b);
console.log(a);
var c=null; //类型时object类型的
var d=undefined //类型还是undefined类型的
console.log(typeof d)
console.log(typeof c)
</script>
- string，number boolean的类型转化
<script type="text/javascript">
/**
* String
* 调用toString() 方法
* 除了null和undefined没有上面的方法
*/
// var a=undefined
// a=a.toString();
// console.log(typeof a)
// console.log(a)
/**
* Number
* 调用函数Number()来进行转化
* string-number
* 如果是数字字符串，直接转化为数字
* 如果有字母，返回undefined
* Boolean-number
* true----1 false----0
* null---0
* undefined---undefined
*
* 可以用parseInt()/parseFloat() 来对字符串进行转换
* 不可以用来转化纯字母 从第一个开始
*
* js中如果需要表示16进制需要以 0X开头
* 8进制-----0开头
* 2进制-----0b开头
*
* 指定的数字转化用parseInt(a,10)----指定的数字转化
*/
// var a = undefined
// a=Number(a)
// console.log(a)
// var b='123p'
// b='t123'
// b=parseInt(b)
// console.log(b)
/**
* Boolean()
* 数字--除了0/NaN其余都是true
* 字符串---除了空串 都是true
* null和undefined 都是false
* 对象会变成true
*/
var a=undefined
a=Boolean(a)
b=''
b=Boolean(b)
console.log(b)
console.log(a)
</script>
- 运算符
<script type="text/javascript">
/**
* 运算符:typedof
* 算数运算符---非数字计算会先转化为Number
* +：1数字直接计算 2两个字符串进行 拼串 3任何值和字符串都先会转化为字符串
* 利用3相当于toString() 转化为字符串的操作---直接+''----就可以
* - * / 和数字进行计算 都会自动转化为 Number 然后进行计算
*
* 一元运算符：
* + 对于非Number 前面加一个+ 相当于 Number()
*
* 自增和自减：
* a++和++a都是原变量增加1
* a++ = 自增前的值/ ++a = 自增后的值
*
* 自减也是同理
* n1=10 n=n1++ n=10/n1=11
* n=++n1 n=12/n1=12
* n2=20 n=n2-- n=20/n2=19
* n=--n2 n=18/n2=18
*
* 逻辑运算符 ! && ||
* !----非布尔值转化为布尔值 进行转化
* 任意类型取两次反 作用相当于Boolean()
*
* &&---第一个为false 则不会看第二个值
* 第一个值为true 返回第二个值------看看第二个
* 第一个值为false 直接返回第一个值--第一个就不行-就不行
*
* ||---第一个为true 则不会看第二个值
* 第一个值为true 返回第一个------直接放行
* 第一个值为false 返回第二个-----再看看第二个
* 赋值运算符
* += -= *= /= %=
*
* 关系运算符--字符串比较的是---字符编码
* > < <= >= = ==
* ==运算符 undefined==null 正确 前者衍生自后者
* NaN 和谁都不相等包括它本身 用isNaN() 判断是否NaN
* !=
*
* ===不会自动给你转化
* !==
*
* 使用转义字符输出Unicode编码
* \u四位编码
* \#编码---编码需要的是10进制
*
* 三目运算符：条件表达式?语句一:语句二
*用来判断最大值 var max=a>b?(a>c?a:c):(b>c?b:c)
*
* 优先级 对象里面的 第一是 . [] new 第二是 ()
*
* 代码块 用来分组 没有其他作用
*
*/
var a=1+'';
console.log(typeof a)
var b=1+ +'2'+3
console.log(b)
</script>
- for循环+ 1-100以内的质数+ 九九乘法表
<script type="text/javascript">
/**
* for(初始化表达式;条件表达式;更新表达式){
* 语句
* }
*/
//输出1-100以内的质数和
var sum=0,i,j;
for(i=2;i<100;i++){
// 你要是在外面改变一次就不改变了
var flag=true;
for(j=2;j<=Math.sqrt(i);j++){
if(i%j==0){
flag=false;
break;
}
}
if(flag){
console.log(i);
sum+=i;
}
}
console.log(sum);
// 九九乘法表
for(i=1;i<=9;i++){
for(j=1;j<=i;j++){
document.write(j+'*'+i+'='+i*j+'\t')
}document.write('<br />')
}
</script>
- switch
<script type="text/javascript">
var score=+prompt('请输入成绩');
// switch(score/10){
// case 10:
// case 9:
// case 8:
// case 7:
// case 6:
// console.log('合格')
// break
// default:
// console.log('不合格')
// }
switch(score>=60){
case true:
console.log('及格');
break;
default:
console.log('不及格');
break;
}
</script>
- if语句练习
<script type="text/javascript">
// prompt() 函数中的返回值是 String 类型的
var num1=+prompt('请输入第一个数字')
var num2=+prompt('请输入第二个数字')
var num3=+prompt('请输入第三个数字')
if(num1<num2 && num1<num3){
// num1最小
if(num2<num3){
alert(num1+","+num2+","+num3)
}else{
alert(num1+","+num3+","+num2)
}
}
if(num2<num1 && num2<num3){
// num2最小
if(num1<num3){
alert(num2+","+num1+","+num3)
}else{
alert(num2+","+num3+","+num1)
}
}
if(num3<num2 && num3<num1){
// num1最小
if(num2<num1){
alert(num3+","+num2+","+num1)
}else{
alert(num3+","+num1+","+num2)
}
}
</script>
- 面向对象创建对象
<script type="text/javascript">
/**
* // 使用new创建出来的是构造函数 constructor
var obj=new Object();
obj.name='盖世凯';
obj.age='21'
obj.sex='male'
// 替换原来的属性
obj.name='李哲'
// 删除属性
delete obj.name;
// 特殊的属性名字用 特殊的方法来整
obj['你好']='盖世凯a'
n='你好'
console.log(obj[n]);
// 属性也可以是一个对象
var obj2=new Object();
obj.test=obj2;
console.log(obj.test);
// 测试obj中是否有此属性
console.log('test' in obj);
*/
// 对象是一个地址
// 这种方式创建对象 {里面都是键值对(python中的字典)}
// var obj3={
// name:'张三',
// age:12,
// sex:'male'
// };
// console.log(obj3.name);
</script>
- 函数的参数
<script type="text/javascript">
function sum(a,b){
console.log(a+b);
return a;
/**
* return 后面的语句不会被执行
*/
alert('hello')
}
/**
*调用函数的参数时 不会检查函数的参数类型
* 多余的形参将是undefined
*/
// var result =alert('hello')
// console.log(result)//没有被定义
var a =sum(12,13,true,false)
console.log(a)
/**
* 创建一个函数 可以在控制台输出信息
*/
var obj={
name:'盖世凯',
age:21,
male:'男'
};
function sayHello(o){
console.log(o.name+o.age+o.male)
}
sayHello(obj)
/**
* 传递函数
*/
function fun(a){
console.log('a='+a)
a(obj)
}
// fun(sayHello)
/**
* 传递一个对象
*/
// main() 调用函数 main 调用对象
fun(function(){alert('hello')})
</script>
- return
<script type="text/javascript">
function fun1(){
function fun2(){
alert('我是fun4中的函数')
}
return fun2;
}
a=fun1();
// console.log(a);
// a();
fun1()();//原理同上一行
</script>
- 立即执行函数
<script type="text/javascript">
/**
* 只会执行一次
*/
(function(a,b){
alert(a+b);
alert('我是一个匿名函数');
})(12,13)
</script>
- 对象中的属性是函数
<script type="text/javascript">
var obj=new Object();
obj.name='盖世凯';
obj.age=21;
obj.sayName=function(){
console.log(obj.name)
};
// console.log(obj.sayName);
//调方法---函数作为对象的属性--我们叫方法
obj.sayName()
function fun(){
console.log('我是函数')
}
// 调函数---只是名称不一样
fun()
</script>
- 枚举对象
<script type="text/javascript">
var obj={
name:'盖世凯',
age:21,
gender:'男'
};
for(x in obj){
console.log(x);
console.log(obj[x])
}
</script>
- 作用域
<script type="text/javascript">
function fun(){
console.log('我是fun函数')
}
/**
* 全局作用域
* 在外面时window的--都是window.
*/
window.fun();
/**
* 关于var声明
* 是在最开头声明的 但不会被赋值 不适用不会被提前
*/
var a;
console.log(a);//结果时undefined
a=123;
/**
* 关于function xx()函数
* 在所有代码执行之前就被创建
* fun2()不会被执行---fun2 is not a function
*/
fun1();
// fun2();
function fun1(){
console.log('我是function声明的函数')
};
var fun2=function(){
console.log('我是var声明的函数')
};
/**
* 作用域---var也是提前声明---function也是
* 就近使用 没有往上面找
* 如果非要用 就用window.的方式来使用
*/
var b=10;
function fun3(){
console.log(window.b);
console.log(b);
b=12;
d=100;//--相当于window.d=100
}
fun3();
console.log(b);//输出的时12 别修改后的数字
console.log(d)
/**
* 定义了形参就相当于在里面声明了
*/
var e=23;
function fun4(e){
alert(e);//这里输出的是undefined
}
fun4();
// 接下来就是调试bug的课程
</script>
- this关键字谁调用就用谁的对象里面的this
<script type="text/javascript">
/**
* 以函数的形式调用的时候 this永远指向的是window
* 以方法的形式调用的时候 this指的是调用方法的对象
*/
var name='刘毅'
function fun(a,b){
console.log(this.name);//打印不出来this
}
// fun(1,2);
var obj1={
name:'盖世凯1',
age:21,
sayName:fun
}
var obj2={
name:'盖世凯2',
age:21,
sayName:fun
}
// console.log(obj.sayName==fun)//true
obj1.sayName();
obj2.sayName();
fun();
</script>
- 批量生产对象
<script type="text/javascript">
/**
* 批量生产对象
*/
function createPerson(name,age){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayName=function(){
alert(this.name);
}
return obj;
}
var a=createPerson('盖世凯',21);
var b=createPerson('刘毅',21);
a.sayName()
b.sayName()
</script>
- 构造函数
<script type="text/javascript">
/**
* 构造函数 也是函数 除了函数名首字母大写 么有区别
*
* 不同的是 普通函数直接使用 构造函数需要用new关键字来调用
*/
/**
* 构造函数执行流程
* 1 立即创建一个对象
* 2 将对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
* 3 逐行执行函数中的代码
* 4 将新建的对象作为返回值返回
*
* java理解
* new(new一个对象)的过程就是 创建你造出来的对象
*/
function Person(name,age){
// this.name='盖世凯'//这样就写死了 所以看下面
this.name=name;
this.age=age;
this.sayName=function(){
alert(this.name);
}
// 像对象中添加一个方法
this.sayAge=fun;
}
// sayAge方法在全局作用域中定义
function fun(){
alert(this.age);
}
/**
* 判断一个对象 是否是一个类的实例
* 对象 instanceof 构造函数
* 是返回true 不是-false
*/
// 向原型中添加sayName方法 之后的拓展
Person.prototype.sayName=function(){
alert(this.name+'我是原型中的')
}
var per=new Person('盖世凯',21);
console.log(per instanceof Person)
// console.log(per.name)
per.sayName()
per.sayAge()
</script>
- 原型
<script type="text/javascript">
/**
* 原型 prototype
* 创建每一个函数 解析器都会想函数中添加一个属性prototype
*/
function MyClass(){
}
// 向原型中添加属性
MyClass.prototype.a=123
var mc1=new MyClass();
var mc2=new MyClass();
// console.log(MyClass.prototype);
// console.log(mc1.__proto__==mc2.__proto__)//true
mc1.a='我是更改后的a'
console.log(mc1.a)
</script>
<script type="text/javascript">
function MyClass(){
}
MyClass.prototype.name='我是原型中的名字';
var mc=new MyClass();
mc.age=21;
// console.log(mc.name)
// 使用in来检查对象中是否含有某个属性 没有去原型中寻找
console.log('name' in MyClass)
// 使用hasOwnProperty()检查对象自身中是否含有该属性
console.log(mc.hasOwnProperty('age'))
// 自身有用自身 没有去原型中找 在没有去原型的原型中寻找
console.log(mc.__proto__.__proto__.hasOwnProperty('hasOwnProperty'));
console.log(mc.__proto__.__proto__.__proto__);
</script>
- toString
<script type="text/javascript">
function Person(name,age){
this.name=name;
this.age=age;
}
var per =new Person('盖世凯',21);
// //重写toString方法
// per.toString=function(){
// return '我是重写的toString方法'
// }
//重写Person原型的toString方法
Person.prototype.toString=function(){
return '我是Person原型中的toString方法'
}
// console.log(per.__proto__.__proto__.hasOwnProperty('toString'));
var resule=per.toString();
console.log(resule);
// 垃圾回收机制 没用的就扔了
Person=null;
console.log(Person.toString());
</script>
- 数组
<script type="text/javascript">
/**
* 数组的两种创建方法
* var arr=new Array();
* var arr=[];
*/
var arr=new Array(10);//这里的10是数组的总长
arr[0]=1;
arr[arr.length]=1
console.log(arr.length);
arr1=[1,2,true,'hello',null,undefined,{name:'盖世凯'},function(){alert(1)}]
arr2=[10]//这里的10是数组中的元素
console.log(arr1);//in 浏览器中显示
console.log(arr1[6].name); //数组中放对象
console.log(arr1[7]()); //数组中放方法
console.log(arr2.length)
</script>
- 数组中的方法：push 和pop在末尾操作+unshift和shift再开头操作+数组的遍历
<script type="text/javascript">
var arr=['盖世凯1','盖世凯2','盖世凯3','盖世凯4']
/**
* push()方法
* 末尾添加1/多 个元素并返回数组的 新长度
*/
arr.push('李哲','毅哥')
console.log(arr)
/**
* pop()方法
* 删除最后一个元素 并返回结果
*/
a=arr.pop();
console.log(a);
/**
* unshift()方法
* 数组开头添加 1/多 元素
*/
arr.unshift('牛魔王','孙悟空');
console.log(arr);
/**
* shift()方法
* 删除第一个 并返回
*/
arr.shift();
console.log(arr)
// 数组的遍历
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
</script>
- 数组的练习+forEach方法
<script type="text/javascript">
// 把大于18岁的人放到一个数组中
function Person(name,age){
this.name=name;
this.age=age;
}
var p1=new Person('盖世凯',21);
var p2=new Person('毅哥',12);
var p3=new Person('翀哥',34);
var p4=new Person('松岳',11);
var arr=[p1,p2,p3,p4];
var newArray=[]
for(var i=0;i<arr.length;i++){
if(arr[i].age>18){
newArray.push(arr[i])
}
}
/**
* forEach() 方法需要一个 函数 作为参数
* 不用我们调用
* 第一个参数返回数组中的值
* 第二个参数表示索引值
* 第三个参数是打印全部
*/
newArray.forEach(function(value,index,object){
console.log(value)
console.log(index)
console.log(object)
})
</script>
- 数组中的splice的切片操作
<script type="text/javascript">
var arr1=['G','S','K','Y','G'];
/**
* slice(开始截取的位置，结束的位置)方法
* 不会改变原来的数组
*/
// var result=arr1.slice(0,-1);//包头不包尾(尾是负数的话就都包括了)
// console.log(result)
/**
* splice(表示开始删除的位置，删除的数量，后面可以添加一些元素)方法
* 删除数组中指定的元素 会影响到原来的数组 有返回值
* 第二个参数为0时就是不删除
*/
var result=arr1.splice(0,3,'牛魔王','孙悟空');
console.log(result);
console.log(arr1);
</script>
- 去除数组中多余的数------sqlice练习
<script type="text/javascript">
var arr=[1,2,1,3,2,2,4,3,5,4,6]
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
// j++和j-- 表示没变
j--;
}
}
}
for(var x=0;x<arr.length;x++){
console.log(arr[x])
}
</script>
- 数组中其他的方法join+concat+sort+reverse
<script type="text/javascript">
var arr1=[12,3,4,5]
var arr2=[1,2,3,4,5]
var arr3=[1,2,3,4,5]
/**
* concat() 进行拼接 返回新数组 不对原数组产生影响
*/
var result=arr1.concat(arr2,arr3,'盖世凯');
console.log(result)
/**
* join(@_@) 数组转换成字符串，返回新数组，不对原数组产生影响
*/
result =arr1.join('@_@');
console.log(result);
/**
* reverse() 数组都倒过来 修改原数组
*/
arr1.reverse()
console.log(arr1)
/**
* sort() 进行排序 按照unicode排序
* ()里面是一个>0的数 交换位置
* <=0的数 位置不变
*/
arr1.sort(function(a,b){
//升序排列
return a-b;
//降序排列
return b-a;
})
</script>
- arguments的隐藏功能
<script type="text/javascript">
/**
* 函数中的两个隐含参数 this & arguments(是一个类数组对象)
* arguments.length=实参的长度
* arguments[0]----第一个实参
* arguments.callee指向当前函数的对象
*/
function fun(a,b){
// 下面两行都是false
// console.log(arguments instanceof Array);
// console.log(Array.isArray(arguments));
console.log(arguments.length);
console.log(arguments.callee==fun);
}
fun('hello',true)
</script>
- 函数中方法：call()+apply()
<script type="text/javascript">
function fun(){
alert(this.name)
}
/**
* call() apply()
* 需要通过函数来调用
* 使用过程中this.传进来的对象
* call() 可以将实参对象之后依次传递fun.call(obj,2,3)
* apply() 不同于上面 fun.apply(obj,[2,3])
*/
var obj={name:'盖世凯'};
fun.call()
fun.apply(obj)
</script>
- Date对象
<script type="text/javascript">
// Date 表示对象
/**
* getDate() 几日
* getDay() 周几0-周日
* gatMonth() 月份0-一月
* getFullYear() 当前日期对应的年份
* getTime() 当前时间(毫秒呈现出来)
* Date.now() 当前的时间(多用于测试)
*/
var d=new Date();
var a=new Date('01/14/2021 04:44:20');//月 日 年 时 分 秒
console.log(d);
console.log(a);
</script>
- Math函数
<script type="text/javascript">
// Math 不是对象是一个函数 通过Math.的方式
/**
* abs() 一个数的绝对值
* ceil() 向上取整
* floor() 向下取整
* round() 四舍五入
* Math.random() 0-1之间的随机数
* x-y之间的随机数 Math.round(Math.random()*(y-x)+x)
* pow(x,y) x的y次幂
* sqrt(x) 对x进行开方
*/
</script>
- 包装类(了解)
<script type="text/javascript">
/**
*String() 将基本数据类型转化为String对象
* Number() 将基本数据类型转化为Number对象
* Boolean() 将基本数据类型转化为Boolean对象
*/
var num=new Number(3)
var str=new String('hello')
var bool=new Boolean(true)
var s=123;
s=s.toString();
// 都帮我们自动转化了
s.hello='你好';
console.log(s.hello)
</script>
- 字符串的相关操作
<script type="text/javascript">
str='gaishikaiduopeifumu';
/**
* charAt() 可以返回字符串中指定位置的字符 根据索引过去指定的字符
* charCodeAt() 获取指定位置字符的编码(unicode编码)
* formCharCode() 根据字符编码获取字符
* concat() 拼接字符 作用和 + 一样
* indexof('a',7) 检索是否含有指定内容(通常返回第一个)--可以指定位置
* 没有返回-1
* lastIndexOf('h',1) 从后往前找 功能和上面一样
* substring(1,2) 和slice()类似
* 传递的是负值 默认使用0 第二个参数小于第一个(自动换位置)
* substr(0.2) 截取字符串 开始的索引位置 截取长度
* split('@') 拆分成数组 会根据传进去的东西去拆分数组
* toUpperCase() 将字符串转化为大写并返回
* toLowerCase() 将字符串转化为xiao写并返回
*/
</script>
- 正则表达式
<script type="text/javascript">
/**
* var 变量 = new RegExp('正则表达式','匹配模式')
* 正则表达式是一个对象
* 下面是一个测试是否含有a
* 第二个参数可以是 i 忽略大小写
* g 全局匹配模式
*/
var reg=new RegExp('a','i')
var str='a';
var result=reg.test(str);
console.log(result)
/**
* 也可以使用字面量来创建正则表达式
* var 变量=/正则表达式/匹配模式
* reg=/a|b/; | 表示或的意思
* reg=/[ab]/ [] 里面的内容也是或的关系
* reg=/[a-z]/ 任意小写
* reg=/[A-Z]/ 任意大写
* reg=/[A-z]/ 任意字母
* [^ abc] 除了abc
* search() 搜索是否含有指定内容 传一个正则就会根据 正则来检索(添加全局变量也没用)
* match() 传进去一个正则表达式 符合条件的内容 提取出来 装到一个数组中返回
* replace() 参数： 1 被替换的内容 2 新的内容 默认只提取第一个
* split(/[A-z]/) 任意字母拆分字符串
*
* 量词 只对前面的第一个内容起作用(内容出现的次数)--可以加括号整的-多一点
* {n} 正好出现n次
* {m,n} 出现m-n次
* {m,} m次以上
* + 至少一个，相当于{1,}
* * 0个或者多个 相当于{0,}
* /^a/ 以a开头
* /a$/ 以a结尾
*
* 检查是否含有.
* .表示任意字符 用\. 来表示.
* 用\\ 来表示\
*
* \w 任意字母，数字，_ [A-z0-9]
* \W 上面相反
* \d 任意数字 [0-9]
* \D 上面相反
* \s 空格
* \S 上面相反
* \b
* \B
*
*
*/
var reg=/A/;
console.log(reg.test('abc'))
</script>
- DOM
<script type="text/javascript">
/**
* 也可以在上面设置
*/
window.onload=function(){
// 这里面写你要执行的代码
/**
* 文档字节 对象这个对象是window属性 文档字节代表整个网页
*/
// 获取button对象
var btn=document.getElementById('btn');
// 修改按钮文字
btn.innerHTML='我是被修改的'
// 绑定一个单击响应函数
btn.onclick=function(){
alert('你还点~~~~');
}
}
</script>
- dom里面的东西
// 全局里定义
function myClass(idStr,fun){
// 传进来的是字符串就不需要再改了
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
window.onload=function(){
// 1 查找#bj结点
myClass('btn01',function(){
var bj=document.getElementById('bj') //通过id来获取一个节点的对象
var lis=document.getElementsByTagName('li'); //通过标签名来获取一个组的节点对象
var names=document.getElementsByName('gender'); //通过name属性来获取一组对象元素.name 元素.value 元素.id class属性需要使用 元素.className
alert(bj.innerHTML)
});
}
- dom中的其他方法
<script type="text/javascript">
window.onload=function(){
// 获取body标签
// var body = document.getElementsByName('body');
/**
* document中有一个body标签 它保存的是body的引用
*/
var body=document.body;
console.log(body)
/**
* document.documentElement保存的是html标签
*/
var html=document.documentElement;
// console.log(html)
/**
* document.all 代表页面中所有的元素
*/
var all=document.all;
// console.log(all.length)
// for(var i=0;i<all.length;i++){
// console.log(all[i]);
// }
// 作用同上
all=document.getElementsByTagName('*');
console.log(all.length)
/**
* 根据元素的class属性查询一组元素节点对象
* 不支持IE8及一下的浏览器
*/
var box=document.getElementsByClassName('box1');
console.log(box.length)
// 获取页面中所有的div
// var divs=document.getElementsByTagName('div');
// console.log(divs.length)
/**
* document.querySelector()
* 需要一个字符串作为参数 ，可以根据一个CSS选择器来查询一个元素的节点对象
*/
var div = document.querySelector('.box1 div');
console.log(div.innerHTML)
/**
* document.querySelectorAll 和上面的方法类似 会取出所有符合条件的元素
*/
var div = document.querySelectorAll('.box1 div');
}
</script>
- 添加节点，删除节点，插入节点+添加删除用户信息练习(在练习里面)
// 创建一个'广州'节点添加到#city下
myClick('btn01',function(){
// 创建<li>广州<li>
/**
* document.createElement()----用于创建元素对象
* 标签名作为参数 会根据标签名创建元素节点对象 并返回
*/
var li = document.createElement('li');
/**
* document.createTextNode()----用来创建文本节点
*/
var gzText=document.createTextNode('广州');
/**
* 将gzText作为子节点传入li中 认儿子
*/
li.appendChild(gzText)
/**
* 将li传入到city下
*/
var city=document.getElementById('city');
city.appendChild(li);
})
/**
* inserBefore(新节点，旧节点)
* 对子节点插入新的子节点
*/
/**
* city.replaceChild 代替节点
*/
* city.removeChild()---父亲杀
*/
// city.removeChild(bj);
bj.parentNode.removeChild(bj);//自杀
- 简便的添加东西
var tr=document.createElement('tr');
// 设置tr中的内容
tr.innerHTML=
'<td>'+name+'</td>'+
'<td>'+email+'</td>'+
'<td>'+salary+'</td>'+
'<td><a href="javascript:;">Delete</a></td>'
// 这里有问题
var a=document.getElementsByTagName('a')[0];
a.onclick=delA;
// 将tr装到table中
// 获取table
var showInformation=document.getElementById('showInformation');
showInformation.appendChild(tr);
- 使用dom操作css
<script type="text/javascript">
window.onload=function(){
// 点击按钮之后 修改box1的大小
var box1=document.getElementById('box1');
var btn01=document.getElementById('btn01');
btn01.onclick=function(){
/**
* 元素.style.样式名=样式值
* 在含有 - 的命名规范中 改用驼峰式写法
* background-color写成 backgroundColor
*
* 如果使用了!important js就无法修改
*/
box1.style.width='300px';
box1.style.backgroundColor='yellow'
}
}
</script>
- 读取元素的样式
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById('box1');
var btn01=document.getElementById('btn01');
btn01.onclick=function(){
box1.style.width='300px';
box1.style.backgroundColor='yellow'
// 再里面的可以读出来
// alert(box1.style.width);
/**
* 获取当前显示的样式 只能读不可以修改
* 元素.currentStyle.样式名
* tmd 除了IE都不支持
* 所以其他用 getComputedStyle(对象,null);
* 返回一个对象
*/
// alert(box1.currentStyle.backgroundColor)
// var obj=getComputedStyle(box1,null);
// alert(obj.width)
// alert(getComputedStyle(box1,null).width)
getStyle(box1,'width')
};
};
/**
* 想要两者兼容
* 参数 (obj(要获取元素),要获取元素的样式名)
*/
function getStyle(obj,name){
if(window.getComputedStyle){
alert(getComputedStyle(obj,null)[name])
}else{
alert(obj.currentStyle[name])
}
//一条语句方法
// return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
}
</script>
- 过去块的元素
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById('box1');
var btn01=document.getElementById('btn01');
var box4=document.getElementById('box4')
btn01.onclick=function(){
/**
* clientWidth
* clientHeight
* 可见高度和可见高度
* 属性都是不带px的 返回的是一个数字 可以直接进行计算
* 包括 内容区和内边距
* 不能修改
*/
// alert(box1.clientWidth)
/**
* offsetWidth
* offsetHeight
* 宽度高度---包括内容区 内边距 边框
*/
// alert(box1.offsetWidth)
/**
* offsetParent
* 获取当前定位父元素
* 最近开启定位的祖先元素
* 最上面的定位是body
*/
// var op=box1.offsetParent;
// alert(op.id)
/**
* offsetLeft
* 相对于定位元素的水平偏移量
* offsetTop
* 相对于定位元素的垂直偏移量
*/
// alert(box1.offsetTop)
/**
* box4.scrollHeight
* box4.scrollWidth
* 整个滚动区
*
* box4.scrollLeft
* box4.scrollTop
* 水平滚动条 垂直滚动条 滚动的距离
*/
// alert(parseInt(box4.scrollTop))
/**
* 判断滚动条是否已经到底了----这里有小数 计算结果不准确
* box4.scrollHeight-box4.scrollTop=box4.clienHeight---垂直
*
* box4.scrollWidth-box4.scrollLeft==box4.clienWidth---水平
*/
alert(box4.scrollWidth-box4.scrollLeft==box4.clienWidth)
};
};
</script>
- 事件对象
<script type="text/javascript">
window.onload=function(){//一定记得添加这个
var areaDiv=document.getElementById('areaDiv')
var showMsg=document.getElementById('showMsg')
// 字母要写正确
areaDiv.onmousemove=function(event){
// event是在页面操作的一些 鼠标 键盘等~~
event=event||window.event;
var x=event.clientX;
var y=event.clientY;
showMsg.innerHTML='x='+x+' y='+y;
}
}
</script>
- 冒泡事件
<script type="text/javascript">
window.onload=function(){
/**
* 冒泡(Bubble)---好似向水里投石 逐渐往外扩散
*/
var s1=document.getElementById('s1')
s1.onclick=function(event){
event=event||window.event
alert('我是span的单击响应函数')
/**
* 取消冒泡
* 对象.cancelBubble设置为true 即可取消冒泡
*/
event.cancelBubble=true;
}
var box1=document.getElementById('box1')
box1.onclick=function(){
alert('我是div的单击响应函数')
}
document.body.onclick=function(){
alert('我是body中的单击相应函数')
}
}
</script>
- 事件的委派
<script type="text/javascript">
window.onload=function(){
var ul=document.getElementsByTagName('ul')[0];
var btn=document.getElementById('btn');
btn.onclick=function(){
var li = document.createElement('li');
li.innerHTML='<a href="javascript:;" class="link">我是添加的超链接</a>'
ul.appendChild(li);
}
var allA=document.getElementsByTagName('a');
// for(var i=0;i<allA.length;i++){
// allA[i].οnclick=function(){
// alert('hello');
// }
// }
// 我们希望只绑定一次 添加之后也可以使用
/**
* 事件的委派 给祖先绑定了 根据冒泡 总会传到祖先元素
*/
ul.onclick=function(event){
// alert('我是ul的单击相应函数')
/**
* event中的target表示的触发事件的对象 触发的是我们期望的元素 就会执行
*/
if(event.target.className=='link'){
alert('我是ul的单击响应函数')
}
}
}
</script>
- 事件的绑定
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById('btn');
// btn.οnclick=function(){
// alert(1)
// }
// btn.οnclick=function(){
// alert(2)
// }
/**
* addEventListener(事件的字符串‘不要on’，回调函数‘事件触发时函数调用’，false‘通常’)
* 这个方法也可以为元素绑定响应函数
*/
// btn.addEventListener('click',function(){
// alert(1)
// },false)
// btn.addEventListener('click',function(){
// alert(2)
// },false)
// btn.addEventListener('click',function(){
// alert(3)
// },false)
/**
* attachEvent(事件的字符串‘要on’，回调函数‘事件触发时函数调用’)
* 在IE8中使用绑定事件
*/
// btn.attachEvent('onclick',function(){
// alert(1)
// })
// btn.attachEvent('onclick',function(){
// alert(2)
// })
// btn.attachEvent('onclick',function(){
// alert(3)
// })
bind(btn,'click',function(){
alert(this)
})
}
/**
* 定义一个函数 同意要绑定的事件
* obj 要绑定的对象
* eventStr 事件的字符串
* callback 回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容
obj.addEventListener(eventStr,callback,false)
}else{
// IE8及一下浏览器 this是谁由调用方法决定的
obj.attachEvent('on'+eventStr,function(){
// 在匿名函数中回调函数
callback.call(obj);
})
}
}
</script>
- 事件的传播
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById('box1')
var box2=document.getElementById('box2')
var box3=document.getElementById('box3')
bind(box1,'click',function(){
alert('我是box1的响应函数')
})
bind(box2,'click',function(){
alert('我是box2的响应函数')
})
bind(box3,'click',function(){
alert('我是box3的响应函数')
})
/**
* 捕获阶段
* 目标阶段
* 冒泡阶段
* 我们都不希望addEventListener在捕获阶段触发事件 所以第三个参数一般都是false
*/
}
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容
obj.addEventListener(eventStr,callback,false)
}else{
// IE8及一下浏览器 this是谁由调用方法决定的
obj.attachEvent('on'+eventStr,function(){
// 在匿名函数中回调函数
callback.call(obj);
})
}
}
</script>
- 滚轮事件
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById('box1');
/**
* onmousewheel 在火狐里面不支持它支持DOMMouseScroll
* 注意该事件用addEventListener来调用
*/
box1.onmousewheel=function(event){
event=event||window.event;
/** if(除了0都是可以向下运行)
* 目标
* 滚轮向上移动的时候 box1边段
* 滚轮向下移动的时候 box1边长
* 我们使用whellDelta来进行判断滚轮的方向
* chrom 中向上150 向下-150
* 上面的方法火狐里面不支持 所以用event.detail 来获取滚轮的方向
* 向上-3 向下3
*/
if(event.wheelDelta>0||event.detail <0){
box1.style.height=box1.clientHeight-10+'px'
}else{
box1.style.height=box1.clientHeight+10+'px'
}
/**
* 我们使用addEventListener绑定响应函数时 不可以用return false
* 所以使用event.preventDefault();取消默认行为
* 但是IE8不支持 用的话会报错 所以~~~~
*/
event.preventDefault||event.preventDefault();
// 当我们浏览器也有滚动条时 滚条也会随之滚动 我们用false取消浏览器的默认行为
return false
};
bind(box1,'DOMMouseScroll',box1.onmousewheel)
}
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容
obj.addEventListener(eventStr,callback,false)
}else{
// IE8及一下浏览器 this是谁由调用方法决定的
obj.attachEvent('on'+eventStr,function(){
// 在匿名函数中回调函数
callback.call(obj);
})
}
}
</script>
- 键盘事件
<script type="text/javascript">
window.onload=function(){
/**
* 键盘事件
* onkeyup 按下 不松手一直触发 刚开始慢 之后块
* onkeydown 松开
* 键盘事件一般使用对象为：具有焦点(文本框) document
*/
document.onkeydown=function(event){
/**
* altKey
* ctrlKey
* shiftKey
* 表示alt ctrl shift 是否被按下
*/
if(event.keyCode===89&&event.ctrlKey){
console.log('ctrl和y被按下啦')
}
}
// document.οnkeyup=function(){
// console.log('键盘松开了')
// }
// 获取input
var input=document.getElementsByTagName('input')[0];
input.onkeydown=function(event){
event=event||window.event;
if(event.keyCode>=48&&event.keyCode<=57){
alert('hello')
// 如果不想让输入某个数字就使用这个
return false
}
}
}
</script>
- 键盘控制
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById('box1');
var speed=10;
document.onkeydown=function(event){
event=event||window.event;
if(event.ctrlKey){
speed=500;
}else{
speed=10;
}
switch (event.keyCode){
case 37:
// alert('左')
box1.style.left=box1.offsetLeft-speed+'px';
break;
case 39:
// alert('右')
box1.style.left=box1.offsetLeft+speed+'px';
break;
case 38:
// alert('上')
box1.style.top=box1.offsetTop-speed+'px';
break;
case 40:
// alert('下')
box1.style.top=box1.offsetTop+speed+'px';
break;
}
}
}
</script>
- BOM浏览器对象模型
<script type="text/javascript">
/**
* BOM 浏览器对象模型
* Window-
* 代表整个浏览器的窗口 同时window也是网页中的全局对象
* Navigator-
* 代表当前浏览器的信息，通过此可以识别不同的浏览器
* Location-
* 代表浏览器的地址栏信息，通过Location可以过低地址栏信息，过着操作浏览器跳转页面
* History-
* 代表浏览器的历史记录 可以通过对象来操作浏览器的 历史记录---只有当前记录
* Screen-
* 代表用户的屏幕信息，可以获得显示器的相关消息
*/
// 测试Navigator
var ua=navigator.userAgent;
console.log(ua)
// if(/firefox/i.test(ua)){
// alert('你是火狐浏览器')
// }else if (/chrom/i.test(ua)){
// alert('你是chrome浏览器')
// }else if (/msie/i.test(ua)){
// alert('你是IE浏览器')
// }
/**
* 通过navigator.userAgent不可以判断IE了
* 使用ActiveXObject
*/
// if(window.ActiveXObject){
// alert('你是IE，浏览器')
// }else{
// alert('你不是IE~~')
// }
// alert('ActiveXObject' in window)
</script>
- history
<script type="text/javascript">
/**
* History控制向前向后翻页
*/
window.onload=function(){
/**
* length 属性用来获取访问链接数量
*/
// alert(history.length)
/**
* back() 回到上一个页面
* forward() 跳转到下一个页面
* go() 参数是1时相当于forward
* 参数是-1时相当于back()
*/
history.back();
history.forward();
}
</script>
- location
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById('btn');
btn.onclick=function(){
// alert(location)
// location='http://baidu.com';
/**
* location.assign 作用和直接修改 location一样
* location.reload(true) 和按下刷新按钮一样(强制刷新)
* location.replace() 一个新的页面替换当前页面 没有历史记录 不可以返回
*/
location.assign('http://baidu.com')
location.reload(true)
location.replace('http://baidu.com')
}
}
</script>
- 定时器调用
<script type="text/javascript">
window.onload=function(){
var count=document.getElementById('count');
/**
* 利用setInterval(回调函数，间隔时间)
* 返回值是一个Number类型的数据 这个数字作为定时器的唯一标识
*/
var num=1;
var timer=setInterval(function(){
count.innerHTML=num++;
if(num==11){
clearInterval(timer)//关闭定时器
}
},1000)
}
</script>
- 定时器练习（切换图片）
<script type="text/javascript">
window.onload=function(){
var photo=["img/01.png","img/02.png","img/03.png","img/04.png","img/05.png"];
var Gs=document.getElementById('Gs');
var index=0;
var timer;
// 用来开启定时器
var btn01=document.getElementById('btn01');
btn01.onclick=function(){
/**
* 每次点击相当于开启一个定时器 点的多开的多 并且我们只能关闭一个定时器
* 所以在开启之前先关闭一个定时器
*/
clearInterval(timer);
timer=setInterval(function(){
index++;
index %= photo.length;
Gs.src=photo[index];
},1000)
}
// 用来关闭定时器
var btn02=document.getElementById('btn02');
btn02.onclick=function(){
clearInterval(timer);
}
}
</script>
- 利用定时器取消延迟
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById('box1');
var dir=0;
var speed=10;
document.onkeydown=function(event){
event=event||window.event;
if(event.ctrlKey){
speed=500;
}else{
speed=10;
}
dir=event.keyCode;
}
setInterval(function(){
switch (dir){
case 37:
// alert('左')
box1.style.left=box1.offsetLeft-speed+'px';
break;
case 39:
// alert('右')
box1.style.left=box1.offsetLeft+speed+'px';
break;
case 38:
// alert('上')
box1.style.top=box1.offsetTop-speed+'px';
break;
case 40:
// alert('下')
box1.style.top=box1.offsetTop+speed+'px';
break;
}
},30)
}
</script>
- 延时调用
<script type="text/javascript">
window.onload=function(){
var num=1;
// setInterval(function(){
// console.log(num++);
// },1000)
/**
* 延时调用 只执行一次
* 定时调用 一直执行
* 两者可以互相代替
*/
var timer=setTimeout(function(){
console.log(num++);
},1000)
clearTimeout(timer)
}
</script>
- 轮盘图
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 可见边框 */
#outer{
width: 680px;
height: 680px;
margin: 10px auto;
background-color: yellowgreen;
padding: 10px 10px;
position:relative;
overflow: hidden;
}
/* ul 里面有图片(li) */
#imgList{
list-style: none;
position: absolute;
/* left: -1360px; */
}
/* li 中有每一个图片 */
#imgList li{
padding: 0 0 0 15px;
float: left;
}
/* 地下的每个超链接 */
#navDiv{
position: absolute;
top: 670px;
/* 这个在js中设置left的值 让他居中
(总长度为680px-div块的长度55*5)/2
*/
/* left: 202px; */
}
/* 每一个超链接 */
#navDiv a{
width: 25px;
height: 25px;
background-color: #FF0000;
margin: 0 15px;
opacity: 0.5;
/* 兼顾IE浏览器 设置透明度*/
filter: alpha(opacity=50);
float: left;
}
</style>
<!-- 引入移动工具 -->
<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
// 获取最大的div
var outer=document.getElementById('outer');
//获得ul
var imgList=document.getElementById('imgList');
// 获得<li>
var imgArr=document.getElementsByTagName('img');
// 设置ul的宽度
imgList.style.width=imgArr.length*690+'px';
// 设置单行条居中
var navDiv=document.getElementById('navDiv');
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+'px'
// 设置默认选中效果---获取所有的a
var index=0;
var allA=document.getElementsByTagName('a');
allA[index].style.backgroundColor='black'
// 点击那个图片就跳转到那个图片里面
for(var i=0;i<allA.length;i++){
/**
* 在点击的时候for循环就已经执行完了
* 所以设置一个存放i的地方 添加一个属性
*/
allA[i].num=i;
allA[i].onclick=function(){
// alert(this.num)
// 点击图片的时候停止 轮盘图
clearInterval(timer)
index=this.num;
// imgList.style.left=index*-680+'px';//用下面的函数代替
move(imgList,index*-680,50,'left',function(){
autoChange();
})
// 设置a的样式
setA();
}
}
// 自动切换图片
autoChange();
// 专门创建一个函数来设置a的样式
function setA(){
// 判断当前索引是不是最后一张图片
if(index>=imgArr.length-1){
index=0;
// 此时显示的是最后一张图片 和第一张一摸一样 通过修改css 来进行改变
imgList.style.left=0;
}
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor='';
}
allA[index].style.backgroundColor='black';
}
var timer;
// 自动切换图片
function autoChange(){
// 开启一个定时器进行自动切换图片
timer=setInterval(function(){
// 让索引自增
index++;
index %=imgArr.length;
move(imgList,index*-680,50,'left',function(){
setA();
})
},2000)
}
}
</script>
</head>
<body>
<!-- 创建一个大容器 -->
<div id="outer">
<!-- ul放置图片 -->
<ul id="imgList">
<li><img src="img/01.png" ></li>
<li><img src="img/02.png" ></li>
<li><img src="img/03.png" ></li>
<li><img src="img/04.png" ></li>
<li><img src="img/05.png" ></li>
<li><img src="img/01.png" ></li>
</ul>
<!-- 创建导航条 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
- 类的操作
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: yellow;
}
.b2{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var btn01=document.getElementById('btn01');
var box=document.getElementById('box');
btn01.onclick=function(){
// 这样太慢
// box.style.backgroundColor='black';
// box.style.width='300px';
// box.style.height='300px';
/**
* 类的操作 对象.className=‘类名字’ 进行修改
*/
toggleClass(box,'b2');
}
}
</script>
</head>
<body>
<button id="btn01">点我变形</button>
<div id="box" class="b1 b2">
</div>
</body>
</html>
用到的连个工具
/**
*创建一个定时器，可以执行简单的动画函数
* obj 对象
* target：执行的目标
* speed 移动速度
* attr：要操作的样式
* callback 传进去一个回调函数
*/
function move(obj,target,speed,attr,callback){
clearInterval(obj.timer)
// 过去当前元素的目标位置
var current=parseInt(getStyle(obj,attr));
// 让传进来的都是正值
if(current>target){
speed=-speed
}
obj.timer=setInterval(function(){
var oldValue=parseInt(getStyle(obj,attr));
var newValue=oldValue+speed;
if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
newValue=target;
}
obj.style[attr]=newValue+'px'
if(newValue==target){
clearInterval(obj.timer);
// callback();
// 你要是不传参数就别调用这个函数
callback&&callback();
}
},30)
}
/**
* 想要两者兼容
* 参数 (obj(要获取元素),要获取元素的样式名)
*/
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}else{
return obj.currentStyle[name]
}
//一条语句方法
// return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
}
// 类的增加删除
/**
* 创建一个函数进行添加 类 样式
*/
function addClass(obj,cn){
if(!haveClass(obj,cn)){
obj.className +=' '+cn;
}
}
/**
* 判断是否有这个类
*/
function haveClass(obj,cn){
var reg=new RegExp('\\b'+cn+'\\b');
return reg.test(obj.className);
}
/**
* 删除一个类
*/
function removeClass(obj,cn){
var reg=new RegExp('\\b'+cn+'\\b');
obj.className=obj.className.replace(reg,'');
}
/**
* 综上 特别好的方法 有就删除 没有就添加
*/
function toggleClass(obj,cn){
if(haveClass(obj,cn)){
removeClass(obj,cn)
}else{
addClass(obj,cn);
}
}
6121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
