jQuery笔记-CSDN博客

1.jQuery 是一个 JavaScript 库。
2.jQuery 库包含以下特性：
    HTML 元素选取
    HTML 元素操作
    CSS 操作
    HTML 事件函数
    JavaScript 特效和动画
    HTML DOM 遍历和修改
    AJAX
    Utilities
3.jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
4.JQuery 库不需要安装，只有一个js文件。可以下载下来导入或者使用一些网站提供，比如：
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
       <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
          html5中：<script> 标签中可以不使用 type="text/javascript" ，因为为默认脚本文件
5.语法：通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
        元素选择同css类似：可以使用元素名字访问或者使用id访问（id前面加#）或者使用类名访问（class前加.);但是注意Javascript中没有直接的类名访问，这是编写函数实现。
        jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合
        基础语法是：$(selector).action()
              美元符号定义 jQuery
              选择符（selector）“查询”和“查找” HTML 元素
              jQuery 的 action() 执行对元素的操作
           实例：$(this).hide() - 隐藏当前元素
       jQuery函数位于document ready（）函数中有利于防止完全加载文档之前运行jQuery，从而造成失败(隐藏不存在元素，或者未加载完成图像)。
6.jQuery 选择器：通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
        jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择；选择器允许您对 HTML 元素组或单个元素进行操作；
       jQuery 元素选择器：jQuery 使用 CSS 选择器来选取 HTML 元素。
       jQuery 属性选择器：jQuery 使用 XPath 表达式来选择带有给定属性的元素；
       jQuery CSS 选择器:例：$("p").css("background-color","red");
7.事件：jQuery 名称冲突：jQuery 使用名为 noConflict() 的方法来解决该问题；var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替$符号；不定义jq则为Jquery。
        遵循以下原则时：
            把所有 jQuery 代码置于事件处理函数中
            把所有事件处理函数置于文档就绪事件处理器中
            把 jQuery 代码置于单独的 .js 文件中
            如果存在名称冲突，则重命名 jQuery 库
8.效果函数：$(selector).funciton(speed,callback);
             可选的 callback 参数是隐藏或显示完成后所执行的函数名称。可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
             1）hide(speed,callback)    隐藏被选的元素;
                show(speed,callback)    显示被选的元素;
                toggle()                切换 hide() 和 show() 方法;
                注意隐藏的元素依然存在只是不可见；
             2）fadeIn（speed,callback） jQuery fadeIn() 用于淡入已隐藏的元素。
                fadeOut(speed,calback)    jQuery fadeOut() 方法用于淡出可见元素。
                fadeTo（speed,callback/opacity）逐渐改变透明度到给定值。opacity(透明度)：0到1;
                $(selector).fadeToggle(speed,callback)：方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
             3）slideDown(speed,callback) 方法通过使用滑动效果，显示隐藏的被选元素。不适用于 visibility:hidden 的元素;
                slideUp(speed,callback) 方法通过使用滑动效果，隐藏被选元素。
                slideToggle()    对被选元素进行滑动隐藏和滑动显示的切换;
             4)$(selector).clearQueue(queueName)方法停止队列中所有仍未执行的函数。
             5) $(selector).animate(styles,speed,easing,callback)方法执行 CSS 属性集的自定义动画。easing 函数swing   linear;参数之间“，”隔开。
                    一、所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
                    二、几乎可以用 animate() 方法来操作所有 CSS 属性，但之间“-”必须去掉后面字母改为大写；
                    三、也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=；
                    四、 opacity:透明度；您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：具体值为上述中函数名。
                    五、使用队列功能：即多个animate函数一起使用个，具体顺序为队列顺序，先入先出，先写先执行；注意：当所有style属性写在同一个animate函数中时，
                        所有样式同步改变，没有先后之分。
             6）$(selector).stop(stopAll,goToEnd);适用于所有 jQuery 效果函数;
                可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行,可选的 goToEnd 参数规定是否立即完成当前动画。
                  默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。具体如下：
                     stop()停止当前，后续animate可以继续执行。
                     stop(true)停止所有，后续animate不执行，停在当前状态。
                     stop(true,true)停止但要完成，即停止后状态改为animate后最终结果。
             7）speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
             8）有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。您可以按照希望的格式来写，包含折行和缩进；
                例如：$("#p1").css("color","red").slideUp(2000).slideDown(2000);
9.获取：
    1）dom获取方式：无参数返回，有参数修改,attr略有差别，见（4）分析说明：
          text() - 设置或返回所选元素的文本内容
          html() - 设置或返回所选元素的内容（包括 HTML 标记,但标记为里面标记，元素节点（所选择节点）不包含在内；
          val() - 设置或返回表单字段的值，方法获得输入字段的值，能返回节点的值，但是不能返回元素节点后的text节点。value只是属性里面的一个。
          attr() 方法用于获取属性值；比如获取href。attr() 方法也允许您同时设置多个属性，用“，”隔开。
    2）文档操作：
          （1）$(selector).addClass(class)方法向被选元素添加一个或多个类名。注意，这里的类名前面不加“.”。用“”包围，如需添加多个类，请使用空格分隔类名但所有类名在一个“”里。该方法不会移除已存在的类，只是添加。
                    $(selector).addClass(function(index,oldclass))：使用函数向被选元素添加类。index - 可选。选择器的 index 位置。class - 可选。选择器的旧的类名。
               $(selector).remove():方法移除被选元素，包括所有文本和子节点。remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。测试可知删除后的信息暂时无法恢复，但是可以在删除时使用这些信息从而达到移动效果。
               $(selector).removeAttr(attribute):从被选元素中移除属性;
          （2）$(selector).after(content)：在被选元素后插入指定的内容，参数必须。 $(selector).after(function(index))，使用函数在被选元素之后插入指定的内容；
               $(selector).before(content):在被选元素前插入指定的内容;$(selector).before(function(index)):使用函数在指定的元素前面插入内容。
           (3) $(selector).append(content):方法在被选元素的结尾（仍然在内部）插入指定内容。 $(selector).append(function(index,html)):使用函数在指定元素的结尾插入内容;
               $(content).appendTo(selector):被选元素的结尾（仍然在内部）插入指定内容。append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
               注意：after和append不同之处：after插入后节点的parentnode相同，即那说明插入节点和此节点只有兄弟关系，而append插入后的节点为此节点的子节点，为父子关系。
           (4) $(selector).attr(attribute)：返回被选元素的属性值。
               $(selector).attr(attribute,value)：设置被选元素的属性和值。
               $(selector).attr(attribute,function(index,oldvalue)):使用函数来设置属性/值;注意与上面的微妙区别，若第二个参数为确定的值是返回，若第二个参数为函数的返回值就是设置。
               $(selector).attr({attribute:value, attribute:value ...})：为被选元素设置一个以上的属性和值。一定要使用{}包围。
           (5)$(selector).clone(includeEvents)方法生成被选元素的副本，包含子节点、文本和属性。includeEvents为可选参数，默认为false，如果需要拷贝事件处理器则需要设置为true。
           (6)$(selector).detach():移除被选元素，包括所有文本和子节点;这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
               依然可以在移除时使用append实现移动。使用detach和prepend可以实现删除再显示，remove也有简单的效果但是由于删除了联系所以复杂情况可能会出错。、
           (7)$(selector).empty()：empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
          （8）$(selector).hasClass(class)：检查被选元素是否包含指定的 class。
          （9) $(content).insertAfter(selector)：在被选元素之后插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
               $(content).insertBefore(selector):在被选元素之前插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
           (10)$(selector).prepend(content):在被选元素的开头（仍位于内部）插入指定内容。$(selector).prepend(function(index,html)):   使用函数在被选元素的开头插入指定的内容。
               $(content).prependTo(selector):在被选元素的开头（仍位于内部）插入指定内容。prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。
           (11) $(selector).removeClass(class):从被选元素移除一个或多个类.如果没有规定参数，则该方法将从被选元素中删除所有类。
           (12)$(content).replaceAll(selector):用指定的 HTML 内容或元素替换被选元素。
               $(selector).replaceWith(content):replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
           (13)$(selector).toggleClass(class,switch):对设置或移除被选元素的一个或多个类进行切换;switch    可选。布尔值。规定是否添加或移除 class,false 为只能添加，true为只能删除。class 必需。
               规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
               $(selector).toggleClass(function(index,class),switch)：使用函数来切换类；
           （14）$(selector).unwrap()：删除被选父元素。解包裹。
                 $(selector)wrap():把每个被选元素放置在指定的 HTML 内容或元素中。。包裹。
                 $(selector)wrapAll():为所有被选元素添加同一个父元素，即把所有符合条件的元素联合在一起，重组文档。
                 $(selector).wrapInner(wrapper)：使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
                 区别：wrap：为每个选中的元素添加各一个外包，即添加一个父元素节点；wrapAll：为每个选中的元素添加同一个外包，即同一个父元素节点。
                       wrapInner:为每个选中的元素添加各一个内包，即添加一个子元素节点包含选中元素的所有子元素节点。
10.属性操作：
        1）$(selector).addClass(class)：向被选元素添加一个或多个类。
           $(selector).addClass(function(index,oldclass))：利用函数向被选元素添加一个或多个类。
        2）$(selector).removeAttr(attribute)：从被选元素中移除属性。
11.css操作：
        1）$(selector).css(name)：方法返回或设置匹配的元素的一个或多个样式属性；当用于返回一个值时，不支持简写的 CSS 属性；
           $(selector).css(name,value)：设置所有匹配元素的指定 CSS 属性；
           $(selector).css(name,function(index,value)):所有匹配的元素中样式属性的值。;
           $(selector).css({property:value, property:value, ...}):设置多个 CSS 属性/值对;注意一定要使用{}，各参数需要用“”包围
        2）$(selector).scrollLeft():返回第一个匹配元素的水平滚动条位置。
           $(selector).scrollTop():返回第一个匹配元素的垂直滚动条位置。
12.添加元素：我们将学习用于添加新内容的四个 jQuery 方法：详解看上面。
      append() - 在被选元素的结尾插入内容
      prepend() - 在被选元素的开头插入内容
      after() - 在被选元素之后插入内容
      before() - 在被选元素之前插入内容
13.jQuery 尺寸方法:jQuery 提供多个处理尺寸的重要方法：
    width()       方法设置或返回元素的宽度（不包括内边距、边框或外边距）。带参数时为设置宽度。
    height()      方法设置或返回元素的高度（不包括内边距、边框或外边距）。带参数时为设置高度。
    innerWidth() 方法返回元素的宽度（包括内边距）。
    innerHeight() 方法返回元素的高度（包括内边距）。
    outerWidth() 方法返回元素的宽度（包括内边距、边框）。
    outerHeight() 方法返回元素的高度（包括内边距、边框）。
    outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
    outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
14.遍历：
        1）.add()    将元素添加到匹配元素的集合中。参数可为：selector,elements,html,jQueryObject,(selector,context)
        2）.andSelf()    把堆栈中之前的元素集添加到当前集合中。
        3）.children()    获得匹配元素集合中每个元素的所有直接子元素（但是不返回文本节点）。无参数时，返回所有儿子元素。有参数时，返回选择相同。与大多数 jQuery 方法一样，
           .children()不返回文本节点；如果需要获得包含文本和注释节点在内的所有子节点，请使用 .contents()。
   4）.closest()    从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历；区别：closest（）从当前元素开始（即当前元素包含在内），找到匹配就停止，
            closest（）从父元素开始，将其所有祖先以及父类添加到一个临时的集合中，再从中找出所有的匹配元素。
   5）.contents()    获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
   6）$(selector).each(function(index,element))   对 jQuery 对象进行迭代，为每个匹配元素执行函数。
   7）.end()    结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。请注意，index 是基于零的，并且是在 jQuery 对象中引用元素的位置，而不是在 DOM 树中。找不到时为0；
   8）.eq(index)   将匹配元素集合缩减为位于指定索引的新元素。从零开始，如果为负值返回最后一个元素；
   9）.filter(selector)   将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。jQuery对象中再找。从0开始， “：even”为0,2,4,6。。。（偶数）“：odd”为1,3,5,7。。。。（奇数）

   10）.find()    获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
   11）.first()    将匹配元素集合缩减为集合中的第一个元素。
   12）.has()    将匹配元素集合缩减为包含特定元素的后代的集合。
   13）.is()    根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说，如果该函数返回 true，则 .is() 也返回 true;
   14）.last()    将匹配元素集合缩减为集合中的最后一个元素。
   15）.map()    把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
   16）.next()    获得匹配元素集合中每个元素紧邻的同辈元素。不包括自己。
   17）.nextAll()    获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
   18）.nextUntil()    获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。但不包含被参数匹配的元素;
            .nextUntil(selector,filter):下封底。
            .nextUntil(element,filter)
   19）.not()    从匹配元素集合中删除元素。参数可为selector，element，function。
   20）.offsetParent()    获得用于定位的第一个父元素。
   21）.parent()    获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。是jQuery对象，里面有多个元素。
   22）.parents()    获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。是jQuery对象，里面有多个元素。
   23）.parentsUntil()    获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。.parentsUntil(selector,filter);.parentsUntil(element,filter);但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。
   24）.prev()    获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
   25）.prevAll()    获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
   26）.prevUntil()    获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。上封顶。
   27）.siblings()    获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
   28）.slice(index1,index2)    将匹配元素集合缩减为指定范围的子集。包括前不包括后。负数的情况下表示从末尾开始匹配
15.id选择时通过正则表达式匹配，对特殊字符敏感，对于特殊字符需要在前面使用//。
16.jQuery - AJAX load() 方法:
         1)$(selector).load(URL,data,callback):load() 方法从服务器加载数据，并把返回的数据放入被选元素中。可以在URL中加入选择器。
         2）$.get(URL,callback):$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
         3)$.post(URL,data,callback)：$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
17.$.noConflict()：释放$使其他的语言也可以使用$;此时的使用方法为jQuery代替$;或者把此值赋给另一个字符集，下次用之代替；
18。
    1）bind(event,function)或者bind(event1:function,event2:function2,event3:function3...)或者bind(event,data,function):对选定的元素发生事件时执行相应的函数；
       或者：bind（“event1 event2 event3",function);
    2) selector.blur():失去焦点时发生的事件。
       selector.focus():获得焦点时发生的事件。
    3）change（）:只适用于文本域（text field），以及 textarea 和 select 元素； select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
    4）$(selector).delegate(childSelector,event,data,function)：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
    5）die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
    6）error()    触发、或将函数绑定到指定元素的 error 事件；
    7）event.result    包含由被指定事件触发的事件处理器返回的最后一个值。
    8）event.target    触发该事件的 DOM 元素。
    9)keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
    10）timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。
19.1）$(selector).data(name,value):name可以是未定义但是不能省略。返回元素添加数据。
      $(selector).data(object):
      $(selector).data(name):返回元素数据。，假如不存在则创建并使之关联。
      $(selector).removedata(name):删除数据。
   2）queue() 方法显示或操作在匹配元素上执行的函数队列。一般使用queue以后需要使用dequeue删除添加的函数队列保证后面能运行。
   3）hasDate()方法用于检查是否有匹配的任何jQuery元素。不会创建。
20. .get()    获得由选择器指定的 DOM 元素。
    .index()    返回指定元素相对于其他指定元素的 index 位置。
    .size()    返回被 jQuery 选择器匹配的元素的数量。
    .toArray()    以数组的形式返回 jQuery 选择器匹配的元素。
      当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它