javascript学习-2
javascript对象类型的数据
1 Function
function add(i,j){
}
var fun = function(){
}
2 Object
JSON
var students = {
name:"suns",
age : 10
getName:function(){
}
};
3 Array
数组特点 ：
var array = ["suns",10];
array.length;
push();
pop();
shift();
unshift();
reverse();
sort();
join("-d-");
-----------------------------------------
String
var name = "suns";
var name = new String("suns");
java判断 字符串内容相等
.equals();
java字符长度
.length();
String API方法
toString(); ----》 页面输入内容时显示字符串的信息
valueOf();
concat(); --- 连接多个字符串
var name = "sun";
sun.concat("shuai");
substring(起始位置,终止位置);--- 截取字符串
0 不包含
split(); ---- 按照特定分隔符 把字符串拆分成数组
var name = "sun,shuai";
var array = name.split(",");
indexOf(); --- 判断是否包含字串
var name = "sunshuai";
name.indexOf("sh");
charAt(); --- 获得特定位置的字符
var name = "sunshuai";
name.charAt(1); ---> u
fromCharCode(); --- 根据一个字符的码值获得对应的字符信息
String.fromCharCode(97); --- a
java:String.startWith(); --- boolean
String.endWith(); --- boolean
判断一个字符串是否以一个字串开头
String name = "sunshuai";
name.startWith("suns");
注意：
javascript判断字符串相等 == ===
javascript判断字符长度 .length属性
javascript 没有 startWith() endWith()
Date
java.util.Date
^
|
java.sql.Date
javascript
var d = new Date();
Date API 2011
getYear(); 从1900起始年份 算起
getFullYear(); 年份
getMonth(); 获得月份 ---> 0 开始
getDay(); 星期
getTime(); 1970 毫秒
getDate(); 获得天
toLocaleString(); 当地显示时间的习惯 显示时间
Math
Math.abs(); 绝对值
Math.sqrt(); 开平方
Math.round(); 四舍五入
Math.ceil(); 有小数点 ，进位取整
Math.floor(); 有小数点 ，去位取整
Math.random(); 0--1 随机数
---------------------------------------------------
事件模型 （观察者设计模式）
事件要素
事件
事件源 事件 ---》 事件源
事件监听器 当发生事件后 会有事件监听器发现 并处理
javascript 事件模型
1 事件 单击 ， 双击 ，浮入 浮出
2 事件源 标签
3 事件监听器 标签中 事件监听属性 处理
一般性事件监听属性 ：
onclick 单击事件
ondblclick 双击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseomove 鼠标移动
onmousedown 鼠标键按下
onmouseup 鼠标键松开
适用 几乎全部的可显示元素 。
页面相关事件监听属性 ：
onload : 页面加载时触发。 <body>
onscroll : 页面滚动时触发。 <body>
onstop : 按下stop按钮时触发。<body>
onresize : 调整大小时触发 。<body>
onmove : 窗口移动时触发。<body>
<body onload="alert('页面加载了')" onscroll="alert('页面滚动了')">
表单相关事件 ：
onblur : 当前元素失去焦点时触发。 <input>
onchange : 当前元素失去焦点，并且值发生变化时触发。<input>
onfocus : 当前元素获得焦点时触发。<input>
onsubmit : 表单被提交时触发 <form>
<form method="" action="">
<input type="" name=""/>
</form>
<h1 onclick="test()">
并不是调用 而是存储在了事件监听属性中，
在事件发生的时候才会调用
h1 对象
h1.onclick
------------------------------------------
事件模型 (javascript)
1 事件 event
？ 如何在javascript程序中获得事件
FireFox
function test(event){
}
IE --- window.event
获得事件对象
event.type ---> 事件类型
event.clientX 事件发生的准确 X （横向坐标）
event.clientY 事件发生的准确 Y （纵向坐标）
2 事件源 (标签) 通过事件 ----> 事件源
Firefox
event.target --- > 事件源
ie
window.event.srcElement
3 事件监听属性
-------------------------------------------
javascript 事件问题
事件冒泡 bubble
1 子标签中产生的事件 传导到父表签中
解决事件冒泡
FireFox
event.stopPropagation();
IE
window.event.cancelBubble = true;
----------------------------------------------------
javascript DOM
Document Object Module
html文档 当做一颗树
<html>
<head>
</head>
<body>
<input type="text" name="name"/>
<h1>suns</h1>
</body>
</html>
html
head body
input h1
suns
javascript DOM
1 改变文档内容
改变文档 内部 标签属性
2 改变文档结构
为现有文档 增加新的标签
一组 API
1 <input type="radio" name="改变文档内容
1 <Element id="s"/>
var element = document.getElementById("s");
2 " value="">
var elements = document.getElementsByTagName("h1");
1 图片
2 字体
该css样式
var div = document.getElementById("i");
div.style.color = ;
div.style.backgroundColor = ;
-----------------------------------------
var 唯一的一个对象 = document.getElementById("");
var 标签对象的数组 = document.getElementsByTagName("");
----------------------------------------------
<table>
<tbody id="tb"> document.getElementById("tb");
<tr><td>suns1</td><td id="td1">suns2</td></tr>
<tr><td>suns2</td></tr>
</tbody>
</table>
var td = document.getElementById("td1");
td.parentNode
td.nextSibling
td.previousSibling
firstChild
lastChild
childNodes --- 孩子数组
----------------------------------------------
树状菜单 www.2cto.com
---------------------------------------------
改变文档结构
var div = document.createElement("div");
element.appendChild(div);
var body = document.getElementById("b");
body.appendChild(div);
var txt = document.createTextNode("suns");
div.appendChild(txt);
父 子
body.removeChild(div);
----------------------------------------------
1 复习 DOM 事件
2 menu
3 动态表格
作者：woshiyjk
