js基础总结
2016-05-27 10:11
399 查看
操作window对象，html标记对象
1.输出是document.write();
2.字符串，数组，数值Number，都可以直接当对象用，通过小数点调用属性和方法
属性：length
l 方法：
字符串方法：toLowerCase()，toUpperCase()，charAt(index),indexOf(),lastIndexOf(),substr(),substring(),split()
数组属性：length
方法：join（）,reverse(),
delete运算符，shift(),pop(),unshift(),push()
Math对象是一个静态对象，换句话说：在使用Math对象，不需要创建实例。
l Math.PI：圆周率。
l Math.abs()：绝对值。如：Math.abs(-9) = 9
l Math.ceil()：向上取整(整数加1，小数去掉)。如：Math.ceil(10.2) = 11
l Math.floor()：向下取整(直接去掉小数)。如：Math.floor(9.888) = 9
l Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
l Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
l Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
l Math.sqrt()：求平方根。如：Math.sqrt(121) = 11
l Math.random()：返回一个0到1之间的随机小数。如：Math.random() = 0.12204467732259783
Date对象的使用，必须使用new关键字来创建，否则，无法调用Date对象的属性和方法。
l
核心Dom
2、节点的创建
l document.createElement(tagName)：创建一个指定的HTML标记，一个节点
u tagName：是指不带尖括号的HTML标记名称。
u 举例：var imgObj = document.createElement(“img”)
l parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
u parentNode代表父节点，父节点必须存在。
u childNode代表子节点。
u 举例：document.body.appendChild(imgObj)
l parentNode.removeChild(childNode)：删除某个父节点下的子节点。
u parentNode代表父节点。
u childNode代表要删除的子节点。
u 举例：document.body.removeChild(imgObj)
3、对节点的属性操作
l setAttribute(name,value)：给某个节点添加一个属性。
l getAttribute(name)：获取某个节点属性的值。
l removeAttribute(name)：删除某个节点的属性。
节点就是对象，对象就是标记
l 功能：查找网页中指定id的元素对象。
l 语法：var obj = document.getElementById(id)
l 参数：id是指网页中标记的id属性的值。
l 返回值：返回一个元素对象。
l 举例：var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
l 功能：查找指定的HTML标记，返回一个数组。
l 语法：var arrObj = parentNode.getElementsByTagName(tagName)
l 参数：tagName是要查找的标记名称，不带尖括号。
l 返回值：返回一个数组。如果只有一个节点，也返回一个数组。
l 举例：var arrObj = ulObj.getElementsByTagName(“li”)
l tagName：标签名称，与核心DOM中nodeName一样。
l className：CSS类的样式。
l id：同HTML标记id属性一样。
l title：同HTML标记的title属性一样。
l style：同HTML标记的style属性一样。
l innerHTML：包含HTML标记中的所有的内容，包括HTML标记等。
l offsetWidth：元素对象的可见宽度，不带px单位。
l offsetHeight：元素对象的可见高度，不带px单位。
l scrollWidth：元素对象的总宽度，包括滚动条中的内容，不带px单位。
l scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位。
l scrollTop：指内容向上滚动上去了多少距离(有滚动条时才有效)，默认值为0
l scrollLeft：指内容向左滚动过去了多少距离(有滚动条时才有效)。
核心DOM，htmlDOM，cssDOM,eventDOM
Css的三种使用方式：三中的使用方法的简单实例如下：
行内样式：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
内嵌样式：
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
</body>
</html>
外部式：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
css文件
#div{width:100px;height:100px;background:red;}
l onload：当网页加载完成时。只能给<body>用。
l onclick：当点击时，所有标记都适用。
l onscroll：当拖动滚动条时
l onmouseover：当鼠标放上时
l onmouseout：当鼠标移开时
l onsubmit：当提交表单时
l onreset：当重置表单时
l onfocus：当获得焦点时，把光标定位到文本框中。
l onblur：当失去焦点时，把光标从文本框中移开。
l onchange：当下拉列表内容改变时。用在下拉列表、上传文件。
l onselect：当选中文本时。
l onresize：当改变窗口大小时，发生的事件。
l ……
3、事件句柄属性
HTML标记，都有相应的事件属性。
每一个HTML标记，都对应一个元素对象。元素对象也具有相应的事件属性。
但是，元素对象的事件属性应该是全小写。
事件属性后面调用的一般是JS函数，通过JS函数来完成相应的功能。
该event对象中记录了当前事件发生的环境信息。如：单击时的坐标、事件类型等。
注意：这个event对象是“短暂”存在的，新的事件发生，新的event对象产生，原来的event对象消失了。
（1）通过HTML标记的事件属性来传递event对象
在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。
该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数。记住一句话：事件已发生，event对象就存在了
（2）使用元素对象的事件属性来传递event对象
2、DOM中Event对象属性
l type：当前的事件类型
l clientX和clientY：距离窗口左边和上边的距离
l pageX和pageY：距离网页左边和上边的距离
l screenX和screenY：距离屏幕左边和上边的距离
1.输出是document.write();
2.字符串，数组，数值Number，都可以直接当对象用，通过小数点调用属性和方法
属性：length
l 方法：
字符串方法：toLowerCase()，toUpperCase()，charAt(index),indexOf(),lastIndexOf(),substr(),substring(),split()
数组属性：length
方法：join（）,reverse(),
delete运算符，shift(),pop(),unshift(),push()
Math对象是一个静态对象，换句话说：在使用Math对象，不需要创建实例。
l Math.PI：圆周率。
l Math.abs()：绝对值。如：Math.abs(-9) = 9
l Math.ceil()：向上取整(整数加1，小数去掉)。如：Math.ceil(10.2) = 11
l Math.floor()：向下取整(直接去掉小数)。如：Math.floor(9.888) = 9
l Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
l Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
l Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
l Math.sqrt()：求平方根。如：Math.sqrt(121) = 11
l Math.random()：返回一个0到1之间的随机小数。如：Math.random() = 0.12204467732259783
Date对象
Date对象和String对象不太一样，定义了一字符串，其实就是一个String对象，就可以直接调用属性和方法。Date对象的使用，必须使用new关键字来创建，否则，无法调用Date对象的属性和方法。
l
核心Dom
2、节点的创建
l document.createElement(tagName)：创建一个指定的HTML标记，一个节点
u tagName：是指不带尖括号的HTML标记名称。
u 举例：var imgObj = document.createElement(“img”)
l parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
u parentNode代表父节点，父节点必须存在。
u childNode代表子节点。
u 举例：document.body.appendChild(imgObj)
l parentNode.removeChild(childNode)：删除某个父节点下的子节点。
u parentNode代表父节点。
u childNode代表要删除的子节点。
u 举例：document.body.removeChild(imgObj)
3、对节点的属性操作
l setAttribute(name,value)：给某个节点添加一个属性。
l getAttribute(name)：获取某个节点属性的值。
l removeAttribute(name)：删除某个节点的属性。
节点就是对象，对象就是标记
HTML DOM访问HTML元素（节点）（标记）的方法(最常用)
1、getElementById()l 功能：查找网页中指定id的元素对象。
l 语法：var obj = document.getElementById(id)
l 参数：id是指网页中标记的id属性的值。
l 返回值：返回一个元素对象。
l 举例：var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
l 功能：查找指定的HTML标记，返回一个数组。
l 语法：var arrObj = parentNode.getElementsByTagName(tagName)
l 参数：tagName是要查找的标记名称，不带尖括号。
l 返回值：返回一个数组。如果只有一个节点，也返回一个数组。
l 举例：var arrObj = ulObj.getElementsByTagName(“li”)
元素对象的属性
l tagName：标签名称，与核心DOM中nodeName一样。
l className：CSS类的样式。
l id：同HTML标记id属性一样。
l title：同HTML标记的title属性一样。
l style：同HTML标记的style属性一样。
l innerHTML：包含HTML标记中的所有的内容，包括HTML标记等。
l offsetWidth：元素对象的可见宽度，不带px单位。
l offsetHeight：元素对象的可见高度，不带px单位。
l scrollWidth：元素对象的总宽度，包括滚动条中的内容，不带px单位。
l scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位。
l scrollTop：指内容向上滚动上去了多少距离(有滚动条时才有效)，默认值为0
l scrollLeft：指内容向左滚动过去了多少距离(有滚动条时才有效)。
核心DOM，htmlDOM，cssDOM,eventDOM
Css的三种使用方式：三中的使用方法的简单实例如下：
行内样式：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
内嵌样式：
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
</body>
</html>
外部式：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
css文件
#div{width:100px;height:100px;background:red;}
CSS DOM Event DOM：事件DOM
2、常用事件l onload：当网页加载完成时。只能给<body>用。
l onclick：当点击时，所有标记都适用。
l onscroll：当拖动滚动条时
l onmouseover：当鼠标放上时
l onmouseout：当鼠标移开时
l onsubmit：当提交表单时
l onreset：当重置表单时
l onfocus：当获得焦点时，把光标定位到文本框中。
l onblur：当失去焦点时，把光标从文本框中移开。
l onchange：当下拉列表内容改变时。用在下拉列表、上传文件。
l onselect：当选中文本时。
l onresize：当改变窗口大小时，发生的事件。
l ……
3、事件句柄属性
HTML标记，都有相应的事件属性。
每一个HTML标记，都对应一个元素对象。元素对象也具有相应的事件属性。
但是，元素对象的事件属性应该是全小写。
事件属性后面调用的一般是JS函数，通过JS函数来完成相应的功能。
DOM中Event对象简介
当事件发生时，向调用函数，传递一个event参数，这个event参数是一个事件对象。该event对象中记录了当前事件发生的环境信息。如：单击时的坐标、事件类型等。
注意：这个event对象是“短暂”存在的，新的事件发生，新的event对象产生，原来的event对象消失了。
Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)（1）通过HTML标记的事件属性来传递event对象
在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。
该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数。记住一句话：事件已发生，event对象就存在了
（2）使用元素对象的事件属性来传递event对象
2、DOM中Event对象属性
l type：当前的事件类型
l clientX和clientY：距离窗口左边和上边的距离
l pageX和pageY：距离网页左边和上边的距离
l screenX和screenY：距离屏幕左边和上边的距离
IE中Event对象
IE中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传参数。如：window.event
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- json解析二维对象
- js控制input输入的内容
- 读取本地json数据
- .Net深入实战系列—JSON序列化那点事儿
- 便签5-js延时器定时器
- js window.event 兼容浏览器问题
- JS集成fckeditor及判断内容是否为空的方法
- js getBoundingClientRect
- js获取项目根路径
- 原生js实现简单的展开收缩
- js实现div模拟模态对话框展现URL内容
- 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
- 基于JS实现密码框(password)中显示文字提示功能代码
- SSM框架下，Jsp页面提交请求及action获取值得问题
- js跨域问题浅析及解决方法优缺点对比
- 13个JavaScript图表（JS图表）图形绘制插件【转】
- 13个JavaScript图表（JS图表）图形绘制插件【转】
- 【DRP分销】--- JSP的四个常用对象的作用域
- javascript笔记：函数的定义与调用
- 用JS获取地址栏参数的方法