JS-基础_worm.js-优快云博客

本文介绍了JavaScript的基础知识，包括为何学习JavaScript、基本语法操作及如何在HTML中使用JavaScript。通过实例演示了如何获取和操作DOM元素，展示了JavaScript在网页动态效果制作中的应用。

>1：JS为什么值得我们学习。
1. 所有主流浏览器都支持JavaScript。
2. 目前，全世界大部分网页都使用JavaScript。
3. 它可以让网页呈现各种动态效果。

4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。

>2:在Html文件中js的位置：
在window.onload时，文件中所有内容加载完成，一般将js中的内容卸载head的 window.onload = function()中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>

<script type="text/javascript">
window.onload = function()
{
}
</script>

>3:基础
3.1：可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容document.write("I love JavaScript！");
3.2 alert(字符串或变量);消息对话框
3.3 confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大，要学习噢!"); }
</script>
3.4 弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
3.5 open() 方法可以查找一个已经存在或者新建的浏览器窗口
window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
案例：
<script type="text/javascript"> window.open('http://www.imooc.com',
'_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
3.6 close()关闭窗口，window.close(); //关闭本窗口，<窗口对象>.close(); //关闭指定的窗口
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>

4：JS DOM编程
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。
DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

简单案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<script type="text/javascript">
		window.onload = function()
		{
		//1:获取元素节点
			//在编写html文档时，需要确保id属性值是唯一的
			var bjNode = document.getElementById("bj");
			alert(bjNode);
			//获取所有的li节点     使用标签名获取指定节点的集合
			var liNodes = document.getElementsByTagName("li");
			alert(liNodes.length);
			
			var cityNodes = document.getElementById("city");
			var cityLiNodes = cityNodes.getElementsByTagName("li");
			alert(cityLiNodes.length);
			
			//根据html的name属性来获取指定元素的集合
			var gendernodes = document.getElementsByName("gender");
			alert(gendernodes.length);
			
			/*
				若html中没有定义name属性  则getElementsByName()
				对于Ie无效，所以使用该方法时无效
			*/
			var beijingNodes = document.getElementsByName("beijing");
			alert(beijingNodes.length);
			
			//其他获取元素节点方法IE不支持
			
		//2：读写属性节点  属性节点即为 某一指定元素的节点属性
			//获取元素节点
			var textNode = document.getElementById("name");
			alert(textNode.value);
			textNode.value = "Test";
			
			
		//3:获取子节点
			//获取city的所有子节点
			var cityNode = document.getElementById("city");
			//利用元素节点的childNodes 可以获取指定元素的所有节点   该方法不实用
			alert(cityNode.childNodes.length);
			
			//获取city节点的所有的li节点
			var cityLiNode = cityNode.getElementsByTagName("li");
			alert(cityLiNode.length);
			
			//获取最后一个节点和第一个节点
			alert(cityNode.firstChild);
			alert(cityNode.lastChild);
			
		//4：获取文本节点
			//获取文本节点所在的元素节点
			var beijingNode = document.getElementById("bj");
			//通过firstChild定位到文本节点
			var beijingNodeChild = beijingNode.firstChild;
			//通过操作操作文本节点的nodeValue属性来读取文本节点的值
			alert(beijingNodeChild.nodeValue);
			//重新设置文本节点的值
			beijingNodeChild.nodeValue = "西单";
		    //alert(beijingNodeChild);
					
				
		}
	</script>

</head>
<body>

	<p>你喜欢哪个城市?</p>
	<ul id="city">
	    <li id="bj" name="beijing">北京</li>
		<li id="nj">南京</li>                                 
		<li id="xj">西京</li>
		<li id="dj">东京</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪类手机？</p>
	<ul id="game">
		<li id="apple">苹果</li>
		<li id="sum">三星</li>
		<li id="huawei">华为</li>
		<li id="xiaomi">小米</li>
	</ul>
	
	<br>
	name:<input type="text" name="username" id="name" value="atguigu">
	<br><br>
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
</body>
</html>

案例二：节点的属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<script type="text/javascript">
		
		window.onload = function()
		{
			//关于节点的属性 nodeType nodeName nodeValue
			//在文档中 任何一个节点都有这三个属性
			//而  id name value是具体节点的属性
			
			//元素节点的三个属性
			var bjNode = document.getElementById("bj");
			alert(bjNode.nodeType);//1
			alert(bjNode.nodeName);//li
			alert(bjNode.nodeValue);//元素节点中没有nodeValue,所以是null
			
			//属性节点
			var nameAttr = document.getElementById("name").getAttributeNode("name");
			alert(nameAttr.nodeType);//2
			alert(nameAttr.nodeName);//属性节点的节点名:属性名
			alert(nameAttr.nodeValue);//属性节点的nodeValue 属性值
			
			//文本节点
			var textNode = bjNode.firstChild;
			alert(textNode.nodeType);//3
			alert(textNode.nodeName);//"text"
			alert(textNode.nodeValue);//文本内容
			
			//nodeTpye nodeName是只读的，NodeValue是可读写的
			//以上三个属性 只在文本节点中使用nodeValue 读写文本值时 使用最多。
			
		}
		
		</script>


</head>
<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
	    <li id="bj" name="beijing">北京</li>
		<li id="nj">南京</li>                                 
		<li id="xj">西京</li>
		<li id="dj">东京</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪类手机？</p>
	<ul id="game">
		<li id="apple">苹果</li>
		<li id="sum">三星</li>
		<li id="huawei">华为</li>
		<li id="xiaomi">小米</li>
	</ul>
	
	<br>
	name:<input type="text" name="username" id="name" value="atguigu">
	<br><br>
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female

</body>
</html>

案例三：//实现点击每个li时弹出li的text

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	window.onload = function()
	{
	//实现点击每个li时 弹出li的text
		var liNodes = document.getElementsByTagName("li");
		for(var i=0;i<liNodes.length;i++)
		{
			liNodes[i].onclick = function()	
			{
				//this为正在相应时间的节点
				//alert(this.firstChild.nodeValue);
				//此时 i 已经是8了
				//因为在加载完页面的时候for循环已经执行完了i=8
				//所以liNodes[i].firstChild.nodeValue获取不到值
				//alert(i);
				
				var str = this.firstChild.nodeValue;
				var reg = /^\^{2}/g;
				
				if(reg.test(str))
				{
					str = str.replace(reg,"");
				}
				else
				{
					str = "^^"+this.firstChild.nodeValue;
				}
				
				this.firstChild.nodeValue = str;
			}
		}
	}
</script>

</head>
<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
	    <li id="bj" name="beijing">北京</li>
		<li id="nj">南京</li>                                 
		<li id="xj">西京</li>
		<li id="dj">东京</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪类手机？</p>
	<ul id="game">
		<li id="apple">苹果</li>
		<li id="sum">三星</li>
		<li id="huawei">华为</li>
		<li id="xiaomi">小米</li>
	</ul>
	
	<br>
	name:<input type="text" name="username" id="name" value="atguigu">
	<br><br>
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
</body>
</html>