js重点基础知识 以及小案例_最简单的轮播图 简单的动态表格( encodeURIComponent()编码比 encodeURI()编码)
JS的原始数据类型有：
1.number;
2.String;
3.boolean;
4.null;
5.undefined;
------------------------------------------JavaScript 对象-------------------------------------------------------
arguments对象
//arguments的应用 function t(){ var sum = null; for(var i = 0; i <arguments.length; i++){ sum = sum + arguments[i]; } alert(sum); } t(1,2,3); //结果 6；
Array对象
把它当作java中的集合看待
//数组的创建方式 js中的数组是长度可变，类型可以变的！！！！
//array的应用
var array = new Array(6); var array2 = [2,3,4]; var array3 =new Array(1,2,3,4);
var array2 = [2,3,4]; //初始长度为3， 整型 array2[10] = "string string "; //证明数组类型可以变 长度可变 alert(array2[10]);
Date对象
Math对象
Global对象
编码
URI 编码可以对链接进行编码，以便发送给浏览器。它们采用特殊的 UTF-8 编码替换所有无效字符，从而让浏览器能够接受和理解。
不会对本身属于 URI 的特殊字符进行编码，例如冒号、正斜杠、问号和#号
因为 encodeURIComponent()编码比 encodeURI()编码来的更加彻底，一般来说encodeURIComponent()使用频率要高一些。
var box = '//Lee 李'; console.log(encodeURI(box)); //只编码了中文,结果是这样//Lee%20%E6%9D%8E var box = '//Lee 李'; console.log(encodeURIComponent(box)); //特殊字符和中文编码了,结果是这样%2F%2FLee%20%E6%9D%8E
解码
使用了 URI 编码过后，还可以进行解码
URI解码方法—decodeURI()和decodeURIComponent()
var box = '//Lee 李'; box1 = encodeURI(box); //编码 console.log(box1); console.log(decodeURI(box1));//解码 var box2 = '//Lee 李'; box2 = encodeURIComponent(box); //编码 console.log(box2); console.log(decodeURIComponent(box2)); //解码
eval()
主要担当一个字符串解析器的作用，他只接受一个参数，而这个参数就是要执行的 JavaScript 代码的字符串。（即可以解析javascript代码）
eval()方法的功能非常强大，但也非常危险。因此使用的时候必须极为谨慎。特别是在用户输入数据的情况下，非常有可能导致程序的安全性，比如代码注入等等。
eval('var box = 100'); //解析了字符串代码
console.log(box); //100
eval('console.log(100)'); //同上
eval('function box() {return 123}'); //函数也可以
console.log(box()); //调用这个函数结果是123
-------------------------------------------BOM对象-------------------------------------------------------
Browser 对象 （BOM 浏览器对象模型）
window:窗口对象
最简单的轮播图
<script> window.onload = function (ev) { /* 1:再页面上显示一个图片 2:定义一个方法 修改图片的src 3: 定义一个定时器 每隔一段时间调用方法一次 */ var num = 1; function changeImg() { num++; if(num > 3){ num = 1; } var img = document.getElementById("img"); img.src = num+".png"; } //设置定时器 setInterval(changeImg,2000); } </script> <body> <img src="1.png" id="img" /> </body>
---------------------------------------------HTML DOM对象-------------------------------------------------
HTML DOM 对象 （包含再Bom对象中的）
// var els = document.getElementsByName("1"); 根据name值获取标签 //var els = document.getElementsByTagName("input"); 根据标签名获取标签 例如：input p.. //document.getElementById("id"); 根据Id获取标签 //document.getElementsByClassName("class"); 根据class获取标签
//动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function (ev) {
var bt = document.getElementById("bt");
bt.onclick = function (ev1) {
var tb = document.getElementById("t");
var puts = document.getElementsByTagName("input");
var a = document.createElement("a");
a.appendChild(document.createTextNode("删除"));
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","del(this);");
var td = document.createElement("td");
td.appendChild(a);
var tr = document.createElement("tr");
tr.style.backgroundColor="yellow";
tr.style.textAlign = "center";
tr.innerHTML = "<td>"+puts[0].value+"</td><td>"+puts[1].value+"</td><td>"+puts[2].value+"</td>";
tr.appendChild(td);
tb.appendChild(tr);
}
}
function del(a) {
var tb = a.parentNode.parentNode.parentNode;
var tr = a.parentNode.parentNode;
tb.removeChild(tr);
}
</script>
<style type="text/css">
table th{
width: 60px;
background-color: yellowgreen;
}
</style>
<body>
<input type="text" value="11"/>
<input type="text" value="11"/>
<input type="text" value="11"/>
<input type="button" id="bt" value="添加"/><br/><br/><br/>
<table id="t">
<thead><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></thead>
</table>
</body>
</html>
坚持
