js基础笔记
基本数据类型
- number
- string
- boolean
- null
- undefined
- object
强制类型转换
toString();
var a= 123;
a= a.toString();
复制代码
- toString 是转换成字符串，而不是本身的值改变。
- NaN和Undefined没有这个方法，要直接调用String方法。
String(NaN);
转换为number
-
string->numberjavascript
- "123"能够转换为123；
- "abc"装换为NaN；
- 空值或者空格转换为0
- parseInt();
- "123px"->123
- 123.648px->123
- a123->NaN
- parsFloat();
- 123.648px->123.648
- 123.456.789->123.456
-
NUll->numbercss
- 0
隐式类型转换
全部的非number进行运算，会将这些值转换为number再运算。html
- 任何值和NaN运算都是NaN。
"123"+"456"=123456若是对两个字符串相加会拼串。- 任何值和字符串相加都会转换为字符串。
- 将数字转换为字符串经常使用
c=c+" "
- 除了字符串加法，其他都转化为number。
->boolean（其余语言转换不了，只有js能够）
调用boolean（）方法。
复制代码
- 数字 0和NaN是false，其余都是ture。
- 字符串 空串是fasle 其余都是ture
- null fasle
- undefined fasle
- 对象 ture
运算符（也叫操做符）
- typeof的返回值是string
- 对于和字符串相加，都会转换为字符串进行相加。
- 除了上边这种状况，其余都是转换为数字进行计算。
- undefined ->NaN
- 2*null=0
- 能够利用这个作隐式类型转换。
+0 -0 *1 /1
一元运算符
-
正号 +java
- 隐式转换 +字符串转换为number
1 + +'2'+3 =>6
- 隐式转换 +字符串转换为number
-
负号node
- 就是取反
自增
- 自增 a++；
- 会影响原变量。
- a 是一个变量 a++是一个表达式，这两个不是一个东西。 变量有变量的值，表达式有表达式的值。 a++等于自增之前的值。++a是新值。
d=20;
d=d++
复制代码
分析：d=d++先执行等号后边的运算。d++是20;d是21;,而后再赋值给前边的d。因此最后的d是20;android
逻辑运算符
- ！非运算
- 对非boolean取反 ，先转换，再取反。
- 两次取反，隐式类型转换为boolean
- && 与运算
- 两端都是ture，返回ture。
- js中是短路的与，若是第一个是fasle则直接不继续判断了。
false && alert('哈哈哈');哈哈哈就不会显示。
- || 或
- 只要有一个ture就返回ture。
- 或也是短路的。
- 非boolean值
- 先将他转换为boolean，再运算，并返回原值。
- 与 &&
- 第一个为ture，直接返回第二个值，跟断路有关系。
- 第一个为fasle，直接返回第一个。
- 两个有false，返回前边的值。
- 或 ||
- 第一个为ture，直接返回第一个。
- 第一个为fasle，直接返回第二个。
比较运算符
- 字符串和字符串相比较是比较Unicode编码，一个一个比较。
- 其余状况是转换为数字进行比较。
- NaN不等于任何数，包括他本身
- 判断一个值是否是NaN要用isNaN（）函数来判断。
- ！== 这个是非全等
优先级
- && 比 || 的优先级高
判断
提示框
- prompt() 弹出带输入框的提示框。并把输入的值返回。
var a = prompt("请输入内容");
if判断语句
没啥写的 就正常正则表达式
switch语句
switch(a){
case 1:语句1;
case 2：语句2;
case 3:语句3;
default: 语句4;
}
复制代码
a等于的话，输出语句2和语句3和语句4;想要只执行语句2，就在后边加上break;json
循环
- 向页面中输出：document.write("内容");
- while(){} 先判断后执行。
- do ... while 先执行 后判断。保证至少执行一次。
- for循环
for(初始化;条件;更新表达式){
}
复制代码
质数练习
用根号算。Math.sqrt(i);数组
输出99乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+'*'+i+'='+i*j);
}
document.write("<br/>");
}
复制代码
break和continue
不能在单独if中使用。浏览器
- break退出当前循环
- continue 跳过当次循环
- 能够为循环语句建立一个label来标志当前循环。
outer:
for(var i=1;i<5;i++){
console.log("外层循环"+i);
break outer;
//continue outer;效果同样;
console.log("内层循环");
}
复制代码
程序计时器
console.time('test'); console.timeEnd('test');
对象Object
- 基本数据类型都是单一的值
- 值和值之间没有任何联系
- 对象属于复合数据类型，
- 对象的分类
- 内建对象
- ES标准中定义的对象（目前主要指由浏览器提供的对象）。
- 好比Math String Boolean Function Object ...
- 宿主对象
- 由js的运行环境提供的对象，主要指路蓝旗提供的对象
- BOM DOM
- 自定义对象
- 内建对象
对象
- 建立对象
var obj = new Object();- 对象的属性名随便用，不遵照标志符的规范。
- 可是尽可能遵照。
- obj.123会报错。采用
obj["123"]=789;取数据的时候也这样console.log(obj["123"]); - 中括号方式更加灵活，能够传变量。
- 读取对象
console.log(obj.name);- 读取没有的属性，会返回undefined;
- 修改
- obj.name= "tom";直接改就行;
- 删除
- delete obj.name;
- in 运算符
- 检查一个对象中是否含有指定的属性，（对象中没有，原型中有的话也会返回true）返回true或fasle。
console.log("test2" in obj);
- 检查一个对象中是否含有指定的属性，（对象中没有，原型中有的话也会返回true）返回true或fasle。
基本数据类型和引用数据类型
- 基本数据类型
- 直接保存在栈内存中，每一个值修改不互相改变值。
- 直接保存在栈内存中，每一个值修改不互相改变值。
- 对象
- 保存在堆内存中
- 每建立一个新的对象，
- 对象保存的是地址。
- 保存在堆内存中
字面量方法
函数
- 判断数字是否是偶数
function isOu(){
return num%2==0;
//这个式子的返回值就是ture或者fasle，因此能够直接写return。
}
复制代码
- console.time函数
console.time('jishi');中间写运行的函数，console.timEnd('jishi');最后输出所用时间。 - 函数返回值类型 返回值是任意类型。包括函数和对象。
当即执行函数
- 调用一次就不用了。
function(){};像这样的匿名函数直接调用会报错，在外边加一个（）就不会报错了。- 要想调用要这样写
(function(){ alert('我是当即调用函数'; })(); 复制代码
方法
若是一个函数做为一个对象的属性值，那么这个函数是这个函数的方法。 调用函数就是调用函数的方法。
枚举对象中的属性
for in语句
var obj = {
name : 'xiaolu';
age : '18';
add:'songlanbao';
}
for(var n in obj){
//每次执行时，会将对象中的一个属性的名字赋值给变量n。
console.log(obj[n]);
//此处不能写 console.log(obj.n);由于obj吗没有n这个属性，这样写会输出undefined
};
复制代码
做用域
- 一个变量的做用的范围
- js中分为全局和局部做用域
- 全局做用域 在页面打开时建立，关闭时销毁。
- 全局对象window能够直接使用。
- 在全局做用域中，建立的变量都会做为window的属性保存。
var a=1;console.log(window.a); - 建立的函数都会做为window的方法保存。
- 在全局做用域中，建立的变量都会做为window的属性保存。
变量的声明提早
全部被var关键字生命的变量，会在全部的代码以前被声明，可是不会赋值。
变量寻找规则
- 先在当前做用域寻找，若是没有则向上一级寻找，再没有就再向上找，若是一直找到全局做用域没找到，就报错。
ReferenceError - 若是就想用全局的就写
window.a就是全局的。
var a = 1;
function fun(){
console.log(a);
// var a = 2;
}
fun();
复制代码
上边代码没有注释的话就是undefined，有注释就是1，由于没有注释的时候是声明提早，有注释的时候就是向外寻找变量。
- 函数声明也会在全部代码以前进行声明，跟var似的。
var a = 1;
function fun(){
console.log(a);
a = 2;
}
fun();
console.log(a);
复制代码
在函数中没有写var直接给a赋值，就是给全局做用域赋值，最终输出为1和2。
var e = 23;
function fun2(e){
//var e;
alert(e);
}
fun2();
复制代码
定义形参就至关于在函数中声明变量，因此上边的代码输出undefined
函数做用域
- 调用函数的时候建立函数做用域，函数执行完毕后，函数做用域销毁。
- 每调用一次函数，就会建立一个函数做用域。他们相互独立。
- 函数做用域能够访问全局做用域，可是全局做用域没法访问函数做用域。
debug
60集 火狐脚本调试
this
使用工厂方式建立对象
function creatperson(name,age,gender){
var obj = new Object();
obj.name= name ;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
return obj;
}
var obj1=creatperson("swk",18,'nan');
console.log(obj1);
复制代码
输出:
构造函数(难点)
- 使用工厂方法建立的对象都是Object类型,致使没法区分出多种类型的对象，（例如：狗和人都是object，用的时候很差区分。）
- 构造函数建立的对象就是你起的名字。
function creatperson(name,age,gender){
var obj = new Object();
obj.name= name ;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
return obj;
}
var obj1=creatperson("swk",18,'nan');
console.log(obj1);//输出的object
function Persion(name,age,gender){
this.name = name;
this.age = age;
this.geder = gender;
this.sayName = function(){
alert(this.naem);
};
}
var per1 = new Persion('xiaolu',18,'man');
console.log(per1);//输出的是Persion
复制代码
- 构造函数首字母大写
- 经过instanceof能够检查一个对象是不是一个类的实例。
对象 instance 构造函数 - 构造函数执行流程
- 马上建立一个新的对象
- 将新建的对象设置为函数中this，在构造函数中可使用this来引用新建的对象
- 逐行执行函数中的代码
- 将新建的对象做为返回值返回
- 使用用一个构造函数建立的对象，咱们称为一类对象，也将一个构造函数称为一个类，咱们将经过一个构造函数建立的对象，称为是该类的实例。
- this的状况
- 当以函数调用的时候，this是window
- 当以方法调用时，谁调用方法this就是谁
- 构造函数 this就是新建立的对象
构造函数修改
构造函数每次调用都会建立一个空间，很占内存，给他弄成全局的函数，就不会每次都建立了，每次调用就行啦。以下所示：
function Persion(name,age,gender){
this.name = name;
this.age = age;
this.geder = gender;
// this.sayName = function(){
// alert(this.naem);
// };
this.sayName = fun;
}
function fun(){
alert("hello，我叫"+this.name);
}
var per1 = new Persion('xiaolu',18,'man');
per1.sayName();
复制代码
原型对象prototype
上边的方法虽然解决了很占内存的弊端，可是声明的一个全局变量，这样之后若是也建立一个一样名字的函数的时候，就会覆盖掉这个。因此引出了原型对象来解决这个问题。
- 咱们建立的每个函数，解释器都会向函数中添加一个属性prototype，
- 这个属性对应着一个对象，这个对象就是咱们所谓的原型对象。
- 若是函数做为普通函数调用prototype没有任何做用
- 以构造函数的形式调用的时候，能够经过
__proto__来访问该属性 - 当咱们访问对象的一个属性或者方法时，他会先在对象自身中寻找，若是有则直接使用，若是没有则会去原型对象中寻找，若是找到就直接使用。没有找到的话继续找原型的原型，再没有就再找，这个有几层不必定，看你的函数是怎么写的了，通常状况下是两层 直到找到object的原型，若没有找到就返回undefined object的原型是null，至关于没有原型
- 之后咱们建立构造函数时，能够将这些对象共用的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每个对象添加，也不会影响到全局做用域，就可使每一个对象都具备这些属性和方法了。
has OwnProperty()来检查对象自身中是否含有某个元素，不包括原型中的对象。（和 in 运算符做比较）。返回true fasle
function Persion(name,age,gender){
this.name = name;
this.age = age;
this.geder = gender;
// this.sayName = function(){
// alert(this.naem);
// };
// this.sayName = fun;
Persion.prototype.sayName=function(){
alert("hello，我叫"+this.name);
}
}
// function fun(){
// alert("hello，我叫"+this.name);
// }
var per1 = new Persion('xiaolu',18,'man');
per1.sayName();
复制代码
toString
console.log(per);展现的是per的toString方法。会显示[object object] 没法复现。难受。
垃圾回收（GC）（概念）
- 当一个对象没有任何变量或者属性对它进行引用，此时咱们没法操做该对象。该对象就成为一个垃圾。垃圾多了就会占用内存空间，致使程序运行变慢。
- js中有自动垃圾回收机制，会自动将这些垃圾从内存中销毁
- 咱们只须要将再也不使用的对象设置为null便可。
数组
-
数组也是对象
-
数组的存储性能比普通对象好
-
读取不存在的数组回返回undefined
-
获取数组的长度
- length返回最大索引值+1（非连续的数组回不知道有多少位）。
- 修改长度 length=10; (若是改的数比以前的小，则把最后觉得截没)
-
想数组最后添加元素
arr[arr.length]=10; -
建立数组
var arr = new Array(10,20,30);- 字面量方法
var arr = [1,2,3]; - 注意：
- 当
var arr = new Array(10);表明的是建立的数组中有10个元素，都是空， var arr= [10];表明的是数组中有一个元素 10
- 当
-
数组的方法
- push（）向数组末尾添加一个或多个元素，返回新数组的长度。
arr.push(1,2,3); - pop() 删除数组最后一个元素，并返回删除的元素。
arr.pop() - unshfit() 向数组开头添加一个或多个元素，返回新数组的长度
- shift（）删除数组第一个元素，返回删除的元素
- push（）向数组末尾添加一个或多个元素，返回新数组的长度。
-
数组的遍历 for循环（略）
- forEach方法（ie8以上）
- 须要函数做为参数
- 像这种函数，由咱们建立可是不禁咱们调用的，咱们称为回调函数。
- 数组中有几个元素就会循环几回。
- 回调函数中会传递三个参数：
- 当前正在遍历的元素
- 当前索引
- 就是整个数组。
var arr = ['swk','zbj','shs']; arr.forEach(function(a,b,c){ console.log(a); console.log(b); console.log(c); }); 复制代码结果：
- forEach方法（ie8以上）
-
slice(start，end)
- 截取数组中指定的元素
- 不改变原数组
- 参数
- 包括开始的索引
- 不包括结束的索引
- 第二个参数能够省略不写，表示截取以后的全部。
- 若是是负值，就是从后往前数
-
splice ()
- 删除数组中指定的元素
- 改变原数组
- 参数
- 开始位置的索引
- 删除的数量
- 第三个参数 传进来新元素，放在删除的元素那里。能够第二个参数写0，直接插入新的元素。
-
练习去除数组中重复的数据。
-
concat（）
- 链接两个或多个数组，返回新数组
- 不改变原数组
-
join（）
- 将数组转换为字符串
- 不改变原数组
- join中能够指定一个字符串做为链接符。（不指定的话默认为
，）
-
reverse()
- 反转数组
- 改变原数组
-
sort（）
- 对数组中的元素进行排序
- 改变原数组，按照unicode进行排序，排序数字的时候回出现错误，因此要写回调函数。
- 回调函数：系统自动调用的函数叫回调函数
- sort的回调函数是传入两个值，若是返回值>1就交换位置。
var arr = [1,2,22,3,4,11]; arr.sort( function(a,b){ return a-b; } ); console.log(arr); 复制代码 -
函数对象的方法
- call()和apply()
-
arguments
- 是一个类数组对象
- 判断是否是数组用判断或者
Array.isArray(arguments) - 调用函数时，咱们所传递的实参保存在arguments中。
- 有个callee的属性，返回函数对象
-
Date对象
- 当前时间
var d = new Date(); - 指定时间
var d2 = new Date("12/03/2019 11:10:30"); - getDate() 几日
- getDay 周几 0为周日
- getTime（） 1970.1.1 到当前的毫秒数
- 当前时间
-
Math
- 不是构造函数，不用建立对象，是工具类，拿过来直接用。
- abs（） 绝对值
- ceil() 向上取整
- floor()向下取整
- round（）四舍五入
- round（） 生成随机数0-1
- 生成 x-y的随机数？
- max() 取最大值
- min() 最小值
- pow(x,y) x的y次幂
- sqrt() 开方
-
包装类
- 浏览器底层本身用的，开发的时候不会用，目的是临时将基本数据类型转换为对象，就能够给基本数据类型加属性了，好比
num.tostring();
- 浏览器底层本身用的，开发的时候不会用，目的是临时将基本数据类型转换为对象，就能够给基本数据类型加属性了，好比
-
字符串相关方法
- 字符串是以数组的形式存放的，因此数组能用的属性他都能用。
str.charAt(2);取下标为2的字符 至关于str[6];charCodeat(2);返回unicode编码String.formChartCode（）根据字符编码获取字符(经过string函数调用，特殊)- concat（） 字符串拼接
- indexOf（）
- 检索一个字符串中有没有指定内容，返回第一次出现的索引，没有找到返回-1
- 第二个参数是从第几个开始数。
- lastIndexOf（） 从后往前找
- slice（） 和数组同样，包括开始，不包括结束。
- substring() 和slice相似，
- 不能传负数 写负数至关于0
- 自动会把数组的参数从小到大排。
- sunstr（） 不建议使用 第一个参数是开始位置，第二个是截取的长度。
- aplit() 拆分字符串为数组，参数写根据什么拆。
- toUpperCase() 转为大写
- toLowerCase() 转为小写
-
正则表达式
- 用于定义字符串规则，检查一个字符串是否符合规则。
- 建立正则表达式对象
var reg = new RegExp("正则表达式","匹配模式");var reg = /正则表达式/匹配模式;
- 匹配模式为
- i 忽略大小写
- g 全局匹配
- 使用reg.test(arr);来检查arr这个字符串是否符合reg这个正则
|表示或/a|b/a或b[]/[a-z]/也是或的意思/[A-z]/表示任意字母/a[bde]c/abc.adc.aec/[^ac]/除了ac/[^0-9]/除了数字
- 字符串和正则相关的方法
- splice()
- 拆字符串为数组
var arr = "1a2b3c4d5f6g7h"; var result = arr.split(/[A-z]/); console.log(result);//["1", "2", "3", "4", "5", "6", "7", ""]; 复制代码- search() 字符串中是否含有指定的内容。返回第一次出现的索引。
search(/a[bef]c/);查找有没有abc或aec或afc 即便设置全局匹配也没用。只能返回找到的第一个。match(/[a-z]/ig)提取符合要求的字符。- 默认状况只会找到第一个
- 把正则写成全局匹配模式，就会找全。
- 返回值为数组
replace('旧值'，'新值');将字符串中指定内容替换为新内容。默认只替换第一个。repace(/[a-z]/ig,"-");
- splice()
- 经过量词设置出现的次数。
/a{3}/; /ab{3}/三个b/ab{1,3}c/ac中间有1到3个b就行（含1和3）/ab{3,}c/ac中间有3次以上b。+表示至少一个*有没有都行至关于{0,}?0个或者1个 {0,1}^表示是否开头（注意和中括号中的区分）/^a/$表示结尾/a$//^abc$/同时使用，要求必须彻底符合。/^a|a$/表示a开头或者a结尾- 手机号练习
var phone = "13681234560"; var reg = /^1[3-9][0-9]{9}$/; result = reg.test(phone); console.log(result); 复制代码- 检查字符串是否是有
. /./.表示任意字符- 转义字符
\- 字面量方法：
/\./ - 构造函数方法:
reg = new regExp("\\.");要写两个\,由于字符串中的\也是转义字符。
- 字面量方法：
\w字母数字下划线\W除了字母数字下划线\d数字\s空格\b单词边界/\babc\b/用于检测abc是独立单词，若是是sdabcsd就错了。- 练习去除开头和结尾的空格
var arr4 = " aaa aa "; console.log(arr4); result = arr4.replace(/^\s*|\s*$/,""); console.log(result); 复制代码- 电子邮件练习 fasdf.12324_fasd@fsdf.com
- 任意数字字母下划线
\w+ .和任意字母下划线。\.[A-z0-9]- @
@ - 任意字母
[A-z]* .和任意字母\.[A-z]*$/^\w*(\.[A-z0-9])*@[A-z0-9]*(\.[A-z]+){1,2}$/
- 任意数字字母下划线
DOM
事件
就是用户和浏览器之间的交互行为。
两种方法：
1. 直接在HTML中写属性。
2. 分离出来在js中写。
复制代码
文档的加载
自上而下的加载。
能够用`window.onload=function(){}`来绑定页面加载完成后再执行js代码。
复制代码
dom 的方法
- getElementById();
返回元素 - getElementsByTagName() 返回数组
- getElementsByName() 返回数组
- innerHTML 用于获取元素内部的html代码，若是元素没有内部，那就无法获取。eg：input是自结束标签，他就没有。想要获取元素中的属性，直接元素.属性名。
- 由于class是保留关键字，因此不能.class要用className。
- 练习图片切换
<style>
div {
width: 500px;
height: 332px;
margin: 0 auto;
}
div:nth-child(2) {
float: right;
}
</style>
<script>
window.onload=function(){
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var img = document.getElementById("img");
var index = 1;
next.onclick = function(){
index++;
if(index>5){
index=1;
}
img.src = "./img/"+index+".jpg";
}
prev.onclick = function(){
index--;
if(index<1){
index=5;
}
img.src = "./img/"+index+".jpg";
}
}
</script>
</head>
<body>
<div>
<img id="img" src="./img/1.jpg" alt="">
</div>
<div>
<button id="prev">
<
</button>
<button id="next">
>
</button>
</div>
</body>
复制代码
-
获取元素节点的子节点
- getElrmentsByTagName() 获取当前节点的指定标签名后代节点。
- childNodes 表示当前节点的全部子节点。没有括号会获取文本节点、空格、回车。ie8不会将空白当成子节点
- firstChild 第一个子节点 会将空白当成子节点 返回text
- firstElementChild 不会获取空白。ie8不支持
- lastChild 最后一个子节点
-
获取父节点和兄弟节点
- parentNode 父节点
- previousSibling 前一个兄弟节点
- nextSibling 后一个兄弟节点
- innerText 获取元素中的text文本内容
<script type="text/javascript">
function Myclick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
window.onload =function(){
//定义通用点击函数
//查找#bj节点
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var beijing = document.getElementById("bj");
alert(beijing.innerHTML);
}
//查找全部li节点
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
}
//查找name=gender的全部节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
var gender = document.getElementsByName("gender");
for(var i=0;i<gender.length;i++){
console.log(gender[i].value);
}
}
//查找#city下全部li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
var city = document.getElementById("city");
var citylis = city.getElementsByTagName("li");
for(var i=0;i<citylis.length;i++){
console.log(citylis[i]);
}
}
//返回#city的全部子节点
var btn05 = document.getElementById("btn05");
btn05.onclick= function(){
var city = document.getElementById("city");
console.log(city.childNodes);
}
//返回#phone的第一个子节点
var btn06 = document.getElementById("btn06");
btn06.onclick=function(){
var phone = document.getElementById("phone");
console.log(phone.firstChild);
console.log(phone.firstElementChild);
}
//返回#bj的父节点
Myclick("btn07",function(){
var beijing = document.getElementById("bj");
console.log(beijing.parentNode);
});
//返回#android的前一个兄弟节点
Myclick("btn08",function(){
var android = document.getElementById("android");
console.log(android.previousSibling);
console.log(android.previousElementSibling.innerText);
});
//读取#username的value属性值
Myclick("btn09",function(){
var username = document.getElementById("username");
console.log(username.value);
//设置#username的value属性值
});
Myclick("btn10",function(){
var username = document.getElementById("username");
//设置#username的value属性值
username.value = "hello world";
console.log(username.value);
});
//返回#bj的文本值
Myclick("btn11",function(){
var beijing = document.getElementById("bj");
console.log(beijing.innerHTML);
console.log(beijing.firstChild.nodeValue);//这种麻烦
});
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪一个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操做系统是?
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找全部li节点</button></div>
<div><button id="btn03">查找name=gender的全部节点</button></div>
<div><button id="btn04">查找#city下全部li节点</button></div>
<div><button id="btn05">返回#city的全部子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
复制代码
dom 的增删改
- removeChild() 删除子节点
父节点.removeChild("要删除的节点") - creatElement()
document.creatElement()建立元素节点,参数是 标签名 将建立好的对象返回 - createTextNode()
- appendChild() 把新的子节点添加到指定节点
父节点.appendChild(子节点); - insertBefore() 在指定的子节点前面插入新的子节点
父节点.insertBefore(新节点,旧节点); - repalceChild() 替换子节点
<script type="text/javascript">
window.onload = function() {
//建立一个"广州"节点,添加到#city下
myClick("btn01",function(){
var li = document.createElement("li");
var gz = document.createTextNode("广州");
// console.log(li.append("广州"));
li.append(gz);
document.getElementById("city").append(li);
// 简便方法（利用innerHtml）可是原理是先删除后增长，若是其中的元素绑定了元素，那么绑定就会失效。
document.getElementById("city").innerHTML += "<li>广州</li>";
// 折中方法
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);
});
//将"广州"节点插入到#bj前面
myClick("btn02",function(){
var li = document.createElement("li");
var gz = document.createTextNode("广州");
li.append(gz);
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.insertBefore(li,bj);
});
//使用"广州"节点替换#bj节点
myClick("btn03",function(){
var bj = document.getElementById("bj");
var li = document.createElement("li");
var gz = document.createTextNode("广州");
var city = document.getElementById("city");
li.append(gz);
city.replaceChild(li,bj);
});
//删除#bj节点
myClick("btn04",function(){
var bj = document.getElementById("bj");
var city = document.getElementById("city");
// city.removeChild(bj);
// 自杀方法
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
var city = document.getElementById("city");
console.log(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06",function(){
var bj = document.getElementById("bj");
var city = document.getElementById("city");
bj.innerHTML = "京北";
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
复制代码
dom 的添加删除记录
例子：
- 看结构，知道要删除的是tr
- 找delete和tr的关系 tr是delete的爷爷
- 找到tr
- tr.parentNode.removeNode(tr) 完成删除
- confirm(""); 带取消和肯定的弹窗。
<script type="text/javascript">
window.onload=function(){
var allA = document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++){
allA[i].onclick = function(){
var tr = this.parentNode.parentNode;
var name = tr.firstElementChild.innerText;
if(confirm("确认删除"+name+"么？")){
tr.parentNode.removeChild(tr);
}
return false;//取消默认返回值
};
};
};
</script>
复制代码
添加信息：
- 获取提交按钮
- 获取三个文本框
- 添加到tr中
var addEmpButton = document.getElementById('addEmpButton');
addEmpButton.onclick= function(){
var empName = document.getElementById("empName");
var email = document.getElementById("email");
var salary = document.getElementById("salary");
var employeeTable = document.getElementById("employeeTable");
var tr = document.createElement("tr");
console.log(empName);
tr.innerHTML="<td>"+empName.value+"</td>"+
"<td>"+email.value+"</td>"+
"<td>"+salary.value+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
复制代码
- 函数执行顺序问题
<script>
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert("for循环"+i);
lis[i].onclick = function(){
alert("响应函数"+i);
};
};
</script>
复制代码
先执行for循环，执行完了，再执行相应函数，相应函数无论怎么点击都是只显示 3 。
dom操做内联样式（css）
- 修改语法：
元素.style.样式名 = 样式值;
- css中有
-，这在js中不合法，要改成驼峰命名，eg:background-color => backgroundColor - 这个方法改的是内联样式。
- 若是在样式中写了！important ，用js就不能覆盖这个啦。因此尽可能不要加！important。
- 读取元素样式
- 读取内联样式
元素.style.样式名 - 读取当前显示的样式
元素.currentStyle.样式名只有ie支持- 没有设置width的时候返回width会是auto；
getComputedStyle(要获取样式的元素,传递伪元素（通常写null））ie9以上 返回对象- 获取的时候用返回的对象.属性
- 没有设置width的时候返回width是真实的宽度。
- 以上两种方法读取的样式是只读的，不能修改。修改只能经过style。
- 兼容性问题
- 由于ie8和其余的不同。因此写一个判断，若是有getComputedStye的话就运行，若是没有的话就用currentStyle来运行。
if(window.getComputedStyle){ //此处的这个window必需要加 var width = getComputedStyle(obj,null).width; }else{ var width = currentStyle.width; }; 复制代码- window要加的缘由：若是不加window那么这个getComputedStyle是个函数，若是找不到这个函数那就会报错，他以后的代码都不会执行了，若是加上window那这个个getComputedStyle就是一个属性，若是找不到的话就会返回undefined。
- 读取内联样式
dom 其余样式相关的属性
如下属性得返回值都不带px
- clientWidth、clientHeight 获取的是可见宽高，不带px，返回（内容区+内边距）。
- offsetWidth、offsetHeight获取整个的宽度，包括内外边距和边框。
- offsetParent 获取离当前元素最近的开启了定位的父元素
- offsetLeft offsetTop 当前元素相对于其定位元素的水平\垂直偏移量
- scrollHeight 获取整个滚动区域的高度。包括被overflow:hidded藏起来的。
- scrollLeft 获取水平滚动条滚动的距离。
- scrollHeight - scrollTop == clientHeight 时说明滚动条到底啦. eg:
<script>
var p = document.getElementById("p");
p.onscroll=function(){
var c = document.getElementById("c");
if(p.scrollHeight-p.scrollTop == p.clientHeight){
c.disabled = false;
};
c.onclick=function(){
if(c.checked){
var z = document.getElementById("z");
z.disabled = false;
}
};
};
</script>
复制代码
事件对象
eg：显示鼠标的坐标
<script>
var area = document.getElementById("area");
var show = document.getElementById("show");
area.onmousemove=function(e){
var x = e.clientX;
var y = e.clientY;
show.innerHTML = "X:"+x+" Y:"+y;
};
</script>
复制代码
- onmousemove 鼠标移动
- 事件对象
- 当函数响应函数触发时，浏览器每次都会将一个事件对象最为实参传递进响应函数，在事件对象中封装了当前事件的一切信息。
- clientX 获取鼠标指针的水平坐标
- IE8中，响应函数被触发时，浏览器不会传递事件对象，他是将对象做为window对象的属性保存的。用
window.e,- 解决办法1：在前边加一个判断，
if(!e){e=window.e;} - 解决办法2: 在前边加上
e = e || winsow.e;
- 解决办法1：在前边加一个判断，
div跟随鼠标移动
<style>
#box{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
document.onmousemove=function(e){
var left = e.clientX+"px";
var top = e.clientY+"px";
box.style.left = left;
box.style.top = top;
};
</script>
</body>
复制代码
- clientY 相对于可见窗口的高度，而div是相对于页面定位的。若是页面大于可见的窗口（出现滚动条），那就会出现误差。
- pageY 相对于页面的高度，用这个替换上边的能够去掉误差。Ie8不兼容
- ie8解决办法： 加上scrollTop的长度就行啦，
document.documentElement.scrollTop;
事件的绑定
对象.事件 = 函数这种方式只能绑定一次，绑定屡次的话第二次就会覆盖第一次。addEventListener("click",function(){},false);这种方式能够绑定多个。ie8不支持- 参数1 事件的字符串，不要on
- 回调函数，当事件触发时该函数会被执行
- 是否在捕获阶段触发事件，布尔值，通常为false
- 若是返回this的话 this是绑定的对象。
- ie8
attachEvent("onclick",function(){});只有两个参数 要on；可是后绑定先执行。返回的this是window - 定义函数用来为指定元素绑定响应函数
<script>
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//正常浏览器
obj.addEventListener(eventStr,callback,false);
}else{
//兼容ie8
obj.addEventListener("on"+eventStr,function(){
callback.call(obj);
});
}
};
</script>
复制代码
拖拽
- 按下鼠标，开始拖拽 onmousedown
- 当鼠标移动时，跟随鼠标移动 onmosemove
- 当鼠标松开的时候，被拖拽元素不动了onmouseup
<script>
var box = document.getElementById("box");
box.onmousedown=function(){
document.onmousemove= function(e){
e = e || window.e;
var left = e.clientX;
var top = e.clientY;
box.style.left = left + "px";
box.style.top = top + "px";
};
var song = document.onmouseup = function(){
//这个用document是由于 若是用了box的话，当鼠标被挡住就不能固定了。（好比第二个盒子在第一个盒子上边）
document.onmousemove = null;
document.onmouseup = null;
};
}
</script>
复制代码
改进，以上的拖拽是只能鼠标在box的左上角。
- 浏览器有默认的拖拽行为，取消它能够防止拖拽异常。
return false;对ie8不起做用
<script>
var box = document.getElementById("box");
box.onmousedown=function(e){
// 求出鼠标偏移量
var x = e.clientX - box.offsetLeft;
var y = e.clientY - box.offsetTop;
document.onmousemove= function(e){
e = e || window.e;
var left = e.clientX;
var top = e.clientY;
box.style.left = left- x + "px";
box.style.top = top-y + "px";
};
var song = document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
复制代码
setCapture()这个只有ie8有。做用是强制捕获，若是是点击的话，无论点谁，都是点击它。
滚轮事件
eg：随着鼠标滚轮滚动，box变长变短
- onmousewheel 火狐不支持要用
DOMMouseScroll,用addEventListrner()绑定- e.wheelDelta 能够获取滚轮方向，火狐中使用e.detail
- 当滚轮滚动的时候，若是浏览器有本身的滚动条，就会两个都滚动，能够取消默认行为。
<script>
var box = document.getElementById("box");
box.onmousewheel = function(e){
if(e.wheelDelta > 0){
// box.style.height += 10+"px";
// 不能这样写，由于css属性是外联的，这样读取不到。
box.style.height = box.clientHeight + 10 +"px";
}else{
box.style.height = box.clientHeight - 10 +"px";
}
};
</script>
复制代码
键盘事件
onkeydownonkeyup(onkeydown按住不松手会连续触发) 绑定给能够获取焦点的对象中，（例如输入框） 或者document。keyCode获取按键编码altKeyctrlKeyshiftKey判断是否被按下
Bom浏览器对象模型，操做浏览器
- Window 表明的是浏览器的窗口，也是网页中的全局对象
- Navigator 表明的是当前浏览器的信息，识别当前浏览器是什么
- 因为历史缘由，大部分属性已经识别不了了。
- 通常使用userAgent来判断浏览器信息 可是ie11挺缺德，删除了ie相关的内容
- 经过ie特有的属性来判断是不是ie
- Location 地址栏 获取浏览器地址栏信息和操做跳转信息
- 打印地址
- 修改 而后自动跳转
- assign() 和直接修改location同样
- reload() 从新加载
- 参数若为true 则强制清空缓存
- HIstory 历史记录
-
只能操做向前或向后，不能访问具体的历史记录，只在当成有效
-
history.back() 回退上一个页面
-
forward()
-
go() 1表示向前一个页面 2表示向前2个页面 -1 -2
-
- Screen 屏幕 显示器相关信息 移动端用的多
- 后边四个都是做为window的属性保存的，由于window是全局的，能够经过winsow.navigator来使用，也能够直接使用。
定时器
- setInterval(); 每隔一段时间执行一次
- 参数1 function（）{}
- 参数2 每隔多长时间 单位毫秒
- 返回一个number 做为定时器的位移标识
- clearInterval(timer); 关闭定时器
- 自动切换图片的练习
<script>
var imgArrs = [];
for(var i=1;i<= 5;i++){
imgArrs.push("./img/"+i+".jpg");
};
console.log(imgArrs);
var index = 0;
setInterval(function(){
var img = document.getElementById("img");
img.src = imgArrs[index];
index++;
if(index>=5){
index=0;
}
},1000);
</script>
复制代码
延时调用
- setTimeout 只会执行一次。
- clearTimeout 关闭延时调用。
定时器应用
轮播图
- 界面框架
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>*{margin:0;padding:0}#outer{width:520px;height:333px;margin:50px auto;background-color:aqua;padding:10px 0;position:relative;overflow:hidden}#imgList{list-style:none;position:absolute;left:0}#imgList li{float:left;margin:0 10px}#nav{position:absolute;bottom:15px}#nav a{float:left;width:15px;height:15px;background-color:red;margin:0 5px;opacity:.5;filter:alpha(opacity=50)}#nav a:hover{background-color:black}</style><script>window.onload=function(){var imgList=document.getElementById("imgList");var imgArr=document.getElementsByTagName("img");imgList.style.width=520*imgArr.length+"px";var nav=document.getElementById("nav");var outer=document.getElementById("outer");nav.style.left=(outer.offsetWidth-nav.offsetWidth)/2+"px";var index=0;var allA=document.getElementsByTagName("a");allA[index].style.backgroundColor="black"};</script></head><body><div id="outer"><ul id="imgList"><li><img src="./img/1.jpg"alt=""></li><li><img src="./img/2.jpg"alt=""></li><li><img src="./img/3.jpg"alt=""></li><li><img src="./img/4.jpg"alt=""></li><li><img src="./img/5.jpg"alt=""></li></ul><!--导航--><div id="nav"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body></html>
复制代码
- 功能实现
//绑定单击响应函数
for(var i = 0;i<allA.length;i++){
allA[i].num=i;
allA[i].onclick = function(){
index = this.num;
imgList.style.left = index*-520+"px";
//修改正在选中的方块的颜色
setA();
};
};
// 建立一个方法设置选中的a
function setA(){
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="";
//内联样式调成空串，防止覆盖hover。
}
allA[index].style.backgroundColor = "black";
};
复制代码
- 自动切换 自动切换设置好之后，他到最后一张的时候，再转下一张的时候回回退到第一张，效果很差，解决办法：
- 再最后加一张和第一张同样的图片
- 偷梁换柱，把最后一张一下换成第一张，肉眼没法察觉。 此时两个动画同时执行，很难受。
完成代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
#outer {
width: 520px;
height: 333px;
margin: 50px auto;
background-color: aqua;
padding: 10px 0;
position: relative;
overflow: hidden
}
#imgList {
list-style: none;
position: absolute;
left: 0
}
#imgList li {
float: left;
margin: 0 10px
}
#nav {
position: absolute;
bottom: 15px
}
#nav a {
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: .5;
filter: alpha(opacity=50)
}
#nav a:hover {
background-color: black
}
</style>
<!-- 引入tools -->
<script type="text/javascript" src="js/tools.js"></script>
<script>
window.onload = function () {
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
imgList.style.width = 520 * imgArr.length + "px";
var nav = document.getElementById("nav");
var outer = document.getElementById("outer");
nav.style.left = (outer.offsetWidth - nav.offsetWidth) / 2 + "px";
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.backgroundColor = "black"
var timer;
//绑定单击响应函数
for (var i = 0; i < allA.length; i++) {
allA[i].num = i;
allA[i].onclick = function () {
clearInterval(timer);
index = this.num;
// imgList.style.left = index*-520+"px";
//修改正在选中的方块的颜色
setA();
// 使用move函数
move(imgList, "left", -520 * index, 20, function () {
// 动画执行完毕，开启自动播放
autoChange();
});
};
}
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 = "";
//内联样式调成空串，防止覆盖hover。
}
allA[index].style.backgroundColor = "black";
};
function autoChange(){
//开启定时器，定时切换
timer = setInterval(function(){
//索引自增
index++;
index %=imgArr.length;
move(imgList, "left", -520 * index ,20, function() {
// 修改导航按钮
setA();
});
}, 3000);
};
};
// 自动切换图片 建立函数调整自动切换
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li>
<img src="./img/1.jpg" alt=""></li>
<li>
<img src="./img/2.jpg" alt=""></li>
<li>
<img src="./img/3.jpg" alt=""></li>
<li>
<img src="./img/4.jpg" alt=""></li>
<li>
<img src="./img/5.jpg" alt=""></li>
<li>
<img src="./img/1.jpg" alt=""></li>
</ul>
<!--导航-->
<div id="nav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
复制代码
js类的操做
- 能够经过修改元素的class来改样式
box.className = "新class" - 既想要旧的css也想要新的css
box.className += " 新class";//注意空格 - 定义一个函数，想其中指定元素添加class属性值。
function addClass(obj,cn){
//检查obj中是否有cn
if(!hasClass(obj,cn)){
obj.className+=""+cn;
//加空格是由于 添加class属性值的时候 两个属性之间有空格，两个属性才能都显示。
}
};
复制代码
- hasClass判断一个元素中是否含有指定的class属性值，有就返回true，没有返回false
function hasClass(obj,cn){
var reg = new RegExp("\\b"+cn+"\\b");
//正则，\b是判断是否是一个单词。
return reg.test(obj.className);
};
复制代码
- 删除一个元素中的指定的class属性
function removeClass(obj , cn){
//建立一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg , "");
}
复制代码
- toggleClass 能够用来切换一个类若是元素中具备该类，则删除若是元素中没有该类，则添加
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有，则删除
removeClass(obj , cn);
}else{
//没有，则添加
addClass(obj , cn);
}
}
复制代码
JSON
- JSON 是一个特殊格式的字符串，这个字符串能够被任意的语言所识别，而且能够转换为任意语言中的对象，JSON在开发中主要用来数据的交互
- json分类
- 对象{}
- 数组[]
- JSON容许的值
- 字符串
- 数值
- 布尔值
- null
- 对象
- 数组
- json --> js对象
- JSON.parse()
- 能够将以JSON字符串转换为js对象
- 它须要一个JSON字符串做为参数，会将该字符串转换为JS对象并返回
- JSON.parse()
- JS对象 ---> JSON
- JSON.stringify()
- 能够将一个JS对象转换为JSON字符串
- 须要一个js对象做为参数，会返回一个JSON字符串
- JSON.stringify()
- eval()
- 这个函数能够用来执行一段字符串形式的JS代码，并将执行结果返回
- 若是使用eval()执行的字符串中含有{},它会将{}当成是代码块 若是不但愿将其当成代码块解析，则须要在字符串先后各加一个()
- eval()这个函数的功能很强大，能够直接执行一个字符串中的js代码， 可是在开发中尽可能不要使用，首先它的执行性能比较差，而后它还具备安全隐患
相关文章
- 1. JS基础笔记
- 2. js基础笔记
- 3. JS基础笔记——基础常识篇
- 4. HTML5+CSS+JS基础笔记
- 5. js基础知识笔记
- 6. js基础学习笔记
- 7. js笔记--基础部分
- 8. 原声js基础笔记
- 9. css、js基础笔记
- 10. JS基础 笔记（一）
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • Kotlin学习（二）基本类型
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. JS基础笔记
- 2. js基础笔记
- 3. JS基础笔记——基础常识篇
- 4. HTML5+CSS+JS基础笔记
- 5. js基础知识笔记
- 6. js基础学习笔记
- 7. js笔记--基础部分
- 8. 原声js基础笔记
- 9. css、js基础笔记
- 10. JS基础 笔记（一）