数据类型
null 空objectundefind 衍生自null,未赋值变量number NaN 不是一个数字.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码 其中数字型字符串也只会比较第一位 要手动转Numberture? 执行1:2 转成布尔?1:2
让a加1取新/旧
让旧a加1变新aa++ 取旧a ++a 取加1后的新a与它运算都算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创建
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 falsefunction(参数){ } 匿名函数 可以赋值给变量 立即执行用完销毁 (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 [索引]new Date(01日1月1111年 1时:1分:1秒) 自定义格式 日期对象.getDate( ) 返回日 getMonth( ) 月 getTime( ) 时间戳 毫秒数 Date.now( )当前时间戳 当前时间戳一直在变换 可用来计时
工具类对象 自带的不用创建 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[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," ") 去空格 将前面或后面任意数量空格换为啥都没 完全符合 全局匹配
网页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取消冒泡
浏览器对象模型 通过各种对象及对象的方法 访问浏览器功能,控制浏览器行为 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显示系统对话框会导致程序终止 关闭后恢复href= 属性 assign( ) replace( ) 跳转页面 assign地址错误返回参数 replace无历史记录 reload( ) 强制刷新页面
浏览器窗口打开时开始记录 go( )在历史记录中任意跳转 back( ) 向后 forward( )向前 navigator.userAgent检查浏览器版本
window.document 是window对象的属性
对整个HTML页面 WEB页面 网页文档进行操作 改变大小 内容 增删会重新渲染 改变样式会重绘
文本节点HTML标签以外的内容 常是元素节点的子节点 因为内容一般在标签内 一般也是通过父元素节点获取
属性节点 是元素节点的一部分 一般不用 可以通过对应的元素节点获取创建 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