javascript学习笔记（一）

最新推荐文章于 2024-03-30 14:55:53 发布

廖锟

最新推荐文章于 2024-03-30 14:55:53 发布

阅读量387

点赞数

分类专栏：编程

本文链接：https://blog.csdn.net/qq_27629109/article/details/50527765

版权

编程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

书本为Michael Moncur著《javascript入门经典》，代码取自书本。

知识点比较零碎，直接贴几段代码。

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Descriptive Links</title>
</head>
<body>
<h1>Descriptive Links</h1>
<p>Move the mouse pointer over one of these links to view a description:</p>
<ul>
<li><a href="order.html" id="order">Order Form</a>
<li><a href="email.html" id="email">Email</a>
<li><a href="complain.html" id="complain">Complain Department</a>
</ul>
<h2 id="description"></h2>
<script language="javascript" type="text/javascript" src="linkdesc.js"></script>
</body>
</html>
</span>

linkdesc.js

<span style="font-family:Microsoft YaHei;font-size:18px;">function cleardesc(){
	d = document.getElementById("description");
	d.innerHTML = "";
}
function hover(e){
	if (!e) var e = window.event;
	whichlink = (e.target) ? e.target.id : e.srcElement.id;
	if (whichlink == "order") desc = "Order a product";
	else if (whichlink == "email") desc = "Send us a email";
	else if (whichlink == "complain") desc = "Insult us, our products, or our families";
	d = document.getElementById("description");
	d.innerHTML = desc;	
}
orderlink = document.getElementById("order");
orderlink.onmouseover = hover;
orderlink.onmouseout = cleardesc;
orderlink = document.getElementById("email");
orderlink.onmouseover = hover;
orderlink.onmouseout = cleardesc;
orderlink = document.getElementById("complain");
orderlink.onmouseover = hover;
orderlink.onmouseout = cleardesc;
</span>

以上代码实现鼠标经过一段超链接文字在下方显示说明。

documen.getElementById()用于通过各ID值获取到对应的对象，.innerHTML用于设定对象的值。.onmouseover和.onmouseout两个属性对应鼠标在对象上和离开对象时触发的js方法。

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create a new window</title>
</head>
<body>
<h1>Create a new window</h1>
<hr />
<p>Use the buttons below to test opening and closing windows in JavaScript.</p>
<hr />
<form name="windorm">
<input type="button" value="Open New Window" οnclick="NewWin=window.open('','NewWin','toolbar=no,status=no,width=200,height=100'); ">
<p><input type="button" value="Close New Window" οnclick="NewWin.close();"</p>
<p><input type="button" value="Close Main Window" οnclick="window.close();"</p>
</form>
<br /><p>Have fun!</p>
<hr />
</body></span>

以上代码实现点击三个按钮分别实现

1、新建一个窗口，window.open(‘1’，‘2’，‘3’)中1中填文件名或不填分别是打开一个指定的页面窗口或一个空白窗口，2为窗口的name属性，用于之后的引用该窗口，3分别设定窗口的属性，包括width,height,toobar,location,directories,status,menubar,scrollbars,resizable等属性。

2、关闭窗口，.close()方法关闭窗口，用窗口的name属性选择要关闭的窗口。

3、同2，window.close()关闭当前窗口。

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hiding and Showing Objects</title>
<script language="javascript" type="text/javascript">
function ShowHide() {
	if (!document.getElementById) return;
	var head1 = document.getElementById("head1");
	var head2 = document.getElementById("head2");
	var showhead1 = document.form1.head1.checked;
	var showhead2 = document.form1.head2.checked;	
	head1.style.visibility=(showhead1) ? "visible" : "hidden";
	head2.style.visibility=(showhead2) ? "visible" : "hidden";
}
</script>
</head>
<body>
<h1 id="head1">This is the first heading</h1>
<h1 id="head2">This is the second heading</h1>
<p>Using the W3C DOM, you can choose whether to show or hide the headings on this page using the checkboxed below.</p>
<form name="form1">
<input type="checkbox" name="head1" checked="checked" οnclick="ShowHide()"  />
<b>Show first heading</b><br />
<input type="checkbox" name="head2" checked="checked" οnclick="ShowHide()"  />
<b>Show second heading</b><br />
</form>
</body>
</html>
</span>

以上代码实现勾选不同的值显示不同的文字。主要用到name.style.visibility控制文字是否可见。

以上就是自己在学习javascript过程中敲下的几段代码，学习比较粗心有错误的地方还请指正。