七寳的专栏

前端小白的学习记录

JavaScript学习笔记(一)

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,} 尽量不要用!!






---------------------------------------------------------------------------------------------------------------
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013072064/article/details/46814307
文章标签: javascript css js
个人分类: 学习笔记
下一篇JS原生函数总结
想对作者说点什么? 我来说一句

javascript 学习笔记

2009年04月21日 40KB 下载

JavaScript学习笔记

2011年11月13日 272KB 下载

个人Javascript学习笔记 精华版

2009年05月27日 71KB 下载

Jsr75学习笔记(一) .txt

2008年12月27日 2KB 下载

js 笔记 javascript 学习笔记

2011年11月28日 3KB 下载

没有更多推荐了,返回首页

关闭
关闭