`

为学生准备的JS入门教程

    博客分类：
  • UI
 
阅读更多

入门小测验：

 

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk">
<title>测试</title>
</head>
<body>
<h3>
功能实现：<br>
1、点击“验证”按钮，执行一个方法，方法实现功能：<br>
	验证“文本框”必填，<br>
	单选按钮必须选中“男”，<br>
	复选框必须选中一个值，<br>
	下拉框必须选中一个值<br>
2、点击“重置”按钮，执行一个方法，方法实现功能：<br>
	清空除单选按钮的所有值，文本框中内容清空、复选框所有勾选都去除，下拉框复位到“请选择”<br>
3、点击“设置默认值”按钮，执行一个方法，方法实现功能：<br>
	“文本框”内容为“conch”，<br>
	单选按钮选中“男”，<br>
	复选框选中"1","3"，<br>
	下拉框选中"2"<br>
</h3>
<hr/>
<form id="form1" name="form1">
文本框 ：<input type="text" id="txt" value="" />
<br />
单选按钮：
<input type="radio" value="男" name="sex" />男    
<input type="radio" value="女" name="sex"  checked="checked"/>女
<br />
复选框：
<input type="checkbox" value="1"  name="check[]"/>1
<input type="checkbox" value="2" name="check[]" />2
<input type="checkbox" value="3" name="check[]" />3
<br />    
下拉框：
<select id="sel" style="width: 100px">
<option value="">请选择</option>
<option value="yi">1</option>
<option value="er">2</option>
<option value="san">3</option>
</select>
<br />
<input type="button" value="验证"/>
<input type="button" value="重置"/>
<input type="button" value="设置默认值"/>
</form>
</body>
</html>

 

一个就JS基础教程：http://nianshi.iteye.com/blog/747761

 

HTML DOM简介

 

  1. DOM可以做什么？
  2. DOM的结构
  3. 访问DOM节点1——getElementById()
  4. 访问DOM节点2——getElementsByTagName()
  5. 访问DOM节点3——通过节点关系
  6. DOM节点信息
  7. DOM信息nodeType的应用
  8. 修改DOM——innerHTML
  9. 删除DOM节点——removeChild
  10. 添加DOM节点
  11. DOM简介总结
XGrid V0.1：动态表格实现
1、这是一个简单的表格，里面的数据行(tr)是静态的数据
<html>
	<head>
	</head>
	<body>
		<div id="grid">
			<table border="1">
				<tr>
					<td id="no">No</td>
					<td>Name</td>
					<td>Password</td>
					<td>Organization</td>
					<td>Email</td>
				</tr>
				<tr>
					<td>1</td>
					<td>darkness1</td>
					<td>Password1</td>
					<td>Organization1</td>
					<td>darkness1@conch.com</td>
				</tr>
				<tr>
					<td>2</td>
					<td>darkness2</td>
					<td>Password2</td>
					<td>Organization2</td>
					<td>darkness2@conch.com</td>
				</tr>
			</table>
		</div>
	</body>
</html>
 2、我们希望将其中的数据行可以动态创建出来，首先将加粗的数据行（tr）删除，再添加一个div，我们将动态数据添加到新的div中
<div id="grid">
<table border="1">
	<tr border="1">
					
		<td id="no">No</td>
		<td>the Email</td>
		<td>the Name</td>
		<td>the Organization</td>
		<td>the Password</td>
					
	</tr>
				
</table>
</div>
<div id="dynamicGrid" />
 3、提取出数据
var json = {
		persons: [{
			no: 1,
			name: "darkness1",
			password: "password1",
			organization: "organization1",
			email: "darkness@conch.com"
		},{
			no: 2,
			name: "darkness2",
			password: "password2",
			organization: "organization2",
			email: "darkness@conch.com"
		},{
			no: 3,
			name: "darkness3",
			password: "password3",
			organization: "organization3",
			email: "darkness@conch.com"
		}]
	};
 4、将数据动态添加到新的div中
var grid = document.getElementById("dynamicGrid");
	
// function createTable() {}
var createTable = function() {
	var table = document.createElement("table");
	table.border="1";
	var tbody = document.createElement("tbody");
		
	var persons = json.persons;
	for(var i = 0; i < persons.length; i++) {
		var tr = document.createElement("tr");
			
		var person = persons[i];
		for(var j in person) {
			var td = document.createElement("td");
			td.innerHTML = person[j];
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}
	table.appendChild(tbody);
	grid.appendChild(table);
} 
	 
createTable();
 XGrid V0.2：实现数据模型
1、上一个版本实现了表格数据的动态显示，但是有一个问题，它的表头是静态的，数据的顺序也是静态的，如果我把标题栏的顺序调换一下，下面的数据与标题栏就不对应了，我希望创建一个类，能够将标题与数据的字段列匹配起来，如下面所示
function Grid(config){
}
	
var newGrid = new Grid({
	dataModel: [
		{title::"the name", field:"name"},
		{title::"the organization", field:"organization"},
		{title::"the email", field:"email"}
	],
	dataStore: json.persons
});
table中的标题栏要删掉，需要根据dataMode动态创建出来
<body>
		<div id="dynamicGrid" />
	</body>

		
 function Grid(config){

		var dataModel = config.dataModel;
		var dataStore = config.dataStore;
		
		var table = document.createElement("table");
		var tbody = document.createElement("tbody");
		table.appendChild(tbody);
		
		var thead = document.createElement("thead");
		table.appendChild(thead);
		
		var tr = document.createElement("tr");
		// create title
		for(var i=0; i<dataModel.length; i++) {
			var model = dataModel[i];
			var title = model.title;
			
			var td = document.createElement("td");
			td.innerHTML = title;
			tr.appendChild(td);
		}
		thead.appendChild(tr);
		
		// create data list
		for(var i=0; i<dataStore.length; i++) {
			var data = dataStore[i];
			
			// one record
			var tr = document.createElement("tr");
			tbody.appendChild(tr);
			
			for(var j=0; j<dataModel.length; j++) {
			
				var model = dataModel[j];
				var field = model.field;
				var td = document.createElement("td");
				td.innerHTML = data[field];
				
				tr.appendChild(td);
			}
		}

		document.getElementById(config.renderTo).appendChild(table);
	}
	
	//var grid = document.getElementById("dynamicGrid");
	var aGrid = new Grid({
		dataModel: [
			{title:"the name", field:"name"},
			{title:"the organization", field:"organization"},
			{title:"the email", field:"email"}
		],
		dataStore: json.persons,
		renderTo: "dynamicGrid"
	});

   XGrid V0.3：添加分页功能

1、添加分页按钮

 

<table>
			<tr>
				<td><input type="button" value="Before" onclick="aGrid.goBefore()"/></td>
				<td>
				Current Page: <label id="lblCurrentPage" value="1"/>
		Total Page: <label id="lblTotalPage"/>
				</td>
				<td><input type="button" value="Next" onclick="aGrid.goNext()"/></td>
			</tr>
		</table>
		<div id="dynamicGrid" />

 

 2、准备测试数据

 

var json = {
		persons: []
	};
	
	for(var i=0; i<119; i++) {
		json.persons.push({
			no: (i+1),
			name: "darkness"+(i+1),
			password: "password"+(i+1),
			organization: "organization"+(i+1),
			email: "darkness@conch.com"
		});
	}

 

 3、新的类设计方式

 

function Grid(config){
	
		this.perPageSize = config.perPageSize || 20;
		this.start = 0;
		
		this.dataModel = config.dataModel;
		this.dataStore = config.dataStore;
		
		var table = document.createElement("table");
		this.listContainer = document.createElement("tbody");
		table.appendChild(this.listContainer);
		
		var thead = document.createElement("thead");
		table.appendChild(thead);
		
		var tr = document.createElement("tr");
		// create title
		for(var i=0; i<this.dataModel.length; i++) {
			var model = this.dataModel[i];
			var title = model.title;
			
			var td = document.createElement("td");
			td.innerHTML = title;
			tr.appendChild(td);
		}
		thead.appendChild(tr);
		
		// create data list
		this.refresh();

		document.getElementById(config.renderTo).appendChild(table);
	}
	
	Grid.prototype = {
		
		refresh: function() {
		
			while(this.listContainer.hasChildNodes()) {
			   this.listContainer.removeChild(this.listContainer.firstChild);
			}

			for(var i=this.start; i<this.perPageSize*this.getCurrentPage() && i<this.dataStore.length; i++) {
				var data = this.dataStore[i];
				
				// one record
				var tr = document.createElement("tr");
				this.listContainer.appendChild(tr);
				
				for(var j=0; j<this.dataModel.length; j++) {
				
					var model = this.dataModel[j];
					var field = model.field;
					var td = document.createElement("td");
					td.innerHTML = data[field];
					
					tr.appendChild(td);
				}
			}
		},
		getTotalPage: function() {
			
			var size = (this.dataStore.length + this.perPageSize-1)/this.perPageSize;
			return Math.floor(size);
		},
		getCurrentPage: function() {
			return this.start/this.perPageSize + 1;
		},
		goNext: function() {
			this.start = this.start + this.perPageSize;
			this.refresh();
		},
		goBefore: function() {
			this.start = this.start - this.perPageSize;
			this.refresh();
		}
	};
	
	//var grid = document.getElementById("dynamicGrid");
	var aGrid = new Grid({
		dataModel: [
			{title:"the name", field:"name"},
			{title:"the organization", field:"organization"},
			{title:"the email", field:"email"}
		],
		dataStore: json.persons,
		perPageSize: 10,
		renderTo: "dynamicGrid"
	});
	
	document.getElementById("lblTotalPage").innerHTML = aGrid.getTotalPage();

 

 XGrid V0.4 完善分页

 

<html>
	<head>
		<style>
/*表格 */
table { 
	border-collapse: collapse; 
}
table.cellspacing { 
	border-collapse: separate; 
}
table.dataTable { 
	border: 1px solid #C6C6C6; 
	border-collapse: collapse; 
	background: url(./Images/thbg.gif) #FFFFFF repeat-x left top; 
	table-layout: fixed; 
}
table.dataTable td,
table.dataTable th { 
	color: #555555; 
	border-bottom: 1px solid #DDDDDD; 
	border-right: none 0; 
	line-height:16px; 
	+line-height:18px;
	padding: 3px 7px 3px 6px; 
	+padding: 2px 7px 2px 6px;
	white-space: nowrap; 
}
table.dataTable td { 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	-o-text-overflow: ellipsis; 
}
table.dataTable .wrap { white-space:normal; }
table.dataTable tr.dataTableHead td,
table.dataTable tr.dataTableHead td span { 
	color: #445055; font-weight: bold; 
}
table.dataTable tr.dataTableHead td { 
	height: 27px; 
	line-height:27px; 
	padding: 0 7px 0 6px; 
	border-left: #D6D6D6 0px solid; 
	border-bottom: #C6C6C6 0px solid; 
	background: url(./Images/th.gif) no-repeat left top; 
}
table.dataTable tr.dataTableHead td.thOver { 
	background: url(./Images/thbg_over.gif) no-repeat left top; 
}
table.dataTable tr.dataTableHead:first-child { 
	background-image: none; 
}
		</style>
	<body>
		<h3>XGrid 版本日志</h3>
		<h4>
			@version 0.5 美化界面、提供列选择功能、完善分页显示/跳转功能
		</h4>
		<div id="dynamicGrid" />
		<table>
			
			<tr>
				<td>
				
				
				<input type="button" value="显示勾选条" onclick="aGrid.showPk()">
				
				
				</td>
			</tr>
		</table>
		
	</body>
	
	<script>
	
	var json = {
		persons: []
	};
	
	for(var i=0; i<119; i++) {
		json.persons.push({
			no: (i+1),
			name: "darkness"+(i+1),
			password: "password"+(i+1),
			organization: "organization"+(i+1),
			email: "darkness@conch.com"
		});
	}
	
	Function.prototype.bind = function() {  
		var __method = this;  
		var args = Array.prototype.slice.call(arguments);  
		var object=args.shift();  
		return function() {  
			return __method.apply(object,  
				 args.concat(Array.prototype.slice.call(arguments)));  
		}  
	}

	function Grid(config){
	
		this.perPageSize = config.perPageSize || 20;
		this.start = 0;
		
		this.dataModel = config.dataModel;
		this.dataStore = config.dataStore;
		
		var table = document.createElement("table");
		table.className = "dataTable";
		this.listContainer = document.createElement("tbody");
		table.appendChild(this.listContainer);
		
		var thead = document.createElement("thead");
		table.appendChild(thead);
		
		var tr = document.createElement("tr");
		tr.className = "dataTableHead";
		// create title
		
		var tdNo = document.createElement("td");
		var no = "No."
		tdNo.innerHTML = no;
		tr.appendChild(tdNo);
		
		var tdPk = document.createElement("td");
		var ckAll = document.createElement("input");
		ckAll.type = "checkbox";
		ckAll.id = "ckAll";
		ckAll.onclick = function(){
			var check = document.getElementsByName("id");
			for(i=0; i<check.length; i++) {
				check[i].checked = ckAll.checked;
			}
		};
		tdPk.appendChild(ckAll);
		tr.appendChild(tdPk);
		
		for(var i = 0; i < this.dataModel.length; i++) {
			var model = this.dataModel[i];
			var title = model.title;
			
			var td = document.createElement("td");
			td.innerHTML = title;
			tr.appendChild(td);
		}
		thead.appendChild(tr);
		
		this.createPagebar();
		
		document.getElementById(config.renderTo).appendChild(table);
		
		// create data list
		this.refresh();
		
	}
	
	Grid.prototype = {
		createPagebar: function() {
			this.pagebarContainer = document.createElement("tr");
			this.pagebarContainer.xtype = "pagebar";
			this.listContainer.appendChild(this.pagebarContainer);
			
			var td = document.createElement("td");
			td.colSpan = this.dataModel.length + 2;
			td.align = "left";
			this.pagebarContainer.appendChild(td);
			
			var divLeft = document.createElement("div");
			divLeft.style.float="left";
			divLeft.style.fontFamily="Tahoma";
			
			divLeft.innerHTML = '共 <span id="lblTotalSize"></span> 条记录，每页 <span id="lblperPageSize"></span> 条，当前第 <span id="lblCurrentPage">1</span> / <span id="lblTotalPage"></span> 页';
			td.appendChild(divLeft);
			
			var divRight = document.createElement("div");
			divRight.style.float="right";
			divRight.style.fontFamily="Tahoma";
			
			var aFirstPage = document.createElement("a");
			divRight.appendChild(aFirstPage);
			aFirstPage.href = "javascript:void(0);";
			aFirstPage.onclick = this.goBeginning.bind(this);
			aFirstPage.innerText = "第一页";
			
			var aBeforePage = document.createElement("a");
			divRight.appendChild(aBeforePage);
			aBeforePage.href = "javascript:void(0);";
			aBeforePage.onclick = this.goBefore.bind(this);
			aBeforePage.innerText = "上一页";
			
			var aNextPage = document.createElement("a");
			divRight.appendChild(aNextPage);
			aNextPage.href = "javascript:void(0);";
			aNextPage.onclick = this.goNext.bind(this);
			aNextPage.innerText = "下一页";
			
			var aLastPage = document.createElement("a");
			divRight.appendChild(aLastPage);
			aLastPage.href = "javascript:void(0);";
			aLastPage.onclick = this.goEnd.bind(this);
			aLastPage.innerText = "最末页";
			
			var span = document.createElement("span");
			span.innerText = "转到第";
			divRight.appendChild(span);
			
			var input = document.createElement("input");
			input.id = "pageNum";
			input.type = "text";
			input.style.width = "40";
			input.onkeyup = function(){
				input.value=input.value.replace(/\D/g,'');
			};
			divRight.appendChild(input);
			
			var span = document.createElement("span");
			span.innerText = "页";
			divRight.appendChild(span);
			
			var btnGoToPage = document.createElement("input");
			btnGoToPage.type = "button";
			btnGoToPage.value = "跳转";
			btnGoToPage.onclick = this.goPageTo.bind(this);
			divRight.appendChild(btnGoToPage);
				
			td.appendChild(divRight);
		},
		refresh: function() {
		
			while(this.listContainer.hasChildNodes() && this.listContainer.firstChild.xtype != "pagebar") {
			   this.listContainer.removeChild(this.listContainer.firstChild);
			}

			for(var i=this.start; i<this.perPageSize*this.getCurrentPage() && i<this.dataStore.length; i++) {
				var data = this.dataStore[i];
				
				// one record
				var tr = document.createElement("tr");
				this.listContainer.insertBefore(tr, this.pagebarContainer);
				
				var tdNum = document.createElement("td");
				var n = i + 1 - this.start;
				n += " ";
				tdNum.innerHTML = n;
				tr.appendChild(tdNum);
				
				var tdSelec = document.createElement("td");
				var pkField = "";
				
				for (var j=0; j<this.dataModel.length; j++) {
					var model = this.dataModel[j];
					
					if (model.isPk == true) {
						pkField = model.field
					};
				}
				
				tdSelec.innerHTML = "<input type='checkbox' name ='id' value=" + this.dataStore[i][pkField] + " />";
				tr.appendChild(tdSelec);

				
				for (var j=0; j<this.dataModel.length; j++) {
				
					var model = this.dataModel[j];
					var field = model.field;
					
					var td = document.createElement("td");
					td.innerHTML = data[field];
					
					tr.appendChild(td);
				}
			}
			
			document.getElementById("lblTotalPage").innerHTML = this.getTotalPage();
			document.getElementById("lblperPageSize").innerHTML = this.perPageSize;
		},
		getTotalPage: function() {
			
			var size = (this.dataStore.length + this.perPageSize - 1) / this.perPageSize;
			return Math.floor(size);
		},
		getCurrentPage: function() {
			return this.start / this.perPageSize + 1;
		},
		promptCurrentPage: function() {
			document.getElementById("lblCurrentPage").innerHTML = aGrid.getCurrentPage();
		},
		goNext: function() {
			if (!(this.start == (this.getTotalPage() - 1) * this.perPageSize)) {
				this.start = this.start + this.perPageSize;
				this.promptCurrentPage();
				this.refresh();
			}

		},
		goBefore: function() {
			if (!(this.start == 0)) {
				this.start = this.start - this.perPageSize;
				this.promptCurrentPage();
				this.refresh();
			}

		},
		goBeginning: function() {
			this.start = 0;
			this.promptCurrentPage();
			this.refresh();
		},
		goEnd: function() {
			this.start = (this.getTotalPage() - 1) * this.perPageSize;
			this.promptCurrentPage();
			this.refresh();
		},
		goPageTo: function() {
			var num = document.getElementById("pageNum").value;
			if (!(num < 0 || num > this.getTotalPage())) { 
				this.start = (num-1) * this.perPageSize;
				this.promptCurrentPage();
				this.refresh();
			} else {
				this.goEnd();
			}
		},
		
		// show picked values
		showPk: function() {
			var inputElements = document.getElementsByName("id");
			var l = inputElements.length;
			
			var checkedValues = new Array();
			
			for (var i = 0; i < l; i++) {
				if (inputElements[i].checked) {
					checkedValues.push(inputElements[i].value);
				}
			}
			
			var show = checkedValues.join();
			alert(show);
		}
	};
	
	//var grid = document.getElementById("dynamicGrid");
	var aGrid = new Grid({
		dataModel: [
			{title:"NAME", field:"name", isPk: true},
			{title:"ORGANIZATION", field:"organization"},
			{title:"EMAIL", field:"email"}
		],
		dataStore: json.persons,
		perPageSize: 10,
		renderTo: "dynamicGrid"
	});
	
	
	</script>

</html>
 

 

分享到：
| java集合操作-----求两个集合的交集和并集
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics