jQuery基础(五)一Ajax应用与常用插件-imooc

chenchenchen

发布于 2023-01-30 17:18:40

16.5K0

发布于 2023-01-30 17:18:40

文章被收录于专栏：chenchenchenchenchenchen

第1章 jQuery 实现Ajax应用

本章介绍jQuery中支持Ajax的各种方法和函数，阐述通过Ajax交互的过程与常用方法,重点介绍核心方法$.ajax()的运用技巧。通过ajax全局事件的介绍，进一步巩固前面所学基础内容。

第2章 jQuery 常用插件

本章节先通过示例与插件相结合的方式，详细介绍了目前最为流行的各类插件的使用方法和技巧，包括表单插件、图片插件等；然后,介绍了如何自定义编写对象和类级别插件的过程。

第3章 jQuery UI型插件

本章介绍包括拖曳、放置、排序在内的各类UI插件的使用过程，介绍各类微型插件的使用方法和注意事项，以及最新版UI中菜单工具、微调按钮、工具提示插件的效果和使用方法。

第4章 jQuery 工具类函数

本章先介绍浏览器检测函数，然后，介绍jQuery各类测试类型函数的使用方法，同时，还介绍了字符串、URL操作函数的使用技巧，最后，介绍了使用$.extend()方法扩展工具函数和Object对象的方法

jQuery 实现Ajax应用

使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

load(url,[data],[callback])

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数

例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。如下图所示：

    $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $("ul")
                    .html("<img src='Images/Loading.gif' alt='x'/>")
                    .load("https://www.imooc.com/data/fruit_part.html",function(){
                        $this.attr("disabled", "true");
                    });
                })
            });

var $this = $(this)

this其实是一个HTML元素
this 只是个变量名，加"
而$(this)是个转换，将this表示的dom对象转换为jquery对象，这样就可以使用jquery提供的方法操作
声明一个叫$this的jquery对象变量，给声明的变量赋值，赋的值是将this的HTML元素转换为jQuery对象。

.html:load还未加载完成的时候将ul里的内容显示该图片

当点击“加载”按钮时，通过调用load()方法向服务器请求加载fruit.html文件中的内容

$this.attr("disabled", "true"):load加载完成后将按钮变为不可用。

在浏览器中显示的效果：

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数

例如，点击页面中的“加载”按钮，调用getJSON() 方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。如下图所示：

$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getJSON("https://www.imooc.com/data/sport.json",function(data){
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {
                            $("ul").append("<li>" + index + sport["name"] + "</li>");
                            /*if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");*/
                        });
                    });
                })
            });

$.each(data, function(index, ele){})

data：要遍历的集合, index：索引值, ele：集合中的子元素
第一种遍历 (obj).each(function(index,value){ }) 在对象上调用each函数第二种遍历 .each(obj,function(index,value){ }) 这种是把obj 当作对象传入函数 each 道理是一样的

当点击“加载”按钮时，通过getJSON()方法调用服务器中的sport.json文件

获取返回的data文件数据，并遍历该数据对象

以data[“name”]取出数据中指定的内容，显示在页面中。在浏览器中显示的效果：

使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

使用get()方法以GET方式从服务器获取数据

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[callback])

例如，当点击“加载”按钮时，调用get()方法向服务器中的一个.php文件以GET方式请求数据，并将返回的数据内容显示在页面中，如下图所示：

返回 json 数据类型，GET请求会将参数跟在URL后进行传递

使用post()方法以POST方式从服务器发送数据

post()方法用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：

$.post(url,[data],[callback])

例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，检测输入值的奇偶性，并显示在页面中，如下图所示：

<?php _POST['num'] : 0; if(num > 0){ echo '大于0'; }else if(

当点击“检测”按钮时，获取输入框中的值，并将该值使用$.post()方法一起发送给服务器，服务器接收该值后并进行处理，最后返回处理结果。

使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身

例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单中元素全部序列化，生成标准URL编码，各元素间通过&号相联。

使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：

jQuery.ajax([settings])或$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get

例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，当请求成功时调用success回调函数，获取传回的数据，并显示在页面中。

使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值

例如，先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在页面，如下图所示：

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数

例如，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax请求时，元素显示，请求完成时，动画元素自动隐藏。

jQuery 常用插件

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置

例如，当点击表单中的“提交”按钮时，调用validate插件验证用户名输入是否符合规则，并将异常信息显示在页面中，如下图所示：

表单插件——form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：

$(form). ajaxForm ({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数

<script type="text/javascript">
    $(function () {
        var options = {
        url: "http://www.imooc.com/data/form_f.php", 
        target: ".tip"
        }
        $(#frmV).ajaxForm(options);
    });
</script>

ajaxform和ajaxsubmit：http://www.cnblogs.com/china-li/archive/2012/12/12/2800144.html

图片灯箱插件——lightBox

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象

例如，以列表的方式在页面中展示全部的图片，当用户单击其中某张图片时，通过引入的图片插件，采用“灯箱”的方式显示所选的图片，如下图所示：

图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象

例如，在页面中，添加一个被<a>元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果，如下图所示：

cookie插件——cookie

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

其中参数key为保存cookie对象的名称，value为名称对应的cookie值

例如，当点击“设置”按钮时，如果“是否保存用户名”的复选框为选中状态时，则使用cookie对象保存用户名，否则，删除保存的cookie用户名

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(urlData,[options]);

其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象

jQuery Autocomplete 使用详细说明

例如，当用户在文本框输入内容时，调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据，显示在文本框下，提示选择，如下图所示：

右键菜单插件——contextmenu

右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：

$(selector).contextMenu(menuId,{options});

Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象

例如，选中页面<textarea>元素，点击右键，弹出插件绑定的快捷菜单，点击菜单中的各个选项，便在页面中显示操作的对应名称。如下图所示：

自定义对象级插件——lifocuscolor插件

自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：

$(Id).focusColor(color)

其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色

自定义类级别插件—— twoaddresult

通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：

$.addNum(p1,p2) 和 $.subNum(p1,p2)

上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值

<script type="text/javascript">
        $(function () {
            $("#btnCount").bind("click", function () {
                $("#Text3").val(
                    $.subNum($("#Text1").val(),
                        $("#Text2").val())
                );
            });
        });
    </script>

3-1拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：

$(selector). draggable({options})

options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

3-2放置插件——droppable

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

例如，在页面中，通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中，同时改变“购物车”的背景色和数量值，如下图所示：

3-3拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：

$(selector).sortable({options});

selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，

例如，在页面中，通过加载sortable插件将<ul>元素中的各个<li>表项实现拖曳排序的功能，如下图所示：

在浏览器中显示的效果：

3-4面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：

$(selector).accordion({options});

其中，参数selector为整个面板元素，options参数为方法对应的配置对象。

3-5选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下：

$(selector).tabs({options});

selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

3-6对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为：

$(selector).dialog({options});

selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

例如，当点击“提交”按钮时，如果文本框中的内容为空，则通过dialog插件弹出提示框，提示输入内容不能为空，如下图所示：

在浏览器中显示的效果：

3-7菜单工具插件——menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

3-8微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

3-9提示插件——tooltip

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

例如，将三个<a>元素与工具提示插件相绑定，当把鼠标移动在<a>元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，如下图所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <title>工具提示插件</title>
        <link href="https://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                工具提示插件</div>
            <div class="content">
                <div id="tooltip">
                    <label for="name">
                        姓名</label>
                    <input id="name" name="name" title="你猜呀" />
                    <br><br><br>
                    <label for="sex">
                        性别</label>
                    <input id="sex" name="sex" title="我是大屌萌妹，嘤嘤嘤" />
                    <br><br><br>
                    <label for="age">
                        年龄</label>
                    <input id="age" name="age" title="芳龄14，初中二年级" />
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#tooltip").tooltip({
                    show: {
                        effect: "slideDown",
                        delay: 350
                    },
                    hide: {
                        effect: "explode",
                        delay: 350
                    },
                    position: {
                        my: "left top",
                        at: "left bottom"
                    }
                });
            });
        </script>
    </body>
</html>

4-1获取浏览器的名称与版本信息

在jQuery中，通过.browser对象可以获取浏览器的名称和版本信息，如.browser.chrome为true，表示当前为Chrome浏览器，.browser.mozilla为true，表示当前为火狐浏览器，还可以通过.browser.version方式获取浏览器版本信息。

4-2检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类，一类为标准的w3c盒子模型，另一类为IE盒子模型，两者区别为在Width和Height这两个属性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型则包含，而在jQuery 中，可以通过$.support.boxModel对象返回的值，检测浏览器是否属于标准的w3c盒子模型。

4-3检测对象是否为空

在jQuery中，可以调用名为.isEmptyObject的工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下：.isEmptyObject(obj);

4-4检测对象是否为原始对象

调用名为.isPlainObject的工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为：.isPlainObject (obj);

4-5检测两个节点的包含关系

调用名为.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为：.contains (container, contained);

参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。

4-6字符串操作函数

调用名为.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为：.trim (str);

4-7URL操作函数

调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为：

$. param (obj);

参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。

4-8使用$.extend()扩展工具函数

调用名为. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，调用格式为：. extend ({options});参数options表示自定义插件的函数内容。

例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的最大值显示在页面中，如下图所示：

4-9使用$.extend()扩展Object对象

除使用.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：. extend (obj1,obj2,…objN);参数obj1至objN表示需要合并的各个原有对象。

例如，调用$.extend()函数对两个已有的对象进行合并，，返回一个包含两个对象中全部属性元素的新对象，相同名称的“name”属性，前者被后者覆盖。

在列表<ul>元素中，鼠标在列表项<li>元素移动时，可以自定义其获取焦点(focus)时的背景颜色，即设置表项<li>元素选中时的背景色.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
        li {
            background-color: yellow;
        }

            li:first-child {
                background-color: blue;
            }
    </style>
</head>
<body>
    <ul id="nav_ul">
        <li>第1个LI</li>
        <li>第2个LI</li>
        <li>第3个LI</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //方法一  简单方便  但不推荐
    (function ($) {
        $.extend({
            "focusColor": function (obj, color) {
                var a = obj.css("backgroundColor");
                obj.hover(function () {
                    $(this).css("backgroundColor", color);
                    $(this).siblings().css("backgroundColor", "");
                }, function () {
                    $(this).css("backgroundColor", "");
                })
            }
        });
    })(jQuery);
    $.focusColor($("li"), "red");

    //方法二  封装一般是这样写
    $(function () {
        //注意此处each的原因是为了得到每个li原始颜色  注意 li:first-child样式
        $("nav_ul li").each(function (index) {
            $(this).focusColor2("red");
        });
    });
    (function ($) {
        $.fn.extend({
            "focusColor2": function (color) {
                var oldColor = $(this).css("backgroundColor");
                $(this).hover(function () {
                    $(this).css("backgroundColor", color);
                }, function () {
                    $(this).css("backgroundColor", oldColor);
                })
            }
        });
    })(jQuery);
</script>

课程截图：https://www.jianshu.com/p/12354cdf8836
课程代码：https://www.jianshu.com/p/8ed03ae68df3
课程链接：https://www.imooc.com/learn/762

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-04-12，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

jquery

jquery ui

ajax

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！