第三天:jQuery进阶

一.JQ对象与DOM对象区别

document.getElementById('test');:DOM对象
$("#test"):JQ对象
JQ对象包含DOM对象,

JQ对象想要使用原生JS里的方法,可以用取键方式现将其转变为DOM对象。
DOM对象想使用JQ对象方法,直接在外面加$()就行了。

二.遍历jQuery对象

each(callback)以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <h1>遍历jQuery对象内部的DOM对象</h1>
    <input type="button" value="反选" onclick="fan()">
    <p>选择1:<input type="checkbox"></p>
    <p>选择2:<input type="checkbox"></p>
    <p>选择3:<input type="checkbox"></p>
    <p>选择4:<input type="checkbox"></p>
    <p>选择5:<input type="checkbox"></p>
</body>
</html>

jQuery代码:

面向过程

<script type="text/javascript">
    function fan(){
        var inp = $("input:checkbox");
        for(var i=0;i<inp.length;i++){
            if($(inp[i]).prop("checked") == true){
                $(inp[i]).prop("checked",false);
            }else{
                $(inp[i]).prop("checked",true);
            }
        }
    }
</script>

面向对象(用each方法):

<script type="text/javascript">
    function fan(){
        var inp = $("input:checkbox");
        inp.each(function(){
            if($(this).prop("checked") == true){
                $(this).prop("checked",false);
            }else{
                $(this).prop("checked",true);
            }
        })
    }
</script>

简单方法:

<script type="text/javascript">
    function fan(){
        $("input:checkbox").each(function(){
            this.checked = !this.checked;
        })
    }
</script>

效果:

image.png

点击反选执行反选操作:

image.png

三.获取元素值

val([val|fn|arr])获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

:focus匹配当前获取焦点的元素。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <p><input type="text" name="inp1" value="请输入用户名"></p>
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("input[name='inp1']").mouseover(function(){
        if($(this).val() == '请输入用户名'){
            $(this).val('');
            $(this).focus();
        }       
    })
</script>

效果:

image.png

当鼠标移上去,输入框变空,焦点聚集:

image.png

四.ready事件

ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <img src="static/images/3.png">
</body>
</html>

jQuery代码:

<script type="text/javascript">
    onload = function(){
        alert('页面加载完毕');
    }
    $(document).ready(function(){
        alert('dom加载完毕');
    })
</script>

效果:

image.png

五.绑定事件

on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素,要删除的.on()绑定的事件,用.off()。
off(events,[selector],[fn])在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <input type="button" value="给div加点击事件" onclick="jia();">
    <input type="button" value="给div取消点击事件" onclick="jie();">
    <div style="width: 200px;height: 200px;background: gray;">
</body>
</html>

jQuery代码:

<script type="text/javascript">
    function dong(){
        alert('冬天');
    }
    function jia(){
        $("div").on('click',function(){
            alert('你好');
        });
        $("div").on('click',dong);
    }
    function jie(){
        $("div").off('click');
    }
</script>

效果:

点击给div加点击事件按钮,再点击灰色方块,alert出你好冬天

image.png

点击给div取消点击事件按钮,再点击灰色方块,无反应

image.png

六.一次向绑定

one(type,[data],fn)为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <input type="button" value="有些话想对你说">
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("input:button").one('click',function(){
        alert('今晚操场见!')
    })
</script>

效果:

点击有些话想对你所按钮

image.png

alert出今晚操场见

image.png

再次点击有些话想对你所按钮无反应

image.png

七.事件委托

on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数。
text([val|fn])取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <input type="button" value="添加li">
    <ul>
        <li>春</li>
        <li>夏</li>
        <li>秋</li>
    </ul>
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("input:button").click(function(){
        $("ul").append("<li>冬</li>")
    })
    $("ul").on('click','li',function(){
        alert($(this).text());
    });
</script>

效果:

点击li春,夏,秋分别alert出春,夏,秋

image.png

点击添加li增加一个li冬

image.png

点击li冬alert出冬

image.png

八.事件对象

event.which针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
keyup([[data],fn])当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
keydown([[data],fn])当键盘或按钮被按下时，发生 keydown 事件。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <input type="text">
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("input:text").keyup(function(ev){
        var test = ev.type + ':' + ev.which;
        console.log(test);
    });
</script>

效果:

在输入框输入abcdef后打印出其对应ASCII码值

image.png

九.动画

fadeOut([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeIn([speed],[easing],[fn])通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
slideUp([speed,[easing],[fn]])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideDown([speed],[easing],[fn])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。
jQuery.fx.off关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如:
1.你在配置比较低的电脑上使用jQuery。
2.你的一些用户由于动画效果而遇到了可访问性问题。
当把这个属性设成false之后，可以重新开启所有动画。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<style class="scr" media="screen">
    div{
        width: 1024px;
        height: 768px;
        background: gray;
    }
</style>
<body>
    <div class="scr">
        <img src="/static/images/4.png">
    </div>
</body>
</html>

jQuery代码`:

<script type="text/javascript">
    //jQuery.fx.off = true; //取消所有动画效果
    $("div").click(function(){
        $(this)
        .fadeOut(2000,function(){
            alert('div消失了!');
        })
        .delay(2000)
        .fadeIn(2000,function(){
            alert('div出现了!');
        })
        .delay(2000)
        .slideUp(2000,function(){
            alert('div向上滑!');
        })
        .delay(2000)
        .slideDown(2000,function(){
            alert('div向下滑!');
        });
    });
</script>

效果:点击出现动画效果

image.png

十.jQuery使用Ajax

(一)Ajax请求

jQuery.ajax(url,[settings])通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。$.ajax() 返回其创建的 XMLHttpRequest 对象。最简单的情况下，$.ajax()可以不带任何参数直接使用。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

数据类型

$.ajax()函数依赖服务器提供的信息来处理返回的数据。

如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果得到其他类型，比如HTML，则数据就以文本形式来对待。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

参数

url: [类型: String]一个用来包含发送请求的URL字符串。
settings: [类型: PlainObject]AJAX 请求设置。所有选项都是可选的。

settings:选项

url(默认: 当前页地址) [类型: String]
发送请求的地址。
type(默认: "GET") [类型: String]
请求方式 ("POST" 或 "GET")，默认为 "GET"。
data [类型: String,Array]
发送到服务器的数据。将自动转换为请求字符串格式。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
dataType[类型: String]
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

xml: 返回 XML 文档，可用 jQuery 处理。
html: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
script: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
json: 返回 JSON 数据。
jsonp: JSONP 格式。
text: 返回纯文本字符串

statusCode(默认: {}) [类型: Map]
一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警告：

$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

context [类型: Object]
这个对象用于设置Ajax相关回调函数的上下文。
也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。
比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：

$.ajax({ 
    url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
    }
});

success(data, textStatus, jqXHR) [类型: Function(Object data, String textStatus, jqXHR jqXHR)]
请求成功后的回调函数。
参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR对象。
在jQuery 1.5，成功设置可以接受一个函数数组。每个函数将被依次调用。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

error(默认: 自动判断 xml 或 html) [类型: Function(jqXHR jqXHR, String textStatus,String errorThrown )]
请求失败时调用此函数。有以下三个参数：
XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout, error, notmodified 和 parsererror。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

timeout [类型: Number]
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async (默认: true) [类型: Boolean]
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR) [类型: Function( jqXHR jqXHR,PlainObject settings )]
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
complete(XHR, TS) [类型: Function(jqXHR jqXHR, String textStatus)]
请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。

PHP代码:

<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch('1');
    }
    public function pos()
    {   
        if(request()->isPost())
        {
            $data=input('post.');
        }
        echo json_encode($data);
    }
}

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <form action="" method="post">
        <p>Name:<input type="text" name="username"></p>
        <p>Email:<input type="text" name="email"></p>
        <p><input type="submit" name="submit"></p>
    </form>
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("form").submit(function(){
        var data = {
            'username':$("input[name='username']").val(),
            'email':$("input[name='email']").val(),
        };
        $.ajax({
            url:'{:url("index/pos")}',
            type:'POST',
            data:data,
            dataType:'json',
            success:function(res){
                alert(
                    'username:' + res['username']+
                    '\nemail:' + res['email']
                );
            },
        });
        return false;
    });
</script>

效果:

点击提交alert出username,email键值

image.png

(二)Ajax之GET请求

jQuery.get(url, [data], [callback], [type])通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

PHP代码:

<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch('1');
    }
    public function se()
    {   
        if(request()->isGet())
        {
            $data=input('username');
        }
        $arr =[
            'lisi','zhaoliu','zhaosi'
        ];
        echo in_array($data,$arr)?1:0;
    }
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <div class="scr">
        <p><input type="text" name="username"><span id="sp"></span></p>
    </div>
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("input").blur(function(){
        var url = '{:url("index/se")}?username=' + $(this).val();
        $.get(url,function(res){
            if(res == 1){
                $("#sp").html('<font color="red">用户名已存在!</font>');
            }else{
                $("#sp").html('<font color="green">用户名可以使用!</font>');
            }
        });
    })
</script>

效果:

输入lisi显示用户名已存在

image.png

输入zhangsan显示用户名可以使用

image.png

(三)Ajax之POST请求

jQuery.post(url, [data], [callback], [type])通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

参数

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

PHP代码:

<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch('1');
    }
    public function pos()
    {   
        if(request()->isPost())
        {
            $data=input('post.');
        }
        print_r($data);
    }
}

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <title>ajax</title>
</head>
<body>
    <form action="" method="post">
        <p>Name:<input type="text" name="username"></p>
        <p>Email:<input type="text" name="email"></p>
        <p><input type="submit" name="submit"></p>
    </form>
</body>
</html>

jQuery代码:

<script type="text/javascript">
    $("form").submit(function(){
        var data = {
            'username':$("input[name='username']").val(),
            'email':$("input[name='email']").val(),
        };
        $.post(
            url = '{:url("index/pos")}',
            data = data,
            callback = function(res){
                console.log(res);
            }
        );
        return false;
    });
</script>

效果:

点击提交alert出username,email键值

image.png

第三天:jQuery进阶