javascripte学习
一、常用互动方法
如何向网页中输入内容, 如何与浏览器窗口进行交互, 通过简单的对象方法就可以轻松实现.
1.引用外部js文件
<script src="script.js"></script>
2.输入内容
<script type="text/javascript">
document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>
3.警告(Alert消息对话框)
<script type="text/javascript">
var mynum = 30;
alert("hello!");
alert(mynum);
</script>
4.确认(confirm消息对话框)
<script type="text/javascript">
function rec(){
var mymessage=confirm("请问您是女士吗?");
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
5.提问(prompt 消息对话框)
<script type="text/javascript">
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("请输入您的成绩:");
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>
6.打开新窗口(window.open)
window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('http://www.imooc.com','_bank','width=600,height=400,top=200px,left=0px');
}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>
7.关闭窗口
<script type="text/javascript">
var mywin=window.open("http://www.imooc.com");
var page = confirm("是否关闭窗口?")
if (page == true){
mywin.close();
alert("已关闭窗口")
}else{
alert("窗口尚未关闭!")
}
</script>
二、DOM操作
如何用JavaScript去操作HTML元素和CSS样式, 实现简单的操作
2.1通过ID获取元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
2.2 innerHTML 属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "Hello, world!"
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
2.3改变 HTML 样式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color = "red";
mychar.style.backgroundColor = "#CCC";
mychar.style.width = "300px";
</script>
</body>
</html>
2.4 显示和隐藏(display属性)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
2.5 控制类名(className属性)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "tow"
}
</script>
</body>
</html>
三、事件
| 事件 | 说明 |
|---|---|
| onclick | 鼠标点击事件 |
| onmouseover | 鼠标经过事件 |
| onmouseout | 鼠标移开事件 |
| onchange | 文本框内容改变事件 |
| onselect | 文本框内容被选中事件 |
| onfoucs | 光标聚集 |
| onblur | 光标离开 |
| onload | 网友导入 |
| onunload | 关闭网页 |
四、Date 日期对象
| 方法名称 | 功能描述 |
|---|---|
| get/setDate() | 返回/设置日期 |
| get/setFullYear() | 返回/设置年份,用四位数字 |
| get/setYear() | 返回/设置年份 |
| get/setMonth() | 返回/设置月份 |
| get/setHours() | 返回/设置小时, 24小时制 |
| get/setMinutes() | 返回/设置分钟数 |
| get/setSeconds() | 返回/设置秒钟数 |
| get/setTime() | 返回/设置时间(毫秒为单位) |
五、数组方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或者更多的数组, 并返回结果 |
| join() | 把数组的所有元素放入一个字符串, 元素通过指定的分隔符进行分各 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或者更多元素, 并返回新的长度 |
| reverse() | 颠倒数组中元素的第一元素 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组元素进行排序 |
| splice() | 删除元素, 并向数组添加新元素 |
| toSource() | 返回该对象的源代码 |
| toString() | 把数组转换为字符串, 并返回结果 |
| toLocaleString() | 把数组转换为本地数组, 并返回结果 |
| unshift() | 向数组开头添加一个或更多元素, 并返回新的长度 |
| valueOf() | 返回数组对象的原始值 |
六、计时器
| 方法 | 描述 |
|---|---|
| setTimeout() | 指定的延迟时间之后执行代码 |
| cleartimecot() | 取消setTimeout()设置 |
| setinterval() | 每隔指定的时间执行代码 |
| clearinterval() | 取消setinterval()设置 |
七、Screen对象
| 属性 | 描述 |
|---|---|
| availHeight | 窗口可以使用的屏幕高度, 单位像素 |
| availWidth | 窗口可以使用的屏幕宽度,单位像素 |
| colorDepth | 用户浏览器表示的颜色位数, 通常为32位(每像素的位数) |
| pixelDepth | 用户浏览器表示的颜色位数, 通常为32位(每像素的位数)(IE不支持此属性) |
| height | 屏幕的高度, 单位像素 |
| width | 屏幕的宽度, 单位像素 |
八、DOM对象,控制HTML元素
掌握如何控制HTML基本元素, 如何在文档中选取单独的元素, 如何创建、插入和删除元素, 并修改样式等.
|方法|说明|获得
|:---|:---|
|getElementById|通过指定id获得元素|一个
|getElementsByName|通过元素名称name属性获得元素|一组
|getElementByTagName|通过标签名称获得元素|一组
