JavaScript学习笔记(一)

来源:互联网 发布:厦门大学网络教学 编辑:程序博客网 时间:2024/06/13 16:19
Math应用
==========
Math.ceil()   向上取整
Math.floor()  向下取整
Math.abs()    绝对值
Math.round()  四舍五入


---------------------------------------------------------------------------------------------------------------
定时器
======
setInterval 间隔型clearInterval
setTimeout 延时型clearTimeout
 
日期对象:Date()的使用
getHours() 小时 
getMinutes() 分钟
getSeconds()
getFullYear()
getMonth() 月 从0开始 0代表1月 记得+1 只有他特殊
getDate()
getDay() 星期几 0代表星期日


charAt() 获取字符串某一位上的东西 兼容的




连等 a=b=c=6 此时abc都是6


offsetLeft /offsetTop 获取物体的左/右边距 可以综合考虑条件
offsetWidth / offsetHeight


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


JS事件
======
document 代表的是整个页面,如果要给整个页面加事件,最好给次标签加事件


clientX,clientY  可视区域位置
使用时一定要加上 scrollTop,scrollLeft 要不容易出错


获取event对象:
event 一般是IE下能用 不兼容
调整兼容性为:var oEvent=ev||event;


事件冒泡 事件会顺着他的层级,一级一级往上传递,一直到document
取消冒泡 oEvent.cancelBubble=true


鼠标事件 
onmousemove 鼠标点击移动触发事件


键盘事件 keyCode 键盘相应按钮所代表的数字
onkeydown onkeyup


ctrlKey、shiftKey、altKey 


默认行为(浏览器自带功能)
oncontextmenu 右键菜单 
有返回值 return false 阻止默认事件
onkeydown 输入框 return false阻止输入  
onkeyup


拖拽
 原理:距离不变
计算鼠标和物体之间的距离
onmousedown 
onmousemove 
onmouseup
 限制范围:对位置进行判断


绑定事件
attachEvent(事件名,函数) 可以同时加多个函数到同一个事件上  不兼容 一般用在IE下
detachEvent 解除绑定
addEventListener(事件名,函数,false)跟attachEvent用法基本一样 不兼容 一般用在FF chrome IE9
removeEventListener 解除绑定


事件捕获
setCapture() 把事件都集中在一个div身上,只兼容IE
releaseCapture() 释放
---------------------------------------------------------------------------------------------------------------


Ajax
======
在服务器上使用
无刷新数据读取
读取服务器上的信息
字符集编码,编码格式要相同 (一般网页是utf-8,读取txt文件的时候要把他的编码改成utf-8)


eval() 读取文件内容


GET------用于获取数据 (如浏览帖子)
通过网址来传递,不可以无限长,一般是4K-6K 放入URL中 容量小,非常不适合传递大数据
安全性差
有缓存
POST-----用于上传数据(如用户注册) 
不通过网址,容量大 2G 
安全性好一点
没有缓存


创建ajax程序(从服务器上请求数据):
1.创建一个Ajax对象
2.连接到服务器
3.发送请求 (告诉服务器要什么)
4.接收返回值


全局变量其实是window的一个属性,属于window的


JS中:
用没有定义的变量——报错
用没有定义的属性——undefined


JS中同步,异步
同步:事情必须一件一件来
异步:多个事情可以一起做 Ajax天生就是做异步的


onreonreadystatechange事件
    readyState属性:请求状态
0 (未初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发生请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
   status属性:请求结果
   responseText




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


面向对象
========
面向对象:不了解其原理的情况下,会使用其功能
对象:黑盒子,不了解内部的结构,知道表面的各种操作
面向对象是一种通用思想,并非只有编程中可以用,任何事情都可以用


JS中面向对象编程(OOP)
特点:抽象 抓住核心问题 抽——把最主要的特征、跟问题相关的特征抽出来
      封装 看不到里面的东西,用好表面的功能就可以
      继承 遗传,从父类上继承出一些方法和属性,子类又有一些自己的特性
多重继承、多态
对象的组成:
方法——函数:过程、动态的 
函数:自由的
属性——变量:状态、静态的 
变量:自由的,不属于任何人 
属性:属于一个对象的


this
this,当前发生事件的对象
this,当前的方法(函数)属于谁!!!!!
不能再系统对象中随意添加方法、属性,否则会覆盖已有方法、属性


构造函数,其实就是普通函数
功能:构造一个对象


工厂方式:原料->加工->工厂
缺点:没有new 函数重复-资源浪费
加上new 系统偷偷的替你创建了一个空白对象,在偷偷替你返回了这个对象


原型(prototype):一次给一组元素加js,相当于css中的class
类,对象:
类:模子,不具备实际功能
对象:产品(成品),具备实际功能 


混合方式构造对象:
在构造函数中加属性,在原型中加方法!!!!


面向过程改写成面向对象
原则:不能有函数嵌套,但可以有全局变量
过程:
onload--------构造函数
全局变量------属性
函数----------方法
改错:this,事件,闭包,传参


Json方式的面向对象
简单,但不适合多个对象
Json:整个程序里只有一个,写起来比较简单


json里面可以放任何东西
var json={
a:12,
b:5,
c:'abc',
d:funcion(){
alert('a');
}
};
json.d();


继承
call()可以改变函数执行时里面的this 


本地对象(非静态对象)
需要new才可以用
如:Object,Function,Array,String,Boolean,Number,Date,RegExp,Error
内置对象(静态对象)
不需要new就可以用
如:Global,Math


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


JS中for in语句
==============
for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)


for (变量 in 对象)
{
在此执行代码
}






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


BOM
====


打开、关闭窗口
window.open 有返回值,返回新打开的窗口,也是个窗口对象
window.close 在IE下弹出提示框,FF下没有反应 只有通过open打开的页面,close时就很正常,没有提示,直接关闭。
必须是你开的,才可以你关。


document.write 先清空,再写


window.navigator.userAgent 浏览器版本
window.location 当前网页的地址 还可以赋值 赋值:window.location='http:....'


窗口可视区尺寸
宽:document.documentElement.clientWidth
高:document.documentElement.clientWidth
滚动的大小
document.documentElement.scrollTop IE,FF
document.body.scrollTop Chrome 整百整百的滚动
兼容的写法 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop ;


position:fixed 不兼容IE6 改用position:absolute


window.onscroll页面滚动时触发事件
window.onresize窗口改变大小时触发事件


confirm('提问问题内容') 返回boolean
prompt('') 返回输入内容,返回字符串或null


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


cookie
=======
cookie页面用来保存信息
cookie的特性是:
同一个网站中所有页面共享一套cookie 。如果是同样的网站,不同的域名,不可以共享同一套cookie。是以域名为单位的。
数量、大小有限 4k-10k
过期时间 如果没有设置过期时间,则浏览器关闭时就关闭了。


设置cookie
名字=值 ; expires=过期时间 
---------------------------------------------------------------------------------------------------------------


字符串操作
===========
search 查找,找不到返回-1,找到则返回他的位置
substring 获取子字符串,字符串截取,substring(起点,终点),不包括终点位置,如果没有终点,则截取到字符串结束
charAt 获取某个字符串
split 分割字符串,获得数组 切片


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


正则表达式
===========
正则表达式是一种规则,是一种很强大的字符串匹配工具,是一种正常人类很难读懂的文字


var reg=/b/i; /b/定义的字符,i忽略大小写 ignor的缩写
var reg=/\d+/g; //\d代表的是数字,+代表的是若干个,g是global的缩写,代表所有的 全局匹配


search 字符串搜索
match 获取匹配的项目
replace 替换所有匹配
test 用来检验字符串是否符合正则的要求 如果字符串一部分符合要求,也为true


^ 代表行首
$ 代表行尾 


常用的转义字符
元字符 (方括号)
\d 数字[0-9]
\w 英文、数字、下划线[a-z0-9_]
\s 空白字符
\D 除了0-9以外的东西[^-9]
\W 除了英文、数字、下划线[^a-z0-9_]
\S 非空白字符


[^a-z] 除了字母以外的都要
.(点) 代表任意字符 正则中尽量不要用


i 忽略大小写 ignor的缩写
g 是global的缩写,代表所有的 全局匹配


常用的量词
量词就是个数


{n} 正好出现n次
{n,m} 最少n次,最多m次
{n,} 最少n次,最多不限
+ 最少一个,若干个,相当于 {1,}
可以有也可以没有,相当于{0,1}
* 任意次 {0,} 尽量不要用!!






---------------------------------------------------------------------------------------------------------------
0 0
原创粉丝点击