• JQuery笔记


    选择器 选择器函数:$()

    1. $("*") 所有元素

    2. Dom对象

      1. 若要通过JQuery操作Dom对象,需要将Dom对象转换为JQuery对象($(Dom对象)): $(window),$(document), $(this)。

          var div1 = document.getElementById("div1");
          alert($(div1 ).html());
        
      2. 同样的如果需要直接使用Dom的属性/方法时,如果现有的是一个JQuery对象,需要将它转为Dom对象(var domObj = JQueyObj[0] //或者 = JQueyObj.get(0))。

          var div1 = $("#div1")[0];
          alert(div1.innerHTML); 
        
    3. 类似css中的选择方式

      1. ID选择器 $("#Id")

      2. css选择器 $(".className")

      3. 标签选择器 $("p")

      4. 属性选择器

        1. $("[href]")     选取所有带有 href 属性的元素。
        2. $("[href='#']")     选取所有带有 href 值等于 "#" 的元素。
        3. $("[href!='#']")     选取所有带有 href 值不等于 "#" 的元素。
        4. $("input[name$='letter']")     查找所有 name 以 'letter' 结尾的 input 元素。
        5. $("input[name^='news']")     查找所有 name 以 'news' 开始的 input 元素
        6. $("input[name*='man']")     查找所有 name 包含 'man' 的 input 元素
      5. 过滤选择器

        1. :fist      $(:p:first) 第一个p元素
        2. :last    $("p:last") 最后一个p元素
        3. :even     所有索引为偶数的(从0开始) ,$("tr:even") 所有偶数tr元素
        4. :odd     所有索引为奇数的,$("tr:odd") 所有奇数tr元素
        5. :eq(索引序号)     指定索引序号的元素 ,$("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
        6. :qt(no)      所有索引值大于给定值的元素,$("ul li:gt(3)") 列出 index 大于 3 的元素
        7. :lt(no)      所有索引值小于给定值的元素, $("ul li:lt(3)") 列出 index 小于 3 的元素
        8. :not(selector)     过滤条件取反, $("input:not(:empty)") 所有不为空的 input 元素
        9. :header      $(":header") 所有标题元素 h1 - h6
        10. :animated      所有动画元素
        11. :contains(text)     $(":contains('W3School')") 包含指定字符串的所有元素
        12. :empty     $(":empty") 无子(元素)节点的所有元素
        13. :hidden     $("p:hidden") 所有隐藏的 p 元素
        14. :visible     $("table:visible") 所有可见的表格
      6. 表单对象过滤选择器

        1. :input     $(":input") 所有 input 元素
        2. :text     $(":text") 所有 type="text" 的 input 元素
        3. :password     $(":password") 所有 type="password" 的 input 元素
        4. :radio     $(":radio") 所有 type="radio" 的 input 元素
        5. :checkbox     $(":checkbox") 所有 type="checkbox" 的 input 元素
        6. :submit     $(":submit") 所有 type="submit" 的 input 元素
        7. :reset     $(":reset") 所有 type="reset" 的 input 元素
        8. :button     $(":button") 所有 type="button" 的 input 元素
        9. :image     $(":image") 所有 type="image" 的 input 元素
        10. :file     $(":file") 所有 type="file" 的 input 元素
        11. :enabled     $(":enabled") 所有激活的 input 元素
        12. :disabled     $(":disabled") 所有禁用的 input 元素
        13. :selected     $(":selected") 所有被选取的 input 元素
        14. :checked     $(":checked") 所有被选中的 input 元素
      7. 多条件选择器 $("p,div,span,menuitem")

      8. 复合选择器

        1. $(".intro.demo")    所有 class="intro" 且 class="demo" 的元素。
        2. $("p.intro")      所有 class="intro" 的p元素
        3. $("input[id][name$='man']")    找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
      9. 层次选择器

        1. $("div li")    获取所有li标签后代,包括后代的后代
        2. $("div > li")    获取直接的后代
        3. $("label + input")    匹配所有跟在 label 后面的 input 元素(匹配所有紧接在 prev 元素后的 next 元素)
        4. $("form ~ input")      找到所有与表单同辈的 input 元素 (匹配 prev 元素之后的所有 siblings 元素)
      10. 其他选择器(1.9+)

        1. :lang     $("div:lang(en)")将匹配<div lang="en"> and<div lang="en-us">(和他们的后代
        2. :root    在HTML中,$(":root")选择的元素永远是元素。
        3. :target    例如,给定的URI http://example.com/#foo, $( "p:target" ),将选择<p id="foo">元素。

    CSS选择器

    选择器 例子 例子描述 CSS
    .class .intro 选择 class="intro" 的所有元素。 1
    #id #firstname 选择 id="firstname" 的所有元素。 1
    * * 选择所有元素。 2
    element p 选择所有 <p> 元素。 1
    element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
    element element div p 选择 <div> 元素内部的所有 <p> 元素。 1
    element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
    element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
    [attribute] [target] 选择带有 target 属性所有元素。 2
    [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
    [attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
    [attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
    :link a:link 选择所有未被访问的链接。 1
    :visited a:visited 选择所有已被访问的链接。 1
    :active a:active 选择活动链接。 1
    :hover a:hover 选择鼠标指针位于其上的链接。 1
    :focus input:focus 选择获得焦点的 input 元素。 2
    :first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
    :first-line p:first-line 选择每个 <p> 元素的首行。 1
    :first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
    :before p:before 在每个 <p> 元素的内容之前插入内容。 2
    :after p:after 在每个 <p> 元素的内容之后插入内容。 2
    :lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2
    element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
    [attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
    [attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
    [attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
    :first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
    :last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
    :only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
    :only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
    :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
    :nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
    :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
    :nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3
    :last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
    :root :root 选择文档的根元素。 3
    :empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 3
    :target #news:target 选择当前活动的 #news 元素。 3
    :enabled input:enabled 选择每个启用的 <input> 元素。 3
    :disabled input:disabled 选择每个禁用的 <input> 元素 3
    :checked input:checked 选择每个被选中的 <input> 元素。 3
    :not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
    ::selection ::selection 选择被用户选取的元素部分。 3

    document操作

    操作样式、属性

    1. addClass(),removeClass(),toggleClass(),hasClass()
    2. css()
    3. attr(),removeAttr()
    4. prop(),针对disabled,checked, required, readonly这类,有的会写成disabled = "disabled",而有的就写一个disabled,对于后者用attr("disabled")是取不到值的。
    Attribute/Property .attr() .prop()
    accesskey  
    align  
    async
    autofocus
    checked
    class  
    contenteditable  
    draggable  
    href  
    id  
    label  
    location ( i.e. window.location )
    multiple
    readOnly
    rel  
    selected
    src  
    tabindex  
    title  
    type  
    width ( if needed over .width() )  

    html,文本,值

    1. html(), text(),val()

    内部插入

    1. append(content|fn)    向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法类似
      1.fn: 返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

    2. appendTo(content)    把所有匹配的元素追加到另一个指定的元素元素集合中

        $("p").appendTo("div");
        $("<p/>").appendTo("div").addClass("test").end().addClass("test2");
      
    3. prepend(content|fn)     向所有匹配元素内部的开始处插入内容

    4. prependTo(content)    

    外部插入

    1. after(content|fn)    在每个匹配的元素之后插入内容。
    2. before(content|fn)    
    3. insertAfter(content)    使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。
    4. insertBefore(content)    使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

    包裹

    1. wrap(html|ele|fn)    把匹配的元素用指定的内容或元素包裹起来。

       $("p").wrap("<div class='wrap'></div>");
       $("p").wrap(document.getElementById('content'));
       $('.inner').wrap(function() {return '<div class="' + $(this).text() + '" />';});
      
    2. unwrap()    移除并替换指定元素的父元素。

    3. wrapAll(html|ele)    将所有匹配的元素用单个元素包裹起来。

    4. wrapInner(html|ele|fn)    将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

    替换

    1. replaceWith(content|fn)     用新内容替换匹配的元素。
    2. replaceAll(selector)     用匹配的元素替换所有匹配到的元素。

    删除

    1. empty()    移除所有匹配的元素。
    2. remove([expr])    删除匹配的元素集合中所有的子节点。
    3. detach([expr])    从 DOM 中移除匹配元素集合。

    复制

    1. clone([Even[,deepEven]])

    事件

    页面载入 ready(fn)

    1. $(document).ready(function(){})与$(window).onload(function(){})是不一样的。前者只要在Dom元素创建完毕后就会触发,可以触发多次。
    2. 简化形式 $(function(){});
    3. ready() 函数不应与 <body onload=""> 一起使用。
    

    事件切换

    1. hover([over,]out)

    2. toggle()

      1. toggle(),切换显示/隐藏

         $('td).toggle();
        
      2. toggle([speed] ,[fn]) ,String,Function

      3. toggle([speed] ,[easing] ,[fn]),String,String,Function

        1. speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"
        2. easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
        3. fn:在动画完成时执行的函数,每个元素执行一次。
      4. toggle([switch]),Boolean

         $('#foo').toggle(showOrHide);
        
         //相当于
         if (showOrHide) {
         $('#foo').show();
         } else {
         $('#foo').hide();
         }   
        

    事件处理

    1. bind()      向匹配元素附加一个或更多事件处理器 (3.0废弃)
    2. unbind()      从匹配元素移除一个被添加的事件处理器(3.0废弃)
    3. delegate()      向匹配元素的当前或未来的子元素附加一个或多个事件处理器(3.0废弃)
    4. undelegate()      从匹配元素移除一个被添加的事件处理器,现在或将来(3.0废弃)
    5. live()      为当前或未来的匹配元素添加一个或多个事件处理器(1.7废弃)
    6. die()      移除所有通过 live() 函数添加的事件处理程序。(1.7废弃)

    1. one()      为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

    2. on(eve,[sel],[data],fn)

       $("form").on("submit", false); $(window).on("scroll", function () { });
      
    3. off(eve,[sel],[fn])

    4. trigger(type,[data])      在每一个匹配的元素上触发某类事件。

       $("p").bind("myEvent", function (event, message1, message2) {
             alert(message1 + ' ' + message2);
       });
       $("p").trigger("myEvent", ["Hello","World!"]);
      
    5. triggerHandler(type, [data])

      这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
      这个方法的行为表现与trigger类似,但有以下三个主要区别:

      • 第一,他不会触发浏览器默认事件。
      • 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
      • 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。

    元素事件

    1. blur()      触发、或将函数绑定到指定元素的 blur 事件
    2. change()      触发、或将函数绑定到指定元素的 change 事件
    3. click()      触发、或将函数绑定到指定元素的 click 事件
    4. dblclick()      触发、或将函数绑定到指定元素的 double click 事件
    5. error()      触发、或将函数绑定到指定元素的 error 事件
    6. focus()      触发、或将函数绑定到指定元素的 focus 事件
    7. keydown()      触发、或将函数绑定到指定元素的 key down 事件
    8. keypress()      触发、或将函数绑定到指定元素的 key press 事件
    9. keyup()      触发、或将函数绑定到指定元素的 key up 事件
    10. load()      触发、或将函数绑定到指定元素的 load 事件
    11. unload()      触发、或将函数绑定到指定元素的 unload 事件
    12. mousedown()      触发、或将函数绑定到指定元素的 mouse down 事件
    13. mouseenter()      触发、或将函数绑定到指定元素的 mouse enter 事件
    14. mouseleave()      触发、或将函数绑定到指定元素的 mouse leave 事件
    15. mousemove()      触发、或将函数绑定到指定元素的 mouse move 事件
    16. mouseout()      触发、或将函数绑定到指定元素的 mouse out 事件
    17. mouseover()      触发、或将函数绑定到指定元素的 mouse over 事件
    18. mouseup()      触发、或将函数绑定到指定元素的 mouse up 事件
    19. resize()      触发、或将函数绑定到指定元素的 resize 事件
    20. scroll()      触发、或将函数绑定到指定元素的 scroll 事件
    21. select()      触发、或将函数绑定到指定元素的 select 事件
    22. submit()      触发、或将函数绑定到指定元素的 submit 事件

    事件的相关参数查询

    1. event.isDefaultPrevented()      返回 event 对象上是否调用了 event.preventDefault()。
    2. event.pageX      相对于文档左边缘的鼠标位置。
    3. event.pageY      相对于文档上边缘的鼠标位置。
    4. event.preventDefault()      阻止事件的默认动作。
    5. event.result      包含由被指定事件触发的事件处理器返回的最后一个值。
    6. event.target      触发该事件的 DOM 元素。
    7. event.timeStamp      该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
    8. event.type      描述事件的类型。
    9. event.which      指示按了哪个键或按钮。

    动画

    1.show([speed,[easing],[fn]])、hide([speed,[easing],[fn]])、toggle([speed],[easing],[fn])

         $(selector).hide(speed,callback);$(selector).show(speed,callback);
    
    1. fadeIn([speed],[easing],[fn])、fadeOut([speed],[easing],[fn])、fadeTo([[speed],opacity,[easing],[fn]])、fadeToggle([speed,[easing],[fn]])

    2. slideDown([speed],[easing],[fn])、slideUp([speed,[easing],[fn]])、slideToggle([speed],[easing],[fn])

    3. 自定义

      1. animate(params,[speed],[easing],[fn])1.8*

      2. stop([clearQueue],[jumpToEnd])1.7*

      3. delay(duration,[queueName])

      4. finish([queue])1.9+

         $("button").click(function(){
               $("div").animate({
                 left:'250px',
                 height:'+=150px',
                 '+=150px'
               });
         });
        
    4. 队列控制:

      1. clearQueue([queueName])      对被选元素移除所有排队的函数(仍未运行的)
      2. delay(duration,[queueName])      对被选元素的所有排队函数(仍未运行)设置延迟
      3. dequeue([queueName])      运行被选元素的下一个排队函数
      4. queue(element,[queueName])      显示被选元素的排队函数

    尺寸

    1. width()      设置或返回元素的宽度(不包括内边距、边框或外边距)
    2. height()      设置或返回元素的高度(不包括内边距、边框或外边距)
    3. innerWidth()      返回元素的宽度(包括内边距)
    4. innerHeight()      返回元素的高度(包括内边距)
    5. outerWidth()      返回元素的宽度(包括内边距和边框)
    6. outerHeight()      方法返回元素的高度(包括内边距和边框)
    7. outerWidth(true)      方法返回元素的宽度(包括内边距、边框和外边距)。
    8. outerHeight(true)      方法返回元素的高度(包括内边距、边框和外边距)。

    位置

    1. offset()      返回第一个匹配元素相对于文档的位置。
    2. offsetParent()      返回最近的定位祖先元素。
    3. position()      返回第一个匹配元素相对于父元素的位置。
    4. scrollLeft()      设置或返回匹配元素相对滚动条左侧的偏移。
    5. scrollTop()      设置或返回匹配元素相对滚动条顶部的偏移。

    $(document).width(), $(window).width();

    遍历

    过滤

    1. eq(index|-index)      负数表示从最后一个开始倒数

    2. first()

    3. last()

    4. hasClass(class)

    5. filter(expr|obj|ele|fn)     筛选出与指定表达式匹配的元素集合。

      1. expr:String 字符串值,包含供匹配当前元素集合的选择器表达式。
      2. jQuery:objectobject 现有的jQuery对象,以匹配当前的元素。
      3. element:Expression 一个用于匹配元素的DOM元素。
      4. function(index) :Function一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
    6. is(expr|obj|ele|fn)

    7. map(callback)

    8. has(expr|ele)

    9. not(expr|ele|fn)

    10. slice(start,[end])

    查找

    1. children([expr])
    2. closest(e|o|e)1.7*      从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
    3. find(e|o|e)
    4. next([expr])
    5. nextAll([expr])
    6. nextUntil([exp|ele][,fil])      查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。
    7. offsetParent()      返回第一个匹配元素用于定位的父节点。
    8. parent([expr])     获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
    9. parents([expr])     获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)
    10. parentsUntil([expr|element][,filter])     获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
    11. prev([expr])     获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
    12. prevall([expr])     获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
    13. prevUntil([exp|ele][,fil])     获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
    14. siblings([expr])获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。

    串联

    1. add(expr|ele|html|obj[,con])     把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

       $("p").add("<span>Again</span>")
      
    2. andSelf()1.8废弃,在jQuery1.8和更高版本中应使用.addBack()。      $("div").find("p").andSelf().addClass("border");

    3. addBack([selector ])1.9+ .      addBack()方法导致前一组遍历堆栈中的DOM元素被添加到当前组。

    4. contents()      查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

           $("iframe").contents().find("body").append("I'm in an iframe!");
      
    5. end()    结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。

    数据操作函数

    这些方法允许我们将指定的 DOM 元素与任意数据相关联。

    1. .clearQueue() 从队列中删除所有未运行的项目。
    2. .data() 存储与匹配元素相关的任意数据。
    3. jQuery.data() 存储与指定元素相关的任意数据。
    4. .dequeue() 从队列最前端移除一个队列函数,并执行它。
    5. jQuery.dequeue() 从队列最前端移除一个队列函数,并执行它。
    6. jQuery.hasData() 存储与匹配元素相关的任意数据。
    7. .queue() 显示或操作匹配元素所执行函数的队列。
    8. jQuery.queue() 显示或操作匹配元素所执行函数的队列。
    9. .removeData() 移除之前存放的数据。
    10. jQuery.removeData() 移除之前存放的数据。

    AJAX

    1. $(selector).load(URL,data,callback);
      1. $("#div1").load("demo_test.txt #p1"); 把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的
        元素中
      2. 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
        1. responseTxt - 包含调用成功时的结果内容
        2. statusTXT - 包含调用的状态
        3. xhr - 包含 XMLHttpRequest 对象
    2. $.get(URL,callback);
    3. $.post(URL,data,callback);
    4. $.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
    5. $.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。
    6. $.ajax() 执行异步 HTTP (Ajax) 请求。
      1. options:Object

      2. async:Boolean

      3. beforeSend(XHR), 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。如果返回 false 可以取消本次 ajax 请求。

      4. cache:Boolean ,dataType 为 script 和 jsonp 时默认为 false

      5. complete(XHR, TS), 请求完成后回调函数 (请求成功或失败之后均调用)

      6. contentType:String ,默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

      7. context:Object ,设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)

      8. data:String, 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式

      9. dataFilter:Function,给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

      10. dataType:String

        1. "xml": 返回 XML 文档,可用 jQuery 处理。

        2. "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

        3. "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

        4. "json": 返回 JSON 数据 。

        5. "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

        6. "text": 返回纯文本字符串

           $.ajax({ url: "test.html", context: document.body, success: function(){
                   $(this).addClass("done");
             }});
          
      11. error:Function,三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象

      12. ……其他参数及事件

    • .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
    • .ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
    • .ajaxSend() 在 Ajax 请求发送之前显示一条消息。
    • jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
    • .ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
    • .ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
    • .ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
    • jQuery.param() 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。
    • .serialize() 将表单内容序列化为字符串。
    • .serializeArray() 序列化表单元素,返回 JSON 数据结构数据。

    noConflict() 方法

    noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。避免与其他框架冲突。之后通过全名替代简写的方式来使用 jQuery。也可以创建自己的简写。

    var jq = $.noConflict();
    jq(document).ready(function(){
          jq("button").click(function(){
            jq("p").text("jQuery 仍在运行!");
          });
    });
    

    $.noConflict();
    jQuery(document).ready(function($){
          $("button").click(function(){
            $("p").text("jQuery 仍在运行!");
          });
    });
    

    DOM 元素方法

    1. .get() 获得由选择器指定的 DOM 元素。
    2. .index() 返回指定元素相对于其他指定元素的 index 位置。
    3. .size() 返回被 jQuery 选择器匹配的元素的数量。
    4. .toArray() 以数组的形式返回 jQuery 选择器匹配的元素。
  • 相关阅读:
    SpringBoot启动报错 java.lang.NoClassDefFoundError: javax/validation/ValidationException
    Java String类创建对象问题
    Java代码执行顺序
    Java抽象类与接口(2) ------接口
    Java抽象类与接口(1) ------抽象类
    Manjaro kde2020 使用记录
    生活常用小插件
    技术汇总
    Vue中使用websocket的正确使用方法
    js封装一个websocket
  • 原文地址:https://www.cnblogs.com/wj033/p/jQuery.html
Copyright © 2020-2023  润新知