本文共 8881 字,大约阅读时间需要 29 分钟。
JavaScript是一种基于对象和事件驱动的 , 并具有安全性能的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 代码必须位于 <script>
与 </script>
标签之间。
<script></script>
可以放在文档的任何地方,一般放在头部或者尾部。 有的网页中用缺省type=“text/Javascript”,这种写法是正确的,因为
HTML5中可省略type属性,HTML5默认为是text/Javascript。1. 弹窗 (浏览器事件)
语法:alert("Hello,World!");
Title
语法:document.write("Hello,World!");
Title
3. 控制台输出 (调试语法)
语法:console.log("Hello,World!");
Title
document.getElementById("xxx").innerHTML = "Hello,World!";
JavaScript语法与Java类似,本文只讲解与Java语法不同的地方。
字符串(String)字面量 既可以使用单引号也可以使用双引号:
"John Doe"'John Doe'
JavaScript的语法极其随意,例如,下面的一行代码就是一个完整的赋值语句:
var i = 1;//var用来声明一个任意变量
下面的一行代码是一个字符串,但仍然可以视为一个完整的语句:
'Hello, World!';//变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用
undefined
var width;变量width没有初始值,将被赋予值undefinednull
表示一个空值,与undefined值相等number
var iNum=23; //整数 ,var iNum=23.0; //浮点数boolean
true和falsestring
一组被引号(单引号或双引号)括起来的文本,var string1=“This is a string”;Title
var str="this is JavaScript";var strLength=str.length; //长度是18
方法名称 | 说 明 |
---|---|
charAt(index) | 返回在指定位置的字符 |
indexOf(str,index) | 查找某个指定的字符串在字符串中首次出现的位置 |
substring(index1,index2) | 返回位于指定索引index1和index2之间的字符串,[index1,index2) |
split(str) | 将字符串分割为字符串数组 |
Title
var fruit= new Array("apple","orange"," peach","banana");
var fruit = new Array(4);fruit [0] = " apple ";fruit [1] = " orange ";fruit [2] = " peach ";fruit [3] = " banana ";
类别 | 名称 | 描述 |
---|---|---|
属性 | length | 设置或返回数组中元素的数目 |
方法 | join( ) | 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔 |
方法 | sort() | 对数组排序 |
方法 | push() | 向数组末尾添加一个或更多 元素,并返回新的长度 |
案例
Title
===
和!==
:如果类型相同,则是===
,若不同,其结果就是不等!==
。
Title
事件名= "函数名( )" ;
案例:
Title
alert()
alert("提示信息");
prompt()
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你的用户名","");
名称 | 说明 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某元素上 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
window.属性名= "属性值"
案例:
Title
方法名称 | 说 明 |
---|---|
prompt( ) | 显示可提示用户输入的对话框 |
alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
close( ) | 关闭浏览器窗口 |
open( ) | 打开一个新的浏览器窗口,加载给定 URL 所指定的文档 |
setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
Title
语法:window.open("弹出窗口的url","窗口名称","窗口特征”)
窗口特征:
属性名称 | 说 明 |
---|---|
height、width | 窗口文档显示区的高度、宽度。以像素计 |
left、top | 窗口的x坐标、y坐标。以像素计 |
toolbar=yes|no|1|0 | 是否显示浏览器的工具栏。黙认是yes |
scrollbars=yes|no|1|0 | 是否显示滚动条。黙认是yes |
location=yes|no|1|0 | 是否显示地址地段。黙认是yes |
status=yes| no|1|0 | 是否添加状态栏。黙认是yes |
menubar=yes|no|1|0 | 是否显示菜单栏。黙认是yes |
resizable=yes|no|1|0 | 窗口是否可调节尺寸。黙认是yes |
titlebar=yes|no|1|0 | 是否显示标题栏。黙认是yes |
fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式 |
名称 | 说明 |
---|---|
back() | 加载 history 对象列表中的前一个URL |
forward() | 加载 history 对象列表中的下一个URL |
go() | 加载 history 对象列表中的某个具体URL |
history.back()等价于history.go(-1) //浏览器的后退
history.forward等价于history.go(1) //浏览器的前进Title
名称 | 说明 |
---|---|
host | 设置或返回主机名和当前URL的端口号 |
hostname | 设置或返回当前URL的主机名 |
href | 设置或返回完整的URL |
名称 | 说明 |
---|---|
reload() | 重新加载当前文档 |
replace() | 用新的文档替换当前文档 |
Title
名称 | 说明 |
---|---|
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
名称 | 说明 |
---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象的集合 |
getElementsByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
document.getElementById("book").innerHTML="替换后的文字";
Title
var 日期对象=new Date(参数)
方法 | 说 明 |
---|---|
getDate() | 返回 Date 对象的一个月中的每一天,其值介于1~31之间 |
getDay() | 返回 Date 对象的星期中的每一天,其值介于0~6之间 |
getHours() | 返回 Date 对象的小时数,其值介于0~23之间 |
getMinutes() | 返回 Date 对象的分钟数,其值介于0~59之间 |
getSeconds() | 返回 Date 对象的秒数,其值介于0~59之间 |
getMonth() | 返回 Date 对象的月份,其值介于0~11之间 |
getFullYear() | 返回 Date 对象的年份,其值为4位数 |
getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
setTimeout("调用的函数",等待的毫秒数)
var myTime=setTimeout("disptime() ", 1000 );
//1秒(1000毫秒)之后执行disptime()一次setInterval("调用的函数",间隔的毫秒数)
var myTime=setInterval("disptime() ", 1000 );
//每隔1秒(1000毫秒)之后执行disptime()一次clearTimeout()
clearTimeout(setTimeOut()返回的ID值)
clearInterval()
clearInterval(setInterval()返回的ID值)
var myTime=setInterval("disptime() ", 1000 ); clearInterval(myTime);
Title
方法 | 说 明 | 示例 |
---|---|---|
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
floor() | 对数进行下舍入 | Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
random() | 返回0~1之间的随机数 | Math.random();例如:0.6273608814137365 |
Title 颜色 :
DOM : Document Object Model ( 文档对象模型 )
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
属性名称 | 描述 |
---|---|
firstElementChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling oFirst = oParent. firstElementChild || oParent.firstChild oLast = oParent.lastElementChild || oParent.lastChild使用getElement系列方法访问指定节点
根据层次关系访问节点
Title
运行:
节点类型 | NodeType值 |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
Title
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)Title 哈哈哈哈哈哈
名称 | 描述 |
---|---|
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild( B) | 把B节点追加至A节点的末尾 |
insertBefore( A,B ) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
Title 单击按钮创建button元素
名称 | 描述 |
---|---|
removeChild( node) | 删除指定的节点 |
replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
var delNode=document.getElementById("first");delNode.parentNode.removeChild(delNode);var oldNode=document.getElementById("second"); var newNode=document.createElement("img"); newNode.setAttribute("src","images/f03.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode);
Title
点击按钮删除列表中的首个项目。
HTML元素.style.样式属性="值"
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";
名称 | 描述 |
---|---|
onclick | 当用户单击某个对象时调用事件 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousedown | 鼠标按钮被按下 |
HTML元素.className="样式名称"
function over(){ document.getElementById("cart").className="cartOver"; document.getElementById("cartList").className="cartListOver";}function out(){ document.getElementById("cart").className="cartOut"; document.getElementById("cartList").className="cartListOut";}
HTML元素.style.样式属性;
document.defaultView.getComputedStyle(元素,null).属性;
HTML元素. currentStyle.样式属性;
属性 | 描述 |
---|---|
offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离,只读属性 |
offsetTop | 返回当前元素上边界到它上级元素的上边界的距离,只读属性 |
offsetHeight | 返回元素的高度 |
offsetWidth | 返回元素的宽度 |
offsetParent | 返回元素的偏移容器,即对最近的动态定位的包含元素的引用 |
scrollTop | 返回匹配元素的滚动条的垂直位置 |
scrollLeft | 返回匹配元素的滚动条的水平位置 |
clientWidth | 返回元素的可见宽度 |
clientHeight | 返回元素的可见高度 |
属性应用
document.documentElement.scrollTop; document.documentElement.scrollLeft;
document.body.scrollTop; document.body.scrollLeft;var sTop=document.documentElement.scrollTop||document.body.scrollTop;
转载地址:http://okwm.baihongyu.com/