zoukankan      html  css  js  c++  java
  • JQuery常用方法一览

      2 $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式
      3 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map
      4 $(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值
      5 $(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值
      6 $(”元素名称”).html(); 获得该元素内的内容(元素,文本等)
      7 $(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容
      8 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
      9 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
     10 $(”元素名称”).text(); 获得该元素的文本
     11 $(”元素名称”).text(value); 设置该元素的文本值为value
     12 $(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
     13 $(”input元素名称”).val(); 获取input元素的值
     14 $(”input元素名称”).val(value); 设置input元素的值为value
     15 Manipulation:
     16 $(”元素名称”).after(content); 在匹配元素后面添加内容
     17 $(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面
     18 $(”元素名称”).appendTo(content); 在content后接元素
     19 $(”元素名称”).before(content); 与after方法相反
     20 $(”元素名称”).clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
     21 $(”元素名称”).empty() 将该元素的内容设置为空
     22 $(”元素名称”).insertAfter(content); 将该元素插入到content之后
     23 $(”元素名称”).insertBefore(content); 将该元素插入到content之前
     24 $(”元素”).prepend(content); 将content作为该元素的一部分,放到该元素的最前面
     25 $(”元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面
     26 $(”元素”).remove(); 删除所有的指定元素
     27 $(”元素”).remove(”exp”); 删除所有含有exp的元素
     28 $(”元素”).wrap(”html”); 用html来包围该元素
     29 $(”元素”).wrap(element); 用element来包围该元素
     30 Traversing:
     31 add(expr)
     32 add(html)
     33 add(elements)
     34 children(expr)
     35 contains(str)
     36 end()
     37 filter(expression)
     38 filter(filter)
     39 find(expr)
     40 is(expr)
     41 next(expr)
     42 not(el)
     43 not(expr)
     44 not(elems)
     45 parent(expr)
     46 parents(expr)
     47 prev(expr)
     48 siblings(expr)
     49 
     50 Core:
     51 $(html).appendTo(”body”) 相当于在body中写了一段html代码
     52 $(elems) 获得DOM上的某个元素
     53 $(function(){……..}); 执行一个函数
     54 $(”div > p”).css(”border”, “1px solid gray”); 查找所有div的子节点p,添加样式
     55 $(”input:radio”, document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
     56 $.extend(prop) prop是一个jquery对象,
     57 举例:
     58 jQuery.extend({
     59 min: function(a, b) { return a < b ? a : b; },
     60 max: function(a, b) { return a > b ? a : b; }
     61 });
     62 jQuery( expression, [context] ) —$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。
     63 
     64 each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
     65 举例:1
     66 $(”span”).click(function){
     67 $(”li”).each(function(){
     68 $(this).toggleClass(”example”);
     69 });
     70 });
     71 举例:2
     72 $(”button”).click(function () {
     73 $(”div”).each(function (index, domEle) {
     74 // domEle == this
     75 $(domEle).css(”backgroundColor”, “yellow”);
     76 if ($(this).is(”#stop”)) {
     77 $(”span”).text(”Stopped at div index #” + index);
     78 return false;
     79 }
     80 });
     81 });
     82 
     83 
     84 jQuery Event:
     85 
     86 ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以
     87 有很多个函数被加载执行,按照fn的顺序来执行。
     88 bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
     89 mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
     90 keyup, error
     91 one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对
     92 象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
     93 
     94 trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
     95 triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
     96 unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
     97 $(”p”).unbind() 移除所有段落上的所有绑定的事件
     98 $(”p”).unbind( “click” ) 移除所有段落上的click事件
     99 hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
    100 $(”p”).hover(function(){
    101 $(this).addClass(”over”);
    102 },
    103 function(){
    104 $(this).addClass(”out”);
    105 }
    106 );
    107 
    108 toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
    109 $(”p”).toggle(function(){
    110 $(this).addClass(”selected”);
    111 },
    112 function(){
    113 $(this).removeClass(”selected”);
    114 }
    115 );
    116 
    117 元素事件列表说明
    118 注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
    119 事件 描述 支持元素或对象
    120 blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
    121 change( ) 用户改变域的内容 input, textarea, select
    122 click( ) 鼠标点击某个对象 几乎所有元素
    123 dblclick( ) 鼠标双击某个对象 几乎所有元素
    124 error( ) 当加载文档或图像时发生某个错误 window, img
    125 focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
    126 keydown( ) 某个键盘的键被按下 几乎所有元素
    127 keypress( ) 某个键盘的键被按下或按住 几乎所有元素
    128 keyup( ) 某个键盘的键被松开 几乎所有元素
    129 load( fn ) 某个页面或图像被完成加载 window, img
    130 mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
    131 mousemove( fn ) 鼠标被移动 几乎所有元素
    132 mouseout( fn ) 鼠标从某元素移开 几乎所有元素
    133 mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
    134 mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
    135 resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
    136 scroll( fn ) 滚动文档的可视部分时 window
    137 select( ) 文本被选定 document, input, textarea
    138 submit( ) 提交按钮被点击 form
    139 unload( fn ) 用户退出页面 window
    140 
    141 JQuery Ajax 方法说明:
    142 
    143 load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
    144 $(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中
    145 $(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
    146 alert(”The last 25 entries in the feed have been loaded”);
    147 });
    148 
    149 jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
    150 $.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
    151 alert(”Data Loaded: ” + data);
    152 });
    153 
    154 jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
    155 $.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
    156 alert(”JSON Data: ” + json.users[3].name);
    157 });
    158 
    159 jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。
    160 $.getScript(”test.js”, function(){
    161 alert(”Script loaded and executed.”);
    162 });
    163 jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
    164 
    165 ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
    166 $(”#msg”).ajaxComplete(function(request, settings){
    167 $(this).append(”<li>Request Complete.</li>”);
    168 });
    169 ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
    170 $(”#msg”).ajaxError(function(request, settings){
    171 $(this).append(”<li>Error requesting page ” + settings.url + “</li>”);
    172 });
      1 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
      2 $(”#msg”).ajaxSend(function(evt, request, settings){
      3 $(this).append(”<li<Starting request at ” + settings.url
      4 + “</li<”);
      5 });
      6 
      7 ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
      8 当AJAX请求开始(并还没有激活时)显示loading信息
      9 $(”#loading”).ajaxStart(function(){
     10 $(this).show();
     11 });
     12 
     13 ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
     14 当所有AJAX请求都停止时,隐藏loading信息。
     15 $(”#loading”).ajaxStop(function(){
     16 $(this).hide();
     17 });
     18 
     19 ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
     20 当AJAX请求成功完成时,显示信息。
     21 $(”#msg”).ajaxSuccess(function(evt, request, settings){
     22 $(this).append(”<li>Successful Request!</li>”);
     23 });
     24 
     25 jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
     26 设置默认的全局AJAX请求选项。
     27 $.ajaxSetup({
     28 url: “/xmlhttp/”,
     29 global: false,
     30 type: “POST”
     31 });
     32 $.ajax({ data: myData });
     33 
     34 serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
     35 function showValues() {
     36 var str = $(”form”).serialize();
     37 $(”#results”).text(str);
     38 }
     39 $(”:checkbox, :radio”).click(showValues);
     40 $(”select”).change(showValues);
     41 showValues();
     42 
     43 serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
     44 从form中取得一组值,显示出来
     45 function showValues() {
     46 var fields = $(”:input”).serializeArray();
     47 alert(fields);
     48 $(”#results”).empty();
     49 jQuery.each(fields, function(i, field){
     50 $(”#results”).append(field.value + ” “);
     51 });
     52 }
     53 $(”:checkbox, :radio”).click(showValues);
     54 $(”select”).change(showValues);
     55 showValues();
     56 
     57 JQuery Effects 方法说明
     58 
     59 show( ) 显示隐藏的匹配元素。
     60 show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
     61 hide( ) 隐藏所有的匹配元素。
     62 hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
     63 toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
     64 切换为可见的。
     65 slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选
     66 地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
     67 “滑动”的方式显示出来。
     68 slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地
     69 触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”
     70 的方式隐藏起来。
     71 slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回
     72 调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐
     73 藏或显示。
     74 fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触
     75 发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
     76 高度和宽度不会发生变化。
     77 fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触
     78 发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
     79 高度和宽度不会发生变化。
     80 fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成
     81 后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所
     82 有匹配的元素的高度和宽度不会发生变化。
     83 stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
     84 queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
     85 queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
     86 queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
     87 dequeue( ) 执行并移除动画序列前端的动画
     88 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
     89 animate( params, options ) 创建自定义动画的另一个方法。作用同上。
     90 
     91 JQuery Traversing 方法说明
     92 
     93 eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
     94 filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选
     95 filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
     96 is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
     97 表达式就返回true。
     98 map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
     99 not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
    100 slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
    101 add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
    102 children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器
    103 将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
    104 contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不
    105 包括文本节点),如果元素为iframe,则取得其中的文档元素
    106 find( expr ) 搜索所有与指定表达式匹配的元素。
    107 next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
    108 nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
    109 parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
    110 parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
    111 prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
    112 prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
    113 siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
    114 andSelf( ) 将前一个匹配的元素集合添加到当前的集合中
    115 取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
    116 添加background类属性
    117 $(”div”).find(”p”).andSelf().addClass(”border”);
    118 $(”div”).find(”p”).addClass(”background”);
    119 end( ) 结束当前的操作,回到当前操作的前一个操作
    120 找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
    121 $(”p”).find(”span”).end().css(”border”, “2px red solid”);
    122 
    123 JQuery Selectors 方法说明
    124 
    125 基本选择器
    126 $(”#myDiv”) 匹配唯一的具有此id值的元素
    127 $(”div”) 匹配指定名称的所有元素
    128 $(”.myClass”) 匹配具有此class样式值的所有元素
    129 $(”*”) 匹配所有元素
    130 $(”div,span,p.myClass”) 联合所有匹配的选择器
    131 层叠选择器
    132 $(”form input”) 后代选择器,选择ancestor的所有子孙节点
    133 $(”#main > *”) 子选择器,选择parent的所有子节点
    134 $(”label + input”) 临选择器,选择prev的下一个临节点
    135 $(”#prev ~ div”) 同胞选择器,选择prev的所有同胞节点
    136 基本过滤选择器
    137 $(”tr:first”) 匹配第一个选择的元素
    138 $(”tr:last”) 匹配最后一个选择的元素
    139 $(”input:not(:checked) + span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
    140 $(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)
    141 $(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始)
    142 $(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始)
    143 $(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始)
    144 $(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(从0开始)
    145 $(”:header”) 匹配所有标题
    146 $(”div:animated”) 匹配所有正在运行动画的所有元素
    147 内容过滤选择器
    148 $(”div:contains(’John’)”) 匹配含有指定文本的所有元素
    149 $(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
    150 $(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素
    151 $(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)
    152 $(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域
    153 $(”div:visible”) 匹配所有可见的元素
    154 属性过滤选择器
    155 $(”div[id]”) 匹配所有具有指定属性的元素
    156 $(”input[name=’newsletter’]”) 匹配所有具有指定属性值的元素
    157 $(”input[name!=’newsletter’]”) 匹配所有不具有指定属性值的元素
    158 $(”input[name^=’news’]”) 匹配所有指定属性值以value开头的元素
    159 $(”input[name$=’letter’]”) 匹配所有指定属性值以value结尾的元素
    160 $(”input[name*=’man’]”) 匹配所有指定属性值含有value字符的元素
    161 $(”input[id][name$=’man’]”) 匹配同时符合多个选择器的所有元素
    162 子元素过滤选择器
    163 $(”ul li:nth-child(2)”),
    164 $(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素
    165 $(”ul li:nth-child(3n + 1)”)
    166 
    167 $(”div span:first-child”) 匹配父元素的第1个子元素
    168 $(”div span:last-child”) 匹配父元素的最后1个子元素
    169 $(”div button:only-child”) 匹配父元素的唯一1个子元素
    170 表单元素选择器
    171 $(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
    172 $(”:text”) 匹配所有类型为text的input元素
    173 $(”:password”) 匹配所有类型为password的input元素
    174 $(”:radio”) 匹配所有类型为radio的input元素
    175 $(”:checkbox”) 匹配所有类型为checkbox的input元素
    176 $(”:submit”) 匹配所有类型为submit的input元素
    177 $(”:image”) 匹配所有类型为image的input元素
    178 $(”:reset”) 匹配所有类型为reset的input元素
    179 $(”:button”) 匹配所有类型为button的input元素
    180 $(”:file”) 匹配所有类型为file的input元素
    181 $(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域
    182 表单元素过滤选择器
    183 $(”:enabled”) 匹配所有可操作的表单元素
    184 $(”:disabled”) 匹配所有不可操作的表单元素
    185 $(”:checked”) 匹配所有已点选的元素
    186 $(”select option:selected”) 匹配所有已选择的元素
    187 
    188 JQuery CSS 方法说明
    189 
    190 css( name ) 访问第一个匹配元素的样式属性。
    191 css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。
    192 $(”p”).hover(function () {
    193 $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
    194 }, function () {
    195 var cssObj = {
    196 backgroundColor: “#ddd”,
    197 fontWeight: “”,
    198 color: “rgb(0,40,244)”
    199 }
    200 $(this).css(cssObj);
    201 });
    202 css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
    203 offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
    204 top和left,属性值为整数。这个函数只能用于可见元素。
    205 var p = $(”p:last”);
    206 var offset = p.offset();
    207 p.html( “left: ” + offset.left + “, top: ” + offset.top );
    208 width( ) 取得当前第一匹配的元素的宽度值,
    209 width( val ) 为每个匹配的元素设置指定的宽度值。
    210 height( ) 取得当前第一匹配的元素的高度值,
    211 height( val ) 为每个匹配的元素设置指定的高度值。
    212 
    213 JQuery Utilities 方法说明
    214 jQuery.browser
    215 .msie 表示ie
    216 jQuery.browser.version 读取用户浏览器的版本信息
    217 jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型
    218 jQuery.isFunction( obj ) 检测传递的参数是否为function
    219 function stub() { }
    220 var objs = [
    221 function () {},
    222 { x:15, y:20 },
    223 null,
    224 stub,
    225function226 ];
    227 jQuery.each(objs, function (i) {
    228 var isFunc = jQuery.isFunction(objs[i]);
    229 $(”span:eq( ” + i + “)”).text(isFunc);
    230 });
    231 jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
    232 jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
    233 jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的
    234 工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的
    235 原型链方式。
    236 合并settings和options对象,返回修改后的settings对象
    237 var settings = { validate: false, limit: 5, name: “foo” };
    238 var options = { validate: true, name: “bar” };
    239 jQuery.extend(settings, options);
    240 
    241 合并defaults和options对象,defaults对象并没有被修改。options对象中的值
    242 代替了defaults对象的值传递给了empty。
    243 
    244 var empty = {}
    245 var defaults = { validate: false, limit: 5, name: “foo” };
    246 var options = { validate: true, name: “bar” };
    247 var settings = $.extend(empty, defaults, options);
    248 jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
    249 $.grep( [0,1,2], function(n,i){
    250 return n > 0;
    251 });
    252 jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组
    253 将选取的div元素集合转化为一个数组
    254 var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
    255 arr.reverse(); // use an Array method on list of dom elements
    256 $(arr).appendTo(document.body);
    257 jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
    258 jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回-1
    259 jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组
      1 1、关于页面元素的引用
      2 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
      3 
      4 2、jQuery对象与dom对象的转换
      5 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。
      6 普通的dom对象一般可以通过$()转换成jquery对象。
      7 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
      8 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
      9 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
     10 以下几种写法都是正确的:
     11 $("#msg").html();
     12 $("#msg")[0].innerHTML;
     13 $("#msg").eq(0)[0].innerHTML;
     14 $("#msg").get(0).innerHTML;
     15 
     16 3、如何获取jQuery集合的某一项
     17 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
     18 $("div").eq(2).html(); //调用jquery对象的方法
     19 $("div").get(2).innerHTML; //调用dom的方法属性
     20 
     21 4、同一函数实现set和get
     22 Jquery中的很多方法都是如此,主要包括如下几个:
     23 $("#msg").html(); //返回id为msg的元素节点的html内容。
     24 $("#msg").html("<b>new content</b>");
     25 //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
     26 
     27 $("#msg").text(); //返回id为msg的元素节点的文本内容。
     28 $("#msg").text("<b>new content</b>");
     29 //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
     30 
     31 $("#msg").height(); //返回id为msg的元素的高度
     32 $("#msg").height("300"); //将id为msg的元素的高度设为300
     33 $("#msg").width(); //返回id为msg的元素的宽度
     34 $("#msg").width("300"); //将id为msg的元素的宽度设为300
     35 
     36 $("input").val("); //返回表单输入框的value值
     37 $("input").val("test"); //将表单输入框的value值设为test
     38 
     39 $("#msg").click(); //触发id为msg的元素的单击事件
     40 $("#msg").click(fn); //为id为msg的元素单击事件添加函数
     41 同样blur,focus,select,submit事件都可以有着两种调用方法
     42 
     43 5、集合处理功能
     44 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
     45 包括两种形式:
     46 $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
     47 //为索引分别为0,1,2的p元素分别设定不同的字体颜色。
     48 
     49 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
     50 //实现表格的隔行换色效果
     51 
     52 $("p").click(function(){alert($(this).html())})   
     53 //为每个p元素增加了click事件,单击某个p元素则弹出其内容
     54 
     55 6、扩展我们需要的功能
     56 $.extend({
     57 min: function(a, b){return a < b?a:b; },
     58 max: function(a, b){return a > b?a:b; }
     59 }); //为jquery扩展了min,max两个方法
     60 使用扩展的方法(通过“$.方法名”调用):
     61 alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
     62 
     63 7、支持方法的连写
     64 所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
     65 例如:
     66 $("p").click(function(){alert($(this).html())})
     67 .mouseover(function(){alert('mouse over event')})
     68 .each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
     69 
     70 8、操作元素的样式
     71 主要包括以下几种方式:
     72 $("#msg").css("background"); //返回元素的背景颜色
     73 $("#msg").css("background","#ccc") //设定元素背景为灰色
     74 $("#msg").height(300); $("#msg").width("200"); //设定宽高
     75 $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
     76 $("#msg").addClass("select"); //为元素增加名称为select的class
     77 $("#msg").removeClass("select"); //删除元素名称为select的class
     78 $("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
     79 
     80 9、完善的事件处理功能
     81 Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
     82 如:
     83 $("#msg").click(function(){alert("good")}) //为元素添加了单击事件
     84 $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
     85 //为三个不同的p元素单击事件分别设定不同的处理
     86 jQuery中几个自定义的事件:
     87 (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
     88 //当鼠标放在表格的某行上时将class置为over,离开时置为out。
     89 $("tr").hover(function(){
     90 $(this).addClass("over");
     91 },
     92 function(){
     93 $(this).addClass("out");
     94 });
     95 (2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
     96 $(document).ready(function(){alert("Load Success")})
     97 //页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
     98 (3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
     99 //每次点击时轮换添加和删除名为selected的class。
    100 $("p").toggle(function(){
    101   $(this).addClass("selected");
    102 },function(){
    103   $(this).removeClass("selected");
    104 });
    105 (4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
    106 例如:
    107 $("p").trigger("click"); //触发所有p元素的click事件
    108 (5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
    109 从每一个匹配的元素中(添加)删除绑定的事件。
    110 例如:
    111 $("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
    112 $("p").unbind(); //删除所有p元素上的所有事件
    113 $("p").unbind("click") //删除所有p元素上的单击事件
    114 
    115 10、几个实用特效功能
    116 其中toggle()和slidetoggle()方法提供了状态切换功能。
    117 如toggle()方法包括了hide()和show()方法。
    118 slideToggle()方法包括了slideDown()和slideUp方法。
    119 
    120 11、几个有用的jQuery方法
    121 $.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
    122 $.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。
    123 124 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
    125 等价于:
    126 var tempArr=[0,1,2];
    127 for(var i=0;i<tempArr.length;i++){
    128 alert("Item #"+i+": "+tempArr[ i ]);
    129 }
    130 也可以处理json数据,如
    131 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
    132 结果为:
    133 Name:name, Value:John
    134 Name:lang, Value:JS
    135 $.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
    136 如:
    137 $.extend(settings, options);
    138 //合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在 setting中。
    139 var settings = $.extend({}, defaults, options);
    140 //合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
    141 可以有多个参数(合并多项并返回)
    142 $.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
    143 如:
    144 var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
    145 tempArr内容为:[4,5,6]
    146 var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
    147 tempArr内容为:[2,3]
    148 $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
    149 如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
    150 $.trim(str):删除字符串两端的空白字符。
    151 如:$.trim(" hello, how are you? "); //返回"hello,how are you? "
    152 
    153 12、解决自定义方法或其他类库与jQuery的冲突
    154 很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
    155 使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
    156 如:
    157 jQuery.noConflict();
    158 // 开始使用jQuery
    159 jQuery("div p").hide();
    160 // 使用其他库的 $()
    161 $("content").style.display = 'none';
      1 $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式
      2 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map
      3 $(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值
      4 $(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值
      5 $(”元素名称”).html(); 获得该元素内的内容(元素,文本等)
      6 $(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容
      7 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
      8 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
      9 $(”元素名称”).text(); 获得该元素的文本
     10 $(”元素名称”).text(value); 设置该元素的文本值为value
     11 $(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
     12 $(”input元素名称”).val(); 获取input元素的值
     13 $(”input元素名称”).val(value); 设置input元素的值为value
     14 Manipulation:
     15 $(”元素名称”).after(content); 在匹配元素后面添加内容
     16 $(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面
     17 $(”元素名称”).appendTo(content); 在content后接元素
     18 $(”元素名称”).before(content); 与after方法相反
     19 $(”元素名称”).clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
     20 $(”元素名称”).empty() 将该元素的内容设置为空
     21 $(”元素名称”).insertAfter(content); 将该元素插入到content之后
     22 $(”元素名称”).insertBefore(content); 将该元素插入到content之前
     23 $(”元素”).prepend(content); 将content作为该元素的一部分,放到该元素的最前面
     24 $(”元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面
     25 $(”元素”).remove(); 删除所有的指定元素
     26 $(”元素”).remove(”exp”); 删除所有含有exp的元素
     27 $(”元素”).wrap(”html”); 用html来包围该元素
     28 $(”元素”).wrap(element); 用element来包围该元素
     29 Traversing:
     30 add(expr)
     31 add(html)
     32 add(elements)
     33 children(expr)
     34 contains(str)
     35 end()
     36 filter(expression)
     37 filter(filter)
     38 find(expr)
     39 is(expr)
     40 next(expr)
     41 not(el)
     42 not(expr)
     43 not(elems)
     44 parent(expr)
     45 parents(expr)
     46 prev(expr)
     47 siblings(expr)
     48 
     49 Core:
     50 $(html).appendTo(”body”) 相当于在body中写了一段html代码
     51 $(elems) 获得DOM上的某个元素
     52 $(function(){……..}); 执行一个函数
     53 $(”div > p”).css(”border”, “1px solid gray”); 查找所有div的子节点p,添加样式
     54 $(”input:radio”, document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
     55 $.extend(prop) prop是一个jquery对象,
     56 举例:
     57 jQuery.extend({
     58 min: function(a, b) { return a < b ? a : b; },
     59 max: function(a, b) { return a > b ? a : b; }
     60 });
     61 jQuery( expression, [context] ) —$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。
     62 
     63 each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
     64 举例:1
     65 $(”span”).click(function){
     66 $(”li”).each(function(){
     67 $(this).toggleClass(”example”);
     68 });
     69 });
     70 举例:2
     71 $(”button”).click(function () {
     72 $(”div”).each(function (index, domEle) {
     73 // domEle == this
     74 $(domEle).css(”backgroundColor”, “yellow”);
     75 if ($(this).is(”#stop”)) {
     76 $(”span”).text(”Stopped at div index #” + index);
     77 return false;
     78 }
     79 });
     80 });
     81 
     82 
     83 jQuery Event:
     84 
     85 ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以
     86 有很多个函数被加载执行,按照fn的顺序来执行。
     87 bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
     88 mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
     89 keyup, error
     90 one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对
     91 象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
     92 
     93 trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
     94 triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
     95 unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
     96 $(”p”).unbind() 移除所有段落上的所有绑定的事件
     97 $(”p”).unbind( “click” ) 移除所有段落上的click事件
     98 hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
     99 $(”p”).hover(function(){
    100 $(this).addClass(”over”);
    101 },
    102 function(){
    103 $(this).addClass(”out”);
    104 }
    105 );
    106 
    107 toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
    108 $(”p”).toggle(function(){
    109 $(this).addClass(”selected”);
    110 },
    111 function(){
    112 $(this).removeClass(”selected”);
    113 }
    114 );
    115 
    116 元素事件列表说明
    117 注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
    118 事件 描述 支持元素或对象
    119 blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
    120 change( ) 用户改变域的内容 input, textarea, select
    121 click( ) 鼠标点击某个对象 几乎所有元素
    122 dblclick( ) 鼠标双击某个对象 几乎所有元素
    123 error( ) 当加载文档或图像时发生某个错误 window, img
    124 focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
    125 keydown( ) 某个键盘的键被按下 几乎所有元素
    126 keypress( ) 某个键盘的键被按下或按住 几乎所有元素
    127 keyup( ) 某个键盘的键被松开 几乎所有元素
    128 load( fn ) 某个页面或图像被完成加载 window, img
    129 mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
    130 mousemove( fn ) 鼠标被移动 几乎所有元素
    131 mouseout( fn ) 鼠标从某元素移开 几乎所有元素
    132 mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
    133 mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
    134 resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
    135 scroll( fn ) 滚动文档的可视部分时 window
    136 select( ) 文本被选定 document, input, textarea
    137 submit( ) 提交按钮被点击 form
    138 unload( fn ) 用户退出页面 window
    139 
    140 JQuery Ajax 方法说明:
    141 
    142 load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
    143 $(”#feeds”).load(”feeds.html”); 将feeds.html文件载入到id为feeds的div中
    144 $(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
    145 alert(”The last 25 entries in the feed have been loaded”);
    146 });
    147 
    148 jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
    149 $.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
    150 alert(”Data Loaded: ” + data);
    151 });
    152 
    153 jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
    154 $.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
    155 alert(”JSON Data: ” + json.users[3].name);
    156 });
    157 
    158 jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。
    159 $.getScript(”test.js”, function(){
    160 alert(”Script loaded and executed.”);
    161 });
    162 jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
    163 
    164 ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
    165 $(”#msg”).ajaxComplete(function(request, settings){
    166 $(this).append(”<li>Request Complete.</li>”);
    167 });
    168 ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
    169 $(”#msg”).ajaxError(function(request, settings){
    170 $(this).append(”<li>Error requesting page ” + settings.url + “</li>”);
    171 });
      1 代码
      2 
      3 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
      4 $(”#msg”).ajaxSend(function(evt, request, settings){
      5 $(this).append(”<li<Starting request at ” + settings.url
      6 + “</li<”);
      7 });
      8 
      9 ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件
     10 当AJAX请求开始(并还没有激活时)显示loading信息
     11 $(”#loading”).ajaxStart(function(){
     12 $(this).show();
     13 });
     14 
     15 ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
     16 当所有AJAX请求都停止时,隐藏loading信息。
     17 $(”#loading”).ajaxStop(function(){
     18 $(this).hide();
     19 });
     20 
     21 ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件
     22 当AJAX请求成功完成时,显示信息。
     23 $(”#msg”).ajaxSuccess(function(evt, request, settings){
     24 $(this).append(”<li>Successful Request!</li>”);
     25 });
     26 
     27 jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
     28 设置默认的全局AJAX请求选项。
     29 $.ajaxSetup({
     30 url: “/xmlhttp/”,
     31 global: false,
     32 type: “POST”
     33 });
     34 $.ajax({ data: myData });
     35 
     36 serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
     37 function showValues() {
     38 var str = $(”form”).serialize();
     39 $(”#results”).text(str);
     40 }
     41 $(”:checkbox, :radio”).click(showValues);
     42 $(”select”).change(showValues);
     43 showValues();
     44 
     45 serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
     46 从form中取得一组值,显示出来
     47 function showValues() {
     48 var fields = $(”:input”).serializeArray();
     49 alert(fields);
     50 $(”#results”).empty();
     51 jQuery.each(fields, function(i, field){
     52 $(”#results”).append(field.value + ” “);
     53 });
     54 }
     55 $(”:checkbox, :radio”).click(showValues);
     56 $(”select”).change(showValues);
     57 showValues();
     58 
     59 JQuery Effects 方法说明
     60 
     61 show( ) 显示隐藏的匹配元素。
     62 show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
     63 hide( ) 隐藏所有的匹配元素。
     64 hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
     65 toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
     66 切换为可见的。
     67 slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选
     68 地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以
     69 “滑动”的方式显示出来。
     70 slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地
     71 触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”
     72 的方式隐藏起来。
     73 slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回
     74 调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐
     75 藏或显示。
     76 fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触
     77 发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
     78 高度和宽度不会发生变化。
     79 fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触
     80 发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的
     81 高度和宽度不会发生变化。
     82 fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成
     83 后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所
     84 有匹配的元素的高度和宽度不会发生变化。
     85 stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
     86 queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
     87 queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
     88 queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
     89 dequeue( ) 执行并移除动画序列前端的动画
     90 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
     91 animate( params, options ) 创建自定义动画的另一个方法。作用同上。
     92 
     93 JQuery Traversing 方法说明
     94 
     95 eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
     96 filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选
     97 filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
     98 is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
     99 表达式就返回true。
    100 map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
    101 not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
    102 slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
    103 add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
    104 children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器
    105 将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
    106 contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不
    107 包括文本节点),如果元素为iframe,则取得其中的文档元素
    108 find( expr ) 搜索所有与指定表达式匹配的元素。
    109 next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
    110 nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
    111 parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
    112 parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
    113 prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
    114 prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
    115 siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
    116 andSelf( ) 将前一个匹配的元素集合添加到当前的集合中
    117 取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
    118 添加background类属性
    119 $(”div”).find(”p”).andSelf().addClass(”border”);
    120 $(”div”).find(”p”).addClass(”background”);
    121 end( ) 结束当前的操作,回到当前操作的前一个操作
    122 找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性
    123 $(”p”).find(”span”).end().css(”border”, “2px red solid”);
    124 
    125 JQuery Selectors 方法说明
    126 
    127 基本选择器
    128 $(”#myDiv”) 匹配唯一的具有此id值的元素
    129 $(”div”) 匹配指定名称的所有元素
    130 $(”.myClass”) 匹配具有此class样式值的所有元素
    131 $(”*”) 匹配所有元素
    132 $(”div,span,p.myClass”) 联合所有匹配的选择器
    133 层叠选择器
    134 $(”form input”) 后代选择器,选择ancestor的所有子孙节点
    135 $(”#main > *”) 子选择器,选择parent的所有子节点
    136 $(”label + input”) 临选择器,选择prev的下一个临节点
    137 $(”#prev ~ div”) 同胞选择器,选择prev的所有同胞节点
    138 基本过滤选择器
    139 $(”tr:first”) 匹配第一个选择的元素
    140 $(”tr:last”) 匹配最后一个选择的元素
    141 $(”input:not(:checked) + span”)从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
    142 $(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)
    143 $(”tr:odd”) 匹配集合中奇数位置的所有元素(从0开始)
    144 $(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始)
    145 $(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始)
    146 $(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(从0开始)
    147 $(”:header”) 匹配所有标题
    148 $(”div:animated”) 匹配所有正在运行动画的所有元素
    149 内容过滤选择器
    150 $(”div:contains(’John’)”) 匹配含有指定文本的所有元素
    151 $(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)
    152 $(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素
    153 $(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)
    154 $(”div:hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域
    155 $(”div:visible”) 匹配所有可见的元素
    156 属性过滤选择器
    157 $(”div[id]”) 匹配所有具有指定属性的元素
    158 $(”input[name=’newsletter’]”) 匹配所有具有指定属性值的元素
    159 $(”input[name!=’newsletter’]”) 匹配所有不具有指定属性值的元素
    160 $(”input[name^=’news’]”) 匹配所有指定属性值以value开头的元素
    161 $(”input[name$=’letter’]”) 匹配所有指定属性值以value结尾的元素
    162 $(”input[name*=’man’]”) 匹配所有指定属性值含有value字符的元素
    163 $(”input[id][name$=’man’]”) 匹配同时符合多个选择器的所有元素
    164 子元素过滤选择器
    165 $(”ul li:nth-child(2)”),
    166 $(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素
    167 $(”ul li:nth-child(3n + 1)”)
    168 
    169 $(”div span:first-child”) 匹配父元素的第1个子元素
    170 $(”div span:last-child”) 匹配父元素的最后1个子元素
    171 $(”div button:only-child”) 匹配父元素的唯一1个子元素
    172 表单元素选择器
    173 $(”:input”) 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
    174 $(”:text”) 匹配所有类型为text的input元素
    175 $(”:password”) 匹配所有类型为password的input元素
    176 $(”:radio”) 匹配所有类型为radio的input元素
    177 $(”:checkbox”) 匹配所有类型为checkbox的input元素
    178 $(”:submit”) 匹配所有类型为submit的input元素
    179 $(”:image”) 匹配所有类型为image的input元素
    180 $(”:reset”) 匹配所有类型为reset的input元素
    181 $(”:button”) 匹配所有类型为button的input元素
    182 $(”:file”) 匹配所有类型为file的input元素
    183 $(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域
    184 表单元素过滤选择器
    185 $(”:enabled”) 匹配所有可操作的表单元素
    186 $(”:disabled”) 匹配所有不可操作的表单元素
    187 $(”:checked”) 匹配所有已点选的元素
    188 $(”select option:selected”) 匹配所有已选择的元素
    189 
    190 JQuery CSS 方法说明
    191 
    192 css( name ) 访问第一个匹配元素的样式属性。
    193 css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。
    194 $(”p”).hover(function () {
    195 $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
    196 }, function () {
    197 var cssObj = {
    198 backgroundColor: “#ddd”,
    199 fontWeight: “”,
    200 color: “rgb(0,40,244)”
    201 }
    202 $(this).css(cssObj);
    203 });
    204 css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
    205 offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
    206 top和left,属性值为整数。这个函数只能用于可见元素。
    207 var p = $(”p:last”);
    208 var offset = p.offset();
    209 p.html( “left: ” + offset.left + “, top: ” + offset.top );
    210 width( ) 取得当前第一匹配的元素的宽度值,
    211 width( val ) 为每个匹配的元素设置指定的宽度值。
    212 height( ) 取得当前第一匹配的元素的高度值,
    213 height( val ) 为每个匹配的元素设置指定的高度值。
    214 
    215 JQuery Utilities 方法说明
    216 jQuery.browser
    217 .msie 表示ie
    218 jQuery.browser.version 读取用户浏览器的版本信息
    219 jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型
    220 jQuery.isFunction( obj ) 检测传递的参数是否为function
    221 function stub() { }
    222 var objs = [
    223 function () {},
    224 { x:15, y:20 },
    225 null,
    226 stub,
    227function228 ];
    229 jQuery.each(objs, function (i) {
    230 var isFunc = jQuery.isFunction(objs[i]);
    231 $(”span:eq( ” + i + “)”).text(isFunc);
    232 });
    233 jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
    234 jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
    235 jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的
    236 工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的
    237 原型链方式。
    238 合并settings和options对象,返回修改后的settings对象
    239 var settings = { validate: false, limit: 5, name: “foo” };
    240 var options = { validate: true, name: “bar” };
    241 jQuery.extend(settings, options);
    242 
    243 合并defaults和options对象,defaults对象并没有被修改。options对象中的值
    244 代替了defaults对象的值传递给了empty。
    245 
    246 var empty = {}
    247 var defaults = { validate: false, limit: 5, name: “foo” };
    248 var options = { validate: true, name: “bar” };
    249 var settings = $.extend(empty, defaults, options);
    250 jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
    251 $.grep( [0,1,2], function(n,i){
    252 return n > 0;
    253 });
    254 jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组
    255 将选取的div元素集合转化为一个数组
    256 var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
    257 arr.reverse(); // use an Array method on list of dom elements
    258 $(arr).appendTo(document.body);
    259 jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
    260 jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回-1
    261 jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组
  • 相关阅读:
    (14) go 结构体
    (13) go map
    (12) go make初始化
    (11)go 数组和切片
    (10) go 错误
    (9) go 时间日期
    (8)go 字符串
    (7) go 函数
    (6) go 流程控制
    (5) go 格式化输入输出 类型转换
  • 原文地址:https://www.cnblogs.com/X-Jonney/p/5590545.html
Copyright © 2011-2022 走看看