JS-基础

来源：互联网发布：金税盘开票软件口令编辑：程序博客网时间：2024/06/07 04:03

>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);//1alert(bjNode.nodeName);//lialert(bjNode.nodeValue);//元素节点中没有nodeValue,所以是null//属性节点var nameAttr = document.getElementById("name").getAttributeNode("name");alert(nameAttr.nodeType);//2alert(nameAttr.nodeName);//属性节点的节点名:属性名alert(nameAttr.nodeValue);//属性节点的nodeValue 属性值//文本节点var textNode = bjNode.firstChild;alert(textNode.nodeType);//3alert(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的textvar 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>

0 0