Fork me on GitHub

Web前端教程4-JQuery教程

目录

1. JQuery基础

  • jQuery是目前使用最广泛的javascript函数库
  • jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
  • JQ比JS更快，且JQ支持浏览器兼容

API网址： http://hemin.cn/jq/

1.1. 基本语法

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

<script type="text/javascript">

    $(document{
      // 在这里写JQ代码
      var $img = $("img")[0];
    });

</script>

https://code.jquery.com/ 版本下载（一般用1版本），一般使用未压缩版本

1.2. JQ和JS的差异

  • 原生JS和JQ入口函数的加载模式不同

    • JS： 等到DOM元素加载完成，并且图片加载完成后才执行
    • JQ: 一旦DOM加载完成，马上执行

  • 原生JS如果有多个入口函数，会覆盖，而JQ不会

JS

<script type="text/javascript">

  window.onload = function(){
  var oDiv = document.getElementById("div");

  alert(oDiv.innerHTML);
}
</script>

JQ(比JS要更加快)

<script type="text/javascript">

    $(document).ready(function(){
      var $div = $('#div');
      alert($div.html() + 'JQuery');
    });

    // 匿名函数写法： 推荐
    $(function(){
        var $div = $('#div');
        alert($div.html() + 'JQuery');
      });
</script>

1.3. JQ入口函数的写法

<script type="text/javascript">

    // 方法1：
    $(document).ready(function(){
      //代码
    });

    // 方法2： 匿名函数写法： 推荐
    $(function(){
      // 代码
      });
</script>

1.4. JQ核心函数

  • 核心函数： $();
    • 1.接收一个函数 $(function(){...});
    • 2.接收一个字符串
      • 2.1.接收一个字符串选择器，返回JQ对象（保存找到的DOM） var box1 = $(".box1");
      • 2.2.接收一个代码片段，返回JQ对象（保存创建的DOM） var $p = $("<p>我是帅哥</p>")(自动创建p元素)
      1. 接收一个DOM元素 var $span = $(span);(DOM元素会被包装成JQ对象)

1.5. JQ对象

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

2. JQ静态和实例方法

  • 静态方法： 类调用
  • 实例方法： 实例对象调用
<script type="text/javascript">

    function AClass(){

    }
    // 添加静态方法
    AClass.staticMethod = function(){
      alert("666");
    }
    // 调用静态方法
    AClass.staticMethod();

    // 给这个类添加实例方法
    AClass.prototype.instanceMethod = function(){
      alert("实例")；
    }

    // 调用实例方法
    var a  = new AClass();
    a.instanceMethod();
</script>

2.1. JQ静态方法： each

<script type="text/javascript">

    // 数组
    var arr = [4,6,7];
    // 伪数组
    var oj = {0:1,1:3,2:5,3:7,4:9, length:5};

    // JS：只能遍历数组，不能是伪数组
    arr.forEach(function (value, index){
      console.log(index, value); // 打印arr和index
    });

    // JQ: 可以遍历数组以及伪数组
    $.each(arr, function(index, value){
      console.log(index, value);
    });

</script>

2.2. JQ静态方法： map方法

<script type="text/javascript">
    var arr = [4,6,7];
    var oj = {0:1,1:3,2:5,3:7,4:9, length:5};

    // JS： 只能遍历数组，不能是伪数组
    arr.map(function(value, index, arr){
      console.log(index, value, array);
    })

    // JQ: 可以遍历数组以及伪数组, 默认返回空数组(但是可以return值)
    var $res = $.map(arr, function(value, index){
      console.log(index, value);
      return index + value;
    });

</script>

2.3. JQ静态方法： 其他方法

<script type="text/javascript">
    var arr = [4,6,7];
    var oj = {0:1,1:3,2:5,3:7,4:9, length:5};
    var ok = {"name":'df', age: "33"};
    var fn = function(){};
    var w = window();

    var str = "      hhhd       ";
    // 去除字符串两端空格，返回新的字符串
    var $res = $.trim(str);

    $.isWindow(w); // 判断传入的对象是否是window对象，返回T/F
    $.isArray(arr); // 判断是不是真数组
    $.isFunction(fn); // 判断是否是函数

</script>

2.4. JQ静态方法： holdReady方法

  • holdReady暂停ready方法的执行，实现顺序执行的功能
  • 只有点击按钮后才会执行ready
<script type="text/javascript">

    // 暂停ready执行
    $.holdReady(true);
    $(function(){
      alert("666");
    })

    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
          $.holdReady(false);
        }
    }

</script>

3.JQuery选择器

JQ核心思想

选择某个网页元素，然后对它进行某种操作

2.1. 基本选择器

选择器 说明
#id 按照id查元素
element 按照标签名字查
.class 按照类名
* 全部
selector1,selector2,selectorN 多个选择器组合,找到匹配任意一个类的元素。
ancestor descendant 在给定的祖先元素下匹配所有的后代元素
parent>child 在给定的父元素下匹配所有的子元素
prev + next 匹配所有紧接在 prev 元素后的 next 元素 
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$("div,span,p.myClass") // 找到任意一个
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$("form > input")  // 选择form下的input元素
$("label + input") // 匹配所有跟在 label 后面的 input 元素
$('input[name=first]') // 选择name属性等于first的input元素

2.2. 过滤选择器

选择器 说明
:first 获取第一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:last 获取最后个元素
:It(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素 
$('li:first');               // 获取匹配的li组中的第一个
$('li:last')                 // 获取匹配的最后个元素
$("input:not(:checked)")     // 查找所有未选中的 input 元素
$("tr:even")                 // 查找表格的1、3、5...行（即索引值0、2、4...）
$("tr:odd")                  // 查找表格的2、4、6行（即索引值1、3、5...）
$("tr:eq(1)")                // 查找第二行
$("tr:gt(0)")                // 从第二行开始的所有
$("tr:lt(2)")                // 选择0-3行
$(":header").css("background", "#EEE");   // 给页面内所有标题加上背景色
$("tr:hidden")               // 查找隐藏的 tr

2.3. 内容选择器

主要有一下四种：

选择器 说明
:contains(text) 找到包含指定文本内容的元素
:empty 找到既没有文本内容也没有子元素的指定元素
:has(selector) 找到包含指定子元素的元素
:parent 找到有文本内容,或者有子元素的 
<script type="text/javascript">

    // 找到既没有文本内容也没有子元素的指定元素
    var $div = ("div:empty");  // m

    // 找到有文本内容,或者有子元素的
    var $div = $("div:parent") // 1234

    // 找到包含指定文本内容的元素
    var $div = $("div:contains("我是div")"); //12

    // 找到包含指定子元素的元素
    var $div = $("div:has('span')"); //3

</script>
...
<div id="m"></div>
<div id="1">我是div</div>
<div id="2">我是div123</div>
<div id="3"><span></span></div>
<div id="4"><p></p></div>

3. JQ属性

3.1. 属性方法

  • 属性： 对象身上保持的变量或者属性

  • 如何操作属性

    • 赋值： 对象.属性名称=值
    • 获取： 对象.属性名称

  • 属性节点： 在编写HTML代码的时候，在HTML标签中添加的属性就是属性节点，可以在chorme中查找（attributes保存的）

  • 操作属性节点：

    • 赋值： 对象.setAttributes("name", "value");
    • 获取： 对象.getAttributes("name")
属性 说明
`attr(name pro
removeAttr(name) 删除属性节点
`prop(n p
removeProp(name) 删除属性节点和属性

1. JQ属性节点方法： attr和removeAttr方法

  • 如果传递一个参数，为获取属性节点值（只有第一个）
  • 如果传递两个参数，为设置属性节点值（全部设置），不存在自动新增
  • 无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
attr(name|properties|key,value|fn);
removeAttr(name);

<script type="text/javascript">

    // 获取： 只返回第一个span1
    $("span").attr("class");
    // 设置：全部都设置为box
    $("span").attr("class", "box");
    $("span").attr("abc", "box");  // 不存在自动新增
    // 删除: 全部删除属性节点
    $("span").removeAttr("class");
    $("span").removeAttr("class name");  // 同时删除多个
</script>
<span class="span1" name="ok"></span>
<span class="span2" name="no"></span>

2. JQ属性节点方法：prop方法

  • prop方法：特点和attr一模一样
  • removeprop: 特点和removeAttr一模一样
  • 注意点： prop不仅能够操作属性节点（attr只能操作属性节点），也可以操作属性节点
<script type="text/javascript">

    $('span').eq(0).prop("demo", "img");
    $('span').prop("demo");
    $('span').removeprop("demo");
</script>
<span class="span1" name="ok"></span>
<span class="span2" name="no"></span>

3.2. JQ： CSS类的操作

方法 说明
`addClass(class fn)`
`removeClass([class fn])`
`toggleClass(class fn[,sw])` 
<script type="text/javascript">

    var btn = document.getElementsByTagName("button");
    // 添加类
    btn[0].onclick = function(){
      $("div").addClass("class1"); // 添加一个
      $("div").addClass("class1 class2");  // 添加多个
    };

    // 删除类
    btn[1].onclick = function(){
        $("div").removeClass("class1");
        $("div").removeClass("class1 class2");
    };

    // 切换类
    btn[2].onclick = function(){
        $("div").removeClass("class1");
    }
</script>

<button>添加类</button>
<button>删除类</button>
<button>切换类</button>

3.3. HTML 代码/文本/值

方法 说明
`html([val fn])`
`text([val fn])`
`val([val fn 
<script type="text/javascript">

    var btn = document.getElementsByTagName("button");
    // html
    btn[0].onclick = function(){
      // 设置
      $("div").html("<p>我是段落<span>我是span</span></p>");
      // 获取
      $("div").html();
    }
    // 文本
    btn[1].onclick = function(){
      // 设置
      $("div").text("<p>我是段落<span>我是span</span></p>");
      // 获取
      $("div").text();
    }
    // value
    btn[2].onclick = function(){
      $("input").val("请输入内容");
    }

</script>

<button>设置html</button>
<button>设置text</button>
<button>设置value</button>
<div></div>
<input></input>

4. CSS

4.1.操作CSS样式

方式 说明
`css(name pro 
<script type="text/javascript">
    $(function(){
      // 设置css样式
      $("div").css({
        width: "100px",
        height: "200px"
        background: "red"
      });

      // 获取css样式
      $("div").css("width");
    })
</script>

4.2. 操作CSS位置和尺寸

方法 说明
offset([coordinates]) 获取元素距离窗口的偏移量
position() 获取元素距离定位元素的偏移量，不能设置
scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移
`height([val fn])`
`width([val fn])`
innerHeight() 理解
innerWidth() 理解
outerHeight([soptions]) 理解
outerWidth([options]) 理解 
<script type="text/javascript">
    $(function(){
      // 获取，设置宽高
      $(".wow").width();
      $(".wow").width("200px");

      // 获取，设置offset
      $(".wow").offset().left;  // 距离窗口左边的offset
      $(".wow").offset({      // 设置offset
        left: 10
      });
      // position： 只能获取，不能设置（通过css设置）
      $(".wow").position().left;  // 距离父元素的偏移量

      // scrolltop
      $(".wow").scrolltop();
      $("div.demo").scrollTop(300);
    })
</script>

5. JQ事件

5.1. 事件绑定和解绑

1. 绑定

JQ绑定事件的语法：（事件不会覆盖）

eventName(fun(){});

2. 解绑

<script type="text/javascript">

    function test1(){
      alert("666");
    }
    function test2(){
      alert("666");
    }

    // 绑定事件
    $("button").click(test1);
    $("button").click(test2);
    $("button").mouseleave(test2);

    // 解除事件,
    //  - 不传递移除所有，
    //  - 传递一个，会移除所有指定事件
    //  - 传递两个，会移除指定类型的指定事件
    $("button").off('click');
    $("button").off('click', test1);
    $("button").on("click", "p", test1);
    $("body").off("click", "p", foo);


</script>

5.2. 页面载入

方法 说明
ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

5.3. 事件处理

方法 说明
on(eve,[sel],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
off(eve,[sel],[fn]) 在选择元素上移除一个或多个事件的事件处理函数
bind(type,[data],fn) 和on一样
one(type,[data],fn) 和on类似，唯一不同的是这个只执行一次
trigger(type,[data]) 自动触发事件
triggerHandler(type, [data]) 自动触发事件，不会触发事件冒泡，也不会触发事件默认行为
`unbind(t,[d f])`
  • on,off的用法
<script type="text/javascript">
    function test1(){
      alert("666");
    }
    function test2(){
      alert("666");
    }

    // 绑定事件
    $("button").click(test1);
    $("button").click(test2);
    $("button").mouseleave(test2);

    // 解除事件,
    //  - 不传递移除所有，
    //  - 传递一个，会移除所有指定事件
    //  - 传递两个，会移除指定类型的指定事件
    $("button").off('click');
    $("button").off('click', test1);
    $("button").on("click", "p", test1);
    $("body").off("click", "p", foo);

</script>
  • trigger的用法（结合事件冒泡）
<script type="text/javascript">


    $(function(){
      $("#father").click(function(){
        alert("父亲");
      })
    });

    $(function(){
      $("#son").click(function(){
        alert("儿子");
        // 这里就可以阻止事件冒泡
        // return false;
      })
    });

    // trigger  触发儿子元素，会触发事件冒泡
    $('son').trigger("click");
    // triggerHandler：不会触发事件冒泡，即使没有阻止事件冒泡
    $('son').triggerHandler("click");
</script>

<div id="father">
  <div id="son"></div>
</div>

1. 事件冒泡和默认行为

1.1 冒泡

  • 冒泡： 当在两个嵌套盒子中同时绑定点击事件时，会同时执行这两个函数
  • 取消冒泡：
    • 只需要在子元素中return false;
    • 也可以在子元素设置event事件event.StopPropagation();
<script type="text/javascript">


    $(function(){
      $("#1").click(function(){
        alert("父亲");
      })
    });

    $(function(){
      $("#2").click(function(){
        alert("儿子");
        // 这里就可以阻止事件冒泡
        return false;
      })
    });
</script>

<div id="1">
  <div id="2"></div>
</div>

1.2. 默认行为

  • 对于链接和表单元素，我们并没有绑定点击事件，它们会默认跳转，这就是默认事件，我们可以更改这个行为
  • 阻止行为：
    • return false
    • 也可以通过event对象event.preventDefault()
<script type="text/javascript">


    $(function(){
      $("web").click(function(event){
        alert("父亲");
        event.preventDefault();
      })
    });


</script>

<a href = "www.baidu.com" id="web">这是百度</a>

2. 自定义事件

<script type="text/javascript">
    $(function(){
      // 自定义一个点击事件
      $("#son").on( 'myClick', function(){
        alert("儿子");
      })
    });
    // 触发自定义事件
    $('son').trigger("myClick");
</script>

<div id="father">
  <div id="son"></div>
</div>

5.4. 事件委派

  • 事件委托： 请别人帮忙做事情，将做完的结果反馈给我们
方法 说明
delegate(s,[t],[d],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
undelegate([s,[t],fn]) 
<script type="text/javascript">

    $(function(){
      // 将li的点击事件托付给ul
      // 新增的li，通过事件冒泡就可执行
      $("ul").delegate("li", "click", function(){
        alert(this);
      })

    })

</script>
...

<ul>
  <li>我是第一个li</li>
  <li>我是第二个li</li>
  <li>我是第三个li</li>
</ul>

5.5. 事件移入移出事件

方法 说明
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn]) 移入，子元素移入移出不会触发父元素（推荐）
mouseleave([[data],fn]) 移出，子元素移入移出不会触发父元素（推荐）
mousemove([[data],fn])
mouseout([[data],fn]) 移出，子元素移入移出也会触发父元素（不推荐）
mouseover([[data],fn]) 移入，子元素移入移出也会触发父元素（不推荐）
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
hover(fn) 同时监听移入移出

6.JQ动画效果

6.1. 基本：显示隐藏

方法 说明
show([s,[e],[fn]]) 动画形式显示
hide([s,[e],[fn]]) 动画形式隐藏
toggle() 显示了就隐藏，隐藏了就显示 
<script type="text/javascript">

      $(function(){
        $("btn").eq(0).click(function(){
          // 1秒的时候逐渐显示图片，显示完成后调用函数
          $("div").show(1000, function(){
            alert("动画执行完成");
          })
        })
      })
</script>

6.2. 滑动

  • p： params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • s： speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
  • e： easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
  • fn： 在动画完成时执行的函数，每个元素执行一次。
  • c： clearQueue:如果设置成true，则清空队列。可以立即结束动画。
  • j： jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
  • c： clearQueue:如果设置成true，则清空队列。可以立即结束动画。
  • q: queueName:队列名词，默认是Fx，动画队列。
方法 说明
slideDown([s],[e],[fn]) 动画形式展开
slideUp([s,[e],[fn]]) 动画形式收起
slideToggle([s],[e],[fn]) 动画形式切换
scroll 滚动的时候触发

6.3 淡入淡出

方法 说明
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]]) 淡入程度
fadeToggle([s,[e],[fn]]) 切换淡入淡出

6.4. 自定义

方法 说明
animate(p,[s],[e],[fn]) 用于创建自定义动画的函数。
stop([c],[j]) 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
delay(d,[q]) 延迟
finish([queue]) 和stop类似 
<script type="text/javascript">

      $(function(){
        $("btn").eq(0).click(function(){
          // 第一个参数：接收一个对象，在对象里面修改one的属性（自带动画效果）
          // 第二个参数：动画时间
          // * 第四个参数： 指定动画节奏： "linear" 和 "swing"
          // 第三个参数： 动画完成的回调函数
          $('.one').animate({
            width: 500
          }, 1000, function{
            alert("666");
          }).delay(2000).animate({
            height: 500
          }, 1000);
          // 立即停止当前的所有动画，继续执行后续的动画
          $('button').stop();
          // $('button').stop(false);一样的效果
          // $('button').stop(false,false);一样的效果
          // 立即停止当前的所有动画，后面的也不执行
          $('button').stop(true);
          // $('button').stop(true,false);一样的效果
          // 立即完成当前的动画，继续执行后续的动画
          $('button').stop(false, true);
          // 立即完成当前的动画，停止后续所有的动画
          $('button').stop(true, true);
        })
      })
</script>

7. 文档处理

7.1. 添加节点

1. 内部插入

  • cotent： 要追加到目标中的内容
  • function（index， html）返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
方法 说明
`append(content fn)`
appendTo(content) 上同
`prepend(content fn)`
prependTo(content) 上同

2. 外部插入

方法 说明
`after(content fn)`
`before(content fn)`
insertAfter(content) 上同
insertBefore(content) 上同 
<script type="text/javascript">

      $(function(){
        $("btn").eq(0).click(function(){
          // 内部插入
          // 1. 创建节点
          var $s1 = $('<li>新增的节点</li>')
          // 2. 添加节点
          $("ul").append($s1);     // 添加到尾部
          $s1.appendTo("ul");
          $("ul").preappend($s1);  // 添加到前部
          $s1.preappendTo("ul");

          // 外部插入
          $("ul").after($s1);    // 添加ul外部的尾部
          $s1.insertAfter("ul");
          $("ul").before($s1);    // 添加ul外部的尾部
          $s1.insertBefore("ul");
        })
      })
</script>

7.2. 删除节点

方法 说明
empty() 删除指定元素
remove([expr]) 删除指定元素的内容和子元素，指定元素本身不删除
detach([expr]) 和empty一模一样 
<script type="text/javascript">

      $(function(){
        $("btn").eq(0).click(function(){
          // 删除
          $("div").remove(); // 删除指定元素
          $("div").empty(); // 删除指定元素的内容和子元素，指定元素本身不删除
        })
      })
</script>

7.3. 替换节点

方法 说明
`replaceWith(content fn)`
replaceAll(selector) 类似 
<script type="text/javascript">

      $(function(){
        $("btn").eq(0).click(function(){
          // 替换
          // 1.新建元素
          var $h6 = $("<h6>我是标题6</h6>");
          // 2. 替换
          $("h1").replaceWith($h6);
          $h6.replaceAll("h1");
        })
      })
</script>

7.4. 赋值节点

节点 说明
clone([Even[,deepEven]]) 复制元素 
<script type="text/javascript">

      $(function(){
        $("btn").eq(0).click(function(){
            // 复制
            // 浅复制:  复制元素，不复制事件（点击事件）
            var $li = $("li:first").clone(false);
            $("ul").append($li);

            // 深复制: 复制元素和事件
            var $li = $("li:first").clone(true);
            $("ul").append($li);
        })
      })
</script>

8. AJAX语法

8.1. 什么是服务器

  • 用于网页和服务器交换数据的
  1. 什么是服务器？
  • 服务器也是电脑，只不过是一台永远运行的电脑，根据服务功能不同分为：
    • 文件服务器
    • 邮件服务器
    • web服务器
    • 等等

  1. 如何让电脑能够提供某种服务？

    • 如何让电脑可以聊天？ 安装聊天软件，QQ，微信...
    • 如何让电脑可以听歌？ 安装音乐软件，QQ音乐，酷狗...
    • 如何让电脑可以浏览网页？ 安装相应的浏览器网页软件，谷歌,IE...

  2. 如何让电脑提供管理网站的服务？

    • 安装Web服务软件， Apache， IIS， Tomcat, NodeJS...
    • 安装了Web服务器的电脑，我们称为“Web服务器”；

服务器软件：wampserver

8.2. wampserver软件介绍

1. 含义

W: windows操作系统
A： Apache 世界第一的服务器软件，特点是简单，速度快，性能稳定
M： MySQL 数据库
P： PHP 超文本预处理器，直接将代码嵌入HTML文档中执行，简单

2.wampserver的操作

启动的时候一定要关闭本地的mysql，只有是绿色才能用
http://127.0.0.1/ 查看wampserver

8.3. PHP基础语法:后端语法

PHP语法和JS语法类似

  • PHP文件必须放在服务器文件夹下面， 通过ip找到服务器文件夹(C:\wamp64\www)（所有后端语言都是这样）
<?php
	// 1. 注释和JS一样
	// 2. 定义变量： 和JS类似（var--> $）
	$num = 10;
	echo $num;
	echo "<br>";


	// 3. 定义数组：print_r才能打印数组
	//   3.1. 取出数组内容
	$arr = array(1,3,5);
	print_r($arr);
	echo "<br>";
	echo $arr[1];
	echo "<br>";

	// 4. 定义字典（对象）(:---> =>)
	//    4.1. 取出字典---dict["key"]
	$dict = array("name"=>"kkk", "age"=>"33");
	print_r($dict);
	echo "<br>";
	echo $dict["name"];
	echo "<br>";

	// 5. 循环判断
	//  if/switch/三目/for/while
	if($num>=18){
		echo "成年人";
	} else {
		echo "未成年";
	};
	echo "<br>";
	//  三目
	$res = ($num >=18)? "成年人" : "未成年";
	echo $res;
	echo "<br>";
	// switch
	$age = 20;
	switch($age){
		case 0:
			echo "0";
			break;
		case 1:
			echo "1";
			break;
		default:
			echo "******";
			break;
	};
	//for
	echo "<br>";
	for($i=0;$i<count($arr); $i++){
		echo $arr[$i];
		echo "<br>";
	};
	// while
	$index=0;
	while($index<count($arr)){
		echo $arr[$index];
		echo "<br>";
		$index++;
	}
?>

8.3.1 Get请求

  1. 表单的数据会显示在提交的网址上, 例如：http://www.baidu.com/?userName=kkk&userPW=123
  • 首先在文件夹下创建html文件，表单
<form action="test.php" method="get">
    <input type="text" name="userName"><br>
    <input type="password" name="userPW"><br>
    <input type="submit" value="提交"><br>
</form>

<?php
	print_r($_GET);  // Array ( [userName] => sfdads [userPW] => 123 )
  echo $_GET["userName"];
?>

8.3.2 Post请求

  • url不会显示任何数据， 数据被放在请求头中
  • 首先在文件夹下创建html文件，表单
<form action="test.php" method="post">
    <input type="text" name="userName"><br>
    <input type="password" name="userPW"><br>
    <input type="submit" value="提交"><br>
</form>
  • 服务器通过php的$_POST获取提交的数据
<?php
	print_r($_POST);  // Array ( [userName] => sfdads [userPW] => 123 )
  echo $_POST["userName"];
?>

8.3.3. GET和POST的差异

方法 相同点 不同点 应用场景
GET 发送数据给服务器 将数据放在URL之后，对数据大小有限制 非敏感的小数据
POST 发送数据给服务器 将数据放在请求头中，对数据大小无限制 敏感，大数据

8.3.4 POST文件上传

1. 基本文件上传

  • 创建上传表单（enctype="multipart/form-data"必须加）
<form action="test.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upFile"><br>
    <input type="submit" value="提交"><br>
</form>
  • 创建上传脚本

<?php
	print_r($_FILES);
	echo "<br>";
	// 1. 获取上传文件对应的字段
	// Array ( [upFile] => Array ( [name] => 9.PNG [type] => image/png
  // [tmp_name] => C:\wamp64\tmp\php8B71.tmp [error] => 0 [size] => 630718 ))
	$fileInfo = $_FILES["upFile"];
	// 2. 获取上传文件的名称
	$fileName = $fileInfo["name"];
	// 3. 获取上传文件的临时文件路径
	$filePath = $fileInfo["tmp_name"];

	// 4. 移动文件到新的路径
	move_uploaded_file($filePath, "./data/".$fileName);

?>

第一个参数是表单的 input name，第二个下标可以是 "name", "type", "size", "tmp_name" 或 "error"。就像这样：

  • $_FILES["file"]["name"] : 被上传文件的名称
  • $_FILES["file"]["type"] : 被上传文件的类型
  • $_FILES["file"]["size"] : 被上传文件的大小，以字节计
  • $_FILES["file"]["tmp_name"] : 存储在服务器的文件的临时副本的名称
  • $_FILES["file"]["error"] : 由文件上传导致的错误代码

2. 大文件上传

  • 默认情况下，上传文件的大小是有限制的，我们可以修改php.ini文件的如下内容
file_uploads = On                   是否允许上传文件，默认on
upload_max_filesize = 2048M         上传的最大限制
post_max_size = 2048M               通过POST请求的最大数据

max_execution_time = 30000          脚本最长的执行时间，单位是秒
max_input_time = 30000              接收提交的数据的时间限制
memory_limit = 2048M                最大的内存消耗

8.4. AJAX-GET

8.4.1. 什么是AJAX

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

  • 用途： 用于动态页面和加载数据

8.4.2. 使用AJAX的五大步骤以及其封装

  • AJAX和IE浏览器兼容问题---------section 1

  • AJAX在IE浏览器中的缓存问题-----section 2

  • 在一个单独的JS文件中封装5个功能

  • 创建一个名为myAjax.js

function obj2str(data) {
    /*
    {
        "userName":"lnj",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    data.t = new Date().getTime();
    var res = [];
    for(var key in data){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}

function ajax(option) {
    // 0.将对象转换为字符串
    var str = obj2str(option.data); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    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：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    if(option.type.toLowerCase() === "get"){
        xmlhttp.open(option.type, option.url+"?"+str, true);
        // 3.发送请求
        xmlhttp.send();
    }else{
        xmlhttp.open(option.type, option.url,true);
        // 注意点: 以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                option.success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                option.error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(option.timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

9. JQuery和自定义的AJAX封装的对比

<script src="jquery-1.12.4.js"></script>
<script src="myAjax.js"></script>
<script type="text/javascript">

    window.onload = function(){
        var btn = document.getElementById("btn");
        // 方法1： JQuery自带的ajax
        btn.onclick = function (ev1) {
           $.ajax({
               type: "GET",
               url: "test.php",
               data: "userName=kk&userPW=12345",
               success: function (msg) {
                   alert("Data saved " + msg);
               },
               error: function (xhr) {
                   alert(xhr.status);
               }
           })
        };

        // 方法2： 自己写的myajax
        ajax({
               url: "test.php",
               data: {
                 "userName": "kko",
                 "userPW": "12345"
               },
               type: "GET",
               timeout: 3000,
               success: function (msg) {
                   alert("Data saved " + msg);
               },
               error: function (xhr) {
                   alert(xhr.status);
               }
           });
    }

</script>

10. Ajax-XML

10.1. 什么是XML

  • XML 指可扩展标记语言,类似HTML， XML 被设计用来传输和存储数据。
  • 用于前端和后端交换数据
  • XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。
  • 所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器。解析器把 XML 转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

XML中的内容必须放在根标签中，标签自定义，XML没有预定义的标签

10.2. XML的用途

  • ML 把数据从 HTML 分离

如果你需要在 HTML 文档中显示动态数据，那么每当数据改变时将花费大量的时间来编辑 HTML。

通过 XML，数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示，并确保修改底层数据不再需要对 HTML 进行任何的改变。

  • XML 简化数据共享

XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。

  • XML 使您的数据更有用

不同的应用程序都能够访问您的数据，不仅仅在 HTML 页中，也可以从 XML 数据源中进行访问。

  • XML 用于创建新的 Internet 语言

很多新的 Internet 语言是通过 XML 创建的：（XHTML, WSDL, WAP, RSS, RDF, SMIL）

10.3. XML结构

  • 首行声明xml版本号和编码格式
  • 所有标签自定义，每个标签必须闭合， 标签大小写敏感，必须有父元素，设置属性的值必须加引号
  • xml中空格会被保留
  • xml中的属性用于提供额外信息 <person sex="female"></person>
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- This is a comment -->
<note date="08/08/2008">
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

10.4. XML在ajax中的使用

  • 前端代码：发送请求
<script src="jquery-1.12.4.js"></script>
<script src="myAjax.js"></script>
<script type="text/javascript">

    window.onload = function(){
        var btn = document.getElementById("btn");

        btn.onclick = function (ev1) {
        ajax({
               type: "GET",
               url: "test.php",
               data: {
                 "userName": "kko",
                 "userPW": "12345"
               },
               timeout: 3000,
               success: function (xhr) {
                   console.log(xhr.responseXML);
                   // 这里返回document
                   var res = xhr.responseXML;
                   // 获取xml数据和js获取数据一样的
                   console.log(res.getElementsByTagName("to")[0].innerHTML);
               },
               error: function (xhr) {
                   alert(xhr.status);
               }
           });
    }
}

</script>
  • 后端代码：返回前端
<?php
  // 执行结果中有中文可能有乱码，必须设置
  header("content-type:text/xml; charset=utf-8");
  // 获取xml文件，返回给浏览器
  echo file_get_contents("info.xml");
?>
  • xml数据文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- This is a comment -->
<note date="08/08/2008">
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

10.5. XML DOM

  • XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法
  • DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点。
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

11. JSON

  • JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析

  • JSON文件info.txt

{
  "name": "okok",
  "age": "33"
}
  • PHP文件testing.php
<?php
  echo file_get_contents("info.txt");
?>
  • HTML文件

```html
<script src="jquery-1.12.4.js"></script>
<script src="myAjax.js"></script>
<script type="text/javascript">

    window.onload = function(){
        var btn = document.getElementById("btn");

        btn.onclick = function (ev1) {
        ajax({
               type: "GET",
               url: "test.php",
               data: {
                 "userName": "kko",
                 "userPW": "12345"
               },
               timeout: 3000,
               success: function (xhr) {
                   // 查看json数据
                   var str = xhr.responseText;
                   var obj = JSON.parse(str);  // 将json转化为JS对象
                   console.log(obj);  //{"name": "okok", "age": "33"}
                   var sname = obj.name;
                   var sage = obj.age;
               },
               error: function (xhr) {
                   alert(xhr.status);
               }
           });
    }
}

</script>
posted @ 2019-04-28 09:21  Bricker666  阅读(339)  评论(0)  编辑  收藏  举报