CSS与JavaScript复习笔记

lansky07

浏览: 321696 次
性别:
来自: NC

最近访客更多访客>>

ying_stone

sky_xin

suncong1024

babysoon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

CSS JavaScript IE 浏览器框架

1. JavaScript的语法
- 区分大小写
- 弱类型变量
- 每行结尾的分号可有可无
- 括号用于代码块
- 注释的方式与C语言、Java相同
2. 变量
- JavaScript中变量是通过var关键字（variable的缩写）来声明的。
- 首字符必须是字母（大小写均可）、下划线（_）或者美元符号（$）。
- 余下的字母可以是下划线、美元符号、任意字母或者数字字符。
- 变量名不能是关键字或者保留字。
3. 数据类型
- 字符串
- 数值
- 布尔值
- 数组
4. 条件语句
- 比较操作符
- 逻辑操作符
- if语句
- switch语句
5. 循环语句
- while语句
- for语句
6. 函数

div与span标记
在使用CSS排版的页面中，<div>与<span>是两个常用的标记，<div>(division)简单而言是一个区块
容器标记，即<div>...</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节
、摘要和备注等各种HTML元素。
在一般情况下div与span都是一个块，一个大的容器，当然也有其区别：
div像一个P标记，会自动换行，而span标记不会换行，横向排列

盒子模型：
一个盒子由(由里向外)content、border、padding、margin这四部分组成

元素的定位
float定位
position定位
*absolute 绝对定位
*relative 相对定位
z-index空间位置

CSS排版观念
1、将页面用DIV分块

<div id="container">
   <div id="banner"></div>
   <div id="content"></div>
   <div id="links"></div>
   <div id="footer"></div>
</div>

2、设计各个块的位置
--------------------------
|       #container        |
|       #banner              |
| #content     #links   |
|      #footer               |
|-------------------------
3、用CSS定位
主要就是运用position、float等来定位
-------------------------------------------------------------------------
DOM模型框架：
文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，可以说DOM是
自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前的访问能力。
DOM模型中的节点
*元素节点
*文本节点
*属性节点
如<a title="css" href="http://www.baidu.com">baidu</a>
其中元素节点为a   属性节点为title="css" 属性节点href="http://www.baidu.com" 文件节点：
baidu

使用DOM：
访问节点
*getElementsTagName
*getElementById
父子关系(可以通过某一个元素遍历其它元素.hasChildNodes()-->childNodes)
节点的属性(元素.getAttribute("属性"))
创建新节点
如：var op=document.createElement("p");//新建一个P标签
    var oText=document.createTextNode("这是一个故事");//创建一个文本节点
    oP.appendChild(oText);//将文本节点赋给元素节点，做为其子节点
    document.body.appendChild(oP);//将元素节点赋给body对象
innerHTML
该属性表示某个标记之间的所有内容，包括代码本身
该属性可以读取，也可以写

javascript事件
事件流
*冒泡型事件
*捕获型事件(IE浏览器不支持)
事件监听
*简单的通用方法如：

<script language="javascript">
  window.onload=function(){
   var oP=document.getElementById("myP");
   oP.onclick=function(){
    alert("我被点击了");
   }
   }
  </script>
  </head>

  <body>
   <div>
    <p id="myP">Click Me</p>
   </div>
  </body>

*IE的监听函数

 <script language="javascript">
  function fnClick(){
   alert("我被点击了");
   oP.detachEvent("onclick",fnClick);//点击一次后删除监听函数
  }
  var oP
  window.onload=function(){
   oP=document.getElementById("myP");//找到对象
   oP.attachEvent("onclick",fnClick);//添加监听函数
   }
  </script>
  </head>

  <body>
   <div>
    <p id="myP">Click Me</p>
   </div>
  </body>

*标准DOM事件
事件对象
IE浏览器中事件对象是window对象的一个属性event
如：oP.onclick=function(){
var oEvent=window.event;//将一个事件对象赋给一个变量
}
DOM标准中规定event对象必须作为唯一的参数传给事件处理函数
如:Op.onclick=function(Oevent){
//......
}
因此为了兼容两种浏览器，通常采用下面的方法
oP.onclick=function(oEvent){
if(window.event)oEvent=window.enent;
}
事件类型
对象事件绑定：如：对象.onclick=函数;
if(window.event)oEvent=window.enent;
if(oEvent.type=="click"){
//....
}else if(oEvent.type="mouseover"){....}

表格与表单
1、动态控制表格
*动态添加
如：<table id="member" ....>...</table>这么一个表格
js: var oTr=document.getElementById("member").insertRow(2);//获得表格引用并插入一行,行标为2
      var aText=new Array();//新建一个数组,在数组中添加各文本节点
      aText[0]=document.createTextNode("文本数据");
      ....
      for(var i=0;i<aText.length;i++){
  var oTd=oTr.insertCell(i); //为表格添加单元格
  oTd.appendChild(aText[i]);//将文本节点添加到单元格中
      }
*动态删除
如：<table id="member" ....>...</table>这么一个表格
js: var oTable=document.getElementById("member");
      oTable.deleteRow(2);//删除一行，后面的行号自动补齐
      oTable.row[2].deleteCell(1);//删除一个单元格，后面的也自动补齐
2、表单基础
-可以通过document.form集合来引用表单，例如一个name属性为“myForm1”的表单可以用
如下语句来获得：document.forms[”myForm1″],其中HTML部分为：
<form method="post" name="myForm1" action="addInfo.do">
表单元素：
<label for="name">文本</label><input ......> label给我们带来了友好的提示,我们在书写表单时应
尽量的使用label标记
控制字符个数
*单行文本框的maxlength属性,而<textarea>的字符个数要通过js来控制输入
*<textarea ... maxlength=50 onkeypress="return LessThan(this)"></textarea>
js: function LessThan(oTestArea){
  //返回文本框字符个数是否符号要求的bollean值
  return oTextArea.value.length<oTextArea.getAttribute("maxlength");
}
自动选择文本
*鼠标经过时自动聚焦，并且能够选中默认值以便用户直接删除
如：<input type="text" name="name" id="name" value="姓名"
         onmouseover="this.focus()" onfocus="this.select()">

javascript调试与优化
1、错误与异常
-拼写错误
-访问不存在的变量
-括号不匹配
-连接错误
-混淆等号(==)与赋值(=)
2、错误调试

try{
  .....
}catch(exception){
   var sError="";
   for(var i in exception)
      sError+=i+":"exception[i]+"\n";
      alert(sError);
}

分享到：

jQuery-Dreamweaver插件支持jquery | 学习笔记：JavaScript学习方法建议

2008-11-21 15:13
浏览 1185
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论