$JavaScript初级-----基础知识
什么是JS（布莱登 艾奇）
- 是一门脚本语言:不需要编译,直接运行
- 是一门解释性的语言:遇到一样代码就解释一行代码
- 是一门动态类型的语言---不解析
- 是一门基于对象的语言---不解释
- 是一门弱类型的语言,声明变量的时候都使用var
三个部分
- ECMAScript标准: js的基本的语法
* DOM: 文档对象模型（document object model）
* BOM: 浏览器对象模型 (browser object model)- DOM的作用:操作页面的元素
- DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树
数据类型
- number数据类型----无论是整数还是小数都是number数据类型的
* string数据类型----字符串,获取字符串的长度:变量名.length
* boolean数据类型---两个值,true，false
* null----只有一个,null
* undefined----只有一个,undefined,一个变量声明了,没有赋值
* object---对象-----面向对象的时候讲解
基本类型(简单类型,值类型):number,string,boolean
复杂类型(引用类型):object
空类型:undefined,null
基本类型的值在栈上
复杂类型的对象在堆上,地址(引用)在栈上
值类型之间传递的是值
引用类型之间传递的是引用(地址)
类型转换
其他类型转数字
parseInt()---->转整数
parseFloat()--->转小数
Number()---->转数字-----要比上面两个严格
其他类型转字符串
toString()
String()
其他类型转布尔类型
Boolean()---->要么是true要么是false
运算符
- 算术运算符:
+ - * / %
* 复合运算符:+= -= *= /= %=
* 赋值运算符:=优先级别是最低的
* 一元运算符:++ --++在前，先自增再运算；++在后，先运算再自增
* 三元运算符: ? :
* 关系运算符:> < >= <= == === != !==（结果是布尔类型）
* 逻辑运算符:&& || !与或非 （结果是布尔类型）
流程控制
流程控制: 代码的执行过程
顺序结构:代码的执行的顺序,从上到下,从左到右(不严谨)
分支结构: if,if-else ,if-esle if,switch-case ,三元表达式
循环结构:while 循环,do-while,for循环 for-in循环
总结分支:如果只有一个分支,就用if
如果有两个分支,就用if-else
如果多个分支,一般是范围的,推荐使用if-else if
如果多个分支,一般是具体的值,推荐使用switch-case
总结循环:
while:先判断后循环,有可能一次循环都不执行
do-while:至少执行一次循环体,再判断
for循环:知道了循环的次数,推荐使用for循环
数组
- break:在循环中遇到这个关键字,直接跳出当前所在的循环
- continue:在循环中遇到这个关键字,直接进行下一次循环
- 数组:存储一组有序的数据,数据类型可以不一样
- 数组的作用:一次性存储多个数据
- 数组元素:数组中存储的每个数据,叫数组元素,存储了5个数据,有5个数组元素
- 数组的长度:数组的元素的个数,叫数组的长度:数组名.length--->就是长度,数组的长度是可以改变的
- 索引(下标):存储数组元素的编号,从0开始,到数组的长度-1结束
- 索引是用来存储和读取数组元素的
- 遍历数组:通过循环的方式找到数组中的每个数据
- 冒泡排序:
<script>
//冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)
var arr = [10, 0, 100, 20, 60, 30];
//循环控制比较的轮数
for (var i = 0; i < arr.length - 1; i++) {
//控制每一轮的比较的次数
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
数组定义的方式:
通过构造函数定义数组
var 数组名=new Array();空数组 Array()就是构造函数
var 数组名=new Array(长度);是设置数组的初始的长度,长度是可以改变的
var 数组名=new Array(值,值,值...);定义数组并设置数组中的元素值
字面量的方式定义数组
var 数组名=[];空数组
var 数组名=[10];这个数组有一个元素,值是10,长度是1
数组变量for(var i=0;i<数组名.length;i++){ }
函数
函数定义:
function 函数名(){
函数体
}
函数调用:
函数名();
参数
*形参:函数定义的时候函数名字后面的小括号里的变量就是参数,是不需要写var
* 实参:函数调用的时候小括号里传入的变量或者是值,都是实参
* 返回值:函数中如果有return,那么这个函数就有返回值
* 如果函数中没有return,那么这个函数没有返回值
* 如果函数中有return,但是后面什么内容都没有,这个函数没有明确返回值
* 如果一个函数没有明确的返回值,函数调用了,并且接收了,那么此时接收的结果undefined
* 如果直接输出函数名字,那么是这个函数的代码
无参数无返回值的函数
function f1(){
}
有参数无返回值的函数,2个参数
function f2(x,y){
}
无参数有返回值的函数
function f3(){
return 100;
}
有参数有返回值的函数
function f4(x){
return "您好";
}
arguments
- arguments----->可以获取函数调用的时候,传入的实参的个数
- arguments是一个对象,是一个伪数组
- arguments.length--->是实参的个数
- arguments[索引]---->实参的值
作用域，变量，预解析
作用域:变量的使用范围
- 全局作用域:全局变量在任何位置都可以使用的范围
- 局部作用域:局部变量只能在某个地方使用---函数内
- 作用域链:在一个函数中使用一个变量,先在该函数中搜索这个变量,找到了则使用,找不到则继续向外面找这个变量,找到则使用,一直找到全局作用域,找不到则是undefined
变量：
- 全局变量:只要是在函数外面声明的变量都可以看成或者是理解成是全局变量
- 局部变量:在函数中定义的变量
预解析:在执行代码之前做的事情
- 变量的声明和函数的声明被提前了,变量和函数的声明会提升到当前所在的作用域的最上面
- 函数中的变量声明,会提升到该函数的作用域的最上面(里面)
- 如果有多对的script标签都有相同名字的函数,预解析的时候是分段的,互不影响
编程思想：面向对象，过程
- 面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程
- 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果
面向对象的特性:封装,继承,多态,(抽象性)
对象
对象:有属性和方法,具体特指的某个事物
变量 instanceof 对象------->布尔类型,判断这个变量是不是这个类型的
属性----特征
方法----行为
对象分三种:内置对象,自定义对象,浏览器对象
* 内置对象:系统提供的
* 自定义对象：自己写的
* 浏览器对象:浏览器的
创建对象
创建的对象的3种方式:
- 通过调用系统的构造函数创建对象 new Object()
var obj1=new Object(); - 自定义构造函数创建对象
var obj2=new 自定义构造函数(); - 字面量的方式创建对象
var obj3={};
JSON
JSON格式的数据,都是键值对,成对的数据
var json={
"name":"小明",
"age":18,
"sex":"boy"
};
设置，获取属性值
对象设置属性的值的写法
- 对象.属性名字=值;----点语法
- 对象["属性的名字"]=值;-----
对象获取属性的值的写法
- 对象.属性
- 对象["属性"]
遍历对象
var obj={
"name":"林子闲",
"age":20,
"sex":"男",
"wife":"乔韵"
};
for(var key in obj){ //key---是一个变量,这个变量中存储的是遍历的对象的属性的名字
console.log(key+"========"+obj[key]);
}
Math方法
- Math.ceil()---向上取整
- Math.floor()---向下取整
- Math.Pi----圆周率的值
- Math.Max()---一组数字中的最大值
- Math.Min()---一组数字中的最小值
- Math.abs()----绝对值
- Math.random()---随机数字
- Math.sqrt()----开平方
- Math.pow()----一个数字的多少次幂
new的执行过程
new的时候，系统做了什么事?
- 开辟空间,存储创建的新的对象
- 把this设置为当前的对象
- 设置属性和方法的值
- 返回当前的新的对象
三大系列
offset系列:
- (父级元素margin+父级元素padding+父级元素border+自己的margin)
- offsetLeft:元素距离左边位置的值
- offsetTop:元素距离上面位置的值
- offsetWidth:获取元素的宽度(有边框)
- offsetHeight:获取元素的高度(有边框)
scroll系列:卷曲
- scrollLeft:元素向左卷曲出去的距离
- scrollTop:元素向上卷曲出去的距离
- scrollWidth:元素中内容的实际的宽度,如果没有内容,或者内容很少,元素的宽度
- scrollHeight:元素中内容的实际的高度,如果没有内容,或者内容很少,元素的高度
client系列:
- clientWidth:可视区域的宽度,没有边框
- clientHeight:可视区域的高度,没有边框
- clientLeft:左边框的宽度
- clientTop:上边框的宽度
- clientX:可视区域的横坐标
- clientY:可视区域的纵坐标
&JavaScript中级-----Webapi
获取元素
- 根据id从整个的文档中获取元素---返回的是一个元素对象
document.getElementById("id属性的值")
- 根据标签的名字获取元素-----返回的是元素对象组成的伪数组
document.getElementsByTagName("标签的名字");
- 根据name属性的值获取元素
document.getElementsByName("name属性的值");
- 根据类样式的名字获取元素
document.getElementsByClassName("类样式的名字");
- 根据选择器获取元素
document.querySelector("选择器");返回一个对象
- 根绝选择器获取元素
document.querySelectorAll("选择器");返回数组,多个元素组成的
元素的样式操作
- 操作基本标签的属性 —— src,title,alt,href,id属性
- 操作表单标签的属性 —— name,value,type,checked,selected,disabled,readonly
- 对象.style.属性=值;
- 对象.className=值;
事件
- 事件:就是一件事,有 事件源 触发 和 响应
- this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象
对象，元素，节点
-
内置对象:系统自带的对象
- 自定义对象:自己写的对象
- BOM对象：浏览器对象
- DOM对象:------->通过DOM方式获取的元素得到的对象
-
document：页面中的顶级对象
-
元素:element:页面中的标签 标签---元素---对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
-
节点:Node:页面中所有的内容,标签,属性,文本
节点的作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素 节点的类型:1标签节点,2属性节点,3文本节点 * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点 * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---`#text` * nodeValue:标签---null,属性---属性的值,文本---文本内容 * if(node.nodeType==1&&node.nodeName=="P")那么这就肯定是一个p标签 -
根元素:html标签
阻止超链接默认跳转
- return false;
自定义属性
- 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
- 自定义属性无法直接通过DOM对象的方式获取或者设置
- 对象.getAttribute("自定义属性名字");获取自定义属性的值
- 对象.setAttribute("属性名字","值");设置自定义属性及值
- 移除自定义属性
- 对象.removeAttribute("属性的名字");
元素的创建(3种)
1 document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
2 父级对象.innerHTML="标签代码及内容";
3 document.createElement("标签名字");得到的是一个对象
* 父级元素.appendChild(子级元素对象);
* 父级元素.inerstBefore(新的子级对象,参照的子级对象);
* 移除子元素 —— 父级元素.removeChild(要干掉的子级元素对象);
事件的绑定(3种)
1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行之前的会被覆盖
my$("btn").onclick=function(){};
2. 对象.addEventListener("没有on的事件名字",事件处理函数,false); `IE678不支持`
my$("btn").addEventListener("click",function(){},false);
3. 对象.attachEvent("有on的事件名字",事件处理函数); `谷歌火狐不支持`
my$("btn").attachEvent("onclick",function(){});
addEventListener 和attachEvent的兼容代码
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
事件解绑
1. 对象.on事件类型=null;
2. 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);
3. 对象.detachEvent("有on的事件类型",事件处理函数);
获当前节点的节点，元素
//获取当前节点的父级节点
console.log(my$("uu").parentNode);
//获取当前节点的父级元素
console.log(my$("uu").parentElement);
//获取当前节点的子级节点
console.log(my$("uu").childNodes);
//获取当前节点的子级元素
console.log(my$("uu").children);
//获取当前节点的第一个子级节点
console.log(my$("uu").firstChild);
//获取当前节点的第一个子级元素
console.log(my$("uu").firstElementChild);
//获取当前节点的最后一个子级节点
console.log(my$("uu").lastChild);
//获取当前节点的最后一个子级元素
console.log(my$("uu").lastElementChild);
//获取当前节点的前一个兄弟节点
console.log(my$("uu").previousSibling);
//获取当前节点的前一个兄弟元素
console.log(my$("uu").previousElementSibling);
//获取当前节点的后一个兄弟节点
console.log(my$("uu").nextSibling);
//获取当前节点的后一个兄弟元素
console.log(my$("uu").nextElementSibling);
写入，innerText innerHTML
document.getElementsByTagName("p").innerHTML="<p>这是一个p</p>"; 不仅文本，还能标签等
document.getElementsByTagName("p").innerText="这是一个p"; 只能作用于文本
document.write("<p>这是一个p</p>") 是document对象的一个方法，重绘，既替换之前的整个页面，用的不多
事件冒泡
事件冒泡：
元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套
阻止事件冒泡：
1. e.stopPropagation(); IE8不支持 e —— 事件参数对象,
2. window.event.cancelBubble=true; 火狐不支持 window.event —— 事件参数对象，和e是一样的
定时器
定时器会返回自己的id值，是window对象，但window在写时可省略
复用性定时器
var timeId=window.setInterval(函数,时间); 页面加载完毕后,每过一定时间后执行函数
window.clearInterval(定时器的id值); 清理定时器
一次性定时器
var timeId=setTimeout("alert('hello')",1000); 页面加载完成后,一定时间后只执行一次函数
clearTimeout(timeId);