学习javascript过程当中的心得体会

练习过程当中遇到的问题，知识点总结

1、函数调用

一、因为不少时候JS是写在head前面的，调用一些body里的元素ID，而此时body还没有载入，就会报错，找不到该元素，因此写成window.onload=function() {//调用一些元素..}写在head的前面，这样再调用就不会出错了

二、不知道为何按照下图方式没法调用函数，因此写成setTimeOut("function()",毫秒数);setTimeOut只执行一次，里面的函数必定要加引号！

2、浏览器对象

一、a标签要写成<a href="javascript:;" onClick="function();"></a>或<a href="javascript:function();"></a>

<a> 标签的 href 属性用于指定超连接目标的 URL，href 属性的值能够是任何有效文档的相对或绝对 URL，包括片断标识符和 JavaScript 代码段。
这里的href="javascript:;"，其中javascript:是伪协议，它可让咱们经过一个连接来调用javascript函数。而采用这个方式 javascript:;能够实现A标签的点击事件运行时，若是页面内容不少，有滚动条时，页面不会乱跳，用户体验更好。

二、实际中经常使用注册后自动跳转页面

<!--先编写好网页布局-->
<h1>操做成功</h1>
<span id="second" >5</span>
<span >秒后回到主页</span>
<a href="javascript:back();">返回</a>

 

 

<script type="text/javascript">
var num=document.getElementById("second").innerHTML;
//获取显示秒数的元素，经过定时器来更改秒数。
function count(){
num--;
document.getElementById("second").innerHTML=num;
if(num==0){
location.assign("www.imooc.com");
}
}
setInterval("count()",1000);
//经过window的location和history对象来控制网页的跳转。
function back(){
window.history.back();
}
</script>

 

3、DOM对象，控制HTML元素

一、childNodes

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，因此IE是3，其它浏览器是7，以下图所示:

若是把代码改为这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:（IE和其它浏览器结果是同样的）

  UL子节点个数:3
  节点类型:1

二、访问兄弟结点时，要去除空白节点

 

while (x && x.nodeType!=1){
x=x.previousSibling;  //返回某个节点以前紧跟的节点（处于同一树层级中）
}

三、

在看到这个编程练习的时候，个人第一反应是JS竟然强大到能够代替JSP了。但仔细想一想，其实这只是表面的删除，增长，并无对数据库的数据产生任何影响，因此，JSP和JS彻底不同啊！233333

要求1的代码以下

window.onload = function(){
var tr=document.getElementsByTagName("tr");
//经过for循环给每个tr绑上鼠标上移时间和鼠标移除事件
for(var i=1;i<tr.length;i++)
{
bgcChange(tr[i]);
}
// 鼠标移动改变背景,能够经过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
}
function bgcChange(obj)
{
obj.onmouseover=function(){
obj.style.backgroundColor="red";
}
obj.onmouseout=function(){
obj.style.backgroundColor="#fff";
}
}

要求2的代码以下

function add1(){
var one=document.getElementsByTagName("table")[0];
var two=document.createElement("tr");

for(var i=0;i<3;i++){
var three=document.createElement("td");//一开始把three写在for循环外面，无反应，把one的table换成tbody，能够增长一个。
three.style.border="1px solid red";
three.innerHTML="123";

two.appendChild(three);
}
one.appendChild(two);
}

4、总的编程练习==

 

慕课网上的JS进阶篇最后的编程挑战是作一个上图的网页

好吧，虽然我作过一个婚恋网站，里面也有一个相似的标签页，但时间已经好久了，感受一天不编程手都会生，更别说距离网站完成已通过去了快一年半的时间。因此，让我本身写一个的时候，个人心里是惧怕的。下面来讲一说制做过程当中的心得体会。

①基础太差，最基本最经常使用的属性记不住。好比li去掉点是list-style:none;    超连接去掉下划线是text-decoration:none;

②我写div老是喜欢用id，以为这样可以找到惟一的div，而后设置它的css。但其实最好的仍是独立的属性用id来写，共同的用class，好比这个标签效果，就是上面的标签有两个状态，即选中和未选中，对应两种样式，下面的内容相应的有两个状态，对应两种样式。因此选中和未选中写成两种样式，而后再利用js改变经过id肯定的div的className，进而改变其样式

③这个JS其实蛮好理解的，不过我在写的过程当中搞错了变量，致使一直在找错，还找不出来，心急的快要爆炸。估计是脑子抽了，也没认真思考，在for循环里一直用获取到的b来选择div，正确的答案是把b换成i，由于是i循环啊！！！i在循环啊！！！

 

Sanding原创，转载请标注，thank you~