javascript课堂笔记

    技术2022-07-11  79

    js区分大小写字母数字下划线 数字开头分号必写/n换行js浮点运算不精确. 方法名 逗号调用方法双引号需在同一行,换行可以用+做字符串拼接\n 源代码换行 <a href="javascript:alert("注意冒号")>点击这里弹出js窗口</a> /耦合问题不推荐使用

    数据类型

    null 空objectundefind 衍生自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变新aa++ 取旧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

    Processed: 0.011, SQL: 9