------- android培训、java培训、期待与您交流! ----------
Javascript:是Netscape公司语言,基于对象和时间驱动。
和Java不同之处:
1,所属公司不一样,java是sun公司,现在是Orcale公司;
2,js是基于对象,java是面向对象;
3,js是有浏览器解释并执行,java是有jvm解释并执行的;
4,js是弱类型的语言,java是强类型;
5,js是非严谨的,java是严谨的;
javascript运行在客户端。
javascript的基本语法:
1,变量:通过var关键字定义变量,该变量可以赋予不同类型的常量;
2,语句:if,switch,while,do while,for
使用逻辑运算符进行布尔表达式连接时,需要用短路与和短路或&& ||;因为在js中,非0即TRUE,0为FALSE,非null为TRUE,null为FALSE;js特有的语句:with()可以确定对象所使用的范围,在范围内可以直接指定对象的属性和行为,而不用对象点的形式调用,简化的对象的操作for(变量 in 对象):可以对对象的属性和行为进行遍历;
3,数组:var demo=[];
对于js数组的特点:该数组的长度是可变的,相对于java中的集合;数组中存放的数据类型可以不同;定义格式:var arr = [1,2,3];var arr= newArray();用for遍历
4,函数
1,一般函数:function 函数名(参数){}提高代码的服用将代码封装成函数两个明确:1,明确功能实现后的结果;2,明确该功能在实现过程中是否有位置内容参与运算;2,动态函数:使用Function对象;var show = new Function(“x“,”y“,执行语句);可以将参数和方法体作为参数进行传递;3,匿名函数:function(){}
用于事件处理
var method=show();将函数运算后的值赋值给methodvar method=show;将show指向对象的地址赋值给method
javascript需要被浏览器所解释执行,就必须将代码和html相结合。
结合方式:
1,通过script标签将js代码存入其中,并指定type属性,方便浏览器启动指定的解析引擎;
2,也可通过script标签 使用src属性链接一个指定的js文件进来。
HTML:
DOM(document object model)文档对象模型
其实就是将一些标记型的文档以及文档中的内容当成对象。
这样在对象中定义其属性和行为,可以方便操作这些对象。
html,xhtml,xml:这些都是标记型文档。
DHTML:是多个技术综合体,叫做动态html
html:负责将数据进行标签的封装;
CSS:负责标签的样式;
dom负责将标签以及标签中的内容封装成对象;
javascript:负责通过程序设计方式操作这些对象;
标签之间存在层次关系:
head
titlebasemetalink
style
body
table
tbody
tr
tdth
divform
a
通过这个标签层次,可以形象的看做是一个树形结构,那么我们也称标记型文档加载进内存的是一颗DOM树;
这些标签以及标签内的数据都是这棵树上的节点。
DOM对已标记型文档的解析有一个弊端就是当文档过大时,相对消耗资源。
对于大型文档可以使用SAX这种方式解析。
节点类型:(nodeType)
标签节点:类型:1
属性节点:类型:2
文本型节点:类型:3
注释节点:类型:8
document:类型9
节点关系:
父节点:parentNode
子节点:childNodes直接子节点
兄弟节点:
上一个:previousSibling
下一个:nextSibling
获取可以通过节点的层次关系完成。
也可以通过document对象完成:
getElementById:通过id属性值获取对应的节点对象,如果有多个id值相同,获取到的是第一个id对象,尽量保证id唯一性。
getElementsByName:通过标签的name属性值获取对象,返回的是一个对象数组。
<html>
<head>
<style type="text/css">
table{
border: blue 1px solid;
width:60%;
}
table td,table th{
border: blue 1px solid;
}
table th{
background-color:red;
}
.one{
background-color:#00FF00;
}
.two{
background-color:#009900;
}
.over{
background-color:blue;
}
</style>
<script type="text/javascript">
var name = null;
function trcolor(){
var mails = document.getElementsByName("mail");
for( var i=0;i<mails.length;i++){
var tr = mails[i].parentNode.parentNode;
if(i%2==1){
tr.className = "two";
}
else{
tr.className ="one";
}
tr.onmouseover = function(){
name = this.className;
this.className = "over";
}
tr.onmouseout = function(){
this.className = name;
}
}
}
function selectAll(node){
//alert(node.checked);
var mails = document.getElementsByName("mail");
for(var i=0;i<mails.length;i++){
mails[i].checked = node.checked;
}
}
function selectAction(index){
var mails = document.getElementsByName("mail");
for(var i=0;i<mails.length;i++){
if( index > 1 ){
mails[i].checked = !mails[i].checked;
}
else{
mails[i].checked = index;s
}
}
}
function delMails(){
var mails = document.getElementsByName("mail");
var seltrs = new Array();
var index = 0;
for(var i=0;i<mails.length;i++){
if( mails[i].checked ){
seltrs[index++] = mails[i].parentNode.parentNode;
}
}
//alert(seltrs.length);
for( var i=0;i<seltrs.length;i++){
var tbdNode = seltrs[i].parentNode;
tbdNode.removeChild(seltrs[i]);
}
}
window.οnlοad=function(){
trcolor();
}
</script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" name="all" οnclick="selectAll(this)">全选</input></th>
<th>姓名</th>
<th>邮件列表</th>
<tr/>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan1</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan2</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan3</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan4</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan5</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan6</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan7</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan8</td>
<td>邮件名</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>zhansan9</td>
<td>邮件名</td>
</tr>
<tr>
<th><input type="checkbox" name="all" οnclick="selectAll(this)" >全选</input></th>
<th colspan="2">
<input type="button" value="全选" οnclick="selectAction(1)" />
<input type="button" value="反选" οnclick="selectAction(2)" />
<input type="button" value="取消全选" οnclick="selectAction(0)" />
<input type="button" value="删除选中邮件" οnclick="delMails()" />
</th>
<tr/>
<table>
</body>
</html>