《js变量的语法扩展》

//只声明未定义是  undefined
var age;
console.log(age)   //undefined
//未声明，未赋值直接用报错；
//未用var声明直接使用，可以执行
age  = 10
console.log(age)   //10（不提倡，因为会变成全局变量）

《变量进行交换》

总结：赋值要记牢，右边给左边，顺序是颠倒

var  temp 
var p1 = "1"
var p2 = "2"
temp  = p1
p1  =  p2
p2 =  temp
console.log(p1,p2)

《普通数据类型》：

//数值：
infinity     无穷大
-infinity    无穷小
NaN：非数字
isNaN   是数字返回：false   不是数字就是true
console.log(isNaN(1))   //数字返回：false
console.log(isNaN('cc'))   //数字返回： true
//字符串：
打印换行："\n"
//布尔型：
false  //0
true  //1

《简单数据类型转换》

//转化为字符串：
var num = 20
var str = num.toString()
console.log(typeof str)    //string
console.log(typeof( num + ''))   //string   隐式转换
//转化为数值：
var str  =  '20'
console.log(typeof(str - 0))   //number    隐式转换
console.log(typeof(Number(str)))   //number
console.log(typeof(parseInt(str)))    //number
console.log(typeof(parseFloat(str)))   //number

《js运算符》

//加加前置，和加加后置的区别：
++前置 先加后运算
++后置 先运算后加

《三元运算表达式：》

//条件表达式 ？ 条件1 ： 条件2
var  num = 34
var  result = num >= 10 ? 'yes' : 'no'
console.log(result)

《函数的技术》

//  概念：封装了一段可以重复利用的代码块；函数不调用不执行；
//  函数的一定要有返回值：
function  getInfo(num1,num2){
    return num1 + num2
}
console.log(getInfo(4,5))   //9

《arguments的用法》

//理论：arguments存储了传递过来的实参，
//伪数组形式存储的有lenegth  有索引但是没有数组的方法；函数都有这个内置对象arguments

// 实例arguments求数组的最大值：
function getMax(){
    var maxIndex = arguments[0];
    for(var i = 1 ; i < arguments.length;i++){
       if( arguments[i] > maxIndex){
        maxIndex   = arguments[i]
       }
    }
    return maxIndex
}
console.log(getMax(1,4,5,11,56,12 ))
  

《函数调用另外一个函数》

//函数之间是可以互相调用的：
//实例，求每年的2月天使
function backDay(){
    var year = prompt('请输入年份')
    if(isRunYear(year)){
        alert("29天")
    }else{
        alert("28天")
    }
}

backDay()

function isRunYear(year){
    var flag = false
    if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
        flag = true
    }
    return flag
}

《命名函数和匿名函数》

function  getInfo(){
 //getInfo() 是名字就是命名函数
}

var  getInfo = function(){
//getInfo 是变量名所以是匿名函数
}

《作用域》

//作用域链:内部函数查找外部函数所用的方式是链式查找（就近原则）

《域解析》

//理论：域解析提升的是var 和 function
// 会执行因为函数默认提升到最前面:
fn()   //1
function  fn(){
    console.log(1)
}
// 域解析提升的是变量的声明，赋值不会被提升：
fn()    // fn is not a function
var  fn  = function(){
    console.log(1)
}

《域解析经典案例》

image.png

《对象》

//对象字面量创建方法：
var obj = {
    name:'李慷',
    info:function(){
     console.log('李慷')
    }
}

《变量，属性，函数，方法的区别》

变量和属性：都是用来·存储数据的；
属性：是存在于对象里面的使用的时候必须要属性.属性
方法：是存在于对象里面的使用的时候必须要属性.方法
函数：是单独存在的通过“函数（）”就可以调用；

《利用构造函数创建对象》

//构造函数不需要return返回
//构造函数首字母要大写
//必须使用new  this
function  GetIndo(name,age){
    this.name = name;
    this.age = age;
}

var lk = new  GetIndo('李慷',26)
console.log(lk)

《对象·的遍历》

var obj = {
    name:'李慷',
    info:function(){
     console.log('李慷')
    }
}

for (var i in obj){
    console.log(i)    //属性
    console.log(obj[i])   //属性值

《检测是不是数组》

var arr = [1,2,3,4]
var obj = {}
console.log(arr instanceof Array)
console.log(obj instanceof Array)

《数组转化为字符串》join tostring()

var arr = [1,2,3,4]
console.log(arr.toString())
console.log(arr.join('|'))

《基本包装类型》

var str = "李慷李慷"
console.log(str.length)    //为什么普通数据类型也有length属性
//就是把简单·数据类型包装成了复杂数据类型
//number string boolean  都是包装数据类型

《简单数据类型和复杂数据类型的存储》

简单数据类型:栈内存
复杂数据类型:堆内存

《原生方式获取dom元素》

document.getElementById('id')
document.getElementsByClassName('类名')
document.querySelector('')
document.querySelectorAll()

《事件的三要素》

//事件源 事件类型 事件处理函数
var but  = document.getElementById('but')
but.onclick = function(){
    alert(1)
}

《原生的使用方法》

    but.innerText = "文本"
    but.innerHTML = '<p>添加元素</p>'
    img.src = '图片路径'
//表单：
    val.value = "值变化"
    this.value = "444"
//添加元素样式：
    this.style.color = "red"
    this.className = "root"
    

《原生方式获取自定义属性》

//以data-开头的都是h5的自定义属性：
//设置自定义属性setAttribute     remove
<div id="but"  ></div>

var but = document.getElementById('but')
but.setAttribute('data-index',2)
var index = but.getAttribute('data-index')
console.log(index)     //获取自定义属性

《原生节点操作》

//获取父节点  parentNode（直接的父级节点）
var but = document.getElementById('but')
console.log(but.parentNode)
//获取子节点：
but.children       //所有的
but.children[0]   //第一个
but.children[but.children.length-1]    //最后一个

《事件的监听》

//监听器  一个元素注册多个事件
var but = document.getElementById('but')

but.addEventListener('click',fn)

function fn(){
    alert(1)
}

《删除普通事件和监听事件》

// but.onclick = null   普通事件解绑
var but = document.getElementById('but')
but.onclick = function(){
    alert(1)
    but.onclick = null
}
//事件监听解绑:
var but = document.getElementById('but')
but.addEventListener('click',fn)
function fn(){
    alert(1)
    but.removeEventListener("click",fn)
}

《事件的冒泡和捕获》

事件捕获阶段：就像往水里扔石头，下沉的过程，从最顶层向最底层的捕获过程；
事件冒泡阶段：之后会向上冒泡，这个过程相当于事件冒泡；

《事件对象》

//e  ie有兼容问题需要window.event
//e.target 返回的是触发事件的元素
//e.type 事件类型
//阻止事件默认行为 
function fn(e){
    e = e || window.event
    console.log(e)
}

《阻止默认事件》

var  ahf = document.querySelector('a')
ahf.addEventListener("click",function(e){
e.preventDefault()
})

《阻止事件冒泡》

e.stopPropagation()

《阻止，禁用右键和选中》

document.addEventListener('contextmenu',function(e){
   e.preventDefault()
})
document.addEventListener('selectstart',function(e){
    e.preventDefault()
})

《案例：鼠标的跟随》

//img 要设置绝对定位  position: absolute; top:20px;
var img = document.querySelector('img')
document.addEventListener('mousemove',function(e){
    var x = e.pageX
    var y = e.pageY
    img.style.left = x + 'px'
    img.style.top = y + 'px'
})

《案例：模仿京东按“s”键获取鼠标焦点》

  var txt =    document.querySelector('.txt')
  document.addEventListener('keyup',function(e){
     console.log(e.keyCode)
    if(e.keyCode == 83){
     txt.focus()
   }
 })

《windown对象是浏览器的顶级对象》

《windown常见的事件》

// window.onload 是图文视频 css加载完毕才执行
 window.onload = function(){
     alert(1)
 }
 window.addEventListener("load",function(){
     alert(2)
 })
//如果想要先执行这个函数：
 document.addEventListener("DOMContentLoaded",function(){
     alert(3)
 })

《定时器》

  function getinfo(){
      console.log('李慷')
  }
  setTimeout(getinfo,1000)
//清除定时器：
var time =  setTimeout(() => {
    console.log('李慷')
}, 1000);
clearTimeout(time)

《案例：实现点击发送验证法效果》：

  <input type="number" class="txt"/>
  <button class="but">发送</span>

var but = document.querySelector('.but')
 var timer = 10
 but.addEventListener('click',function(){
     but.disabled = true     //设置禁用状态
 var date =   setInterval(function(){
         if(timer == 0){
            clearInterval(date)
            but.innerHTML ='发送'
            but.disabled = false
            timer = 3
         }else{
            but.innerHTML ='倒计时'+timer+'秒'
            timer--
         }
     },1000)
 })

《this的指向》

全局下this的指向window
方法中this的指向调用者

《js执行机制》

//同步任务执行完毕，再执行异步任务（任务队列）
同步执行：
异步执行：

《页面跳转的方法》

$(".but").on("click",function(){
        window.location.href              //这个是属性，       可以点击后退返回上一个页面
        window.location.assign(url)       //这个是方法,        可以点击后退返回上一个页面
        window.location.replace(url)      // 这个也是方法      不可以点击后退返回上一个页面
    })

《history对象》

history.back()   //可以后退功能；
history.forward()   //后退功能；
history.go()    

《立即执行函数》

//不需要调用立即可以执行的；独立创建了一个作用域，避免命名冲突
//立即执行函数也可以传递参数
//多个立即执行函数分号结尾；
  (function(){
     alert(1)
    })()
//第二种写法：
   (function(a,b){
      alert(a+b)
  }(1,2))

《开发移动端使用fastclick.js》

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="static/css/base.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1422476_x7sn6hoij0f.css">
    <title>move</title>
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=mGFOjC3kNwaIyx1Xg9ri6ssl47i4R9bW"> </script>
    
    <script>
      if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
      }, false);
      }
      if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" '+'>'+'<'+'/'+'script>');
      }
    </script>
  </head>

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<script>
//获取当前的浏览器宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
//获取页面的html标签
let htmlDom = document.getElementsByTagName('html')[0]
if(htmlWidth > 750 ) {htmlWidth=750}
htmlDom.style.fontSize = htmlWidth/20 +'px'
console.log(htmlWidth)


</script>

《sessionStorage和localStorage用法》

var val = 123
sessionStorage.setItem('num',val)     //存
console.log(sessionStorage.getItem('num'))   //取
//谨慎使用：删除所有
sessionStorage.clear()

《常见登录页面记住密码：案例》

//html:
 <input type="text" id="username"/>
 <input type="checkbox" name="" id="remember"/>  记住用户
//js:
var username = document.querySelector("#username")
var remember = document.querySelector("#remember")
if (localStorage.getItem('username')){
    username.value = localStorage.getItem('username')
    remember.checked = true
}
//监听改变：
remember.addEventListener("change",function(){
 if(this.checked){
     localStorage.setItem('username',username.value)
 }else{
     localStorage.removeItem('username')
 }
})

《jquery对象和dom对象》

  //dom对象转化为jquery对象 
   var demo = document.getElementById('demo')
   $(demo).hide()

《animate动画》

   $(function(){
        $("#but").click(function(){
             $("#demo").animate({
                 left:500,
             },500)
        })

    })

《jquery的each循环绑定属性》

//html:
  <div class="demo">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
//js:
     $(function(){
      var num = 0
      var arr = ['green','red','blue','cyan'] 
      $(".demo>p").each(function(i,dom){
          $(dom).css('color',arr[i])      
          num +=parseInt($(dom).text())    //求相加之和
      })
      console.log(num)
    })

《使用“on”一个元素绑定多个不同类型事件》

//html:
     <button id="but">按钮</button>
//js:
     $("#but").on({
        mouseover: function(){
         $(this).css({'background':'red'})
        },
        click:function(){
         $(this).css({'background':'green'})
        },
        mouseout:function(){
        $(this).css({'background':'blue'})  
        }
    })

《off()方法解绑事件》

      $("#but").off()   //解绑所有事件
      $("#but").off("click")    //解绑单独事件
      $("ul").off("click","li")   //解绑事件委托

《one()事件只能点击一次》

  $("#buts").one("click",function(){
         alert(1)
     })

《自动触发事件》

  $("#but").click()      //第一种最简单的
  $("#but").trigger('click')    //第二种trigger()
  $("#but").triggerHandler("click")     //不会触发元素默认行为

《$.extend实现对象拷贝（合并）》

var obj1 = {
       id:0,
       msg:{
           sex:'女'
       }
   }
   var obj2 = {
       id:1,
       name:'李慷',
       msg:{
           sex:'男'
       }
   } 
  $.extend(true,obj1,obj2)   //会覆盖obj1原来的数据
  console.log(obj1)

《jquery多库共存解决方案》

image.png