JQ版本

  • 1.x: 兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4
  • 2.x: 不兼容ie678,很少人使用,官方只做bug维护,功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x,最终版本:2.2.4
  • 3.x: 不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。截至2018年6月13日,最新版本:3.3.1

基础内容

  • 引用
1
2
<script src="../jquery/jquery-3.4.1.min.js"></script>
下载地址:https://jquery.com/ //官网下载
  • 基本用法
1
2
3
4
5
6
7
8
9
10
11
<script>
//等着页面Dom加载完在执行js代码两种写法
1
$(document).ready(function(){
$('div').hide();
})
2
$(function(){ //常用方式
$('div').hide();
})
</script>
  • DOM对象:用JQ方法获取到的对象

  • JQ对象:用原生JS获取到的对象

  • 两种对象的属性和方法不能通用

  • JQ对象和DOM对象的转换

    • DOM对象转换为JQ对象

      1
      2
      var div=document.getElementsByTagName("div");
      $(div);
  • JQ对象转换为DOM对象

    1
    2
    $('div').[0].方法
    $('div').get(0).方法
    1
    <video src="" muted></video> //在谷歌浏览器使用video标签时要加"muted"这个属性
  • 原生JS和JQ的区别

    • 原生JS和JQ入口的加载模式不同
      • 原生JS会等到DOM元素加载完毕并且图片加载完才会执行
      • JQ会等到DOM元素加载完毕但不会等到图片加载完毕就执行
    • 编写多个入口函数
      • 原生JS后面写的入口函数会覆盖掉前面写的函数
      • JQ会按顺序执行所有函数,不会覆盖
  • JQ的冲突问题

    • 在引用多个JS时有可能$符号的使用权被覆盖掉,解决方法:

      1. 释放$的使用权

        1
        JQuery.noConflict(); //释放之后就不能使用$符号了
      2. 自定义符号

        1
        var nj=JQuery.noConflict();

函数

1.核心函数

  • $()

    1. 接收一个函数

      1
      2
      3
      4
      5
      <div class="box1"></div>
      <div id="box2"></div>
      $(function(){

      })
    2. 接收一个字符串选择器

      1
      2
      3
      var box1=$(".box1");
      var box2=$("#box2");
      //返回一个JQ对象,对象中保存了获取的DOM元素
    3. 接收一个字符串代码片段(他会自动生成一个DOM元素)

      1
      2
      3
      var p=$("<p>123456</p>");
      box1.append(p); //在页面打印出来
      //返回一个JQ对象,对象中保存了创建的DOM元素
    4. 接收一个DOM元素

      1
      2
      var span=document.getElementsByTagName("span")[0];
      //如果用JQ方法获取原生JS对象,则会把它包装成一个JQ对象
  • JQ对象

    • JQ对象就是一个伪数组
    • 伪数组:有0到length-1的属性,并且有length属性

2.静态方法和实例方法

  1. 静态方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    1.义一个类
    function AClass(){
    2.给这个类定义一个静态方法
    //直接添加给类的就是静态方法
    AClass.staticMethod=function(){

    }
    }
    //静态方法通过类名调用
    AClass.staticMethod();
  2. 实例方法

    1
    2
    3
    4
    5
    6
    7
    AClass.prototype.instanceMethod=function(){

    }
    //实例方法通过类的实例调用
    //创建一个实例(创建一个对象)
    var a =new AClass();
    a.instanceMethod();

2.1静态方法

  • each方法

    • 遍历数组

    • 注意点

      • JS的foreach方法只能遍历数组遍历不了伪数组
      • JQ的each方法可以遍历伪数组
      1
      2
      3
      4
      5
      6
      7
      8
      9
      var arr=[1,3,5,7,9];
      var arr={0:1,1:3,2:5,3:7,4:9,length:5}; //伪数组
      arr.forEach(function(index,value){
      //第一个参数:索引值
      //第二个参数:数组值
      })
      $.each(arr,function(value,index){

      })
  • map方法

    • 遍历数组

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      用原生JS方法遍历不了伪数组
      var arr=[1,3,5,7,9];
      var arr={0:1,1:3,2:5,3:7,4:9,length:5}; //伪数组
      arr.map(function(index,value,array){
      //第一个参数:索引值
      //第二个参数:数组值
      //第三个参数:当前被遍历到的数组
      })

      JQ方法
      $.map(arr,function(value,index){

      })
  • map方法和each方法区别

    • map的默认返回值是一个空数组
    • map方法可以在回调函数中用return对遍历的数组进行处理
    • each的返回值是遍历谁就返回谁
    • each方法不支持在回调函数中使用
  • trim

    • 去除字符串的空格

      1
      2
      var str="		str		";
      var res=$.trim(str);
  • isWindow

    • 判断是否是window对象

      1
      2
      3
      4
      5
      6
      7
      var var arr=[1,3,5,7,9];   //真数组
      var arr={0:1,1:3,2:5,3:7,4:9,length:5}; //伪数组
      var name={"name":"abc","age":"1"}; //对象
      var fn=function(){} //函数
      var s=window; //window对象

      var rs=$.isWindow();
  • isArray

    • 判断是否是数组

      1
      var rs=$.isArray();
  • isFunction

    • 判断是否是函数

      1
      var rs=$.isFunction();
  • holdReady

    • 暂停ready执行

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      $.holdReady(ture); //ture 是暂停 false是恢复
      $(document).ready(function(){
      alert("ready");
      })
      <button>ready事件</button>
      <script>
      var btn=document.getElementsByTagName("button")[0];
      btn.onclick=function(){
      $.holdReady(false);
      }
      </script>

3.attr和removeAttr

  • attr

    • 获取或者设置属性节点得值
    • 注意:
      • 无论找到多少个元素,都会返回第一个元素指定的属性节点的值
      • 如果是设置,找到多少个元素就设置多少个元素,如果设置的属性节点不存在系统会自动增加
    1
    2
    3
    4
    5
    <span class="123" name="cba"></span>
    <span class="321" name="abc"></span>

    $("span").attr("class"); //获取
    $("span").attr("class","要修改的名称"); //设置
  • removeAttr

    • 会删除找到的所有元素的指定属性节点
    1
    $("span").removeAttr("class");

4.prop和removeProp

  • prop

    • 特性和功能和attr一样

      1
      2
      $("span").eq(0).prop("class");  //获取
      $("span").eq(1).prop("class",“demo); //设置
  • removeProp

    • 特性和功能和removeAttr一样

      1
      2
      $("span").eq(0).removeProp("class");  //获取
      $("span").eq(1).removeProp("class",“demo); //设置

5.prop和attr的区别

具有true和false的属性节点推荐使用prop 其它的推荐用attr

  • attr的返回值是具体的属性节点值没有的话是返回undefined

  • prop的返回值是true和false

内容选择器

  • empty

    • 筛选出相同元素中既没有子元素和内容的那些元素

      1
      2
      3
      4
      var div=$("div:empty");
      <div></div>
      <div>123</div>
      <div><p></p></div>
  • parent

    • 筛选出相同元素中既有子元素和内容的那些元素

      1
      2
      3
      4
      var div=$("div:parent");
      <div></div>
      <div>123</div>
      <div><p></p></div>
  • contains(text)

    • 筛选出相同元素中有指定文本内容的元素

      1
      2
      3
      4
      var div=$("div:contains('123')");
      <div></div>
      <div>123</div>
      <div><p></p></div>
  • has(元素)

    • 筛选出相同元素中有指定子元素的元素

      1
      2
      3
      4
      var div=$("div:has('p')");
      <div></div>
      <div>123</div>
      <div><p></p></div>
  • 隐式迭代就是把匹配到的所有元素内部进行遍历循环,给每一个元素添加一个方法

image-20191105161045718

image-20191105161509356

属性和属性节点

  • 属性:对象上保存的变量就是属性

  • 属性操作

    1
    2
    对象.属性名称=值;
    对象["属性名称"]=值;
  • 属性节点

    • 在编写HTML代码时,在HTML标签中添加的属性就是属性节点

    • 在浏览器中找到DOM元素,展开看到的都是属性,在[”0“].attributes属性中保持的所有内容都是属性节点

    • 操作属性节点

      1
      2
      3
      4
      <span></span>
      var span =document.getElementsByTagName("span")[0];
      span.setAttribute("name","123");
      span.getAttribute("name");
  • 属性和属性节点的区别

    • 任何属性都有属性,但是只有DOM属性才有属性节点

操作类的方法

  • 添加类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
    .class1{
    width:50px;
    height:50px;
    background:red;
    }
    .class2{
    border:10px solid;
    }
    </style>
    <button>添加类</button>
    <button>切换类</button>
    <button>删除类</button>
    var btns = document.getElementsByTagName("button");
    btns[0].onclick=function(){
    $('div').addClass("class1"); //添加多个类,类名要用空格隔开
    }
  • 删除类

    1
    2
    3
    btns[1].onclick=function(){
    $('div').removeClass("class1"); //添加多个类,类名要用空格隔开
    }
  • 切换类

    • 有就删除没有就添加

      1
      2
      3
      btns[1].onclick=function(){
      $('div').toggleClass("class1"); //添加多个类,类名要用空格隔开
      }

html文本值操作

  • html

    • 和原生JS的innerHTML一样

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <button>添加HTML</button>
      <button>获取HTML</button>
      <button>添加Text</button>
      <button>获取Text</button>
      <button>添加Value</button>
      <button>获取Value</button>
      <div></div>
      <input type="text">
      var btns = document.getElementsByTagName("button");
      btns[0].onclick=function(){
      $('div').html("<p>111<span>222</span></p>"); //添加HTML
      console.log($('div').html()); //获取HTML
      }
  • Text

    • 和原生JS的innerText一样

      1
      2
      3
      4
      5
      var btns = document.getElementsByTagName("button");
      btns[0].onclick=function(){
      $('div').text("111222"); //添加Text
      console.log($('div').text()); //获取Text
      }
  • Value

    1
    2
    3
    4
    5
    var btns = document.getElementsByTagName("button");
    btns[0].onclick=function(){
    $('input').val("111222"); //添加value
    console.log($('div').val()); //获取value
    }

CSS属性的操作

  • 修改和获取css
1
2
3
4
5
6
7
8
<div></div>
$(function(){
$('div').css({
width:"100px",
height:"100px" //修改
});
console.log($('div').css("width")); // 获取
})
  • 获取和修改css中的宽高

    • 不包含边框的宽度
    1
    2
    3
    4
    $(function(){ 
    $('div').width("500px"); //修改
    console.log($('div').width()); // 获取
    })
  • offset()

    • 获取元素距离窗口的偏移位

      1
      2
      3
      $(function(){
      $('div').offset().left; // 获取距离窗口左边的距离
      })
  • position()

    • 获取元素距离元素的偏移位

    • 这个方法只能获取不能修改要修改直接用修改css的那个方法就好

      1
      2
      3
      $(function(){
      $('div').position().left; // 获取距离元素左边的距离
      })
  • 获取网页滚动距离

    1
    2
    3
    4
    5
    6
    7
    $(function(){
    $('div').scrollTop(); // 获取网页元素
    //为了保证浏览器兼容 一般要这么写
    $('html,body').scrollTop();
    //设置偏移量 为了保证浏览器兼容
    $('html,body').scrollTop(偏移量)
    })

事件

事件绑定

  • 两种方式(可以添加多个事件,不会被覆盖)

    • $(‘属性’).事件名称(function(){})

      • 效率略高 但是不能实现所有事件 部分事件JQ没有添加
      1
      2
      3
      $('button').click(function(){
      alert("111");
      })
    • $(‘属性’).on(“事件名称”,function(){})

      • 效率略低,能实现所有事件
      1
      2
      3
      $('button').on("click",function(){
      alert("111");
      })

事件移除

  • off(“事件名称”)

    • 如果不传参数,则会把所有事件方法移除

      1
      $('button').off("click");

事件冒泡和默认行为

  • 事件冒泡

    • 当一个子元素和父元素同时存在事件时,触发子元素的事件父元素的事件也会被触发

    • 阻止冒泡行为

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <div class="father">
      <div class="son">
      </div>
      </div>
      <a href=""></a>
      $('.father').click(function(){
      alert("father");
      })
      $('.son').click(function(event){
      alert("son");
      return false //第一种方法
      event.stopPropagation(); //第二种方法 添加event参数
      })
  • 事件默认行为

    • 比如a标签的默认行为时跳转

    • 阻止默认行为

      1
      2
      3
      4
      5
      $('a').click(function(event){
      alert("aaa");
      return false; //第一种方法
      event.preventDefault(); //第二种方法
      })

事件自动触发

  • trigger()

    • 会触发冒泡和默认行为

      1
      $('.son').trigger("click");
  • triggerHandler()

    • 不会触发冒泡和默认行为

      1
      $('.son').triggerHandler("click");
  • 一个小面试题

    • a标签如果有trigger和triggerHandler自动触发是不会触发默认行为的如果要同时自动触发事件和默认行为需要加个span标签

      1
      2
      3
      4
      5
      <a href="">span>aaa</span></a>
      $('span').click(function(){
      alert("111");
      })
      $('span').trigger("click");

自定义事件

  • 自定义事件要满足两个条件
    • 事件必须是通过on来绑定
    • 事件必须通过trigger或triggerHandler来触发

事件命名空间

  • 想要事件命名空间有效要满足两个条件

    • 事件是通过on来绑定的

    • 事件必须通过trigger或triggerHandler来触发

    • 利用trigger触发的子元素带命名空间的事件,那么父元素带相同命名空间的事件也会触发如果没有则不会触发

    • 利用trigger触发的子元素不带命名空间的事件,那么子元素和父元素所有相同类型的事件都会被触发

      1
      2
      3
      $('button').on("click.名称",function(){
      alert("111");
      })

事件委托

  • 请别人帮忙做事,再把结果反馈给我们

    • 在JQuery中,如果找到的元素不止一个,那么在添加事件的时候会把所有找到的元素都添加事件

      1
      2
      3
      $('button').click(function(){
      $('ul').append("<li>111</li>");
      });
    • 事件委托例子

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <li>111</li>
      <li>222</li>
      <li>333</li>
      <button>新增一个</button>
      $('button').click(function(){
      $('ul').append("<li>111</li>");
      });
      1- $('ul>li').click(function(){
      console.log($(this).html()); //如果是这么写,那么在点击新建的li时则不会打印
      })
      2- $('ul').delegate("li","click",function(){
      console.log($(this).html());//如果是这么写,那么在点击新建的li时则会打印
      });
    • 小练习

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      $(function(){
      $('a').click(function(){
      var mask= $("<div class=\"mask\">\n"+
      "<div class=\"login\">\n"+
      "<img src=\"C:/Users/Administrator/Pictures/Saved Pictures/league.jpg\" alt=\"\">\n"+
      "<span></span>\n"+
      "</div>\n"+
      "</div>"); //要记住转义
      $('body').append(mask);
      $('body').delegate(".login>span","click",function(){
      mask.remove();
      })
      return false;
      });
      });

事件移入移出

  • mouseover()和mouseout()

    • 子元素被移入移出也会触发父极的事件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <div class="father">
      <div class="son">
      </div>
      </div>
      $(function(){
      $('.father').mouseover(function(){
      console.log("被移入了");
      });
      $('.father').mouseout(function(){
      console.log("被移出了");
      });
      });
  • mouseenter()和mouseleave()

    • 子元素被移入移出不会触发父极的事件(推荐使用)

      1
      2
      3
      4
      5
      6
      7
      8
      $(function(){
      $('.father').mouseenter(function(){
      console.log("被移入了");
      });
      $('.father').mouseleave(function(){
      console.log("被移出了");
      });
      });
  • hover()

    • 既可以监听移入也可以监听移出

      1
      2
      3
      4
      5
      6
      7
      $(function(){
      $('.father').hover(function(){
      console.log("被移入了");
      },function(){
      console.log("被移出了"); //如果只加一个参数就是既监听移入也监听移出
      });
      });
  • siblings()

    • 找到那些没被触发的元素

动画

  • 建议在执行动画之前都先调用stop()方法,在执行动画

  • 显示和隐藏动画

    • show()和hide()

      1
      2
      3
      4
      5
      6
      7
      8
      9
      $("button").eq(0).click(function(){
      $('div').show(1000);
      })
      $("button").eq(1).click(function(){
      $('div').hide(1000);
      })
      $("button").eq(2).click(function(){
      $('div').toggle(1000); //切换有就隐藏无则显示
      })
  • 例子

    • 图片根据网页滚动显示

      1
      2
      3
      4
      5
      6
      7
      8
      $(window).scroll(function(){        //监听网页滚动
      var offset=$("html,body").scrollTop();
      if(offset>=200){
      $('img').show(1000);
      }else{
      $('img').hide(1000);
      }
      });
  • 展开和收起

    • slideDown()和slideUp()

      1
      2
      3
      4
      5
      6
      7
      8
      9
      $("button").eq(0).click(function(){
      $('div').slideDown(1000);
      })
      $("button").eq(1).click(function(){
      $('div').slideUp(1000);
      })
      $("button").eq(2).click(function(){
      $('div').slideToggle(1000); //切换有就收起无则展开
      })
  • 淡入和淡出

    • fadeIn()和fadeOut()

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      $("button").eq(0).click(function(){
      $('div').fadeIn(1000);
      })
      $("button").eq(1).click(function(){
      $('div').fadeOut(1000);
      })
      $("button").eq(2).click(function(){
      $('div').fadeToggle(1000); //切换有就淡出无则淡入
      })
      $("button").eq(2).click(function(){
      $('div').fadeTo(1000,0.5); //淡入到
      })
    • 弹窗广告

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <div class="ad">
      <img src="">
      <span></span>
      </div>
      <script>
      $(function(){
      $("span").click(function(){
      $(".ad").remove();
      });
      $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
      });
      </script>
  • 自定义动画

    • animate()

    • 第一个参数:接收一个对象,可以在对象中修改属性

    • 第二个参数:指定动画时长

    • 第三个参数:指定动画节奏,默认是swing

    • 第四个参数:动画执行完毕后的回调函数

      1
      2
      3
      4
      5
      6
      7
      8
      9
      $("button").click(function(){
      $("div").animate({
      width:"+=100" //在原有宽度上加100
      marginLeaf:500 //使它距离左边500px
      width:"hide" //使宽度隐藏
      },1000,"linear",function(){

      });
      });
  • stop()和delay()

    • 停止和延迟

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      $("button").click(function(){
      $("div").animate({
      width:"+=100" //在原有宽度上加100
      marginLeaf:500 //使它距离左边500px
      width:"hide" //使宽度隐藏
      },1000).delay(2000).animate({
      height:200
      });
      //立即停止当前动画,继续执行后续动画
      $("div").stop();
      $("div").stop(false);
      $("div").stop(false,false);
      //立即停止当前动画和后续所有动画
      $("div").stop(true);
      $("div").stop(true,false);

      //立即完成当前的,继续执行后面的
      $("div").stop(false,true);
      //立即完成当前的,停止后面所有的
      $("div").stop(true,true);
      });

節點

添加节点

  • 内部插入

    • 将元素添加到指定元素内部的最后

      • append(content|fn)
      • appendTo(content)
    • 将元素添加到指定元素内部的最前

      • prepend(content|fn)
      • prependTo(content)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <script>
      $(function(){
      $('button').click(function(){
      var li=$("<li>新增的</li>");
      $('ul').append(li);
      li.appendTo('ul');
      //
      $('ul').prepend(li);
      li.prependTo('ul');
      });
      });
      </script>
      <ul>
      <li>11</li>
      <li>22</li>
      <li>33</li>
      </ul>
      <button>
      新增一个节点
      </button>
  • 外部插入

    • after(content|fn)和insertAfter(content)

      • 将元素添加到指定元素外部的后面
    • before(content|fn)和insertBefore(content)

      • 将指定元素添加到元素外部的前面
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <script>
      $(function(){
      $('button').click(function(){
      var li=$("<li>新增的</li>");
      $('ul').after(li);
      li.insertAfter('ul');
      //
      $('ul').before(li);
      li.insertBefore('ul');
      });
      });
      </script>
      <ul>
      <li>11</li>
      <li>22</li>
      <li>33</li>
      </ul>
      <button>
      新增一个节点
      </button>

删除节点

  • remove()和detach()

    • 删除指定元素
  • empty()

    • 删除指定元素的内容和子元素

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <script>
      $(function(){
      $('button').click(function(){
      $('ul').remove(li);
      $('li').detach("属性名");
      });
      });
      </script>
      <ul>
      <li>11</li>
      <li>22</li>
      <li>33</li>
      </ul>
      <div>
      这是div
      <p>
      一个段落
      </p>
      </div>
      <button>
      删除一个节点
      </button>

替换节点

  • replaceWith()replaceAll()

    • 替换所有匹配的元素为指定元素

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <script>
      $(function(){
      $('button').click(function(){
      var h=$("<h6>标题6</h6>");
      $('h1').replaceWith(h);
      h.replaceAll("h1");
      });
      });
      </script>
      <h1>标题1</h1>
      <h1>标题1</h1>
      <h3>标题3</h3>

复制节点

  • clone()

    • 如果传入false就是浅复制传入true就是深复制

    • 浅复制只会复制元素,不会复制元素的事件

    • 深复制会复制元素和元素的事件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <script>
      $(function(){
      $('button').eq(0).click(function(){
      var h=$("li:first").clone(false);
      $('ul').append(h);
      });
      $('button').eq(1).click(function(){
      var h=$("li:first").clone(false);
      $('ul').append(h);
      });
      });

JQ原理

JQ基本结构

  1. JQuery本质就是一个闭包
  2. 为什么要用多个闭包来实现?为了避免多个框架冲突
  3. JQuery如何让外界访问内部定义变量 ?window.xxx=xxx;
  4. 为什么要给自己传递一个window参数?
    1. 为了方便后期压缩代码
    2. 为了提升查找代码的效率
  5. JQuery为什么要给自己接收一个undefined参数?
    1. 为了后期压缩代码
    2. IE9以下的浏览器undefined可以被修改,为了保证内部使用的undefined不被修改,所以需要接收一个正确的undefined

JQ入口函数

  1. 传入 ‘ ‘,null,undefined,NaN,0,false

    会返回一个空的JQ对象给我们

  2. 传入html片段

    会将创建好的DOM元素存储到JQuery对象中返回

  3. 传入选择器

    会将找到的所有元素存储到JQuery对象中返回

  4. 传入数组和伪数组

    会将数组中存储元素存储到JQuery对象中返回

  5. 传入对象和DOM元素

    会将对象和DOM元素存储到JQuery对象中返回

  6. 传入基本数据类型

    会将传入的基本数据存储到JQuery对象中返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
(function( window, undefined ) {
var njQuery = function(selector) {
return new njQuery.prototype.init(selector);
}
njQuery.prototype = {
constructor: njQuery,
init: function (selector) {
/*
1.传入 '' null undefined NaN 0 false, 返回空的jQuery对象
2.字符串:
代码片段:会将创建好的DOM元素存储到jQuery对象中返回
选择器: 会将找到的所有元素存储到jQuery对象中返回
3.数组:
会将数组中存储的元素依次存储到jQuery对象中立返回
4.除上述类型以外的:
会将传入的数据存储到jQuery对象中返回
*/
// 0.去除字符串两端的空格
selector = njQuery.trim(selector);

// 1.传入 '' null undefined NaN 0 false, 返回空的jQuery对象
if(!selector){
return this;
}
// 2.方法处理
else if(njQuery.isFunction(selector)){
njQuery.ready(selector);
}
// 3.字符串
else if(njQuery.isString(selector)){
// 2.1判断是否是代码片段 <a>
if(njQuery.isHTML(selector)){
// 1.根据代码片段创建所有的元素
var temp = document.createElement("div");
temp.innerHTML = selector;
/*
// 2.将创建好的一级元素添加到jQuery当中
for(var i = 0; i < temp.children.length; i++){
this[i] = temp.children[i];
}
// 3.给jQuery对象添加length属性
this.length = temp.children.length;
*/
[].push.apply(this, temp.children);
// 此时此刻的this是njQuery对象
// 4.返回加工好的this(jQuery)
// return this;
}
// 2.2判断是否是选择器
else{
// 1.根据传入的选择器找到对应的元素
var res = document.querySelectorAll(selector);
// 2.将找到的元素添加到njQuery上
[].push.apply(this, res);
// 3.返回加工上的this
// return this;
}
}
// 4.数组
// else if(typeof selector === "object" &&
// "length" in selector &&
// selector !== window){
else if(njQuery.isArray(selector)){
/*
// 3.1真数组
if(({}).toString.apply(selector) === "[object Array]"){
[].push.apply(this, selector);
return this;
}
// 3.2伪数组
else {
// 将自定义的伪数组转换为真数组
var arr = [].slice.call(selector);
// 将真数组转换为伪数组
[].push.apply(this, arr);
return this;
}
*/
// 将自定义的伪数组转换为真数组
var arr = [].slice.call(selector);
// 将真数组转换为伪数组
[].push.apply(this, arr);
// return this;
}
// 5.除上述类型以外
else{
this[0] = selector;
this.length = 1;
// return this;
}
return this;
}
}
njQuery.extend = njQuery.prototype.extend = function (obj) {
for(var key in obj){
this[key] = obj[key];
}
}
njQuery.extend({
isString : function(str){
return typeof str === "string"
},
isHTML : function(str){
return str.charAt(0) == "<" &&
str.charAt(str.length - 1) == ">" &&
str.length >= 3
},
trim : function(str){
if(!njQuery.isString(str)){
return str;
}
// 判断是否支持trim方法
if(str.trim){
return str.trim();
}else{
return str.replace(/^\s+|\s+$/g, "");
}
},
isObject : function(sele){
return typeof sele === "object"
},
isWindow : function(sele){
return sele === window;
},
isArray : function(sele){
if(njQuery.isObject(sele) &&
!njQuery.isWindow(sele) &&
"length" in sele){
return true;
}
return false;
},
isFunction : function(sele){
return typeof sele === "function";
},
ready: function (fn) {
// 判断DOM是否加载完毕
if(document.readyState == "complete"){
fn();
}else if(document.addEventListener){
document.addEventListener("DOMContentLoaded", function () {
fn();
});
}else{
document.attachEvent("onreadystatechange", function () {
if(document.readyState == "complete"){
fn();
}
});
}
}
});

njQuery.prototype.init.prototype = njQuery.prototype;
window.njQuery = window.$ = njQuery;
})( window );

JQ原型上的属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
jQ原型上的核心方法和属性:
1、jquery 获取jQ版本号
2、selector 实例默认的选择器取值
3、length 实例默认的长度
3、push 给实例添加新元素
4、sort 对实例中的元素进行排序
5、splice 按照指定下标指定数量删除元素,也可以替换删除的元素
6、toArray 把实例转换为数组返回
7get 获取指定下标的元素,获取的是原生DOM(如果不传递参数相当于toArray方法)
6、eq 获取指定下标的元素,获取的是jQuery类型的实例对象
7、first 获取实例中的第一个元素,是jQuery类型的实例对象
8、last 获取实例中的最后一个元素,是jQuery类型的实例对象
9、each 遍历实例,把遍历到的数据传给回调使用
10、map 遍历实例,把遍历到的数据传给回调使用,然后把回调的返回值收集起来组成一个新的数组返回

JQ的DOM元素操作的相关方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1.empty  清空指定元素中所有的内容  (返回你调用的那个实例)
2.remove 删除所有的元素或指定元素
3.html 设置所有元素的内容,获取第一个元素的内容
4.text 设置所有元素的文本内容,获取所有元素的文本内容

5.appendTo 将元素添加到指定元素内部的最后
特点:如果指定元素有多个,会将元素拷贝多份添加到指定元素中
传递字符串的化,会根据字符串找到对应元素和再添加
传递JQ对象的话,会将元素添加到JQ对象保存的所有指定元素中
传递DOM元素的话,会将元素添加到DOM元素保存的所有DOM元素中
6.append 将元素添加到指定元素内部的最后
不同点:参数写的顺序不同
appendTo会把字符串当作选择器处理,append不会
appendTo返回一个JQ对象,append返回调用者

7.prependTo 将元素添加到指定元素内部的最前面
8.prepend 将元素添加到指定元素内部的最前面
不同点:参数写的顺序不同
appendTo会把字符串当作选择器处理,append不会
appendTo返回一个JQ对象,append返回调用者


9.insertAfter 将元素添加到指定元素外部的后面
10.after 将元素添加到指定元素外部的后面
不同点:参数写的顺序不同
不会识别选择器

11.insertBefore 将元素添加到指定元素外部的前面 (调用者是谁就会将元素插入到谁里面)
12.before 将元素添加到指定元素外部的前面
不同点:参数写的顺序不同
不会识别选择器
13.replaceAll 替换所有指定元素
14.replaceWith 替换所有指定元素
不同点:参数写的顺序不同

15.clone 复制节点(深复制true 浅复制false)

JQ属性节点操作方法

1
2
3
4
5
6
7
8
9
1.attr():设置或者获取元素的属性节点值  
(传递一个参数放回第一个元素属性节点的值,传递两个参数,代表所有元素属性节点的值,传递一个对象,代表批量设置所有元素属性节点的值)
2.prop():设置或者获取元素的属性值
3.css(): 设置获取样式
4.val(): 获取设置value的值
5.hasClass():判断有没有指定类 (包含指定参数则返回true 没有返回或没用参数返回false)
6.addClass():给所有元素添加指定类或所有类
7.removeClass():清空所有元素指定类或所有类
8.toggleClass():有则删除,没有则添加

JQ事件操作方法

1
2
3
on(type,callback):注册事件 
(注册多个相同类型的事件后注册的不会覆盖先注册的,注册多个不同类型的事件后注册的不会覆盖先注册的)
off(type,callback):移出事件 (不传参,会移除所有事件。传一个参数会移除对应类型所有事件,传两个参数会移除对应类型事件)

Ajax

php语法基础

1
2
3
4
5
6
7
8
9
10
11
1.定义变量
$变量名
2.打印变量
echo变量名 (echo不能打印数组和对象);
3.定义数组
$arr =array(1,3,5,7);
print_r($arr);
echo $arr[1];
4.定义对象(字典)
$dict=("name"=>"lzh","age"=>"21");
echo $dict["name"];

GET-POST

两者异同

GET请求对数据大小有限制

POST请求对数据大小没有限制

GET:会把提交的数据拼接在URL后面
POST:会把提交的数据放在请求头中

POST上传文件

1
2
3
enctype="multipart/form-dlingshiata"  必须要有这个属性在表单里
移动上传的文件
move_uploaded_file(临时路径,)

使用Ajax的五个步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1.创建一个异步对象
xmlhttp=new XMLHttpRequest();
//如果要同时兼容高级和低级浏览器 需要这么写,就不用上面那句了
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.设置请求方式和请求地址
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
asynctrue(异步)或 false(同步)
xmlhttp.open("GET","地址?t="+(new Date().getTime()),true);//如果想低级的IE每次都获取到最新的数据需要在传地址时也给他传一个参数
3.发送请求
xmlhttp.send();
4.监听变化
xmlhttp.onreadystatechange=function(){
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
if(xmlhttp.readyState==4){
5.处理结果
if(xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status==304){
成功
}else{
失败
}

}

}

在前端页面的书写格式
var btn=document.querySelector("button");
btn.onclick=function (){
ajax("地址",{
"参数名":参数
},function(参数){
成功处理
},function(参数){
失败处理
});
}

响应数据

1
2
responseText	获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据

JQ使用Ajax

1
2
3
4
5
6
7
8
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

示例–微博

Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪微博-jQuery基础</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="nav">
<img src="images/nav.png" alt="">
</div>

<div class="content">
<img src="images/left.png" alt="" class="left">
<div class="center">
<textarea class="comment"></textarea>
<input type="button" value="发布" class="send" disabled>
</div>
<img src="images/right.png" alt="" class="right">
<div class="messageList"></div>
</div>
<div class="page">
<!--<a href="javascript:;" class="cur">1</a>-->
<!--<a href="javascript:;">2</a>-->
<!--<a href="javascript:;">3</a>-->
</div>
</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background: url("../images/body_bg.jpg") no-repeat center 0;
}
.nav{
width: 100%;
height: 48px;
}
.nav>img{
width: 100%;
}
.content{
width: 1000px;
height: auto;
overflow: hidden;
background: #ebdbd4;
margin: 200px auto 0 auto;
}
.content>.left{
float: left;
width: 150px;
}
.content>.right{
float: right;
width: 240px;
}
.content>.center{
float: left;
width: 600px;
height: 168px;
background: url("../images/comment.png") no-repeat 0 0;
background-size: 600px 168px;
}
.center>.comment{
width: 570px;
height: 73px;
margin-top: 45px;
margin-left: 15px;
/*background: red;*/
resize: none;
border: none;
outline: none;
}
.center>.send{
width: 82px;
height: 30px;
margin-top: 4px;
margin-left: 506px;
border: none;
background: #fd8040;
color: white;
}
.content>.messageList{
width: 600px;
background: white;
float: left;
}
.messageList>.info{
padding: 10px 20px;
border-bottom: 2px solid #ccc;
}
.info>.infoText{
line-height: 25px;
margin-bottom: 10px;
}
.info>.infoOperation{
width: 100%;
overflow: hidden;
}
.infoOperation>.infoTime{
float: left;
font-size: 13px;
color: #ccc;
}
.infoOperation>.infoHandle{
float: right;
font-size: 13px;
}
.infoHandle>a{
text-decoration: none;
color: #ccc;
background: url("../images/icons.png") no-repeat 0 0;
padding-left: 25px;
margin-left: 10px;
}
.infoHandle>a:nth-child(2){
background-position: 0 -17px;
}
.infoHandle>a:nth-child(3){
background-position: 0 -33px;
}
.page{
width: 1000px;
height: 40px;
background: #9f5024;
margin: 0 auto;
text-align: right;
padding: 10px;
box-sizing: border-box;
}
.page>a{
text-decoration: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
text-align: center;
line-height: 20px;
color: #2b2b2b;
margin-right: 10px;
}
.page>a:hover{
background-color: red;
}
.page>.cur{
background-color: red;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
$(function () {
// 0.监听内容的时时输入
$("body").delegate(".comment","propertychange input", function () {
// 判断是否输入了内容
if($(this).val().length > 0){
// 让按钮可用
$(".send").prop("disabled", false);
}else{
// 让按钮不可用
$(".send").prop("disabled", true);
}
});

// var number = $.getCookie("pageNumber") || 1;
var number = window.location.hash.substring(1) || 1;
getMsgPage();
function getMsgPage(){
$(".page").html("");
// weibo.php?act=get_page_count 获取页数
$.ajax({
type:"get",
url:"weibo.php",
data:"act=get_page_count",
success: function (msg) {
// console.log(msg);
var obj = eval("("+msg+")");
for(var i = 0; i < obj.count; i++){
var $a = $("<a href=\"javascript:;\">"+(i+1)+"</a>");
if(i === (number-1)){
$a.addClass("cur");
}
$(".page").append($a);
}
},
error: function (xhr) {
alert(xhr.status);
}
});
}

// console.log(number);
getMsgList(number);
function getMsgList(number){
$(".messageList").html("");
$.ajax({
type:"get",
url:"weibo.php",
data:"act=get&page="+number,
success: function (msg) {
var obj = eval("("+msg+")");
$.each(obj, function (key, value) {
// console.log(value);
// 根据内容创建节点
var $weibo = createEle(value);
$weibo.get(0).obj = value;
// 插入微博
$(".messageList").append($weibo);
});
},
error: function (xhr) {
alert(xhr.status);
}
});
}

// 1.监听发布按钮的点击
$(".send").click(function () {
// 拿到用户输入的内容
var $text = $(".comment").val();
$.ajax({
type:"get",
url:"weibo.php",
data:"act=add&content="+$text,
success: function (msg) {
/*
{error: 0, id: 新添加内容的ID, time: 添加时间, acc: 点赞数, ref: 点踩数}
非标准的JSON字符串: {error: 0, id: 1, time: 1526541587, acc: 0, ref: 0}
标准的JSON字符串: {"error": "0", "id": "1", "time": "1526541587", "acc": "0", "ref": "0"}
VM179:1 Uncaught SyntaxError: Unexpected token e in JSON at position 1
*/
var obj = eval("("+msg+")");
obj.content = $text;
// console.log(obj);
// 根据内容创建节点
var $weibo = createEle(obj);
$weibo.get(0).obj = obj;
// 插入微博
$(".messageList").prepend($weibo);
// 清空输入框的内容
$(".comment").val("");
// 重新获取一下页码
getMsgPage();
// 删除最前面一条微博
if($(".info").length > 6){
$(".info:last-child").remove();
}
},
error: function (xhr) {
alert(xhr.status);
}
});
});
// 2.监听顶点击
$("body").delegate(".infoTop", "click", function () {
$(this).text(parseInt($(this).text()) + 1);
var obj = $(this).parents(".info").get(0).obj;
// weibo.php?act=acc&id=12 顶某一条数据
$.ajax({
type:"get",
url:"weibo.php",
data:"act=acc&id="+obj.id,
success: function (msg) {
console.log(msg);
},
error: function (xhr) {
alert(xhr.status);
}
});
});
// 3.监听踩点击
$("body").delegate(".infoDown", "click", function () {
$(this).text(parseInt($(this).text()) + 1);
var obj = $(this).parents(".info").get(0).obj;
// weibo.php?act=ref&id=12 踩某一条数据
$.ajax({
type:"get",
url:"weibo.php",
data:"act=ref&id="+obj.id,
success: function (msg) {
console.log(msg);
},
error: function (xhr) {
alert(xhr.status);
}
});
});
// 4.监听删除点击
$("body").delegate(".infoDel", "click", function () {
$(this).parents(".info").remove();
var obj = $(this).parents(".info").get(0).obj;
// weibo.php?act=del&id=12 删除一条数据
$.ajax({
type:"get",
url:"weibo.php",
data:"act=del&id="+obj.id,
success: function (msg) {
console.log(msg);
},
error: function (xhr) {
alert(xhr.status);
}
});
// 重新获取当前这一页数据
// console.log($(".cur").html());
getMsgList($(".cur").html());
});
// 5.监听页码点击
$("body").delegate(".page>a", "click", function () {
$(this).addClass("cur");
$(this).siblings().removeClass("cur");
// console.log($(this).html());
getMsgList($(this).html());
// 保存当前点击的页码
// $.addCookie("pageNumber", $(this).html());
window.location.hash = $(this).html();
});
// 创建节点方法
function createEle(obj) {
var $weibo = $("<div class=\"info\">\n" +
" <p class=\"infoText\">"+obj.content+"</p>\n" +
" <p class=\"infoOperation\">\n" +
" <span class=\"infoTime\">"+formartDate(obj.time)+"</span>\n" +
" <span class=\"infoHandle\">\n" +
" <a href=\"javascript:;\" class='infoTop'>"+obj.acc+"</a>\n" +
" <a href=\"javascript:;\" class='infoDown'>"+obj.ref+"</a>\n" +
" <a href=\"javascript:;\" class='infoDel'>删除</a>\n" +
" </span>\n" +
" </p>\n" +
" </div>");
return $weibo;
}
// 生成时间方法
function formartDate(time) {
var date = new Date(time * 1000);
// 2018-4-3 21:30:23
var arr = [date.getFullYear() + "-",
date.getMonth() + 1 + "-",
date.getDate() + " ",
date.getHours() + ":",
date.getMinutes() + ":",
date.getSeconds()];
return arr.join("");
}
});

Php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<?php
/*
**********************************************
usage:
weibo.php?act=add&content=xxx 添加一条
返回:{error: 0, id: 新添加内容的ID, time: 添加时间, acc: 点赞数, ref: 点踩数}

weibo.php?act=get_page_count 获取页数
返回:{count:页数}

weibo.php?act=get&page=1 获取一页数据
返回:[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]

weibo.php?act=acc&id=12 顶某一条数据
返回:{error:0}

weibo.php?act=ref&id=12 踩某一条数据
返回:{error:0}

weibo.php?act=del&id=12 删除一条数据
返回:{error:0}

注意: 服务器所返回的时间戳都是秒(JS是毫秒)
**********************************************
*/

error_reporting(E_ALL ^ E_DEPRECATED);
//创建数据库之类的
$db=@mysql_connect('localhost', 'root', '') or @mysql_connect('localhost', 'root', 'admin');

mysql_query("set names 'utf8'");
mysql_query('CREATE DATABASE nj_ajax');

mysql_select_db('nj_ajax');

$sql= <<< END
CREATE TABLE `nj_ajax`.`weibo` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`content` TEXT NOT NULL ,
`time` INT NOT NULL ,
`acc` INT NOT NULL ,
`ref` INT NOT NULL
) CHARACTER SET utf8 COLLATE utf8_general_ci
END;

mysql_query($sql);

//正式开始

//header('Content-type:zns/json');

$act=$_GET['act'];
$PAGE_SIZE=6;

switch($act)
{
case 'add':
$content=urldecode($_GET['content']);
$time=time();

$content=str_replace("\n", "", $content);

$sql="INSERT INTO weibo (ID, content, time, acc, ref) VALUES(0, '{$content}', {$time}, 0, 0)";

mysql_query($sql);

$res=mysql_query('SELECT LAST_INSERT_ID()');

$row=mysql_fetch_array($res);

$id=(int)$row[0];

echo "{error: 0, id: {$id}, time: {$time}, acc: 0, ref: 0}";
break;
case 'get_page_count':
$sql="SELECT COUNT(*)/{$PAGE_SIZE}+1 FROM weibo";

mysql_query($sql);

$res=mysql_query($sql);

$row=mysql_fetch_array($res);

$count=(int)$row[0];

echo "{count: {$count}}";
break;
case 'get':
$page=(int)$_GET['page'];
if($page<1)$page=1;

$s=($page-1)*$PAGE_SIZE;

$sql="SELECT ID, content, time, acc, ref FROM weibo ORDER BY time DESC LIMIT {$s}, {$PAGE_SIZE}";

$res=mysql_query($sql);

$aResult=array();
while($row=mysql_fetch_array($res))
{
$arr=array();
array_push($arr, 'id:'.$row[0]);
array_push($arr, 'content:"'.$row[1].'"');
array_push($arr, 'time:'.$row[2]);
array_push($arr, 'acc:'.$row[3]);
array_push($arr, 'ref:'.$row[4]);

array_push($aResult, implode(',', $arr));
}
if(count($aResult)>0)
{
echo '[{'.implode('},{', $aResult).'}]';
}
else
{
echo '[]';
}
break;
case 'acc':
$id=(int)$_GET['id'];

$res=mysql_query("SELECT acc FROM weibo WHERE ID={$id}");

$row=mysql_fetch_array($res);

$old=(int)$row[0]+1;

$sql="UPDATE weibo SET acc={$old} WHERE ID={$id}";

mysql_query($sql);

echo '{error:0}';
break;
case 'ref':
$id=(int)$_GET['id'];

$res=mysql_query("SELECT ref FROM weibo WHERE ID={$id}");

$row=mysql_fetch_array($res);

$old=(int)$row[0]+1;

$sql="UPDATE weibo SET ref={$old} WHERE ID={$id}";

mysql_query($sql);

echo '{error:0}';
break;
case 'del':
$id=(int)$_GET['id'];
$sql="DELETE FROM weibo WHERE ID={$id}";
//echo $sql;exit;
mysql_query($sql);
echo '{error:0}';
break;
}
?>

Cookie

1
2
3
4
5
var date = new Date();
date.setDate(date.getDate()-1);
document.cookie="age=20;expires="+date.toGMTString()+";";
document.cookie="name=111;path=/;"; //path=/是保存到根路径
domain=域名 //可以访问同个域名的cookie

cookie生命周期:默认情况下生命周期是一次会话(浏览器被关闭),如果expires=设置了过期时间,并且过期时间没有过期,那么下次打开浏览器还存在
cookie默认不会保存任何数据

cookie不能一次保存多条数据

cookie有数量和大小限制 数量:20~50 大小:4KB左右

cookie的作用范围:同一个浏览器的同一路径下访问

cookie默认情况下同一浏览器 下一级路径也可以访问