chinrui
- 浏览: 94563 次
- 性别:
-
文章分类
最新评论
-
chinrui：
iamaj2eeprogrammer 写道顶一个 。。。。。。 ...
日志规范 -
iamaj2eeprogrammer：
顶一个 。。。。。。。。。。
日志规范 -
chinrui：
如果Eclipse安装过Android的开发插件，可能会有一定 ...
使用Ant编译生成Hadoop的Eclipse插件
Javascript是一种弱类型的语言
在网页中嵌入javascript脚本的基本格式：
<script type="text/javascript> var y = 3; alert(y); </script>
在网页上打印结果，并用html设置文字的属性：
var sum = "";
for(var x=0; x<4; x++) {
if(x==3) {
sum = sum + "x=" + x;
}
else {
sum = sum + "x=" + x + ",";
}
}
document.write("<font color=red>" + sum + "</font>");
使用表格将javascript运行的结果在网页上展示：
document.write("<table>");
for(var x=1; x<=9; x++) {
document.write("<tr>");
for(var y=1; y<=x; y++) {
document.write("<th>" + x+"*"+y+"="+(x*y) + "</th>");
}
document.write("</tr>");
}
document.write("</table>");
对数组进行排序并输出：
var arr = [2,4,6,5,234,65,42];
for(var x=0; x<arr.length-1; x++) {
for(var y=x+1; y<arr.length; y++) {
if(arr[x]<arr[y]) {
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
for(var x=0; x<arr.length; x++) {
document.write(arr[x] + " ");
}
在javascript定义函数，并进行调用：
var arr = [2,4,6,5,234,65,42];
function show(arr) {
for(var x=0; x<arr.length-1; x++) {
for(var y=x+1; y<arr.length; y++) {
if(arr[x]<arr[y]) {
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
show(arr);
function output(arr) {
for(var x=0; x<arr.length; x++) {
document.write(arr[x] + " ");
}
}
output(arr);
在javascript中，即使函数中没有参数，也可以在调用的时候输入参数，方法能够正常的运行，因此，javascript没有方法的重载(arguments为存取输入参数的一个数组)：
function show() {
for(var x=0; x<arguments.length; x++) {
document.write(arguments[x] + " ");
}
}
show(2,3,3,5);
在javascript中，方法就是一个对象，可以new新的方法对象(下面是一个匿名方法的实例化，x,y为方法的参数，其余的方法体)：
var show = new Function("x","y","var sum=x+y;return sum;");
var sum = show(5,7);
alert(sum);
对象的定义及对象的引用：
function Person(name,age) {
this.name = name;
this.age = age;
}
var p = new Person("lisi", 90);
alert(p.name + "..." + p.age);
alert(p["name"] + "..." + p.age);
在js中存入javascript代码，方便引用：
function ArrayTool(){}
var ArrayTool = new ArrayTool();
function max(arr) {
var max = arr[0];
for(var x=0; x<arr.length; x++) {
if(arr[x] > max) {
max = arr[x];
}
}
return max;
}
ArrayTool.getMax = max;
方法的引用：
<script type="text/javascript" src="arraytool.js"></script>
<script type="text/javascript">
var arr = [2,5,5,6,39,21,31,34,31,23];
var a = ArrayTool.getMax(arr);
alert("max:" + a);
</script>
在javascript语句中，调用with语句，就可以使用里面对象的所有对象和方法：
function Student(name,age) {
this.name = name;
this.age = age;
}
var stu = new Student("zhaoliu",30);
with(stu) {
alert(name + "...." + age);
}
在javascript语句里面使用for…in语句，可以遍历对象里面的属性：
function Student(name,age) {
this.name = name;
this.age = age;
}
var stu = new Student("zhaoliu",30);
/* for(s in stu) {
document.write(s);
}*/
for(s in stu) {
document.write(s+":"+stu[s]+" ");
}
用for…in语句遍历数组：
var arr = [2,4,5,1];
for(x in arr) {
document.write(arr[x] + " ");
}
使用String中的charAt()的方法：
var str = "abcda"; var x = str.charAt(1); alert(x);
使用String中的bold()方法，对字符串进行加粗：
var y = str.bold();
document.write(y);
使用String中的fontcolor()设置文字的颜色：
var z = str.fontcolor("red");
使用String中的link()方法，建立超链接：
var c = str.link("http://www.baidu.com");
使用String中的substr方法，取第start到end的字符(不包括end)：
var b = str.substring(2,4);
使用String中的substring方法，取start开始共length的字符：
var a = str.substr(2,4);
在javascript中取字符串的长度用的是属性length
使用Math里面的random()产生随机数：
for(var x=0; x<10; x++) {
var d = Math.random()*10 + 1;
document.write(d+"<br/>");
}
使用parseInt()方法，转化为整数：
var d = parseInt(Math.random()*10 + 1);
使用parseInt()转化格式时，第二个参数为转化的进制位：
var num = parseInt("1a",16);
document.write("num=" + num);
使用toString()转化进制：
var num = parseInt("1a",16);
document.write("num=" + num);
使用javascript中的日期类：
var d = new Date();
with(d) {
document.write(getYear()+ "年"+(getMonth()+1)+"月"+getDate()+"日 星期"+ getDay());
}
给语言里面的数组对象添加自定义的方法：
function getMax() {
var max = this[0];
for(var x=0;x<this.length;x++) {
if(this[x]>max) {
max = this[x];
}
}
return max;
}
Array.prototype.getMax = getMax;
var arr = [4,1,5,6,2];
var max = arr.getMax();
document.write(max);
DOM：document object model 文档对象模型
Dom三层模型：
Dom1:将html文档封装成对象。
Dom2:将xml文档封装成对象。
Dom3:将xml文档封装成对象。
Dhtml:动态html。相关技术:html css dom javascript
Html:将数据进行封装
Dom:将标签封装成对象
Css:负责标签中的数据的样式
Javascript:将三个进行融合，通过程序设计方式来完成动态效果的操作
标签之间存在着层次关系：
Html
|--head
|--title
|--base
|--link
|--meta
|--style
|--script
|--body
|--div
|--form
|--input
|--select
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
Html标签：
<input type="button" value="演示" onclick="demo()" /> <div id="divid"> ajsldfka;ldfka </div>
写入javascript的响应程序：
<script type="text/javascript">
function demo() {
var divObj = document.getElementById("divid");
获得对象的名字、类型和值；
var name = divObj.nodeName;
var type = divObj.nodeType;
var value = divObj.nodeValue;
document.write(name+"..."+type+"..."+value);
divObj.style.backgroundColor = "red";
}
</script>
节点类型：
标签型节点：类型：1
属性节点：类型：2
文本型节点：类型：3
注释型节点：类型：8
******获取节点可以通过节点的层次关系获得，也可以通过document进行获取getElementById/getElementByName/getElementsByTagName
//获取父节点
var parent = divObj.parentNode;
getNodeInfo(parent);
//获取子结点
var childs = divObj.childNodes;
document.write(childs.length);
}
//获取兄弟节点
//获取上一个节点
var preNode = divObj.previousSibling.previousSibling;
getNodeInfo(preNode);
}
//获取下一个节点
var nextNode = divObj.nextSibling;
getNodeInfo(nextNode);
//需要求获取a标签的文本
var aNode = divObj.nextSibling.nextSibling;
var aNext = aNode.childNodes[0];
getNodeInfo(aNext);
******标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。
另外一个获取节点的方法：
//获取单元格一文本
var tableNode = divObj.nextSibling;
var tdNodes = tableNode.getElementsByTagName("td");
document.write(tdNodes[0].innerText);
//通过标签获取层次关系
var str = "";
function listNode(node,level) {
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0; x<nodes.length; x++) {
if(nodes[x].hasChildNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level) {
var s = "";
for(var x=0; x<level;x++) {
s += "|----";
}
return s;
}
function printInfo(node,level) {
str += getSpace(level)+"name:"+node.nodeName+"...type:"+node.nodeType+"..value:"+node.nodeValue+"<br/>";
}
function getNodes() {
listNode(document,0);
document.write(str);
}
//获得属性节点
function getAtts() {
var q = "";
var divObj = document.getElementById("divid");
var atts = divObj.attributes;
for(var x=0; x<atts.length; x++) {
q += atts[x].nodeName+"...type:"+atts[x].nodeType+"..value:"+atts[x].nodeValue+"<br/>";
}
document.write(q);
}
<!--
1.定义数据封装的标签
2.确定事件源
3.注册事件
4.事件处理
需求：
页面中有一个新闻区域
通过超链接
可以让用户改变区域的字体大小
-->
<head>
<title> New Document </title>
<script type="text/javascript">
function changeSize(size) {
var divNode = document.getElementById("newsid");
divNode.style.fontSize = size;
}
</script>
</head>
<body>
<h2>新闻标题</h2>
<a href="javascript:void(0)" onclick="changeSize('24px')">大</a>
<a href="javascript:void(0)" onclick="changeSize('16px')">中</a>
<a href="javascript:void(0)" onclick="changeSize('10px')">小</a><br/>
<div id="newsid">
叶落归根发酵饲料大跃进福建喱；朝思暮想大跃进<br/>
叶落归根发酵饲料大跃进福建喱；朝思暮想大跃进<br/>
</div>
</body>
上面代码优化：
<script type="text/javascript">
function changeSize(className) {
var divNode = document.getElementById("newsid");
divNode.className = className;
}
</script>
<style type="text/css">
.max {
background-color:red;
color:gray;
font-size:24px;
}
.min {
background-color:green;
color:blue;
font-size:10px;
}
</style>
<a href="javascript:void(0)" onclick="changeSize('max')">大</a>
<a href="javascript:void(0)" onclick="changeSize('min')">小</a>
<!--
需求：通过点击实现一个展开闭合效果。
-->
<script type="text/javascript">
var b = true;
function change() {
var divNode = document.getElementsByTagName("div")[0];
if(divNode.className=="close") {
divNode.className = "open"
}
else {
divNode.className = "close";
}
}
</script>
<style type="text/css">
.open {
height:8px;
overflow:visible;
}
.close {
height:8px;
overflow:hidden;
}
</style>
<body>
<div onclick="change()">
叶落归根期刊两岸三地
</div>
</body>
获取事件源对象的两种方式：
1、 通过event对象的srcElement属性。
2、 将事件源对象通过this传入。
******以下代码效果：打开一个列表的时候，其余列表关闭。（通过event对象的srcElement属性）
<script type="text/javascript">
function list() {
var dtNode = event.srcElement;
var dtNodes = document.getElementsByTagName("dt");
for(var i=0;i<dtNodes.length;i++) {
if(dtNodes[i]==dtNode) {
var dlNode = dtNode.parentNode;
if(dlNode.className=="open") {
dlNode.className="close";
}
else {
dlNode.className="open";
}
}
else
dtNodes[i].parentNode.className="close";
}
}
</script>
<style type="text/css">
.open {
overflow:visible;
}
.close {
overflow:hidden;
}
dl{
overflow:hidden;
height:14px;
}
</style>
在网页上动态地打开和关闭（将事件源通过this传入）：
<head>
<style type="text/css">
table {
border:#0066FF 1px solid;
}
table td {
background-color:gray;
border:#0000FF 1px solid;
}
table td div {
background-color:#66FFCC;
display:none;
}
table td a {
text-decoration:none;
color:#993300;
}
.open {
display:block;
}
.close {
display:none;
}
</style>
<script type="text/javascript">
function list(aNode) {
var tdNode = aNode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
var tableNode = document.getElementsByTagName("table")[0];
var divNodes = tableNode.getElementsByTagName("div");
for(var i=0;i<divNodes.length;i++) {
if(divNodes[i]==divNode) {
if(divNode.className=="open") {
divNode.className="close";
}
else {
divNode.className="open";
}
}
else
divNodes[i].className = "close";
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">学习成绩</a>
<div>
你是我的<br/>
你是我的<br/>
你是我的<br/>
你是我的<br/>
</div>
</td>
</tr>
</table>
</body>
<!--
通过页面的按钮可以动态的创建一个表格和删除表格的行列。
-->
<head>
<script type="text/javascript">
function createTable_1() {
var tableNode = document.createElement("table");
var tbodyNode = document.createElement("tbody");
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
var divNode = document.getElementsByTagName("div")[0];
divNode.appendChild(tableNode);
tableNode.appendChild(tbodyNode);
tbodyNode.appendChild(trNode);
trNode.appendChild(tdNode);
tdNode.innerText="你是我的";
}
function createTable() {
var tableNode = document.createElement("table");
tableNode.setAttribute("id","tabid");
var row = document.getElementsByName("rownum")[0].value;
var col = document.getElementsByName("colnum")[0].value;
for(var i=1;i<=row;i++) {
var trNode = tableNode.insertRow();
for(var j=1;j<=col;j++) {
var tdNode = trNode.insertCell();
tdNode.innerHTML = i+"..."+j;
}
}
var divNode = document.getElementsByTagName("div")[0];
divNode.appendChild(tableNode);
event.srcElement.disabled=true;
}
function delrow() {
var tableNode = document.getElementById("tabid");
var row = tableNode.rows;
var delrow = document.getElementsByName("delrow")[0].value;
if(tableNode==null) {
alert("表格不存在");
return;
}
if(delrow>0 && delrow<=row.length)
tableNode.deleteRow(delrow - 1);
else
alert("删除的行不存在");
}
function delcol() {
var tableNode = document.getElementById("tabid");
var delcol = document.getElementsByName("delcol")[0].value;
if(tableNode==null) {
alert("Table Not Exists!");
return;
}
if(delcol>0 && delcol<=tableNode.rows[0].cells.length) {
for(var i=0;i<tableNode.rows.length;i++) {
tableNode.rows[i].deleteCell(delcol-1);
}
}
else
alert("Deleted Col Not Exists");
}
</script>
<style type="text/css">
table {
border:red 1px solid;
width:60%;
height:20px;
}
table td {
border:red 1px solid;
}
</style>
</head>
<body>
<input type="text" name="rownum" />
<input type="text" name="colnum" /><br />
<input type="button" value="创建表格" onclick="createTable()" /><br/>
<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delrow()" /><br/>
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delcol()" />
<div>
</div>
</body>
<!--对网页中表格的数据进行排序-->
<head>
<style type="text/css">
table,table th,table td {
border:red 1px solid;
}
table {
width:60%;
}
table th {
background-color:gray;
}
</style>
<script type="text/javascript">
function sortTab() {
var tableNode = document.getElementsByTagName("table")[0];
var trs = tableNode.rows;
var arr = new Array();
for(var i=1;i<trs.length;i++) {
arr[i-1] = trs[i];
}
sortt(arr);
var tbodyNode = tableNode.childNodes[0];
if(disgush == true) {
for(var i=0;i<arr.length;i++) {
tbodyNode.appendChild(arr[i]);
}
disgush = false;
} else {
for(var i=arr.length;i>0;i--) {
tbodyNode.appendChild(arr[i-1]);
}
disgush = true;
}
}
var disgush = true;
function sortt(arr) {
for(var i=0;i<arr.length-1;i++) {
for(var j=i+1;j<arr.length;j++) {
if(parseInt(arr[i].cells[1].innerText)>parseInt(arr[j].cells[1].innerText)) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTab()">年龄</a></th>
<th>地址</th>
</tr>
</table>
</body>
<!--行间隔颜色显示，高亮颜色显示-->
<head>
<style type="text/css">
table,table th,table td {
border:red 1px solid;
}
table {
width:60%;
}
table th {
background-color:gray;
}
.one {
background-color:#33FFCC;
}
.two {
background-color:#FFFF66;
}
.over {
background-color:#00FF00;
}
</style>
<script type="text/javascript">
function trColor() {
var tableNode = document.getElementsByTagName("table")[0];
var trs = tableNode.rows;
for(var i=1;i<trs.length;i++) {
if(i%2==1)
trs[i].className = "one";
else
trs[i].className = "two";
trs[i].onmouseover=function() {
name = this.className;
this.className = "over";
};
trs[i].onmouseout=function() {
this.className = name;
};
}
}
var name;
window.onload=trColor;
</script>
</head>
<--购物时的多选-->
<head>
<script type="text/javascript">
function getSum() {
var items = document.getElementsByName("item");
var sum = 0;
for(var i=0;i<items.length;i++) {
if(items[i].checked)
sum += parseInt(items[i].value);
}
var spanNode = document.getElementsByTagName("span")[0];
var str = sum + "元";
spanNode.innerHTML = str.fontsize(6);
}
function checkAll(all) {
var items = document.getElementsByName("item");
for(var i=0;i<items.length;i++) {
items[i].checked = all.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="all" onclick="checkAll(this)" />全选<br />
<input type="checkbox" name="item" value=3000 />笔记本电脑:3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)" />全选<br />
<input type="button" value="总计费用" onclick="getSum()" /><span></span>
</body>
制作css样式预览：
<head>
<style type="text/css">
#cssid {
height:100px;
width:300px;
background-color:#FFCC00;
}
#textid {
background-color:#CCCCCC;
width:300px;
}
</style>
<script type="text/javascript">
function change() {
var selNode = document.getElementById("selid");
var value = selNode.options(selNode.selectedIndex).value;
var divNode1 = document.getElementById("cssid");
var divNode2 = document.getElementById("textid");
divNode1.style.textTransform = value;
divNode2.innerText = "text-transform :" + value +";";
}
</script>
</head>
<body>
<div id="cssid">
Good good study,Day day up!
</div><p></p>
<select id="selid" onchange="change()">
<option value="none">--text--transform--</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">所有字母大写</option>
<option value="lowercase">所有字母小写</option>
</select><p></p>
<div id="textid">
text-transform : none;
</div>
</body>
<--制作一个简单的流氓广告-->
<style type="text/css">
#bodyid {
border:red 1px solid;
height:800px;
width:950px;
}
</style>
<script type="text/javascript">
var adNode = null;
function closead() {
adNode.style.display = "none";
}
window.onload = function() {
document.body.onmousemove = function() {
adNode = document.getElementById("ad");
adNode.style.left = event.x-20;
adNode.style.top = event.y-20;
}
}
</script>
</head>
<body>
<div id="ad" style="position:absolute;left:0;top:0;" onclick="closead()">
<a href="http://www.hao123.com" target="_blank"><img src="logo.jpg" /></a>
</div>
<div id="bodyid">body区域</div>
</body>
层叠选项卡（选择省份后出现相应的城市）：
<script type="text/javascript">
function selCity() {
var arr = [["--选择省份--"]
,["海淀区","朝阳区","东城区","西城区"]
,["沈阳","鞍山","大连","抚顺"]
,["武汉","孝感","仙桃","天门"]
,["郑州","焦作","开封","洛阳"]];
var index = document.getElementById("selid").selectedIndex;
//alert(document.getElementById("selid").options[index].innerText);
var subNode = document.getElementById("subselid");
var citys = arr[index];
/*for(var x=0;x<subNode.options.length;) {
subNode.removeChild(subNode.options[x]);
}*/
subNode.options.length = 0;
for(var x=0;x<citys.length;x++) {
var selOption = document.createElement("option");
selOption.innerText = citys[x];
subNode.appendChild(selOption);
}
}
</script>
</head>
<body>
<select id="selid" onchange="selCity()">
<option>--选择省份--</option>
<option>北京</option>
<option>辽宁</option>
<option>湖北</option>
<option>河南</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
<--添加和删除“添加附件”的表格-->
<style type="text/css">
table,table tr td {
border:#33CC00 1px solid;
}
table td a:link,table td a:visited {
text-decoration:none;
color:#6633FF;
}
</style>
<script type="text/javascript">
var count = 1;
function addFile() {
var tabNode = document.getElementsByTagName("table")[0];
var trNode = tabNode.insertRow();
trNode.id = "td_"+count;
var tdNode_file = trNode.insertCell();
var tdNode_del = trNode.insertCell();
tdNode_file.innerHTML = "<input type='file' />";
//tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delRow("+count+")'>删除附件"+count+"</a>";
tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delRow(this)'>删除附件"+count+"</a>";
count++;
}
function delRow(node) {
var trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
/*var trNode = document.getElementById("td_"+count);
trNode.parentNode.removeChild(trNode);*/
/*var tbdNode = document.getElementsByTagName("table")[0].childNodes[0];
tbdNode.removeChild(trNode);*/
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="addFile()">添加附件</a>
</td>
</tr>
</table>
</body>
分享到：
发表评论
-
PagingToolbar带参数的分页
2013-07-31 21:59 909PagingToolbar带参数的分 ... -
如何指定struts2返回我们需要的json类型数据？
2013-07-29 18:58 873如何指定struts2返回我们需要的json类型数据？ ... -
Struts与Extjs的整合
2013-07-25 18:46 873Struts与Extjs的整合 1、引入以下Jar包 ... -
将对象转换成XML文档形式
2013-07-25 17:25 897将对象转换成XML文档形式 1、第一步：引入以下包 - ... -
Extjs中使用AsyncTreeNode生成树
2013-07-22 21:43 1767Extjs中使用AsyncTreeNode ... -
JSON解析
2013-05-22 18:08 1101AJAX里面的JSON解析 public void doPo ... -
JSON
2013-05-22 15:58 2069JSON的用法 1、以JSON形式定义一个对象 window. ... -
XMLHttpRequest
2013-05-19 19:21 835AJAX关于XMLHttpRequest的解释 1、所有解释在 ... -
javascript使用window.opener在两个页面之间传递值
2013-05-18 11:47 2671javascript使用window.opener ... -
showModalDialog的简单使用
2013-05-17 23:59 1109showModalDialog的简单使用 1、要通过另外一个网 ... -
AJAX入门
2013-04-26 10:11 871使用XMLHttpRequest对象进行异步的操作 效果：输入 ...
相关推荐
新手入门JS超详细笔记 各个版本都有，格式条理清晰标注含有例题以及解析
对于许多想学习 JavaScript 的朋友来说，无疑如何选择入门的书籍是他们最头疼的问题，或许也是他们一直畏惧，甚至放弃学习 JavaScript 的理由。
总结了javascript的重点内容，以及初学者容易犯错的地方。
习.net已经近2年了，最近学习Ajax时发现自己的很多技术功底很是欠缺，比如JavaScript。今后我会将我正在学习的也写成笔记，有时间的话将以前的东西整理整理也传上来。
Javascript简介 了解JavaScript的基本数据类型。 了解JavaScript的变量和常量。 使用JavaScript语言的一些注意事项 。
该书比较适合前端刚入门的新手观看和学习，内容较为丰富，代码易懂
在学习JavaScript之前，必须具备HTML和CSS知识，Javascript是一种解释性的，基于对象的脚本语言(aninterpreted,object-basedscriptinglanguage)。这篇文章主要讲解JavaScript入门基础，需要的朋友可以参考下
javascript 关于javascript入门简单题目