JavaScript基础知识小结
1.JavaScript的简介
是基于对象和事件驱动的语言,应用于客户端2.js的特点
* 交互性:信息的动态交互* 安全性:js不能访问本地磁盘的文件
* 跨平台性:只要能支持js的浏览器,都可以运行
3.JavaScript与Java的区别
* 开发公司不同* js是基于对象的,java是面向对象的
* java是强类型的语言,js是弱类型的语言
* js只需要解析就可以执行,而java需要先编译再执行
4.js的组成
* ECMAScript:有ECMA组织制定的js的语法,语句等* BOM:浏览器对象模型
* DOM:文档对象模型
5.js与html的结合方式
* 使用一个标签<script type="text/javascript">js代码</script>
* 使用script标签,引入一个外部的js文件
<script type="text/javascript" src="js代码路径"></script>
使用此种方式时,就不要再script标签里面再写js代码了,不会执行
6.js的原始类型和声明变量
* string:字符串* number:数字类型
* boolean:布尔类型
* null:表示对象引用为空
* undifined:定义一个变量,没有赋值
** 注意:定义变量,都使用关键字var
** typeof(变量名称);查看当前变量的数据类型
** 直接向页面输出语句
document.write();
可以向页面输出固定值,变量和HTML代码
** js语句和java语句类似
** 字符串的相加和相减操作
var str="123";
alert(str+1);
* 相加的时候,和java一样,做的是字符串连接
* 相减的时候,做的是相减的运算,如果不是数字,会提示NaN
** == 和 ===的区别
==:比较的只是值
===:比较的是值和类型
7.js数组的定义
* var arr=[1,"2",true]; 定义一个数组,包含三个元素* var arr=new Array(5); 定义一个数组,数组的长度是5
* var arr=new Array(1,2,4); 定义一个数组,包含三个元素
** 数组有属性length
** 数组的长度是可变的
** 数组可以存放不同数据类型的数据
8.js的函数
* 1.使用关键字function** function 方法名(参数列表){
方法体;
返回值可有可无(根据实际需要);
}
* 2.匿名函数
** function(参数列表){
方法体;
返回值可有可无(根据实际需要);
}
**<script type="text/javascript">
function add(a,b){
var sum=a+b;
return sum;
}
alert(add(2,6));
</script>
**<script type="text/javascript">
var add=function(a,b){
var sum=a+b;
alert(sum);
}
add(2,6);
</script>
* 3.动态函数(用得少,了解一下):使用到js里的一个内置对象Function
new Function("参数列表","方法体和返回值");
<script type="text/javascript">
var add=new Function("a,b","var sum=a+b;return sum;");
alert(add(2,6));
</script>
9.* js的全局变量和局部变量
-- 全局变量:在script标签里面定义的变量,这个变量在页面中的js部分都可以使用,即:在方法外部使用,在方法内部使用,在另一个script标签中使用
-- 局部变量:在方法发内部定义一个变量,只能在方法内部使用
* script标签放在的位置
建议把script标签放到</body>后面
IE浏览器自带调试工具,F12调试
10.js的string对象
* 方法和属性** 属性 length:字符串的长度
** 方法
***与html相关的方法
-bold():加粗
-fontcolor():设置字符串的颜色
-fontsize():设置字体的大小
-link():将字符串显示成超链接
-sub():下标
-sup():上标
***与java相似的方法
-concat():连接字符串
-charAt():返回指定位置的字符
-indexOf():返回字符串位置
-split():切分字符串成数组
-replace():替换字符串
*传递两个参数:第一个参数是原始字符,第二个参数是替换成的字符
-substr()与substring():截取字符串
*substr():两个参数,从第几位开始,向后截取几位
*substring():两个参数,从第几位开始,到第几位结束, 但不包括结束位
11.js的Array对象
* var arr=[]; 创建一个空数组* 属性:length
* 方法:
** concat(); 数组的连接
** join(); 根据指定的字符分割数组
** push(); 向数组末尾添加元素,并返回数组新的长度
注意:如果添加的是一个数组,这时候把数组当做一个整体字符串添加进去
** pop(); 表示删除最后一个元素,并返回删除的那个元素
** reverse(); 颠倒数组中的元素的顺序
12.js的Date对象
* js获取当前时间var date=new Date();
document.write(date);//Mon Aug 08 2016 09:58:22 GMT+0800 (中国标准时间)
//转换成习惯的格式
document.write("<br/>");
document.write(date.toLocaleString());
* 获取当前年的方法
getFullYear(); 得到当前的年
** var date=new Date();
document.write(date.getFullYear());
* 获取当前月的方法
getMonth(); 获取当前的月份
返回的值是0-11,如果要得到准确的月份,加1
** var date=new Date();
var mon=date.getMonth()+1;
document.write("month:"+mon);
* 获取当前星期的方法
getDay(); 获取当前的星期
返回的值是0-6,星期日返回的是0
**var date=new Date();
document.write("星期:"+date.getDay());
* 获取当前天的方法
getDate(); 0-31
**var date=new Date();
document.write("day:"+date.getDate());
* 获取当前小时的方法
getHours(); 0-23
**var date=new Date();
document.write("hour:"+date.getHours());
* 获取当前分钟的方法
getMinutes(); 0-59
**var date=new Date();
document.write("minute:"+date.getMinutes());
* 获取当前秒的方法
getSeconds(); 0-59
** var date=new Date();
document.write("second:"+date.getSeconds());
* 获取当前毫秒数的方法
getTime(); 返回的是1970.1.1至今的毫秒数
** var date=new Date();
document.write("毫秒数:"+date.getTime());
13.js的Math对象
*属性:PI document.write(Math.PI);*里面的都是静态方法,使用时可以直接Math.方法名()
**cell(x); 向上舍入 10.4 → 11
**floor(x); 向下舍入 10.7 → 10
**round(x); 四舍五入
**random(); 返回0-1之间的随机数(伪随机数)
得到0-9的随机数
Math.floor(Math.random()*10)
**pow(x,y); x的y次幂
14.js的全局函数
*不属于任何一个对象,直接写名称使用**eval(); 执行js代码(如果字符串是一个js代码,使用此方法直接执行)
***var str="alert('0123456789')";
eval(str);
**encodeURI():对字符进行编码
decodeURI():对字符进行解码
**encodeURIComponent()和decodeURIComponent()
**isNaN():判断当前字符串是否为数字
特别注意:如果是数字,返回false
如果不是数字,返回true
**parseInt():类型转换
parseFloat():类型转换
15.js函数的重载
** 定义:方法名形同,参数不同** js是否存在重载
—— js里面不存在重载
—— 但可以通过其他方式模拟重载的效果,通过arguments数组来实现
16.js的bom对象
*bom:broswer object model 浏览器对象模型*有哪些对象
**navigator: 获取客户机(浏览器)的信息
-- navigator.appName
**screen:获取屏幕的信息
--screen.width
--screen.height
**location:请求url地址
--href属性
***获取请求的url地址
document.write(location.href);
***设置url地址
页面上设置“百度”按钮,鼠标点击就会跳转百度页面
<body>
<input type="button" value="百度" οnclick="hrefClick();"/>
<script type="text/javascript">
function hrefClick(){
location.href="http://www.baidu.com";
}
</script>
</body>
**history:请求的url的历史记录
-- history.back(); history.go(-1);到访问的上一个页面
-- history.forward(); history.go(1);到访问的下一个页面
**window:窗口对象
--顶层对象:所有的bom对象都是在window里面操作的
--跨页面操作:opener属性:得到创建此窗口的窗口
--方法
***window.alert(); 页面显示一个框,显示内容
简写为alert();
***confirm(); 确认框
***prompt(); 输入的对话框
用法:prompt(text,defaultText);
prompt("请输入一个数:","0");
***open(); 打开一个新的浏览器窗口或查找一个已命名的窗口
用法:open(URL,name,features,replace); 一般只用前三个参数
即:open("打开的新窗口的url地址","","窗口的特征,比如说窗口的宽度高度");
-- 创建一个按钮,点击后打开一个新的窗口
<body>
<input type="button" value="窗口" οnclick="openNew()"/><script type="text/javascript">
function openNew(){
open("biaodan.html","","width=600,height=500");
//open("http://www.baidu.com","","width=600,height=500");
}
</script>
</body>
***close(); 关闭窗口(浏览器兼容性不好)
---定时器
***setInterval(); 指定的周期(以毫秒计)来调用函数或计算表达式
-- 用法:setInterval("js代码",毫秒数); 1秒=1000毫秒
setInterval("alert('定时操作设置成功!');",3000);
***setTimeout(); 在指定是毫秒后调用函数或计算表达式,只执行一次
setTimeout("js代码",毫秒数);
***clearInterval(); 取消由setInterval()设置的timeout
-- 用法:clearInterval(id); id必须是由setInterval()返回的ID值
***clearTimeout(); 取消由setTimeout()设置的timeout
-- 用法:clearTimeout(id); id必须是由setTimeout()返回的ID值
17.js的dom对象
* dom: document object model: 文档对象模型* 解析过程
根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成
对象
--document对象:整个文档
--element对象:标签对象
--属性对象
--文本对象
--Node节点对象:这个对象是这些对象的父对象
**如果对象里面找不到想要的方法,这时候到Node对象里面去找
18.DHTML
动态的HTML,它不是一门语言,是多项技术综合体的简称。包括html,csss,dom,javascript
19.document对象
*常用方法:-- getElementById()返回对拥有指定id的第一个对象的引用
**通过id得到元素(标签)
-- getElementsByName() 返回带有指定名称的对象集合
**通过标签的name的属性值得到标签
**返回的是一个对象集合(数组)
-- getElementsByTagName() 返回带有指定标签名的对象集合
**getElementsByTagName("标签名称")
-- write() 向页面输出变量(值),向页面输出html代码
-- createElement("标签名称")方法:创建标签
-- createTextNode("文本内容")方法:创建文本
appendChild()方法
20.Elememt对象
*操纵Elememt对象的属性(首先要获取到element,使用document里面相应的方法获取)-- 获取属性里面的值:getAttribute(name)方法
-- 设置属性的值:setAttribute(name,value)方法
注意:value的值无法删除
-- 删除属性:removeAttribute(name)方法
*在Elememt对象中查找Elememt对象(获取标签下的子标签)
--使用Node对象中的属性childNodes,但是此属性的兼容性很差
--在Elememt对象的范围内,可以用来查找其他节点的唯一有效方法就是
getElementsByTagName()方法,而该方法返回的是一个集合
ctrl+F5 无缓存刷新(IE浏览器)
21.Node对象属性
-- nodeName*获取属性:getAttributeNode()方法
-- nodeType
-- nodeValue
--使用dom解析html时,会将html里面的标签,属性和文本都封装成对象
-- nodeType nodeName nodeValue
标签节点 1 大写的标签名称 null
属性节点 2 属性名称 属性的值
文本节点 3 #text 文本内容
- 父节点,子节点和同辈节点
-- 父节点:parentNode
* parentNode属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点
* document节点没有父节点
-- 子节点:
* childNodes:获取指定节点的所有子节点的集合
* firstChild:获取指定节点的第一个子节点
* lastChild: 获取指定节点的最后一个子节点
-- 同辈节点:
* nextSibling:返回个给定节点的下一个兄弟节点
* previousSibling:返回一个给定节点的上一个兄弟节点
22.操作DOM节点树
*插入节点-- appendChild()方法:
**添加子节点到末尾
**有剪切粘贴的效果(特点之一)
-- insertBefore(newNode,oldNode)方法
**插入一个新节点,节点不存在,创建
1.创建标签
2.创建文本
3.把文本添加到标签中
注意:没有insertAfter()方法
*删除节点
-- removeChild()方法:通过父节点删除,不能自己删除自己
*替换节点
-- replaceChild(newNode,oldNode)方法:
通过父节点替换,不能自己替换自己
*复制节点:cloneNode(boolean)方法,其中,参数boolean是判断是否复制子节点
移动节点:由以下三种方法组合完成
-- 查找节点:
* getElementById():通过节点的id属性,查找对应节点
* getElementsByName():通过节点的name属性,查找对应节点
* getElementsByTagName():通过节点名称,查找对应节点
-- 插入节点:
* appendChild()方法
* insertBefore(newNode,oldNode)方法
-- 替换节点:replaceChild(newNode,oldNode)方法
23.innerHTML属性
*浏览器几乎都支持该属性,但不是DOM标准的组成部分*innerHTML属性可以用来读,写某给定元素里的HTML内容
*innerHTML属性多与div或span标签配合使用
作用:1.获取文本内容
2.向标签里面设置内容(可以是html代码)
24.表单提交方式
*使用submit提交<form>
<input type="submit" value="提交"/>
</form>
*使用button提交表单
<form id="fm">
<input type="button" οnclick="tijiao();"/>
</form>
<script type="text/javascript">
function tijiao(){
var fm=document.getElementById("fm");
fm.action="xxx.html";
fm.submit();
}
</script>
*使用超链接提交
<a href="xxx.html?username=abc">提交</a>
*鼠标事件
onclick:鼠标点击
onchange:改变内容(一般和select一起使用)
onfocus:得到焦点
onblur:失去焦点