黑马程序员之javascript基础学习

------- 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();将函数运算后的值赋值给method
var 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:负责通过程序设计方式操作这些对象;

标签之间存在层次关系:

html
head
title
base
meta

link

style

body
table
tbody
tr
td
th
div
form
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>

------- android培训java培训、期待与您交流! ----------

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值