jQuery+Ajax

作者: 吾是小马哥 | 来源:发表于2017-10-30 09:24 被阅读92次

Ajax

Ajax (Asynchronous JavaScript and XML)：异步的JavaScript和XML。
Ajax不是某种编程语言，而是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。
传统的网页（即不用ajax技术的网页）想要更新内容或者提交一个表单，就要重新载入页面。  
而使用了ajax技术的网页，通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。

使用步骤：
  1、利用html+css来实现页面，表达信息
  2、用XMLHttpRequest和web服务器进行数据的异步交换
  3、运营js操作DOM，实现动态局部刷新

//XMLHttpRequest对象创建
var request；
if(window.XMLHttpRequest){
   request=new XMLHttpRequest();   //IE7+,Firefox,Chrome,Opera，Safari
}else{
   request=new ActiveXObject（"Microsoft.XMLHTTP"）;//IE6,IE5
}

Ajax-HTTP请求

什么是http？
  http是计算机通过网络进行通信的规则，使客户端（浏览器）可以向web服务器请求信息和服务。
  http是一种无状态协议，无状态指的是不建立持久的连接，也就是说服务端不保留一些连接的信息。  
浏览器发出请求，服务器响应，连接即断开。

一个完整的http请求过程，通常有7个步骤：
  1. 建立TCP连接
  2. web浏览器向web服务器发送请求命令
  3. web浏览器发送请求头信息
  4. web服务器应答
  5. web服务器发送应答头信息
  6. web服务器想浏览器发送数据
  7. web服务器关闭TCP连接

一个http请求一般由四部分组成：
  1. http请求的方法或动作，比如是get还是post请求
  2. 正在请求的URL，总得知道请求的地址是什么吧
  3. 请求头，包含一些客户端环境信息，身份验证信息等
  4. 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

get请求：一般用于信息获取，使用URL传递参数，对所发信息的数量也有限制，一般在2000个字符
post请求：一般用于修改服务器上的资源，对所发信息的数量无限制。

一个http响应一般由三部分组成：
  1. 一个数字和文字组成的状态码，用来显示请求是成功还是失败
  2. 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
  3. 相应体，也就是响应正文

http状态码由3位数字构成，其中首位数字定义了状态码的类型
  1xx：信息类，表示收到web浏览器请求，正在进一步的处理中
  2xx：成功，表示用户请求被正确接收，理解和处理例如：200 OK
  3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
  4xx：客户端错误，表示客户端提交的请求有错误，例如：404 NOT
  Found：意味着请求中所引用的文档不存在
  5xx：服务器错误，表示服务器不能完成对请求的处理：如 500

XMLHttpRequest发送请求

open(method,url,async)
send(string)
例：request.open("GET","get.php",true);
       request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
//要写在open和send方法之间
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=张三&sex=男");

实例前端代码：
<body>

<h1>员工查询</h1>

<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
</body>

XMLHttpRequest取得响应

responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
status和statusText：以数字和文本形式返回http状态码
getAllResponseHeader()：获取所有的响应报头
getResponseHeader()：查询响应中的某个字段的值

readyState（onreadystatechange通过这个事件监听）属性：
  0：请求未初始化，open还未调用
  1：服务器连接已建立，open已经调用了
  2：请求已接收，也就是接收到头信息了
  3：请求处理中，也就是接收到响应主体了
  4：请求已完成，且响应已就绪，也就是响应完成了
例：var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
if(request.readyState===4&&request.status===200)
  {
    //做一些事情
    request.responseText
  }
}

实例：
<script>
document.getElementById("search").onclick = function(){
  //发送Ajax查询请求并处理
  var request = new XMLHttpRequest();
  request.open("GET","service.php?number="+document.getElementById("keyword").value);
  request.send();
  request.onreadystatechange = function(){
    if(request.readyState === 4){
          if(request.status === 200){
              document.getElementById("searchResult").innerHTML = request.responseText;
          }else{
              alert(''发生错误：" + request.status);
          }
      }
  }
}
</script>

实例post：
<script>
document.getElementById("save").onclick = function(){
  //发送Ajax查询请求并处理
  var request = new XMLHttpRequest();
  request.open("POST","service.php);
  var data = "name=" + document.getElementById("staffName").value
             +"&number="+document.getElementById("staffNumber").value
             +"&sex="+document.getElementById("staffSex").value
             +"&job="+document.getElementById("staffJob").value;
  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  request.send(data);
  request.onreadystatechange = function(){
    if(request.readyState === 4){
          if(request.status === 200){
              document.getElementById("createResult").innerHTML = request.responseText;
          }else{
              alert(''发生错误：" + request.status);
          }
      }
  }
}
</script>

JSON

JSON：JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成
JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只需要按照JSON的规则来就行。
JSON与XML比较：
  JSON的长度相比XML短小
  JSON读写的速度更快
  JSON可以使用JavaScript內建的方法直接进行解析，转换成JavaScript对象，非常方便

JSON语法规则：
  JSON数据的书写格式：名称/值对。
  名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开：比如"name":"张三"
  JSON的值可以是下面这些类型：
  数字（整数或浮点数），比如123，1.23
  字符串（在双引号中）
  逻辑值（true或false）
  数组（在方括号中）
  对象（在花括号中）
  null

JSON解析：
  eval和JSON.parse
  在代码中使用eval是很危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，  
尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
实例：
<script>
document.getElementById("save").onclick = function(){
  //发送Ajax查询请求并处理
  var request = new XMLHttpRequest();
  request.open("POST","service.php);
  var data = "name=" + document.getElementById("staffName").value
             +"&number="+document.getElementById("staffNumber").value
             +"&sex="+document.getElementById("staffSex").value
             +"&job="+document.getElementById("staffJob").value;
  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  request.send(data);
  request.onreadystatechange = function(){
    if(request.readyState === 4){
          if(request.status === 200){
              var data = JSON.parse(request.responseText);
              if(data.success){
                  document.getElementById("createResult").innerHTML = data.msg;
              }else{
                  document.getElementById("createResult").innerHTML = "出现错误:" + data.msg;
          }
          }else{
              alert("发生错误：" + request.status);
          }
      }
  }
}
</script>

用jQuery实现Ajax

jQuery.ajax([settings])
  type：类型，“POST”或“GET”，默认为“GET”
  url：发送请求的地址
  data：是一个对象，连同请求发送到服务器的数据
  dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据http包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"
  success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
  error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

实例：
$(document).ready(function(){
    $("#search").click(function(){
          $.ajax({
                type:"GET",
                url:"service.php?number=" + $("#keyword").val(),
                dataType:"json",
                success: function(data){
                    if(data.success){
                        $("#searchResult").html(data.msg);
                    }else{
                         $("#searchResult").html("出现错误：" + data.msg);
                    }
                },
                error: function(jqXHR){
                          alert("发生错误："+ jqXHR.status);
                }
          });
    });
});

实例post：
$(document).ready(function(){
    $("#save").click(function(){
          $.ajax({
                type:"GET",
                url:"service.php",
                dataType:"json",
                data:{
                    name:$("#staffName").val(),
                    number:$("#staffNumber").val(),
                    sex:$("#staffSex").val(),
                    job:$("#staffJob").val(),
                }
                success: function(data){
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }else{
                         $("#createResult").html("出现错误：" + data.msg);
                    }
                },
                error: function(jqXHR){
                          alert("发生错误："+ jqXHR.status);
                }
          });
    });
});

跨域

一个域名地址的组成：
  http://   www   .  abc.com  :  8080  /  scripts/jquery.js
  协议     子域名        主域名    端口号    请求资源地址
  当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域
  不同域之间相互请求资源，就算做 “跨域”
  比如：http://www.abc.com/index.heml  请求 http://www.efg.com/service.php

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。
跨域：简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com  
或是c.a.com域名下的对象。

主域名：abc.com
  子域名：www.abc.com
                bbs.abc.com
                beijing.bbs.abc.com
                haidian.beijing.bbs.abc.com
  子域名不同就是跨域！

处理跨域方法一 ------代理（属于后台技术）
  通过在同域名的web服务器端创建一个代理：
  北京服务器（域名：www.beijing.com）
  上海服务器（域名：www.shanghai.com）
  比如在北京的web服务器的后台 (www.beijing.com/proxy-shanghaiservice.php)来调用  
上海服务器 (www.shanghai.com/service.php)的服务，然后再把响应结果返回给前端，  
这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

处理跨域方法二 ------JSONP（只能处理GET请求）
  JSONP可用于解决主流浏览器的跨域数据访问的问题，
  在www.aaa.com页面中：
  <script>
   function jsonp(json){
      alert(json["name"]);
  }
  </script>

  <script src = "http://bbb.com/jsonp.js"></script>
   在www.bbb.com页面中：
    jsonp({"name":"张三","age":24});


处理跨域方法三 ------XHR2（IE10以下的版本都不支持）
  html5提供的XMLHttpRequest level2已经实现了跨域访问以及其他的一些新功能，  
但是IE10以下的版本都不支持。
  只需要在服务器端做一些小小的改造即可：
    1. header("Access-Control-Allow-Origin:域名")
    2. header("Access-Control-Allow-Methods:POST,GET")

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

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：
load(url,[data],[callback])
参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，  
执行的回调函数。
例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，  
将数据内容显示在<div>元素中，并将加载按钮变为不可用：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我最爱吃的水果</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $(".content")
                    .html("![](Images/Loading.gif)")
                    .load("Data/fruit.html", function () {
                            $this.attr("disabled", "true");
                     };) 
                })
            });
        </script>
</body>

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

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，  
显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，  
callback参数为数据请求成功后，执行的回调函数。
例如，点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，  
将指定的字段名内容显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我最喜欢的一项运动</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getJSON("Data/sport.json", function (data) {
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {
                            $("ul").append("<li>" + sport["name"] + "</li>");
                        });
                    });
                })
            });
        </script>
    </body>

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

用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
例如，点击“加载”按钮，调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件，  
并在页面中显示加载后的数据内容：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我最喜欢的运动</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getScript("Data/sport.js", function () {
                          $this.attr("disabled", "true");
                    });
                })
            });
        </script>
    </body>

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

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，  
它的调用格式如下：
$.get(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
例如，当点击“加载”按钮时，调用get()方法向服务器中的一个.php文件以GET方式请求数据，  
并将返回的数据内容显示在页面中：  
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的个人资料</span> 
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get("Data/info.php", function (data) {
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");
                     })
            });
        </script>
    </body>

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

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，  
并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])
参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后  
执行的回调函数。
例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，  
检测输入值的奇偶性，并显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测数字的奇偶性</span> 
                <span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
            </div>
            <ul>
               <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.post("Data/check.php", {
                        num: $("#txtNumber").val()
                    },
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
        </script>
    </body>

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

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，  
直接可用于ajax请求，它的调用格式如下：
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单元素序列化后的  
标准URL编码文本字符串显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的个人资料</span> 
                <span class="fr">
                    <input id="btnAction" type="button" value="序列化" />
                </span>
            </div>
            <form action="">
            <ul>
                <li>姓名：<input name="Text1" type="text" size="12" /></li>
                <li>
                    <select name="Select1">
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </li>
                <li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
                <li id="litest"></li>
            </ul>
            </form>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnAction").bind("click", function () {
                    $("#litest").html($("form").serialize());
                })
            })
        </script>
    </body>

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

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，  
还能向服务器发送请求并传递数值，它的调用格式如下： 
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，  
data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，  
type为发送数据请求的方式，默认为get。
例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，  
并将返回的文件中的内容显示在页面：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">加载一段文字</span> 
                <span class="fr">
                    <input id="btnCheck" type="button" value="检测" />
                </span>
            </div>
            <ul></ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    $.ajax({
                        url: "Data/article.txt",
                        dataType: "text",
                        success: function (data) {
                            $this.attr("disabled","true");
                            $("ul").append(data);
                        }
                    });
                })
            });
        </script>
    </body>

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

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要  
再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。
例如，先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同  
的服务器数据，并将数据内容显示在页面：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">加载一段文字</span> 
                <span class="fr">
                    <input id="btnShow_1" type="button" value="加载1" />
                    <input id="btnShow_2" type="button" value="加载2" />
                </span>
            </div>
            <ul> </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $.ajaxSetup({
                    dataType: "text",
                    success: function (data) {
                        $("ul").empty().append(data);
                    }
                });
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        url: "Data/article_1.txt"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        url: "Data/article_2.txt"
                    });
                })
            });
        </script>
    </body>

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，  
ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，  
请求成功后，执行ajaxStop ()方法绑定的函数。

jQuery工具类函数

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

在jQuery中，通过$.browser对象可以获取浏览器的名称和版本信息，如$.browser.chrome为true，  
表示当前为Chrome浏览器，$.browser.mozilla为true，表示当前为火狐浏览器，  
还可以通过$.browser.version方式获取浏览器版本信息。
例如，调用$.browser对象，获取浏览器名称并显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">获取浏览器名称</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var strTmp = "您的浏览器名称是：";
                if ($.browser.chrome) { //谷歌浏览器
                    strTmp += "Chrome";
                }
                if ($.browser.mozilla) { //火狐相关浏览器
                    strTmp += "Mozilla FireFox";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

检测对象是否为空

在jQuery中，可以调用名为$.isEmptyObject的工具函数，检测一个对象的内容是否为空，如果为空，  
则该函数返回true，否则，返回false值，调用格式如下：
$.isEmptyObject(obj);
其中，参数obj表示需要检测的对象名称。
例如，通过$.isEmptyObject()函数，检测某个指定的对象是否为空，并将结果显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测对象是否为空</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = {  };
                var strTmp = "您定义了一个：";
                if ($.isEmptyObject(obj)) { //检测是否为空
                    strTmp += "空对象";
                }
                else {
                    strTmp += "非空对象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

检测对象是否为原始对象

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

检测两个节点的包含关系

调用名为$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，  
返回true，否则，返回false值，调用格式为：
$.contains (container, contained);
参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象  
节点元素，用于被其他容器所包含。

字符串操作函数

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

URL操作函数

调用名为$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值  
常用于向服务端发送URL请求，调用格式为：
$. param (obj);
参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个  
经过序列化编码后的字符串。

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

调用名为$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件，  
调用格式为：
$. extend ({options});
参数options表示自定义插件的函数内容。
例如，调用$.extend()函数，自定义一个用于返回两个数中最大值的插件，并在页面中将插件返回的  
最大值显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定义工具函数求两值中最大值</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            /*------------------------------------------------------------/
            功能：返回两个数中最大值
            参数：数字p1,p2
            返回：最大值的一个数
            示例：$.MaxNum(1,2);
            /------------------------------------------------------------*/
            (function ($) {
                $.extend({
                    "MaxNum": function (p1, p2) {
                        return (p1 > p2) ? p1 : p2;
                    }
                });
            })(jQuery);
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "15与7中最大的数是：";
                    strTmp +=$.MaxNum (15, 7);
                    //显示在页面中
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>

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

除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，  
当存在相同属性名时，后者将覆盖前者，调用格式为：
$. extend (obj1,obj2,…objN);
参数obj1至objN表示需要合并的各个原有对象。
例如，调用$.extend()函数对两个已有的对象进行合并，并将合并后的新对象元素内容显示在页面中：
<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">合并原有对象</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var objInfo = { name: "" };
                var objMess = { name: "白富美,", title: "欢迎与我联系！" };
                var objNewInfo =$.extend(objInfo, objMess);
                var strTmp = "<b>对象 白富美 合并后</b>：<br/><br/>";
                strTmp += objNewInfo.name + objInfo.title;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>

jQuery+Ajax

jQuery工具类函数

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读