JavaScript高级

JS的输出

• document.getElementById("").innerHTML=“HTML代码”;
• document.write("");
  JS的事件
• onfocus:获得焦点
• onblur:失去焦点
  案例一表单校验

<script>
			function tips(id,content){
				document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>"
			}
			function checkForm(){
				var username= document.getElementById("username").value;
				if(username == ""){
					document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>"
					return false;
				}
			}
		</script>
		
<tr>
            				<td>用户名:</td>
            				<td><input type="text" id="username" name="username" onfocus="tips('username','用户名需要是字母或数字组成')"><span id="usernameSpan"></span></td>
            			</tr>
            			<tr>
            				<td>&nbsp;&nbsp;&nbsp;密码:</td>
            				<td><input type="password" id="password" name="password"  onfocus="tips('password','密码至少六位')"><span id="passwordSpan"></span></td>
            			</tr>

JS的事件总结

• onload:页面加载
• onclick:单击
• onsubmit:提交
• onfocus:获得焦点
• onblur:失去焦点
• onchange:下拉列表改变事件
• ondblclick:双击某个元素的事件
  使用JS获得表格的行数
• 获得到控制的表格元素：

var tabl=document.getElementById("tabl")
var len=tabl.rows.length;

JS各行换色

<script>
			function changeColor(){
			var d1=	document.getElementById("d1")
			var count=d1.rows.length;
			for(var i=0;i<=count;i++){
				if(i%2==0){
					d1.rows[i].style.backgroundColor="#00FF00"
				}else{
					d1.rows[i].style.backgroundColor="#00FFFF"
				}
			}
			}
		</script>

JS全选和全不选

function checkAll(){
				//获得上面的复选框
			 var selectAll = document.getElementById("selectAll")
			 var ids=document.getElementsByName("ids")
			//判断这个复选框是否被选中
			if(selectAll.checked==true){
				//上面的复选框被选中：获得下面所有的复选框，修改checkd属性
			 var ids=document.getElementsByName("ids")
				for(var i=0; i<ids.length;i++){
					ids[i].checked=true;
				}
			}else{
				//上面的复选框没有被选中:获得下面所有的复选框，修改checkd属性
				for(var i=0; i<ids.length;i++){
					ids[i].checked=false;
				}
			}
			}

JS中的DOM对象
DOM的概述
DOM：Document Object Model:文档对象模型。
将一个HTML的文档加载到内存形成一个树形结构，从而操作树形结构就可以改变HTML的样子。
DOM的使用：
知道document，element，attribute中的属性和方法
Document的常用的操作
获得元素：

• document.getElementById():通过id获得元素
• document.getElementsByName():通过name属性获得元素
• document.getElementsByTagName():通过标签名获得元素
  创建元素：
• document.createElement():创建元素
• document.createTextNode():创建文本
  添加节点：
• element.appendChild():在最后添加一个节点
• element.insertBefore():在某个元素之前插入
  删除节点：
  *element.removeChild():删除元素
  使用DOM完成对ul中添加一个li元素案例

<script>
			function add(){
			var city=document.getElementById("city");
			//创建一个元素
	    	var liEl = document.createElement("li");
	    	//创建一个文本节点
		    var text= document.createTextNode("深圳");
		    //添加子节点
		    liEl.appendChild(text)
		    city.appendChild(liEl)
			}
		</script>

JS中创建数组
new Array();
new Array(Size)
new Array(element0,element,…elementn);
省市二级联动案例

//定义数组长度：二维数组
			var arrs=new Array(3);
			arrs[0]=new Array("石家庄","邢台","邯郸");
			arrs[1]=new Array("安阳","洛阳","郑州");
			arrs[2]=new Array("武汉","襄阳","荆州");
			function changeCity(value){
			var city=document.getElementById("city");
			
			//清空第二个列表里面的内容
			for(var i=city.options.length-1;i>0;i--){
				city.options[i]=null;
			}
			
				//获得到选中的省份的信息
				for(var i=0;i<arrs.length;i++){
					if(value==i){
						//获得所有市的信息
						for(var j=0;j<arrs[i].length;j++){
							//创建元素
							var opEL= document.createElement("option");
							//创建文本节点
							var textNode=document.createTextNode(arrs[i][j]);
							//将文本的内容添加到option元素中
							opEL.appendChild(textNode)
							//将option的元素添加到第二个列表中
							city.appendChild(opEL);
						}
					}
				}
			}

JS的内置对象

Array:
Boolean:

Date:

Math对象:

String对象:

• charAt();
• indexOf();
• lastIndexOf();
• split();
• replace();
• substring();
• substr();
  JS的全局函数：
  
• parseInt();
  parseInt(“11”);
• parseFloat();
  parseFloat(“32.09”)
  编码和解码的方法
  解码
• decodeURL();
• decodeURLComponent();
  编码
• encodeURL()；
• encodeURLComponent();
  eval函数
  将一段内容当成是JS的代码执行
  var ss=“alert(‘aaa’)”
  eval(ss)