javascript学习-2-CSDN博客

本文链接：https://blog.csdn.net/woshiyjk/article/details/7759818

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 οnlοad="alert('页面加载了')" οnscrοll="alert('页面滚动了')">

表单相关事件：
onblur : 当前元素失去焦点时触发。 <input>
onchange : 当前元素失去焦点，并且值发生变化时触发。<input>
onfocus : 当前元素获得焦点时触发。<input>
onsubmit : 表单被提交时触发 <form>

<form method="" action="">
<input type="" name=""/>
</form>

<h1 οnclick="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 --- 孩子数组

----------------------------------------------
树状菜单
---------------------------------------------
改变文档结构
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 动态表格