13、jQuery第2天 事件 Ajax 无刷新分页

二、今日目标

1、能够知道jQuery是如何释放$符号的
2、能够将jQuery对象和DOM对象相互转化，以及为什么要相互转化
3、能够掌握jQuery普通事件的绑定方法
4、能够掌握jQuery高级事件的使用方法
5、能够掌握jQuery中封装的发送Ajax的get方法
6、能够掌握jQuery中封装的发送Ajax的post方法
7、能够掌握jQuery中封装的发送Ajax的ajax方法

三、杂项

1、释放$

1、什么是释放$

$表示jQuery对象，或者说它表示jQuery函数。使用jQuery必须要使用$符号。释放$，也就是在使用jQuery的时候，不用$符号。

2、为什么要释放$

为了避免冲突，所以要释放\(.
有些时候，可能项目中用到的js框架不止一个，其他框架有可能也用\).
有些时候，我们自己定义一个函数，函数名就是$. 这些情况都会和jQuery中的$产生冲突。

3、如何释放$

如何不使用$，还能用jQuery

    //释放$，方法一
       var a = jQuery.noConflict();//后面的jQuery实用a代替
        a(document).ready(function(){
            a('body').css('background-color', '#ccc');
        });

    //释放$，方法二
       jQuery(document).ready(function () {
            jQuery('body').css('background-color', '#ccffcc');
        });

    //释放$，方法三
        !function($){
            //函数内部，变量$是一个局部变量，它不会影响到外部$。使用$表示jQuery
            $(document).ready(function(){
                $('body').css('background-color', 'green');
            });
        }(jQuery)//实参 立即调用模式;

2、ready事件的简写形式

原来的形式

 //原来的形式
       $(document).ready(function(){
            alert(123);
        });

省略document的写法

        //省略document的写法
     $().ready(function(){
            alert(456);
        });  

最简形式

  //最简形式，一个$()函数调用，参数为页面加载完毕要执行的函数
        $(function(){
            alert(789);
        });

3、ready事件和onload事件的区别

区别1：执行时机不同

ready事件在页面的dom节点加载完毕就会执行，无需下载图片等资源。
onload事件在页面完全加载完毕才会执行，需要页面中所有的资源都下载完毕才会执行。

区别2：执行次数不同

使用事件监听的方式，会执行多个onload事件

 //直接用onload事件，只会执行一个 
  window.onload = function () {
            alert(123);
        };
window.onload = function () {
            alert(456);
        };//只会执行最后一个

使用事件监听的方式，会执行多个onload事件

 //使用事件监听的方式，会执行多个onload事件
       window.addEventListener('load', function () {
            alert(123);
        });
        window.addEventListener('load', function () {
            alert(456);
        });

ready事件，写几个，执行几个

        //jQuery中的ready事件，写几个能够执行几个
        $(function(){
            alert('abc');
        });

        $(function () {
            alert('bcd');
        });

4、DOM对象和jQuery对象的区别

1、什么是DOM对象？什么是jQuery对象？

DOM对象就是通过纯JS的方式，比如document.getEle…..得到的对象就是DOM对象。
jQuery对象就是通过jQuery方法 $(‘li’); 得到的对象。

2、DOM对象和jQuery对象的区别

DOM对象能够调用DOM方法，而不能调用jQuery方法；
jQuery对象能够调用jQuery方法，而不能调用DOM方法；

$(function () {
$('body').append('<input />');
$('body').appendChild('<input />'); //报错，说明jQuery对象不能调用DOM方法

var input = document.createElement('input');
document.body.appendChild(input);
input.appendTo(document.body); //报错，说明DOM对象不能调用jQuery方法。

console.log($('li').length); //这是可以的，因为jQuery中也封装自己的length

3、DOM对象和jQuery对象互换

加下标的方式，将jQuery对象转换成DOM对象

 $(function(){
            var input = document.createElement('input');
            //加下标的方式，将jQuery对象转换成DOM对象 DOM对象都是数组，需要加下标 
            $('body')[0].appendChild(input);
        });

调用get方法，将jQuery对象转换成DOM对象

       $(function(){
            var input = document.createElement('input');
            //调用get方法，将jQuery对象转换成DOM对象
            $('body').get(0).appendChild(input);
        });

用$() 函数处理dom对象，就可以得到jQuery对象

        $(function(){
            var input = document.createElement('input');
         //用$() 函数处理dom对象，就可以得到jQuery对象
            $(input).appendTo(document.body);
        });

5、each方法

人性化的遍历

语法一：

需要遍历的对象.each(function(i, val){
    //每遍历一次，执行一次该函数
    //形参i，就是每次遍历时对象的下标
    //形参val，就是每次遍历的dom对象
});

语法二：

$.each(需要遍历的对象, function(i, val){
    //每遍历一次执行一次该函数。形参i和val和上面的语法中的一样
});

each用于遍历对象或数组，可以理解为for或for…in循环，但是比for和for…in要强大。
演示each的两个用法：

 $(function(){
            var lis = $('li'); //选择的三个li
            //console.log(lis);
            lis.each(function(i, val){
                console.log(i, val);
            });
        
          });

建议使用

 $(function(){
            var lis = $('li'); //选择的三个li
            //console.log(lis);
        $.each(lis, function (i, val) {
                console.log(i, val);
            });          
          });

each和事件配合，能够得到每个li的下标。

$.each(lis, function (i, val) {

//eq形式
lis.eq(i).click(function(){
console.log(i);
 });
 
//形参val是每次遍历的dom对象，所以要转为jq对象
$(val).click(function(){
console.log(i); //单击li的时候，i表示li的下标
});
});

四、jQuery中的事件

1、普通事件

普通事件，比如有click、mouseenter、change、blur…等
语法： click([data], fn);

1、事件方法没有参数，可用于传递事件

        $(function(){
            /*$('input[type="button"]').click(function(){
                //点击button的时候，希望file被点击
                $('input[type="file"]').click();
                //昨天写的可编辑的表格中，用到input.focus(); ，仅仅是希望input获取焦点而已
            });*/


            $('input[type="button"]').click({name:'lisi', age:20}, function(evt){
                console.log(evt.data); //{name: "lisi", age: 20}
                console.log(evt.data.name); //lisi
            });
        });

<form action="">
  <input type="file" name="file" style="display: none;">
    <!-- 文件域在不同的浏览器显示样式不同 -->
    <input type="button" value="请选择文件"><!-- 所以创建一个统一样式的按钮 -->
</form>

2、给事件传入的数据，可通过事件对象的data属性获取

2、on事件

1、给未来的元素绑定事件（事件委托）

语法：

$(父级元素).on(事件类型, 子元素, 处理函数);

普通的click事件，只能给页面中已经存在的元素绑定事件

   //点击页面中的p，能够在body中再添加一个p
        $(function(){
            //普通的click事件，只能给页面中已经存在的元素绑定事件
            $('p').click(function(){
                $('body').append('<p>hello.....</p>');
            });
            //点击页面中的<p>hello.....</p>，无法在新增出<p>hello.....</p>
         });

使用on，可以给未来的元素绑定事件

   //点击页面中的p，能够在body中再添加一个p
        $(function(){
           
            //使用on，可以给未来的元素绑定事件
            //语法：$(父级元素).on(事件类型, 子元素, 处理函数);
            $(document).on('click', 'p', function () {
                $('body').append('<p>后来的</p>');
            });//点击新增的<p>后来的</p>，仍然可以新增<p>后来的</p>
        });

给未来的元素绑定事件（事件委托）常用于给Ajax返回的数据添加事件。
PS：1.7版本及之后，可使用on来完成事件委托；1.7之前的版本可以使用live或bind来完成事件委托

2、给一个元素绑定多个同类型的事件

不同on也可以完成这个功能：

$(function(){
            //给p添加一个mouseover事件和一个click事件
            $('p').mouseover(function(){
                console.log(111);
            });
            $('p').click(function () {
                console.log(222);
            });
            //链式的写法
            $('p').mouseover(function(){
                console.log(111);
            }).click(function () {
                console.log(222);
            });
            
        });

不用on，也可以为一个元素绑定多个同类型的事件：

 //给p添加两个click事件
            //正常绑定，可以
            $('p').click(function () {
                console.log(111);
            });
            $('p').click(function () {
                console.log(222);
            });

用on给一个元素绑定两个不同的事件：

           $('p').on({
                //对象的每个成员，都是一个事件
                click:function(){
                    console.log(333);
                },
                mouseover:function () {
                    console.log(444);
                }
            });

用on为一个元素绑定多个同类型的事件：

//使用on来绑定，也可以
            $(document).on('click', 'p', function () {
                console.log(111);
            });
            $(document).on('click', 'p', function () {
                console.log(222);
            });

3、off事件

用于取消元素的某个事件。
实际开发中，这个东西很有用，有些时候是需要先取消掉一个元素的所有事件，然后在绑定你要绑定的事件，可以解决一些bug。
PS：off和on一组的，都是3.0版本后存在，3.0版本之前，可以使用unbind事件来完成事件的取消工作。

4、one事件

给元素绑定的事件，只执行一次。

 $(function () {
            //语法一：
            $('p').one('click', function () {
                console.log(1234);
            });

            //语法二：
            $(document).one('click', 'p', function () {
                console.log('abcd');
            });

            //语法三：两个事件都会执行一次
            $('p').one({
                click:function () {
                    console.log('222');
                },
                mouseover:function () {
                    console.log(333);
                }
            });
        })

五、jQuery封装的Ajax

1、$.get方法

语法：

$.get(url, data, function(e){
//e就是服务器返回的数据
}, dataType);

四个参数：

url：
data：发送给服务器的数据，字符串的形式或对象的形式
fn：用于处理服务器返回的数据，形参e就是服务器返回的数据
dataType：表示服务器返回数据的类型（text/json/html/script/_default）

      $(function(){
            $('input').click(function(){
                //点击button的时候，发送Ajax请求
                //$.get(url, 发送给服务器的数据, 函数, 服务器返回数据类型);
                $.get('12get.php', {name:'zhangsan', age:20, t:Math.random()}, function (e) {
                    //形参e表示服务器返回的数据
                    $('span').text(e);
                }, 'text');
            });
        });

php 页面：
如果希望IE浏览器不缓存，也可以使用加随机数的方式解决：

2、$.post方法

$.post(url, data, function(e){
//e就是服务器返回的数据
}, dataType);

四个参数：

url：
data：发送给服务器的数据，字符串的形式或对象的形式
fn：用于处理服务器返回的数据，形参e就是服务器返回的数据
dataType：表示服务器返回数据的类型（text/json/html/script/_default）

 $(function(){
            $('input').click(function(){
                //单击button的时候，发送post请求到服务器
                $.post('13post.php', {sex:'男', height:'183cm'}, function(e){
                    //$('span').text(e);
                    console.log(e); //post方法的第4个参数为json，e就是JS的数组或对象。不用在使用JSON.parse();转换了
                }, 'json');
            });
        });

PHP代码：

//接收传递过来的数据
file_put_contents('post.txt', print_r($_POST, true));
//返回个JS一个值
echo 4556;

服务器返回JSON格式的数据

JS代码，需要修改get或post方法的第4个参数为json，修改之后，接收到的数据，jQuery会自动将其转换为JS能够识别的数组或对象。

$(function(){
            $('input').click(function(){
                //单击button的时候，发送post请求到服务器
                $.post('13post.php', {sex:'男', height:'183cm'}, function(e){
                    //$('span').text(e);
                    console.log(e); //post方法的第4个参数为json，e就是JS的数组或对象。不用在使用JSON.parse();转换了
                }, 'json');//返回json格式
            });
        });

PHP代码：

//接收传递过来的数据
file_put_contents('post.txt', print_r($_POST, true));
//返回个JS一个值
//echo 4556;
//返回JSON格式的数据
$arr = [
    ['id'=>1, 'name'=>'曹操'],
    ['id'=>2, 'name'=>'袁绍'],
    ['id'=>3, 'name'=>'刘备']
];
echo json_encode($arr);

3、$.ajax()方法

使用语法：

$.ajax({
type:'get', //或者post
url:'',
data:{}, //发送给服务器的数据
dataType:'json', //服务器返回数据的类型
success:function(e){
        //形参e仍然是服务器返回的数据
},
error:function(){
    //ajax执行出错，在这里处理
},
async:false, //表示同步请求，默认为true表示异步请求
});

   $(function(){
            $('input').click(function(){
                $.ajax({
                    type:'post',
                    url:'14ajax.php',
                    data:{name:'zhangsan', age:20},
                    dataType:'json',
                    success:function(e){
                        console.log(e);
                    }//对象
                });
            });
        });

PHP代码：

file_put_contents('ajax.txt', print_r($_POST, true));
//返回JSON格式的数据
$arr = [
    ['id'=>1, 'name'=>'曹操'],
    ['id'=>2, 'name'=>'袁绍'],
    ['id'=>3, 'name'=>'刘备']
];
echo json_encode($arr);

4、收集表单信息方法

使用方法：

$(表单).serialize();  //返回一个经过编码的字符串
$(表单).serializeArray(); //返回一个JS数组

二者收集到的数据都可以直接用于Ajax。

 $(function(){
            $('input[type="button"]').click(function(){
                //收集表单的信息
                //var d = $('form').serialize();
                //console.log(d); //返回字符串
                var d = $('form').serializeArray();//收集的表单信息赋值给d
                //console.log(d);  //返回数组
                //发现ajax请求
                $.ajax({
                    type:'post',
                    url:'15serialize.php',
                    data: d,//发送给服务器的数据
                    dataType:'text',
                    success:function(e){
                        console.log(e);
                    }
                });
            });
        });

PHP页面：

file_put_contents('serialize.txt', print_r($_POST, true));
echo 44444;

5、Ajax提示方法

ajaxStart()：在ajax开始之后，会执行
ajaxStop()：在ajax结束时执行。

ps：低版本的写法是手册上的写法，高版本的jQuery写法如下：

  $(function(){
            $('input').click(function(){
                $.get('16ajaxStartAndajaxStop.php',{}, function(e){
                    console.log(123);
                }, 'text');
            });

            //发送ajax开始，给一个提示
            $(document).ajaxStart(function(){
                $('#loading').show();
            });
            //发送结束开始，给一个提示
            $(document).ajaxStop(function(){
                $('#loading').hide();
            });
        });

<input type="button" value="发送请求">
<div id="loading" style="display: none;">玩命加载中...</div><!-- 加载中提示 -->

PHP代码：

sleep(2);

六、案例 — 无刷新的分页

1、分页原理

//查询所有数据
select * from sheng;
//假设每页显示3条数据，用变量\(pageSize表示，即\)pageSize=3;
//第一页：select * from sheng limit 0,3;
//第二页：select * from sheng limit 3,3;
//第三页：select * from sheng limit 6,3;
//当前的页码从地址栏获取，如果地址栏存在p参数，就获取它，如果不存在p参数，默认是第1页
第$p页：

select * from sheng limit ($p-1)*$pageSize, $pageSize;

2、实现分页数据查询

$pdo = new PDO('mysql:host=localhost; dbname=test; charset=utf8', 'root', '123');

//必须自己定义的变量
$pageSize = 3; //表示每页显示3条数据
$p = $_GET['p'] ?? 1; //表示当前的页码 php7以上支持

//写SQL，查询每页的数据
$sql = "select * from sheng limit " . ($p-1)*$pageSize . ',' . $pageSize;
$stmt = $pdo->prepare($sql);
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo '<pre>';
//print_r($data);

浏览器直接访问这个page.php页面，如果能够看到第1页的数据，可以手动在地址栏添加p参数，看一下是否能够获取到下一页的数据：

3、输出数据并实现页码功能

制作页码：

//上一页
if($p<=1){
    $prev = "<a href='javascript:void(0);' pp='1'>上一页</a>";
}else{
    $prev = "<a href='javascript:void(0);' pp='".($p-1)."'>上一页</a>";
}
//下一页
//判断下一页，必须知道一共有多少页，必须知道有多少条数据
$sql_count = "select count(*) from sheng";
$stmt = $pdo->prepare($sql_count);
$stmt->execute();
$count = $stmt->fetchColumn(); //总记录数
//echo $count;
$maxPage = ceil($count/$pageSize); //最大页
if($p<$maxPage){
    $next = "<a href='javascript:void(0);' pp='".($p+1)."'>下一页</a>";
}else{
    $next = "<a href='javascript:void(0);' pp='$maxPage'>下一页</a>";
}
$page = $prev . $next;

把得到的$page放到页面中即可：

4、无刷新分页，获取第一页数据

首先将原page.php中的HTML部分剪切出来，放到page.html的文件中。
page.html中，写JS，当页面加载完毕，发送ajax请求到page.php。请求第一页的数据和分页页码：
page.php中将数据data和分页page合并到一起，然后转换成json返回：
page.html中，处理服务器返回的数据：

$(function(){
            //页面加载完毕，发送ajax请求到page.php。获取第1页的数据和分页标签
            $.get('page.php', {p:1}, function(e){
                //e 就是服务器返回的数据
                //console.log(e);
                var data = e[0]; //每页数据
                var page = e[1]; //分页页码
                //处理数据
                //console.log(data);
                var str = '';
                $.each(data, function(i, val){
                    str += '<tr>';
                    str += '<td>'+val.PID+'</td>';
                    str += '<td>'+val.Pcode+'</td>';
                    str += '<td>'+val.Pname+'</td>';
                    str += '</tr>';
                });
                $('tbody').html(str);
                //处理分页页码
                //console.log(page);
                $('p').html(page);
            }, 'json');
        });

这样，访问page.html，就可以看到第一页的数据了。

5、实现无刷新的分页

要实现无刷新的分页，必须让a标签不能跳转才可以。所以将a标签的href属性值都写成javascript:void(0);
又因为，点击a标签的时候，必须知道你要请求哪一页的数据，所以在a标签上还必须体现出请求的页码。
所以修改php代码：
检测一下，刷新page.html，通过浏览器工具，就可以看到a标签的样子如下：
下一步，点击页面中的a标签，发送ajax请求就可以了：
请求完数据，处理方式和第一页相同，可以复制处理数据的代码，也可以封装成一个函数：