分类目录归档:Jquery

Jquery AJAX 的全局事件

Jquery AJAX 的全局事件

  • AjaxStart()和AjaxStop()的使用
    *在jquery 1.8之后的版本,全局事件是作用在$(document)对象上的
$().ready(function () {     
            $(document).ajaxStart(function(){

                $("#loading").show();//在ajax请求开始的时候,显示友好提示,提高用户体验
            });

            $("input:button").click(function(){
                $.ajax({
                    "type":"POST",
                    "url":"2.php",
                    "data":$("#form1").serialize(),
                    "dataType":"json",
                    "success":function(data){
                        console.log(data);
                    },

                });


            $(document).ajaxStop(function(){

                $("#loading").hide();//当ajax请求结束时,隐藏提示
            });
            });
            //$.ajaxPrefilter(function (options){options.global = true;});
        });

Ajax其它全局事件

方法名称说明
ajaxComplete(callback)Ajax请求完成时执行回调函数
ajaxError(callback)Ajax请求发生错误时执行回调函数,捕捉到的错误可作为最后一个参数传递
ajaxSend(callback)Ajax请求发送前执行回调函数
ajaxSuccess(callback)Ajax请求成功时执行回调函数
0

Jquery插件编写

JQuery闭包写法

;(function($){
  //将jQuery对象传入到函数内部,$作为形参,所以,内部可以使用$代表jQuery
  var foo;
  var bar=function(){

  }
  $.BAR=bar;
})(jQuery);

JQuery扩展对象方法$.extend()

1.使用$.extend()初始化参数options

   function foo(options){
       options=$.extend({
          "name":"bar",
          "length":5,
          "dataType":"xml"//默认参数
       },options);//传入参数,合并替换

   }

   foo({"name","damon"});//替换
   foo();//默认

2.使用$.extend()扩展jQuery全局函数

  ;(function($){
    $.extend({
      "ltrim":function(text){
           return (text||"").replace(/^\s+/g,"");
      },
      "rtrim":function(text){
           return (text||"").replace(/\s+$/g,"");
      }

    });

  })(jQuery);

  $.ltrim("      test    ");

3.使用$.extend()扩展String原型链方法

   $.extend(String.prototype,{
      "isInterger":function(){
          return (new RegExp(/^\d+$/).test(this));
      }
   });

   $("input").val().isInterger();

Jquery插件写法$.fn.extend()使用

  • 命名规则 jquery.插件名.js
  • 闭包当中写插件代码
   ;(function($){
      $.fn.extend({
        "color":function(value){
          return this.css("color",value);//支持链式操作,这里的this不是dom对象而是jQuery对象,所以不用再次封装
        }
      })
   })(jQuery);
   $("div").color("red");//插件的方法,实际上也是插在了jQuery对象的原型链接上
0

JQuery选择器

Jquery 层次选择器

选择器描述
$(“ancestor descendant”)选取ancestor元素里所有的descendant(后代)元素
$(“parent>child”)选取parent元素下的子元素
$(“prev+ next”)选取紧接在prev元素后的next元素,等同于$(“prev”).next(“xxx”)
$(“prev~siblings”)选取prev元素后面的所有同辈元素,不包括自己,等同于$(“#prev”).nextAll(“xxx”)

过滤选择器

  1. 基本过滤选择器
选择器描述
:first选取第一个元素
:last选取最后一个元素
:not(selector)去除所有与给定选择器匹配的元素
:even选取索引是偶数的所有元素,索引从0开始
:odd选取索引是奇数的所有元素,索引从0开始
:eq(index)选择索引等于index的元素
:gt(index)选取索引大于index的元素(index从0开始)
:lt(index)选取索引小于index的元素(index从0开始)
:header选取所有的标题如h2,h2…
:animated选取正在执行动画的所有元素
:focus选取当前获取焦点的元素
  1. 内容过滤选择器
选择器描述
:contains(text)选取内容含有”text”的元素
:empty选择不包含子元素或者文本的空元素
:has(selector)选取含有选择器所匹配的元素的元素
:parent选取含有子元素或者文本的元素
  1. 可见性过滤选择器
选择器描述
:hidden选取所有不可见的元素
:visible选择所有可见的元素
  1. 属性过滤选择器
选择器描述
[attribute]选取拥有此属性的元素
[attribute=value]选取属性的值为value的元素
[attribute!=value]选取属性的值不等于value的元素
[attribute^=value]选取属性的值以value开始的元素
[attribute$=value]选取属性的值以value结束的元素
[attribute*=value]选取属性的值含有value的元素
[attribute=value] | 选取属性的值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“_”)的元素
[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素
[attribute] [attribute2] [attributeN]用属性选择器合并成一个复合属性选择器,
  1. 子元素过滤选择器
选择器描述
:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
:first-child选取每个父元素的第一个子元素
:last-child选取每个父元素最后一个子元素
:only-child如果某个元素是它父元素中惟一的子元素,那么将会匹配
  1. 表单对象属性过滤选择器
选择器描述
:enabled选取所有可用元素
:disabled选取所有不可用元素
:checked选取所有被选中的元素(单选框,复选框)
:selected选取所有被选中的选项元素(下拉列表)

表单选择器

选择器描述
:input选取所有的<input><textarea><select>和<button>元素
:text选取所有的单行文本框
:password选取所有的密码框
:radio选取所有的单选框
:checkbox选取所有的复选框
:submit选取所有的提交按钮
:image选取所有的图像按钮
:reset选取所有的重置按钮
:button选取所有的按钮
:file选取所有的上传域
:hidden选取所有不可见的元素
0