知识点导图
1:基础知识
(1)JavaScript是脚本语言,弱类型,执行非常非常快
(2)它与java有什么关系?没有任何关系
(3)js能做什么事情?1控制浏览器 BOM ,2控制元素 DOM
(4)js不能做什么事情?不能做文件读取,创建及删除,不能直接访问数据库
(5)node.js - 开发平台,通过这个平台可以开发常规的web服务端,是一块非常轻量级的运行环境
Jquery.js - 前端框架
(6)JS是面向过程的语言,JS有面向对象,但是不是纯粹的面向对象语言
2:常用对话框
(1)alert(""):警告对话框,作用是弹出一个警告对话框
(2)confirm(""):确定对话框,弹出一个带确定和取消按钮的对话框——确定返回true,取消返回false
(3)primpt("要显示的文字"):可以允许用户输入内容的对话框
3:数据类型
(1)基本数据类型:字符串、小数、整数、时间日期、布尔型等
(2)变量只有一种类型:
通用类型var,可以随便存储其它类型的值,可以直接使用,不用定义。但习惯上定义。
定义变量: var a; //所有变量定义都用var定义,var是通用的可变类型。
var s = "3.14";
(3)类型转换
分为自动转换和强制转换,一般用强制转换。
其他类型转换为整数:parseInt();
其他类型转换为小数:parseFloat();
判断数字是否合法:isNaN()
4:运算符(与C#一样)
数学运算符:+ - * / % ++ --;
关系运算符:== != >= <= > <;
逻辑运算符:&& || !;
其他运算符:+= -= *= /= %= ?:;
5:语句
一般分为顺序、分支和循环语句。
(1)分支语句: if{}else{} if{}else{}
(2)循环for语句:for(初始条件:循环条件;状态改变){循环体}
(3)问题类型:穷举,迭代
(4)关键词:break、continue
(5)如果输出某一参数的值:输出的值是“+a+”和“+b
6:数组
数组的定义:new Array(); //它的长度是动态变化的,里面可以放任意类型的元素。
数组元素的赋值:a[0]=123; a[1]="hello"; //元素中的索引从0开始。
数组的取值:a[i];
数组属性:a.length; //数组元素的个数,长度。没有count()
方法:a.sort(); //数组排序,按照每一个元素的第一个字符进行排序。
a.reverse(); //翻转数组。
7:函数
函数的四要素:名称、输入、返回值、加工。
定义函数:function add(形参){函数体} //函数名为add,输入为参数的形式,返回值可以是var类型,也可以return一个返回值。
匿名函数:function(){函数体}
函数必须经过调用才能执行。函数的调用:add(实参)
BOM(主要记忆)
window.open("打开的地址","打开的位置")
window.opener:打开此页面的上一个页面对象
window.close():关闭当前页面
window.scrollTo(x,y)滚动页面至哪里,y代表纵向滚动;
window.history.back();页面进行后退;
location地址栏:window.location.href="http://www.baidu.com";修改页面地址,会跳转页面(超链接)
DOM(主要记忆)
(1)找到元素
按照ID来找 var aa = document.getElementById("id");找到的肯定是一个对象
按照Class来找 var aa = document.getElementsByClassName("class");找到的肯定是一个数组
按照Name来找 var aa = document.getElementsByName("name");找到的肯定是一个数组
按照元素名来找 var aa = document.getElementsByTagName("div");找到的肯定是一个数组
(2)操作元素内容
innerHtml - 会将元素标记代码渲染后的效果显示出来(超链接形式显示):会将所有的内容和代码一并取出来
innerText - 不会让内容进行任何渲染,写的什么直接就输出什么(把超链接代码显示出来了):取值时它只会把能看到的文字信息取出来,不会取到HTML代码
value - 12个表单元素御用,别的元素没有权利使用它们并不是value就能解决全部表单元素的内容操作,部分元素还需要上面两种的配合。如:option,radio
(3)操作元素属性
1、添加属性
oTxt1.setAttribute("readonly", "readonly");
2、修改属性
oTxt1.setAttribute("Class", "ttt");
( 添加、修改)如果没有此属性会添加进去,相反,会修改此属性的值
3、查询属性
this.getAttribute("Class");
获取属性的值
4、删除属性
this.removeAttribute("Class");
移除一个属性
(4)操作元素样式(所有的样式操作都是在元素代码内部进行添加及更改,优先级最高)
1、 添加样式
this.style.width="100px";
this.style.boxShadow = "0px 0px 15px black";
2、修改样式
this.style.width="100px";
this.style.boxShadow = "0px 0px 15px black";
3、查询当前样式
this.style.xxx - 只能获取写在元素代码内部的样式值
获取即使样式:
this.offsetWidth
this.offsetHeight
this.offsetTop
this.offsetLeft
4、删除样式
(5)操作元素
1、查找兄弟级的上一个和下一个
this.nextSibling
this.previousSibling
2、查找父级元素
this.parentNode
3、查找全部子级元素
this.childNodes
4、创建新元素
var oDiv = document.createElement("div");
document.getElementById("boss").appendChild(oDiv);
---------------------------------------------------
var oDiv = "<div class='div1'></div>";
document.getElementById("boss").innerHTML += oDiv;
----------------------------------------------------
5、移除元素
this.remove();