• 【原生】---回忆---思维***链接---知识点回顾及思考


    ***

    1、什么是javascript ? 
    2、常量和变量      
    3、标识符的命名规范    驼峰式  匈牙利  
    4、类型
    基本类型  字符  数值  布尔
    引用类型 object
    特殊类型 :   undefined  null  
    5、运算符和表达式
    算术
    一元 ++  -- 
    i++ 和 ++i 区别 :
    二元 +  100+"90"   100-"90"
    赋值 =  +=
    关系   ==  ===
    条件 ?  :
    逻辑 &&  ||  !

    ---

    短路现象 : 真 || 不执行        假 && 不执行 
    类型转换 : 自动转换 isNaN("23")     强制转换    
    选择结构   
    if
    if else if
    switch

    ----

    三大结构
    顺序结构
        运算符和表达式
        五类  
    选择结构
        控制语句 :
        if else
        switch
    循环结构
        for 
        while    
        do..while 
        breakcontinue 

    ---

    1、函数  
    2、函数定义 
    function 函数名(){ .... }
    var fn = function(){...}
    3、 函数参数 
    4、返回值 

    ---

    运算符和表达式  
    算术  
    关系 :主要应用与布尔环境 (表示判断  if()   while()   )
    逻辑 : 与关系连用
    条件 : ?  :    布尔环境 
    赋值 :  =  
    
    选择结构
    if  switch()
       
    循环结构 : 
        while    
        do..while
        for
         breakcontinue
    函数:
        函数参数
        函数返回值
        作用域 :
            全局和局部   
        function fn(num){
            num = 90;
        }
        fn()
        alert( num )
    
    
        alert( fn )
        var fn = 90;
        function fn(){ ... }
        函数和事件的关系

    -----

    对象 :  
    对象类型和基本类型区别 :  
        对象中存的数据是批量的    基本类型存一个数据
        传值时 :对象传地址   基本类型传数值
        对象类型都有属性和方法  而基本类型没有属性和方法 
    构造函数 : Array  Object 
    数组 : 
    定义方式 :
        var arr = []
        var arr = new Array()
    数组遍历 : 
        for..in  
    数组的操作方法 :
        push pop  shift unshift splice   
        reverse()  
        join()  concat()      slice()
    栈和堆 :

    ---

    去重算法 : 定义一个空数组  判断原数组中的某个数在空数组中是否存在  不存在就存入到空数组中   
    排序算法 : 冒泡 和 选择  sort(function(a,b){}) 排序方法 
    严格模式 :  "use strict"
    数组的扩展方法 :      
        forEach  map   indexOf  filter reduce   some  every    
    字符串操作方法:
    查 : charAt  charCodeAt  String.fromCharCode
    拆 : split()   
    转 : toLowerCase()  upper
    替 : replace()  
    截 : substr  substring slice    
    复制 : repeat 
    连接 :concat  
    去两边空格 :trim 
    arr.forEach(function(item,index,array){ 操作内容 } )

    arr.filter(function(item,index,array){  操作内容  })
      
    arr.map(function(item,index,array){
     
    })
     
    reduce()   归并 
    
    
    arr.reduce(function(pre,next){
    
    
          pre 表示上一次操作返回的结果  如果第二个参数有数据,prev的初始值为第二个参数  
    
    
          next 表示 下一个数  next 表示数组中的每一个数据
    
    
    },第二个参数)
     

    ---

    1、数学对象  
    获取任意区间的随机整数值 
    Math.round( Math.random()*(max-min) + min );
    2、日期对象
    日期定义 :
    当前系统时间   new Date(  )
    自定义时间  new Date( "" )
    
    获取时间 :get....
    时间差 : 
     getTime()  
    时间格式的设置 :
    设置3天后的时间
    var now = new Date();
    now.setDate( now .getDate() + 3 );   setDate() 改变原来的时间
    alert( now );
    
    定时器 : 让时间动起来

    ---

    BOM对象模型:
    浏览器对象模型 
    window--location  document  history  navigator  screen
    window对象常见的方法 : 
    两个定时器 : setInterval  setTimeout 
    open()
    window对象特点 :     
    location对象 
    document对象 :
    操作样式、属性、内容
    非行内样式值获取 :getComputedStyle    .style.样式

    ---

    1、内置对象
    Array
        数组的操作方法 :
            push  pop   shift unshift   splice  slice  reverse   concat  join  sort 
            扩展方法 : forEach  map  filter   indexOf  reduce  
        数组去重
        数组排序   
    String
        操作方法 :
            charAt  charCodeAt   String.fromCharCode  
            indexOf   lastIndexOf
            substr  substring slice
            concat
            toLowerCase  toUpperCase
            split 
            
    Math :
        随机整数获取   
        取整方法 :ceil floor round
    Date
        日期定义  获取日期  设置日期时间格式
    
    BOM  和 DOM
    BOM :浏览器对象模型 window --- location  history  document  navigator screen
    window对象的特点 : setTimeout  setInterval   open()    alert confirm  prompt
    document对象 :  
    
    DOM :  文档对象模型
    DOM操作:
    增
        createElement
        appendChild   insertBefore
    删
        remove   removeChild
    改
        改样式
            obj.style.样式
            obj.className
            obj.style.cssText = "color:red";
        改属性
            非自定义属性:  obj.属性
            自定义属性  : obj.getAttribute() / setAttribute()
        改内容
            obj.innerHTML / innerText / value
    查
        获取元素方法
        getElementBy....
        querySelector...

    ---

    1、事件对象 
    2、对象的定义 : e || event
    3、兼容 
    4、鼠标事件对象属性  坐标属性
    pageX/Y 
    clientX/Y    x/y  
    offsetX/Y
    screenX/Y
    5、button
    6、获取键盘按键值  keyCode  || which
    功能键 :    
    7、事件流 : 
    冒泡
    捕获
    8、事件监听 addEventListener   onclick 区别

    ---

    1、事件委托 
    好处 : 提高程序执行效率  动态添加元素添加事件
    2、实现 : 事件源获取、判断  
    3、offset家族属性 :
       offsetWidth/height
        clientWidth / height 
        获取实际宽度 : 对象.style.width   非行内 : 
    offsetLeft/offsetTop
    4、json 
    对象.键     [键]
    for..in 遍历json
    
    5、onmouseenter 和 onmouseover  
    6、onload    

    --

    
    
    1、事件
    
    
    事件对象的创建
    
    
    事件中的兼容 :  事件   事件冒泡  取消浏览器的默认行为....
    
    
    事件冒泡和事件捕获 :
    
    
    事件的三个过程 :事件捕获  事件目标阶段  冒泡
    
    
    事件监听:
    
    
    事件委托:
    
    
    鼠标事件对象的坐标属性 :offsetX 
    
    
    2、json
    
    
    定义 {  }
    
    
    取值 json[""] json.键
    
    
    3、拖拽
    
    
    onmousedown  onmousemove   onmouseup 
    
    
    
    
    4、正则
    
    
    单字符 .      |   ^    $       组合  d    D    w  s    量词 +  ? *   括号 {}   []  ()
     

    ---

    正则中的几个操作方法:
    test()    exec()  正则的方法  可以操作正则
    
    可以操作正则的字符串方法:
    search   match  replace 
    
    es6中的常见语法格式 : 
    let  块级作用域  
    const 定以后值不可以改变
    
    改变this指向 : apply  call  bind
    
    for...of  
    
    字符串模板  ``
    
    箭头函数    不支持bind    
    
    解构赋值   
    
    set集合   自动去重  
    map集合
    
    class定义的构造函数
    
    Symbol类型   generator函数   *
    
    Array.from()    Array.of()    Object.assign()
     

    ---

    事件对象:
    鼠标事件对象的属性:
    e.offsetX offsetY
    pageX/clientX
    兼容问题 :
        事件对象创建 :  e || event
        阻止事件冒泡 
        阻止浏览器的默认行为 preventDefault
        事件源获取 : target || srcElement
        键盘按键值 : keyCode || which
    事件冒泡和事件捕获
    事件监听 addEventListener  和 不同添加事件
    addEventListener("click") 和 obj.onclick = function(){}  区别:
    事件委托
        
    json对象:定义和获取
     
    拖拽 :
       
    scroll家族属性: 获取页面滚走距离
    document.documentElement.scrollTop || document.body.scrollTop
    或者
    widnow.scrollY
    offset家族属性 :
    obj.offsetLeft/offsetTop/Width/Height
    正则:
    定义 :
    var reg = /^$/  或 var reg = new RegExp("\w",修饰符"ig");
    特殊字符 : 
    .      |    ^ $  + ....
    下面哪些是正则对象的方法 :test   exec
    可以操作正则 :  test   exec   replace seach  match
    
    es6:
       let 块级作用域 {  }   
       const 常量定义的关键字,如果变量在执行的过程中不会发生变化,也可以使用const    const btn = document.getElementById()  
       箭头函数
       解构赋值
        改变this指向的方法:
        将伪数组转数组:
    dom操作高级
        匀速--缓冲--多物体--链式--完美
        var timer = null;
        function move(obj,json,cb){
            clearInterval( obj.timer ) 
            obj.timer = setInterval( ()=>{
              var flag = true;
              for( var attr in json ){
                var current = parseInt( getStyle( obj,attr ) );
                //判断透明度
                var speed = (json[attr]- current)/10;
                speed = speed > 0 ? Math.ceil( speed ) : Math.floor(speed);
                if( json[attr]!= current ){
                       flag = false;
                } 
                
                //判断透明度
                 obj.style[attr] = current + speed + "px"
            }
            },30 )
    
            if(flag){
                clearInterval(obj.timer);
                        if( cb ){
                            cb();
    
                        }
            }
        }
    
        //获取一个元素实际样式值
        function getStyle(obj,attr){
    
        }
        

    ---

    localStorage : 
    存数据 : setItem()
    取数据 : getItem()
    删数据 : removeItem(  )
    清空 : clear()
    localStorage中只能存字符串格式的数据 
    对象转字符串 : JSON.stringify()   字符串转对象 : JSON.parse()

    ---

    1、php文件在apache服务器下运行  文件扩展名 : .php
    2、php数组 : 索引数组和关联数组 数组定义: array()   
    3、php数组转成对象 : json_encode()
    4、php输出 :  
        echo   输出多个字符串   速度快 没有返回值
        print  输出一个字符串  返回值为1
        print_r()  用于打印输出  $arr = array()  print_r($arr);
    5、php文件如何接收客户端请求的数据  
        $_GET   $_POST  $_REQUEST
    6、mysql数据库   
    数据的增删改查
    表中一般有一个主键 并且是自增的
    主键特点 : 不重复  非空 

    ---

    客户端如何向服务器发送数据:
    1、表单传值  name属性
    2、超链接 路径传值
    
    服务器如何接收客户端发送的数据:
    $_GET  $_POST $_REQUEST  

    ---

    1、ajax的作用
    2、从客户端向服务器发送数据方式
    方式一 : 表单的name传值
    方式二 : 超链接路径传值
    方式三 : 使用ajax向服务器传递数据
    方式四 :  使用jsonp向服务器发送数据
    
    3、ajax如何和服务器交互
    创建ajax对象 new XMLHttpRequest()
    和服务器建立连接 open(get/post , url , true)
    发送请求 send()
    响应结果 :  onreadystatechange   
    状态值readyState
    状态码status
    4、get和post区别
    5、同步和异步区别
    6、缓存问题
    路径上加一个随机数
    xhr.setRequestHeader("if-modified-since","0")
    7、接口

    ---

    1、ajax请求服务器的数据:
    2、同源策略
    3、jsonp跨域原理
    4、jsonp接口和ajax接口区别
    5、get和post区别:
    6、ajax处理缓存问题
    
    function ajaxGet(  url , cb  ){
        当服务器处理成功后,调用回调函数,将服务器的结果同过参数传回去
    }
    
    function ajaxGet(opt){ opt代表一个对象
        //定义一个对象  默认值  如果用户不传递某个参数  就按照默认值执行
        var default = {
            type : "get",
            async : true,
            data :{}
        }
    
        //将参数opt对象和default默认值两个对象进行合并  如果用户传递了参数,就按照用户传递的参数执行,否则就按照默认值执行
        var init = Object.assign(default , opt);
    
        //data:  {"uname":"jack","upwd":123}  url = 路径+ ? + 随机数&uname=jack&upwd=123
            //将向服务器发送的数据 转成字符串的格式
            var params = "";
        for( var key in init.data ){
            params += "&"+key + "=" + init.data[key];
        }
    
        //拼接url
        if(init.type=="get"){
            var url = init.url + "?_htb=" + new Date().getTime() + params;
        }
    
        //开始ajax请求
        var xhr = new XMLHttpRequest();
        xhr.open( init.type , url , init.async );
        xhr.send();
    
        xhr.onreadystatechange = function(){
            if( xhr.readyState == 4 && xhr.status == 200 ){
                init.success( xhr.responseText )
            }
        }
    }
    
    
    ajaxGet({
        url : "",
        data : {  }//以对象的形式传递data
        success : function(res){
            //处理服务器返回的结果
        }
    })
    7、promise对象 解决异步问题
    三个状态     对象的特点 

    ---

    ajax作用
    客户端向服务器发送数据:表单name   超链接  ajax   jsonp
    ajax如何请求服务器数据
    ajax请求接口
    promise对象
    同源策略
    跨域 :前端跨域jsonp    后端跨域cors    服务器代理

    ---

    对象的定义
    1、{}   new Object()  Object.defineProperty()
    2、工厂模式
        function Animal(){
            返回一个对象
        }
       通过函数调用 创建对象  
    3、构造函数
    function Animal(name){
        this.name = name;实例属性
        this.run = function(){} 实例方法
    }
    a=new Animal();
    缺点 : 多个同类对象携带的方法 空间不共享
    4、原型方法
    Animal.prototype.run = function(){}
    5、原型对象
    6、原型链
    7、设计模式

    ---

    继承
    1、构造函数继承   call  apply  bind
    2、原型链继承       子类.prototype = new 父类()
    3、混合继承 构造函数+原型链
    4、es6继承  extends
    5、Object.create()
    闭包
    被嵌套的函数

    ---

    1、jquery概念:是js的一个类库
    2、jquery选择器
    基本
    层级 
    过滤查找
    属性[  ]
    表单  :text   :button  :password   :checkbox:checked  :selected 被选中的下拉列表
    3、方法  
    样式操作  css()   addClass()  removeClass()  toggleClass()  hasClass()
    属性操作 attr()  prop()
    内容操作 html()  text()  val()
    文档操作 append/To   after/insertAfter  prepend/To  empty remove detach wrap replaceWidth/All

    ---

    动画:
    基本动画 : show  hide  toggle
    淡入淡出 :  fadeIn   fadeOut  fadeToggle
    上下滑动:  slideDown  slideUp 
    自定义动画 :animate 
    动画延迟 : delay 
    stop
    事件 : 
    jquery页面加载
    jquery事件绑定:bind   on   delegate
    取消绑定       unbind  off   undelegate
    事件翻转 :hover
    绑定一次 : one

    ---

    jquery选择器:
    基本 :  id  class   标签  组合
    层级选择器 :  空格   >     +    ~   
    查找过滤 :
        first  last   eq   next  nextAll    prev   prevAll  siblings   children   find  filter
    属性选择器 :[]  input[type=text]
    内容选择器 :  :contains     :has
    表单选择器 :  :text   :radio:checked
    dom操作 :
    属性 attr()  prop() 
    内容  val()    html()   text()  
    样式  css  addClass   removeClass   hasClass   toggleClass
    文档 
    动画:
    事件:
    事件绑定 :
        delegate  on
    ajax
    插件
    自定义插件
    使用第三方插件   分页插件   cookie插件  

    ---

    列表显示
    添加商品
    购物车商品展示
    商品数量增加、减少  
    商品删除
    结算
    全选
    商品详情页
    注册登录
    商品类型展示 选项卡

    ---

    git:  分布式
    svn : 集中式
    初始化一个项目仓库  git init   版本库 
    添加到暂存区   git add . / --all  /  *  /  -A  批量添加
    一次添加一个  git add 文件名
    提交到服务器 git commit -m"日志"
    查看日志信息  git  log
    回退到某个操作  git reset --hard 前六位编码
    恢复手动删除的文件  git checkout 提交码  文件名
    创建分支  git branch 分支名
    查看分支 git branch 
    合并分支 git merge 分支名
    删除分支 git branch -d 分支名
    切换分支 git checkout 分支名
    创建并切换 git checkout -b 分支名
    github上某个仓库的路径   域名/用户名/项目名.git
    本地项目推送到远端github上 : git  push -v origin master
    将远端项目克隆到本地 : git clone 仓库路径
    远端项目同步到本地 :克隆  或  git pull origin master
    
    sass : 
    定义变量  $
    sass混合 函数定义
    类的继承
    .pub{   引入类  @extend  .pub;
    
    }
    @mixin定义  调用 @include 导入
    
    sass嵌套

    ---

    什么nodejs?    是javascript的一个运行环境
    npm : npm是node的包管理工具 也是一个命令 也是一个网站
    使用npm下载模块 和 卸载模块 
    安装 模块 :   npm  i 包名 --save
    卸载模块 : npm uninstall 包名 --save
    nodejs的模块化是属于  commonjs规范
    模块种类:核心模块  第三方模块  自定义模块--模块暴露  module.exports = {  }
    使用node搭建服务器 路由操作
    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    oracle 分配表权限给用户的写法
    任务的一种写法:
    解决oracle 32位64位的问题
    设计模式学习
    Nginx 相关介绍
    (2) html 语义化
    (1)HTML5的常用新特性你必须知道
    less初学手记
    如何修改chrome记住密码后自动填充表单的黄色背景 ?
    HTML的水平居中和垂直居中解决方案
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/11350441.html
Copyright © 2020-2023  润新知