JS学习笔记

一、js如何运行
二、输出
document.write();
alter();
三、如何在HTML中是用JS
1.使用<script></script>将JS语法嵌入到HTML中，可以使用多个，每一个之间都是有关联的；
2.href = "javascript:代码";
3.各种响应事件中
4.写到外部文件中（.js）<script src = "相对路径"></script>
JS语法
命名规范：
1.取名要有意义
2.不能以数字开头，不能是系统的关键字（$a合法）
大小写：JavaScript区分大小写
变量名和函数: 第一个单词以后每个单词首字母大写
对象: 每个单词的首字母都要大写
分号：
功能执行语句：加分号（换行默认语句的结束）
结构定义语句： 不加分号
注释：
// 单行
/* */ 多行
四、变量
var a = 10; //内存释放是在关闭浏览器后才释放
var 变量名 = 值;
注意：JavaScript是弱类型语言（与PHP一样）

五、数据类型
typeof(变量名);
1.number （int, float, double）注意：计算式还要按照整型和浮点型分开使用
2.string （string， char）
3.boolean（bool）
4.object （对象类型，array， null）注意：分开处理
5.undefined 没有声明变量

函数类型：function

六、运算符表达式
算术运算符：+ - * / % ++ --
加号：连接字符串和加法运算
取余：弱类型语言允许浮点数取余
赋值运算符：= += -= *= /= %=
条件运算符：> < == != >= <= === !==
逻辑运算符：&& || ^
位运算符 ：>> >>> << | & ~
其他运算符: ? :
七、流程控制
八、函数
是一段完成“特定功能”的已经“命名”的代码段(可以在声明之前调用，也可以在声明之后)
1.函数名，函数名不加括号时就代表整个函数
2.参数：根据需要使用参数
3.函数体
4.返回值（没有返回值是一个过程，又返回值是一个函数）

回调函数
把函数作为参数进行操作

 

-----------------------------------------------------------------------------------------------------------

JS数组的声明与应用

1.只要是批量的数据都要使用数组的声明
一、数组的作用

二、如何声明数组
a.快速声明数组的方法
var 数组名 = [元素1，元素2，...，]
b.声明方法
使用Array对象
var arr = new Array();
三、遍历数组
四、数组的处理
concat 方法
join 方法
pop 方法
push 方法
reverse 方法
shift 方法
slice 方法
sort 方法
splice 方法
toLocaleString 方法
toString 方法
unshift 方法
valueOf 方法

DOM
将HTML中的元素转换成对象，是用js操作HTML文档，就需要将HTML文档结构转成就是对象
a.操作属性
b.操作内容
innerText : (IE兼容)全以文本的形式把内容放进去(标签会被当做文本)，取文本的时候反之（不会取标签） textContent ：(其他浏览器（FF）)
innerHTML : 放进去的时候标签会被识别解析，取出来的时候标签会被取出
outerText :
onterHTML : 取出来的时候外部标签会被一起取出
要取出表单中响应元素的内容时：object.value;
注意：用document.all可以区分IE和其他浏览器
c.操作样式
object.style.backgroundColor = "red";
//"-"去掉，后面单词的首字母大写
批量操作： object.claaName = "类选择器名字"
转成对象的两种形式
1.标记名（多个）、id（唯一）、name（多个）
document中的三个方法：
var objs=document.getElementsByTagName("标记名");
var objs=document.getElementById("id名");
var objs=document.getElementsByName("name名");
2.通过数组

-----------------------------------------------------------------------------------------------------------
在一个文档流中
1.创建结点
var obj = document.createElement("标签名");
2.添加到文档流中
a.在指定元素体里面添加
obj.appendChild("动态创建的结点");
b.在指定元素前面（newobj之前）
parentobj.insertBefore(obj, newobj);
c.在指定元素之后（自己写方法）
function insertAfter(obj, newobj) {
if (obj.nextSibling.nodeType==1) {
one.insertBefore(newobj, obj.nextSibling);
} else {
one.appendChild(newobj);
}
}
3.删除结点
removeChild(one.lastChild);

-----------------------------------------------------------------------------------------------------------

事件处理
一、事件源：任何一个HTML元素（结点）body div button p a
二、事件：用户的操作
鼠标：
click 单击
dblclick 双击
contextmenu 文本菜单
mouseover 放下
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动
键盘：
keypress 键盘事件
keyup 抬起
keydown 按下
文档：
load 加载(页面加载完之后触发的事件)
unload 关闭
beforeunloa 关闭之前
表单：
focus 焦点
blur 失去焦点
submit 提交事件
change 改变
其他
scroll 滚动事件

三、事件处理
三种方式
第一种：
格式：<tag on事件 = "事件处理程序"/>
第二种：
<script>
对象.onclick = function() {}
</script>
第三种：
<script for = "事件源ID"event = "事件">事件处理程序</script>

----------------------------------------------------------------------

事件对象
window:
document
location//页面跳转
<mate http-equiv = "refresh" content = "3">
<mate http-equiv = "refresh" content = "3;url=http://www.baidu.com">//隔三秒钟跳转到百度首页
header("Location:login.php");

window.navigate('url');
location.href='url';
location.replace('url');
要记住的:
location = 'url';
location.reload(true);
history
history.back();
history.go(-2);
screen

 

关于位置的属性
style.top
style.left

块高度：
offsetWidth
offsetHeight

offsetLeft 块到左边对象的距离
offsetTop

scrollHeight
scrollWidth
scrollTop
scrollLeft