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

JavaScript评论20字数 10329阅读34分25秒

二、今日目标

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中的$产生冲突。文章源自国强极客生活-https://tagqwl.com/4029.html

3、如何释放$

如何不使用$,还能用jQuery文章源自国强极客生活-https://tagqwl.com/4029.html

    //释放$,方法一
       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'); 得到的对象。文章源自国强极客生活-https://tagqwl.com/4029.html

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

DOM对象能够调用DOM方法,而不能调用jQuery方法;
jQuery对象能够调用jQuery方法,而不能调用DOM方法;文章源自国强极客生活-https://tagqwl.com/4029.html

$(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方法

人性化的遍历文章源自国强极客生活-https://tagqwl.com/4029.html

语法一:

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

语法二:

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

each用于遍历对象或数组,可以理解为for或for…in循环,但是比for和for…in要强大。
演示each的两个用法:文章源自国强极客生活-https://tagqwl.com/4029.html

 $(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);文章源自国强极客生活-https://tagqwl.com/4029.html

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、给未来的元素绑定事件(事件委托)

语法:文章源自国强极客生活-https://tagqwl.com/4029.html

$(父级元素).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来完成事件委托文章源自国强极客生活-https://tagqwl.com/4029.html

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事件来完成事件的取消工作。文章源自国强极客生活-https://tagqwl.com/4029.html

4、one事件

给元素绑定的事件,只执行一次。文章源自国强极客生活-https://tagqwl.com/4029.html

 $(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方法

语法:文章源自国强极客生活-https://tagqwl.com/4029.html

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

四个参数:文章源自国强极客生活-https://tagqwl.com/4029.html

url:
data:发送给服务器的数据,字符串的形式或对象的形式
fn:用于处理服务器返回的数据,形参e就是服务器返回的数据
dataType:表示服务器返回数据的类型(text/json/html/script/_default)文章源自国强极客生活-https://tagqwl.com/4029.html

      $(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浏览器不缓存,也可以使用加随机数的方式解决:文章源自国强极客生活-https://tagqwl.com/4029.html

2、$.post方法

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

四个参数:文章源自国强极客生活-https://tagqwl.com/4029.html

url:
data:发送给服务器的数据,字符串的形式或对象的形式
fn:用于处理服务器返回的数据,形参e就是服务器返回的数据
dataType:表示服务器返回数据的类型(text/json/html/script/_default)文章源自国强极客生活-https://tagqwl.com/4029.html

 $(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代码:文章源自国强极客生活-https://tagqwl.com/4029.html

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

服务器返回JSON格式的数据

JS代码,需要修改get或post方法的第4个参数为json,修改之后,接收到的数据,jQuery会自动将其转换为JS能够识别的数组或对象。文章源自国强极客生活-https://tagqwl.com/4029.html

$(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代码:文章源自国强极客生活-https://tagqwl.com/4029.html

//接收传递过来的数据
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请求就可以了:
请求完数据,处理方式和第一页相同,可以复制处理数据的代码,也可以封装成一个函数:

weinxin
我的微信
添加我的微信,有任何问题请与我直接联系(备注:国强极客生活)
  • 全部本人精心整理制作,希望大家多多支持。
  • 转载请务必保留本文链接:https://tagqwl.com/4029.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: