Js基础
1：document.write()
这个是动态创建元素内容，利用js。这个可以利用js来创建元素，文本，标签等，document.write()与document.writeln()的区别就在于writeln（）输出内容后，会在源代码中换一行，而write()会紧挨着输出不会有任何换行。这个标签必须随页面一同加载显示。
在一个网页中引用其它网页可以使用js的document.write(html代码)，这样子生成。
2：最基本的dom遍历属性
àdocument.getElementById()
根据元素id获取元素，使用这个，不是集合，是单个的元素。
àdocument.getElementsByName()
但是这个特殊，根据元素的name获取元素,这个放回的是对象数组，和下面获取到的是集合只有上面的获取到的是单个的元素。在表单元素的时候使用最好。
à document.getElementsByTagName()
这个也是获取元素，根据页面上标签的名字获取所有的元素，获取到的是个集合。
Eg:按钮实现里面内容变化
<script type="text/javascript"> window.onload = function() { var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = function () { for (var c = 0; c < inputs.length; c++) { if(inputs[c].type=="button") { inputs[c].value = '哈哈哈'; } } this.value = '呜呜'; }; } }; </script>
Eg：利用计时器实现使用说明的等待时间。
<script type="text/javascript"> window.onload = function () { var ss = 4; //这里启动计时器 var time=setInterval(function() { var sa = document.getElementById('btn1'); if (ss > 0) { sa.value = '请稍等几分钟' + ss + ''; ss--; } else { sa.value = '同意'; sa.disabled = false; clearInterval(time); } }, 1000); }; </script>
àdocument.createElement('标签名');
<script type="text/javascript"> window.onload = function() { document.getElementById('btn').onclick = function() { var alink = document.createElement('a'); //动态创建元素 alink.href = 'http://www.baidu.com'; alink.target = '_black'; alink.innerText = '百度'; document.getElementById('div1').appendChild(alink); //将其添加到div中. var btton = document.createElement('input'); btton.type = 'text'; document.getElementById('div1').appendChild(btton); }; }; </script>
删除层中元素
document.getElementById('btn1').onclick = function() { var sss = document.getElementById('div1'); while (sss.firstChild) { sss.removeChild(sss.firstChild); } };
***：在程序中需要判断类型，我们可以利用typeof()来得到其变量的类型。
innerText.和innerHTML的区别
这个就是
Eg:往table中添加内容。
下面的dict格式是json的格式，也是一种键值对的形式。
<title></title> <script type="text/javascript"> var dict = { '百度': 'http://www.baidu.com', '京东': 'http://www.jd.com', '淘宝': 'http://www.taobao.com', }; window.onload = function() { document.getElementById('btn').onclick = function() { var table = document.createElement('table'); table.border = '1'; table.backgroundColor = 'red'; for (var key in dict) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = key; var td2 = document.createElement('td'); td2.innerHTML = '<a href="' + dict[key] + '">' + key + '</a>'; tr.appendChild(td1); tr.appendChild(td2); table.appendChild(tr); } document.body.appendChild(table); }; }; </script>
Js操作样式
注意：
修改元素的样式不是设置class属性，而是className属性。class是js中的一个保留字，属性不能使用关键字，保留字就变为了classname。
使用方式，属性名.style，注意这里的属性名可能和css中的名字不一样，我们要注意区分。
<script type="text/javascript"> window.onload = function() { document.getElementById('btn').onclick = function() { var div = document.getElementById('div').style; div.backgroundColor = 'red'; div.border = '1px solid blue'; div.width = '200px'; div.height = '400px'; div.fontFamily = '楷体'; div.styleFloat = 'right'; }; document.getElementById('btn1').onclick = function() { document.getElementById('div').style.display = 'none'; }; }; </script>
