初
- js区分大小写
- 字母数字下划线
数字开头 - 分号必写
- /n换行
- js浮点运算不精确
- . 方法名 逗号调用方法
- 双引号需在同一行,换行可以用+做字符串拼接
- \n 源代码换行
<a href="javascript:alert("注意冒号")>点击这里弹出js窗口</a> /耦合问题不推荐使用
数据类型
- null 空object
- undefind 衍生自null,未赋值变量
- number NaN 不是一个数字
类型转换
转为串
- string 底层是 单个字符组成的数组
.charArt(索引)
获取单个字符.chaCodeArt(索引)
获取编码String.fromCharCode(0xU码)
将编码转成正常体 0x表示编码是16进制字符串.indexof("单个字符",开始查找位置)
在串里找单个字符 返回索引第一次出现
lastindexof( ) 从后往前找substring(参数1 参数2)slice( 参数1 参数2)
从小到大排序 substring负值不可用toUpperCase( )
返回大写 toLowCase( )返回小写
.toString()
undefind null 报错 不改变原数据
String()
包含toString() 增加了undefind null直接加" "转串
a=a.toString()
document.write(a)
运算符转串 和串运算都自动转串 所以 +空串
转为数字
Number()
数字型串转数字 普通串,undefind转NaN 空串,null为0 布尔1或0
半数字型字符串取number, 非串先转成串 //不同浏览器对进制不同
parseint(对象,10 )
parsefloat( ) 解析出串中第一段连续number //声明十进制
二元运算符转数字 只要参与和数字的运算除了加法都会自动转 所以可以-0 /1 *1
一元运算符转数字 正号+放前面也可触发算术运算如 加法运算转数字可以 1+ +“a”
比较运算符也会自动转数字再比较
本质上都是调用了Number()函数
转为布尔
Boolean()
空串0NuN null undefind 为false
关系运算符转布尔 有非或与运算自动转布尔 所以**!!** 取非再取非
转为对象
数据类型.属性或方法时候 浏览器会自动对其进行封装 将其转为对象
new Number(数字) new String(字符串) new Boolean(布尔) 转成数字型串型对象
使用完了就自动销毁对象
运算
优先级
优先级可查询运算优先级表
isNaN()
是否为NaN返回布尔
和NuN运算都是NaN(不是数字)
- 一元运算符
typeof
返回类型
除了有关字符串的相加,其他运算都会把非number转成number再运算
和字符串相加都会转串 //变量不会 如:console(“a是=”+有值的变量a)
关系运算符
非布尔先转为布尔型再关系运算
! 非运算
&& 找false 返回布尔为false的那个值
短路与 第一个false就不会读取第二个,第一个false就返回第一个值
第一个true, 就看第二个 返回第二个值
|| 找true 返回布尔为true的原值
并列或 第一个true 返回第一个
第一个false,就看第二个 返回第二个值
比较运算符
==值相等 !=值不等 ===值和类型相同 !==值或类型不等 返回布尔
非number比较 转为数字比较 返回布尔
- null undefind不会自动转
- NaN不等于任何值 和NaN比较都是false
- 字符串比较首字母的Unicode码
其中数字型字符串也只会比较第一位 要手动转Number
条件运算符
ture? 执行1:2
转成布尔?1:2
Unicode使用
console("\uU码编码") //可在U码编码表查询
<p>&#U码编码十进制</p> //可用计算器转换进制
++a和a++
让a加1取新/旧
- 让旧a加1变新a
- a++ 取旧a
++a 取加1后的新a
NaN
与它运算都算NaN
与它比较都返回false
它不等于任何值 包括它本身
undefind==null undefind衍生自null
undefind转数字为NaN null为0
贰
循环
初始表达式 条件表达式 更新表达式
- if(条件1**&&**条件2)
- if(布尔多为true)
- 变量=
prompt( )
弹出字符串输入框 放入循环中 输错自动重置 - swtich( ) case defalut 执行第一个与括号内容全等后面内容
swtich(true)
循环执行后面内容 if break 关闭循环do{循环内容}while
先执行一次 然后while给出关闭条件- count=0循环内容
count++
循环计数器 - console.time(“计时器名”) 开始计时
console.timeEnd( ) 计时器停
反向筛选
变量=true
遍历 不需要的值后 变量=false
if(变量) 输出 //if变量 默认true
叁
对象object
- 属性的无序集合,每个属性都是一个名/值对
- 对象可以创建属性 也可以从原型继承属性 原型对象自动生成
- 对象保存在栈内存 变量=对象 变量保存的是地址 变量=对象变量 也指地址
- 除了基本数据类型 其他都是对象
- 自带constructor属性 指当前对象的构造函数
- 没有被使用的对象 内存自动回收
创建
- var 对象名=new object( )
- var 对象名{ 属性:属性值 } 给"属性"加引号适合任意不规范名称
添加或修改属性
- 对象名.属性名=属性值
- 对象[‘属性名’]=属性值 可以操作 任意不规范属性名的情况
删除属性 delete 对象名. 属性值
检查是否有属性 属性in对象
返回布尔
输出属性的值 对象**[属性]**
查看所有属性 for
任意变量 in
对象 输出变量
- 属性值可以是任意类型 包括对象
- 属性不存在 返回undefined
- 对象.子对象.子对象属性
普通数据类型 栈内存 名-值
引用数据类型 栈内存 对象名-地址 有new开辟堆内存
- 对象名赋值给变量 赋的是地址 地址相同可以操作堆内存 null删除地址
- 不使用的对象设为null 触发自动回收垃圾
函数
-
函数也是对象 函数也可是函数的参数
-
函数调用才执行
-
单纯以函数形式调用时候 this永远是window
-
function和var声明都提前 函数整个提前
变量赋值部分不提前 new构造函数声明不提前
在函数中声明也会提前 -
函数通过new函数名调用的是构造函数 首字母大写
-
原型函数对象自动生成 相同地址的函数都可访问原型的属性
-
访问原型函数 只有函数对象有prototype属性
-
调用函数名是把=等于号后面的复制到调用函数名处
调用函数名( )是先计算函数得出返回值 然后使用这个值在函数名处 -
构造函数.prototype
-
Object.getPrototypeOf(对象)
-
对象._proto_
-
对象.constructor.prototype
函数创建
- var 函数对象名=new function( “任意字符串转成执行内容”) 字符串直接转
构造函数 函数首字母大写 - function 函数对象名(参数){ }
- 超链接点击默认跳转 javascript:; 或 函数返回return false
function(参数){ } 匿名函数 可以赋值给变量
立即执行用完销毁 (function(){ })( )
- 形参=在函数里声明变量
- 参数可以是任意类型 解析时不检测 参数的数量和类型
- 参数多了无效少了会有undefinted 因为不检测所以要考虑类型不符
- return返回任意类型 并退出函数
- 参数可以是对象和函数对象 函数对象名()传的是返回值
var声明变量 表示window对象的属性
function声明函数 表示window对象的特殊属性即方法
- var声明变量和函数优先被浏览器解析 函数是整个 变量声明优先赋值不优先
- 使用未声明变量 本域没有 最近的上一级域没有 window. 变量全局变量
- 函数参数没var声明 默认是本函数域 函数域调用函数一次性使用
调用函数默认传入this 参数对象 表示函数上级元素
调用函数 函数()=window. 函数() this是window
调用函数 上级对象名.函数 this是这个对象
函数名.call(指定this 实参)
函数名.apply(指定this [实参]) 设置this 顺便传递实参 传递格式不同
调用函数默认传入arguments 参数对象 封装实参
arguments[0]=实参
添加实参 没形参也可以添加
arguments.length
实参数量
arguments.callee 返回当前整个函数
对象instanceof 构造函数
对象是否是构造函数的实例 返回布尔
所有对象instanceof Object
都为true 所有对象都是Object的实例
原型对象相当于公共默认库 不自定义就默认 创建函数自动创建原型函数 prototype属性指向原型
调用构造函数__proto__属性指向原型函数名.prototype.属性名.属性值
为原型对象添加属性
属性in对象
属性是否在实例或原型 返回布尔
对象.hasOwnPrototype("属性")
是否在实例 返回布尔
in判断是否有此属性 hasOwnPrototype判断是否在实例 false不在实例 则必在原型
对象__proto__.__proto__是object 对象的原型的原型是object
数组
- 数据是对象 优点是存储性能
- 数组用于有顺序关系的值
new数组对象(数组长度如:10) 长度为 10 一个为长度 多个为元素
数组名=[元素]
常用 创建
push(元素)
添加元素 返回长度
unshift(元素)
删除尾部 返回删除的元素
splice(开头元素 删除数量 开头元素前的新元素)
删除或替换或添加 返回删除的数组
数组1.concat(数组2,新元素)
合并数组或元素 返回新数组
数组.join(连接符)
转为连接符连接的字符串
splice(“分隔符”)将串转为数组
数组.reverse( )
反转原数组
数组.sort( )
根据U码 从小到大排序
.isArray( )
是否为数组 返回布尔
数组.sort(function( ){
return如为正数} // 正数 从大到小排序
- 索引不连续 跳过的显示为空 默认逗号分隔
- 修改length 可删除尾部多出的位数
数组名[数组名.length]
尾部添加新元素 -- 索引0始 length比索引少1 [索引]
日期对象
- Date对象用来表示一个时间
- new Date( ) 创建 不传参数默认创建当前时间
可 传递毫秒数或时间格式的字符串参数
new Date(01日1月1111年 1时:1分:1秒) 自定义格式
日期对象.getDate( )
返回日
getMonth( )
月
getTime( )
时间戳 毫秒数
Date.now( )
当前时间戳 当前时间戳一直在变换 可用来计时
Math对象
工具类对象 自带的不用创建
Mate.PI 圆周率
Math.abs(数) 返回绝对值
Math.ceil(数) 向上取整 floor向下 round四舍五入 返回操作后的数
random( )
生成0-1的随机数
.max( 值1 值2 值3) 取最大值
闭包对象
用函数的局部作用域封装可以重复使用的内容
Boolean
Number
String
var str = new String(“任意字符串”)
- 使用基本类型的闭包可以让基本类型可以使用属性
正则表达式
var 变量名=/正则表达式/匹配模式
创建 赋值变量 灵活 模式i
忽略大小写 g
全局匹配
var=new RegExp(“正则表达式 匹配模式”) 字符串
变量=RegExp("字符串")
检查变量里是否有此字符串- test( ) 检查字符串是否符合正则 返回布尔
a|b找a或b `[a-z]`找全部小写 `[A-z]`找任意字母
a[bcd]c
找abc acc adc [^ba]
找除了a,b以外的 [^1-9]找除了数字
(an){3}
找an连续出现三次 ab{1,3}c 出现1个2个3个b
ab{3, }c
出现3次b以上 ab+
c至少一个b
后面加*有多少匹配多少 加?匹配一个
^a 开头a a$结尾a 两个都用代表完全符合正则
.表示任意字符 \转义字符
\w任意字母或数字
\d任意数字
\s 空格
单词后\b 单词后是空格
字符串.repace(/^\s*|\s*$/g," ") 去空格
将前面或后面任意数量空格换为啥都没 完全符合 全局匹配
伍
Dom
网页Document object modern
网页中一切元素都是对象 是节点Node 空格回车也是节点Node
节点 文本节点 元素节点 属性节点 文档节点
nodeName #test 标签名 属性名 #document
nodeType 3 1 2 9
nodeValue 文本 null 属性 null
-
window的属性document文档节点是入口
-
document.getElementById 或者是指定父元素范围内找
getElementByTagName 返回数组 元素是键值对
getElementByName 返回数组 元素是键值对
document.body 返回 body里面元素
document.documentElement 返回 页面元素
document.all 返回元素个数
等于 document.getElementsByTagName(*) ie9
等于 document.getElementsClassName(" ") ie9
document.querySelector("CSS选择器")
返回唯一一个或第一个
document.querySeletorAll(" ")
返回数组 -
document.createElement(“标签”) 创建节点 返回新标签
document.createTextNode(“文本”) 创建文本节点 返回新文本
remove 删除 replace 替换 -
父节点.append(“子节点字符串”) 添加子节点 可以是标签
父节点.insertBefore(“新节点,子节点”) 子节点前插入新节点
节点.parentsNode.insertBefore( ) 获取父节点
- 元素名.innerHTML 获取内部代码
元素名.innerHTML=“修改后的代码” 可以带标签 修改内部代码
自结束标签没有内部代码 有value属性可以用
innerText - 元素名.classname 元素的属性名
- .clinetHeight 返回数字 内容区+内边距
.offsetHeight 返回数字 边框 内容区 内边距
.offsetParent 最近的上一级定位 没有为body
.dffsetTop 定位的top
.ScrollWidth 滚的宽
.ScrollLeft 水平滚动条移动量
.clientX 事件被触发时 相对于浏览器窗口 鼠标指针x轴参数 返回数字
.PageX 相对于整个页面 返回数字
ScrollWidth-ScrollLeft==clientWidth 到底了
对象.样式名
返回样式值 没有值长度返回当前页面窗口的长度px 随窗口变化ie旧元素.style.属性=新值
修改style 带-的属性修改为驼峰 js认为是减号
改后为内联样式
元素.currendStyle.属性
查看当前生效的style 没有设置获得默认值 如auto
只有ie支持 只读不可改
windows.getComputedStyle(要获取样式的主体 null)
查看当前样式
后参数原来设置为元素 常为null 返回对象 只读不可改
ie不支持
事件
元素.事件=”执行内容" 耦合 不用
事件响应函数会自动传一个参数event封装事件动作 当作对象来用 event.clienX
返回数字 相对于视窗X方向指针 ie8不会自动传event
使用window.event方法 window.event.clientX
元素.事件=function( ){
执行内容 } //事件响应函数
- .addEventlistener(“事件没on”,function(){ },false) true捕获阶段就执行 ie旧版
旧版用attachEvent(“事件有on”,function(){ }) 添加事件绑定 - 事件响应函数其实分两步执行完 触发前和触发后
window.onload 页面加载完触发
.onscroll 滚动时触发
.onmousemove鼠标指针进入元素触发
confirm( )
类似 alert( ) 有取消 返回布尔
- 从外到内捕获(读取不执行)-找到元素后不会继续向内-从内向外冒泡(执行)
event.cancelBubbl
取消冒泡
BOM
浏览器对象模型
通过各种对象及对象的方法 访问浏览器功能,控制浏览器行为
window对象 所有全局作用域中声明的变量 对象 函数对象 都是它的属性和方法
窗口
整个网页大小 innerWidth 浏览器视窗大小 outerWidth
打开窗口 新标签
window.open(URL,name,specs,replace )
URL 没有则打开空白窗口
name _blank 新窗口默认名字 name 自定义名字 _self 替换当前页面名字
specs 项目列表 逗号分隔
replace 是否保留当前历史记录
true跳转替换当前页面记录 false跳转保留当前页面记录
执行时间控制
- 等一段时间后执行
setTimeout
(函数或需控制的代码段 数字 函数参数ie )
数字默认单位毫秒
都在全局作用域中执行
clearTimeout( )取消控制
- 循环执行且每次执行前都等一段时间
setInterval
(执行的代码 数字 )
clearInterval( )取消控制
系统对话框
alert( )
comfirm( )
有取消按钮 返回布尔
prompt(显示文字,框内默认文字 )
有输入框
- 外观有操作系统或浏览器设置决定 不是Css
- 显示系统对话框会导致程序终止 关闭后恢复
location对象
href= 属性 assign( ) replace( ) 跳转页面
assign地址错误返回参数 replace无历史记录
reload( ) 强制刷新页面
history对象
浏览器窗口打开时开始记录
go( )
在历史记录中任意跳转 back( ) 向后 forward( )向前
navigator.userAgent检查浏览器版本
document对象
window.document 是window对象的属性
DOM
对整个HTML页面 WEB页面 网页文档进行操作
改变大小 内容 增删会重新渲染 改变样式会重绘
- 文本节点
HTML标签以外的内容
常是元素节点的子节点 因为内容一般在标签内 一般也是通过父元素节点获取
- 属性节点
是元素节点的一部分 一般不用 可以通过对应的元素节点获取
节点获取
- 元素节点 document. 可省略 getElementById( ) getElementsByTagName(
) getElementsByName( ) ByName在ie只能在form使用 - 元素节点的子节点 任意节点为父元素节点. .childNodes
所有子节点 .firstChild第一个子节点 .lastChild最后一个子节点 - 节点的父节点和兄弟节点 任意节点
.parentNode父节点 .previousSibling前一个兄弟节点 .nextSibling后一个兄弟节点
css选择器法获取 - querySelector(css选择器“字符串” style标签中的选择器)
节点操作
创建
document.createElementt(新标签名 )
删除
父节点.removeChild(子节点)
替换
父节点.replaceChild(新节点,旧节点)
插入
父节点.appendChild(子节点)
父节点.insertBefore(新节点,旧节点)
- 通过element对象 只能操作对象
节点.element.appendChild( ) 添加子元素到尾部
节点.element.childNodes 返回子节点的NodeList
节点.element.className 返回class属性
节点.element.hasAttribute( ) 是否有此属性 返回布尔
节点.element.innerHTML 设置或返回内容
节点.element.removeChild( ) 移除子节点
节点.element.replaceChild( ) 替换子节点
节点.element.setAttribute( ) 设置或修改属性
- 其他操作方法
.nodeValue
获取和设置文本内容
.innerHTML 获取和设置内部代码 可以带标签
元素.offsetParennt
获取当前元素父元素
- 属性操作
function getStyle(obj,name){
if(window.getComputedStyle){ return getComutedStyle(obj,null)[name]; }else{
return obj.ourrentStyle[name]; }
元素.style.样式名
通过此法设置和读取的都是内联样式 只读
元素.currentStyle.样式名
读取当前元素正在显示的样式 仅仅IE支持
getComputedStyle(元素,null )
此法是 window的方法 其他浏览器 只读
事件
- 委派和冒泡做增加表列自动带属性的格式表 给父元素加格式
event.cancelBubble=true
取消冒泡
event.target.className
触发事件的对象class名
事件1
if(info.scrollHeight - info.scrollTop == info.clientHeight)
//滚动到底
事件2
元素.事件=function(event){ //event默认值指事件触发这个动作 是个对象
event = event || window.event; //解决兼容
事件3
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
//滚动条距离获取 解决兼容
事件3
//事件绑定多个响应
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
onmousewheel火狐不支持
DOMMouseScroll火狐使用 注意: 必须通过addEventListener( )绑定
向上滚120 向下滚-120
火狐使用event.detail获取滚动方向 向上-3 向下3
return false 取消默认行为 滚动时候有滚动条默认随之滚动
用addEventListener( )绑定的取消默认用: event.preventDefault( ) ie8不支持
键盘对象绑定给有光标焦点或者document
event.keyCode 代表按键内容
onkeydown默认行为 在文本框输入内容 return false取消默认
通过元素offset属性的距离 在按键前后的不同 设置按键造成移动和改变移动速度的效果
DOM直接操作浏览器
window的几个属性
Navigator.userAgent字符串判断浏览器信息 最后方法查看特有对象字符串判断浏览器信息
History.length 当前链接数量 .back( )回退.forward( )向前
go( )到指定页面 参数1向前 2向前2个 -1回退
Location 直接打印 返回地址栏完整信息即本页路径
修改lovation自动跳转 生成历史记录
assign(“链接地址” ) 相当于直接修改location
reload( )刷新页面 F5 参数true 强制清空缓存
replace( “链接地址”) 代替本页 不生成历史记录
轮播图
二级菜单
JSON