JavaScript这个东西其实一直在使用,但是从来没有系统的去学习过,或者去复习整理过。今天从网上下载了JavaScript专题的一系列教学视频,准备好好补一补这方面的相关知识,当然每天学完还是得及时整理,不然又得忘了,对于JavaScript的系统的学习,我记得大学的时候一门课叫web开发,那个时候就对JavaScript有一个系统的学习过,但是学完就基本上没用过了,所以对于这个东西的印象还是会用,但是用不好。
所以现在开始再次拾起来这些知识:
首先,像所有的入门课程一样,来个helloworld:
在body中定义一个button:
<button>ClickMe</button>
然后写JavaScript代码了:
<script type="text/javascript">
window.οnlοad=function()//整个页面加载完成出发该事件
{
var btn=document.getElementsByTagName("button")[0];//通过获取页面的所有button节点并取得第一个元素
btn.οnclick=function()//点击button相应事件
{
alert("Hello World");
}
}
</script>
这样,一个JavaScript版helloworld就好了,注释内容很重要哦。
接下来JavaScript获取节点的方法:
大致有四种,但是IE只是支持两种,所以就写这两种吧:
第一个是通过id获取节点,一种是通过TagName获取节点:
body中代码:
<body>
<p>你喜欢那个城市?</p>
<ul id="city" >
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
</body>
JavaScript代码:
<script type="text/javascript">
window.οnlοad=function()
{
//1根据ID获取节点,该方法为document对象的方法
var bjNode=document.getElementById("bj");
alert(bjNode);
//2获取所有li节点,获取一个集合
//该方法是Node接点的方法,任何节点都有该方法
var liNodes=document.getElementsByTagName("li");
alert(liNodes.length);
//2方法,对应city节点也可以
var cityNode=document.getElementById("city");
var cityLiNodes=cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
}
</script>
今天最后一个是获取子节点的方法,如果是文本节点,我们还可以进行赋值操作。
获取子节点的步骤如下:
- 获取父节点
- 根据父节点来获取子节点
- 对子节点进行操作
相关代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> window.οnlοad=function() { //获取元素节点后可以给元素节点属性读写操作,就是所谓的赋值取值 var nameNode=document.getElementById("name"); nameNode.value="kitty"; alert(nameNode.value); //获取元素节点的子节点 var cityNode=document.getElementById("city"); //利用childNodes方法获取所有子节点,现在已经不实用了 alert(cityNode.childNodes.length); //(获取city下所有li节点) var cityNodes=cityNode.getElementsByTagName("li"); alert(cityNodes.length); //实用方法获取city下第一个和最后一个子节点 alert(cityNode.firstChild); alert(cityNode.lastChild); //操作文本节点 var bjNode=document.getElementById("bj");//获取文本节点所在的元素节点 var bjtextNode=bjNode.firstChild;//用元素节点获取文本几点 bjtextNode.nodeValue="kitty";//操纵文本节点 } </script> </head> <body> <p>你喜欢那个城市?</p> <ul id="city" > <li id="bj" name="beijing">北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul> name: <input type="text" name="username" id="name"/> </body> </html>