关闭

Jquery学习笔记

标签: jquery对象浏览器javascript
152人阅读 评论(0) 收藏 举报
分类:

你可以简单地理解为jqXHR对象是jQuery自己伪造的一个XMLHttpRequest对象和$.Deferred对象的结合体。

jqXHR是浏览器原生XMLHttpRequest对象的超集。例如,它也包含responseTextresponseXML属性,以及getResponseHeader()方法。当传输机制与 XMLHttpRequest 对象不同时(例如,用一个<script>标签来完成JSONP请求),jqXHR对象会尽可能地模拟本地 XMLHttpRequest 对象的功能。

jQuery 1.5.1开始,jqXHR对象也overrideMimeType()方法(它在 1.4.x 中也可用,但在 1.5 中被临时移除)。overrideMimeType()方法可用于beforeSend()的回调函数中,比如用来修改 Content-Type 响应头。

jQuery 1.5开始,$.ajax()返回的jqXHR对象实现了Promise接口,包括其所有的属性、方法和行为。因此,我们通过jqXHR可以非常简单地为本次$.ajax()绑定AJAX请求对应状态执行的回调函数。

我们通过解剖一个完整的jqXHR对象,来了解jqXHR对象的属性和方法:

var jqXHR = {
    abort: function (statusText){
        // 取消请求,关闭连接                
    },
    always: function (){
        // 设置请求完成(无论成功或失败)时需要执行的一个或多个回调函数
    },
    complete: function (){
        // always()函数的别名,设置请求完成(无论成功或失败)时需要执行的一个或多个回调函数
    },
    done: function (){
        // 设置请求成功时需要执行的一个或多个回调函数
    },
    error: function (){
        // fail()函数的别名,设置请求失败时需要执行的一个或多个回调函数
    },
    fail: function (){
        // 设置请求失败时需要执行的一个或多个回调函数                
    },
    getAllResponseHeaders: function (){
        // 获取响应头信息的原始字符串        
    },
    getResponseHeader: function (key){
        // 获取响应头中指定名称的值     
    },
    overrideMimeType: function (type){
        // 重写 Content-Type响应头       
    },
    pipe: function (){
        // then()函数的别名,分别设置请求成功、失败、正在进行时需要执行的回调函数           
    },
    progress: function (){
        // 设置Deferred对象生成进度通知时需要执行的回调函数
    },
    promise: function (obj){
        // 为指定对象追加Promise对象的成员,以充当Promise对象 
    },
    readyState: 4, // 请求的状态
    responseText: "<!DOCTYPE html><html>......</html>", // 响应的文本内容
    setRequestHeader: function (name, value){
        // 设置请求头
    },
    state: function (){
        // 确定一个Deferred对象的当前状态,例如:"pending"、"resolved"、"rejected"               
    },
    status: 200,
    statusCode: function (map){     
        // 设置响应指定状态码需要执行的回调函数
        // map形如:{ 301:function(){}, 404:function(){} }     
    },
    statusText: "OK", // 状态响应头中的描述文本
    success: function (){
        // done()函数的别名,设置请求成功时需要执行的一个或多个回调函数
    },
    then: function (){
        // 分别设置请求成功、失败、正在进行时需要执行的回调函数               
    }
};

jQuery.ajaxSetup() 方法设置全局 AJAX 默认选项。

jQuery.ajaxSetup(name:value, name:value, ...)

设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数:

$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });

参数 描述
name:value 可选。使用名称/值对来规定 AJAX 请求的设置。


serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
您可以选择一个或多个表单元素(比如 input/textarea),或者 form 元素本身。
语法

$(selector).serializeArray()

详细说明
serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。
注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

jQuery ajax - load() 方法
加载页面片段
.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

我们可以修改上面的例子,这样就可以使用所获得文档的某部分:

$("#result").load("ajax/test.html #container");

如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。
jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title><head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。
注释:由于浏览器安全方面的限制,大多数 “Ajax” 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。


jQuery.fx.interval 属性

以较少的帧数来运行 <div> 元素的动画:

$("#toggle").on("click",function(){
  $("div").toggle(5000);
});
$("#interval").on("click",function(){
  jQuery.fx.interval = 500;
});

定义和用法
jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率。可操作该属性来调整动画运行的每秒帧数。
默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。
降低这个值能够使动画在更快的浏览器中运行得更流畅,但这么做也行会影响性能。
提示:由于 jQuery 使用一个全局的间隔时间,为了使该属性生效,动画应该不在运行或者首先停止所有动画。
注释:该属性在支持 requestAnimationFrame 属性的浏览器中无效,比如 Google Chrome 11。


警告:在 ECMAScript 第五版 (ES5) 的 严格模式 中禁止使用 arguments.callee()

三、callee

返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。

[function.]arguments.callee

可选项 function 参数是当前正在执行的 Function 对象的名称。
说明:callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员,他表示对函数对象本身的引用,这有利于匿名函数的递归或确保函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。更有需要注意的是callee拥有length属性,这个属性有时候用于验证还是比较好的。arguments.length是实参度,arguments.callee.length是形参长度,由此能够判断调用时形参长度是否和实参长度一致。

//callee能够打印其本身
function calleeDemo() {
  alert(arguments.callee);
}
//递归计算
var sum = function(n){
  if (n <= 0) 
  {
  return 1;
  }
  else 
  {
  return n +arguments.callee(n - 1)
  }
}

比较一般的递归函数:

var sum = function(n){
  if (1==n) return 1;
  else return n + sum (n-1);
}

调用时:alert(sum(100));
其中函数内部包含了对sum自身的引用,函数名仅仅是个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,这时使用callee会是个比较好的方法。


stop(stopAll,goToEnd)

参数 描述

stopAll  可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd  可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

stopAll 为false时,不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时,停止所有加入队列的动画(如goToend为true,直接跳到当前动画的最终效果)。

goToend为false时,不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧),goToend为true时,允许直接跳到完成当前动画的最终末尾效果s


<script>
    $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);

      //注意这一块
      //next() == $(this).dequeue();
      //dequeue用来出列,queue是入列,具体含义你可以在手册里面看看
      $("div").queue(function (next) {
        $(this).addClass("newcolor");
        next();
        //$(this).dequeue();
      });


      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");

        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });
</script>

定义和用法
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。

trigger() 方法相比的不同之处

它不会引起事件(比如表单提交)的默认行为

.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。

.triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。

该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined


删除元素节点

由于我们需要经常动态去改变DOM元素,因此Jquery提供了两种删除节点的方法,即remove()empty();

1. remove()方法

     $(“p”).remove();//    我们可以获取到要删除的元素,然后调用remove()方法
     $(“ul li:eq(0)”).remove().appendTo(“ul”);// 删除ul下面的第一个li标记,然后再把删除的li标记重新加到ul里面,remove()方法返回删除元素的引用,这时你可以继续使用
     $(“ul li”).remove(“li[title!=ABC]“);//remove可以接受通过参数来选择性的删除符合条件的元素;

2. empty()方法

严格来讲,empty()方法并不是删除元素,而是清空
例:

      <ul>
          <li title=”AAA”>AAA</li>
       </ul>

JQuery代码

    $(“ul li:eq(0)”).empty();

结果

    <ul>
          <li title=”AAA”></li>
      </ul>

记住,只会清空内容,不会请空属性;


//①下面贴出 简单的jquery的ajax处理JS 设置 dataType 类型为script ,自动执行JS脚本
    $(document).ready(function() {  

         $("#company").focus();  
         $("#company").mouseup(function() {  
            $.ajax({  
                   type: "POST",  
                   url: "checkCompanyExist.action",  
                   data: "companyName="+$("#company").val(),  
                   async: false,  
                    //关键地方  
                    dataType: "script"  
             });   
        });  
    });

// ②使用这个 $.get()调用ajax    ,处理结果 . 直接执行JS
    $(document).ready(function() {         
        $("#company").focus();  
     $("#company").mouseup(function() {  
        $.get("checkCompanyExist.action?companyName="+$("#company").val(), function(data){  
               eval(data);  
         });  
    });  
    });   
//③ 对返回的结果进行处理,直接执行JS (用$.ajax还有个好处就是 在向 后台 参数的时候不会有乱码问题)
    $(document).ready(function() {  
        $("#company").focus();  
     $("#company").mouseup(function() {  
        $.ajax({  
                  type: "POST",  
                  url: "checkCompanyExist.action",  
                  data: "companyName="+$("#company").val(),  
                  async: false,  
                  success: function(msg){  
                     eval(msg);  
                   }  
            });   
    });  
   });   

jquery根据name属性查找:

$("div[id]") 选择所有含有id属性的div元素 
$("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素 
$("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素 
$("input[name^='keleyi']") 选择所有的name属性以'keleyi'开头的input元素 
$("input[name$='keleyi']") 选择所有的name属性以'keleyi'结尾的input元素 
$("input[name*='keleyi']") 选择所有的name属性包含'keleyi'的input元素 
$("input[id][name$='keleyi']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素 

例如:$(":input[name='keleyi']") 表示查找的是name为keleyi的表单。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:893861次
    • 积分:13005
    • 等级:
    • 排名:第1092名
    • 原创:307篇
    • 转载:439篇
    • 译文:56篇
    • 评论:93条
    博客专栏
    文章分类
    打赏
    如果你觉得我的文章对您有用,请随意打赏。 微信 支付宝