• 1. JQuery快速入门
  • 2. 讲座内容1、jQuery是什么 2、jQuery核心函数 3、jQuery对象访问 4、jQuery选择器使用 5、 jQuery属性的使用 6、jQuery筛选2
  • 3. 官方解释: jQuery是一个以前未曾有过的JavaScript库。 他快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。 jQuery是为了改变JavaScript的编写方式而设计的。 他适合所有人:设计师、开发人员、极客、商业应用... 体积小:26.5KB(1.2.1压缩版),45.3KB(1.2.1精简版),78.6KB(1.2.1完整版)...20.7KB(1.1.2压缩版),57.9KB(1.1.2完整版) 兼容性:支持CSS 1-3和基本的XPath 跨浏览器:IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+(向后兼容) 3
  • 4. 一、jQuery核心函数 jQuery(expression,[context]) jQuery(elements) jQuery(callback)4
  • 5. jQuery(expression,[context]) 说明: 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。 返回值 jQuery5
  • 6. 示例2 在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码:$("input:radio", document.forms[0]); 在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。 jQuery 代码: $("div", xml.responseXML); Demo26
  • 7. 参数 expression (String) : 用来查找的字符串 context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象 示例1 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 HTML 代码:

    one

    two

    three

    jQuery 代码:$("div > p"); 结果:[

    two

    ] Demo17
  • 8. jQuery(elements) 将一个或多个DOM元素转化为jQuery对象。 这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。 返回值 jQuery 参数 elements (Element, Array) : 用于封装成jQuery对象的DOM元素 示例 设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); 隐藏一个表单中所有元素。 jQuery 代码:$(myForm.elements).hide() 8
  • 9. jQuery(callback) $(document).ready()的简写。 允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 返回值 jQuery 参数 callback (Function) : 当DOM加载完成后要执行的函数 示例 当DOM加载完成后,执行其中的函数。 jQuery 代码: $(function(){ // 文档就绪 }); 9
  • 10. 2、jQuery对象访问 each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。 而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 返回值 jQuery 参数 callback (Function) : 对于每个匹配的元素所要执行的函数10
  • 11. 示例 迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: jQuery 代码: $("img").each(function(i){    this.src = "test" + i + ".jpg";  }); Demo311
  • 12. 如果你想得到 jQuery对象,可以使用 $(this) 函数。 jQuery 代码: $("img").each(function(){   $(this).toggleClass("example"); }); 12
  • 13. 你可以使用 'return' 来提前跳出 each() 循环。 HTML 代码:
    Stop here
    jQuery 代码: $("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });13
  • 14. size() 、length() jQuery 对象中元素的个数。 这个函数的返回值与 jQuery 对象的'length' 属性一致。 返回值 Number 示例 计算文档中所有图片数量 HTML 代码: jQuery 代码: $("img").size(); 结果: 2 14
  • 15. get() 取得所有匹配的 DOM 元素集合。 这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。 如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。 返回值 Array 示例 选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。 HTML 代码: jQuery 代码: $("img").get().reverse(); 结果: [ ] 15
  • 16. get(index) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。 返回值 Element 参数 index (Number) :取得第 index 个位置上的元素 示例 HTML 代码: jQuery 代码: $("img").get(0); 结果: [ ] 16
  • 17. 二、属性 1、基本 #id 根据给定的ID匹配一个元素。 返回值 Element 参数 id (String) : 用于搜索的,通过元素的 id 属性中给定的值 示例 查找 ID 为"myDiv"的元素。 HTML 代码:

    id="notMe"

    id="myDiv"
    jQuery 代码: $("#myDiv"); 结果: [
    id="myDiv"
    ] 17
  • 18. element 根据给定的元素名匹配所有元素 返回值 Array 参数 element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。 示例 查找一个 DIV 元素。 HTML 代码:
    DIV1
    DIV2
    SPAN jQuery 代码: $("div"); 结果: [
    DIV1
    ,
    DIV2
    ] 18
  • 19. class 根据给定的类匹配元素。 返回值 Array 参数 class (String) : 一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。 示例 查找所有类是 "myClass" 的元素. HTML 代码:
    div class="notMe"
    div class="myClass"
    span class="myClass" jQuery 代码: $(".myClass"); 结果: [
    div class="myClass"
    , span class="myClass" ] 19
  • 20. 2.层级 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 返回值 Array 参数 ancestor (Selector) : 任何有效选择器 descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素 示例 找到表单中所有的 input 元素 HTML 代码:
         
                 
    jQuery 代码: $("form input") 结果: [ , ] 20
  • 21. parent > child 在给定的父元素下匹配所有的子元素 返回值 Array 参数 parent (Selector) : 任何有效选择器 child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 匹配表单中所有的子级input元素。 HTML 代码:
         
                 
    jQuery 代码: $("form > input") 结果: [ ] 21
  • 22. prev + next 匹配所有紧接在 prev 元素后的 next 元素 返回值 Array 参数 prev (Selector) : 任何有效选择器 next (Selector) :一个有效选择器并且紧接着第一个选择器 示例 匹配所有跟在 label 后面的 input 元素 HTML 代码:
         
                 
    jQuery 代码: $("label + input") 结果: [ , ] 22
  • 23. prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 返回值 Array 参数 prev (Selector) : 任何有效选择器 siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈 示例 找到所有与表单同辈的 input 元素 HTML 代码:
         
                 
    jQuery 代码: $("form ~ input") 结果: [ ] 23
  • 24. 三、内容 :contains(text) 匹配包含给定文本的元素 返回值 Array 参数 text (String) : 一个用以查找的字符串 示例 查找所有包含 "John" 的 div 元素 HTML 代码:
    John Resig
    George Martin
    Malcom John Sinclair
    J. Ohn
    jQuery 代码: $("div:contains('John')") 结果: [
    John Resig
    ,
    Malcom John Sinclair
    ] Demo524
  • 25. :empty 匹配所有不包含子元素或者文本的空元素 返回值 Array 示例 查找所有不包含子元素或者文本的空元素 HTML 代码:    
    Value 1
    Value 2
    jQuery 代码: $("td:empty") 结果: [ , ] 25
  • 26. :has(selector) 匹配含有选择器所匹配的元素的元素 返回值 Array 参数 selector (Selector) : 一个用于筛选的选择器 示例 给所有包含 p 元素的 div 元素添加一个 test 类 HTML 代码:

    Hello

    Hello again!
    jQuery 代码: $("div:has(p)").addClass("test"); 结果: [

    Hello

    ] 26
  • 27. :parent 匹配含有子元素或者文本的元素 返回值 Array 示例 查找所有含有子元素或者文本的 td 元素 HTML 代码:    
    Value 1
    Value 2
    jQuery 代码: $("td:parent") 结果: [ Value 1, Value 2 ] Demo627
  • 28. 四: 属性 [attribute] 匹配包含给定属性的元素 返回值 Array 参数 attribute (String) : 属性名 示例 查找所有含有 id 属性的 div 元素 HTML 代码:
     

    Hello!

    jQuery 代码: $("div[id]") 结果: [
    ] 28
  • 29. [attribute=value] 匹配给定的属性是某个特定值的元素 返回值 Array 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: jQuery 代码: $("input[name='newsletter']").attr("checked", true); 结果: [ , ] 29
  • 30. [attribute!=value] 匹配给定的属性是不包含某个特定值的元素 返回值 Array 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 属性不是 newsletter 的 input 元素 HTML 代码: jQuery 代码: $("input[name!='newsletter']").attr("checked", true); 结果: [ ] 30
  • 31. [attribute^=value] 匹配给定的属性是以某些值开始的元素 返回值 Array 参数 attribute (String) : 属性名 value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 以 'news' 开始的 input 元素 HTML 代码: jQuery 代码: $("input[name^='news']") 结果: [ , ] 31
  • 32. [attribute$=value] 匹配给定的属性是以某些值结尾的元素 返回值 Array 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 以 'letter' 结尾的 input 元素 HTML 代码: jQuery 代码: $("input[name$='letter']") 结果: [ , ] 32
  • 33. [attribute*=value] 匹配给定的属性是以包含某些值的元素 返回值 Array 参数 attribute (String) : 属性名 value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。 示例 查找所有 name 包含 'man' 的 input 元素 HTML 代码: jQuery 代码: $("input[name*='man']") 结果: [ , , ] 33
  • 34. [selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用。 返回值 Array 参数 selector1 (Selector) : 属性选择器 selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围 selectorN (Selector) : 任意多个属性选择器 示例 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的 HTML 代码: jQuery 代码: $("input[id][name$='man']") 结果: [ ] 34
  • 35. 五、子元素 :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) 返回值 Array 参数 index (Number) : 要匹配元素的序号,从1开始 35
  • 36. 示例 在每个 ul 查找第 2 个li HTML 代码:
       
    • John
    •  
    • Karl
    •  
    • Brandon
       
    • Glen
    •  
    • Tane
    •  
    • Ralph
    jQuery 代码: $("ul li:nth-child(2)") 结果: [
  • Karl
  • ,  
  • Tane
  • ]36
  • 37. :first-child 匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 返回值 Array 示例 在每个 ul 中查找第一个 li HTML 代码:
       
    • John
    •  
    • Karl
    •  
    • Brandon
       
    • Glen
    •  
    • Tane
    •  
    • Ralph
    jQuery 代码: $("ul li:first-child") 结果: [
  • John
  • ,
  • Glen
  • ] 37
  • 38. :last-child 匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 返回值 Array 示例 在每个 ul 中查找最后一个 li HTML 代码:
       
    • John
    •  
    • Karl
    •  
    • Brandon
       
    • Glen
    •  
    • Tane
    •  
    • Ralph
    jQuery 代码: $("ul li:last-child") 结果: [
  • Brandon
  • ,
  • Ralph
  • ] 38
  • 39. :only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 返回值 Array 示例 在 ul 中查找是唯一子元素的 li HTML 代码:
       
    • John
    •  
    • Karl
    •  
    • Brandon
       
    • Glen
    jQuery 代码: $("ul li:only-child") 结果: [
  • Glen
  • ]39
  • 40. 六、表单 :text 匹配所有的单行文本框 返回值 Array 示例 查找所有文本框 HTML 代码:
                           
    jQuery 代码: $(":text") 结果: [ ] 40
  • 41. 其余的标签如: Input 、text、password、radio、checkbox、submit、 Image、reset、button、file、hidden 用法基本同上!!41
  • 42. 七、表单对象属性 :enabled 匹配所有可用元素 返回值 Array 示例 查找所有可用的input元素 HTML 代码:
       
    jQuery 代码: $("input:enabled") 结果: [ ] 42
  • 43. :disabled 匹配所有不可用元素 返回值 Array 示例 查找所有不可用的input元素 HTML 代码:
       
    jQuery 代码: $("input:disabled") 结果: [ ] 43
  • 44. :checked 匹配所有选中的复选框元素 返回值 Array 示例 查找所有选中的复选框元素 HTML 代码:
         
    jQuery 代码: $("input:checked") 结果: [ , ] 44
  • 45. :selected 匹配所有选中的选项元素 返回值 Array 示例1 查找所有选中的选项元素 HTML 代码: jQuery 代码: $("select option:selected") 结果: [ ] 45
  • 46. 示例2 HTML 代码: jQuery 代码: $("select option:selected") 结果: [ , ] 46
  • 47. 八、属性 8.1 属性 attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。 返回值 Object 参数 name (String) : 属性名称 示例 返回文档中第一个图像的src属性值。 HTML 代码: jQuery 代码: $("img").attr("src"); 结果: test.jpg 47
  • 48. attr(key,value) 为所有匹配的元素设置一个属性值。 返回值 jQuery 参数 key (String) : 属性名称 value (Object) : 属性值 示例 为所有图像设置src属性。 HTML 代码: jQuery 代码: $("img").attr("src","test.jpg"); 结果: [ , ] 48
  • 49. attr(key,fn) 为所有匹配的元素设置一个计算的属性值。 不提供值,而是提供一个函数,由这个函数计算的值作为属性值。 返回值 jQuery 参数 key (String) : 属性名称 fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值 示例 把src属性的值设置为title属性的值。 HTML 代码: jQuery 代码: $("img").attr("title", function() { return this.src }); 结果: 49
  • 50. removeAttr(name) 从每一个匹配的元素中删除一个属性 返回值 jQuery 参数 name (String) : 要删除的属性名 示例 将文档中图像的src属性删除 HTML 代码: jQuery 代码: $("img").removeAttr("src"); 结果: [ ] 50
  • 51. 8.2、类 addClass(class) 为每个匹配的元素添加指定的类名。 返回值 jQuery 参数 class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开 示例 为匹配的元素加上 'selected' 类 HTML 代码:

    Hello

    jQuery 代码: $("p").addClass("selected"); 结果: [

    Hello

    ] 为匹配的元素加上 selected highlight 类 HTML 代码:

    Hello

    jQuery 代码: $("p").addClass("selected highlight"); 结果: [

    Hello

    ] 51
  • 52. removeClass(class) 从所有匹配的元素中删除全部或者指定的类。 返回值 jQuery 参数 class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开 示例 从匹配的元素中删除 'selected' 类 HTML 代码:

    Hello

    jQuery 代码: $("p").removeClass("selected"); 结果: [

    Hello

    ] 删除匹配元素的所有类 HTML 代码:

    Hello

    jQuery 代码: $("p").removeClass(); 结果: [

    Hello

    ] 52
  • 53. toggleClass(class) 如果存在(不存在)就删除(添加)一个类。 返回值 jQuery 参数 class (String) :CSS类名 示例 为匹配的元素切换 'selected' 类 HTML 代码:

    Hello

    Hello Again

    jQuery 代码: $("p").toggleClass("selected"); 结果: [

    Hello

    ,

    Hello Again

    ] DEMO753
  • 54. 8.3、 HTML代码 html() 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 返回值 String 示例 HTML 代码:

    Hello

    jQuery 代码: $("div").html(); 结果:

    Hello

    54
  • 55. html(val) 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 返回值 jQuery 参数 val (String) : 用于设定HTML内容的值 示例 HTML 代码:
    jQuery 代码: $("div").html("

    Hello Again

    "); 结果: [

    Hello Again

    ] 55
  • 56. text() 取得所有匹配元素的内容。 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 返回值 String 示例 HTML 代码:

    Test Paragraph.

    Paraparagraph

    jQuery 代码: $("p").text(); 结果: Test Paragraph.Paraparagraph 56
  • 57. text(val) 设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体). 返回值 jQuery 参数 val (String) : 用于设置元素内容的文本 示例 HTML 代码:

    Test Paragraph.

    jQuery 代码: $("p").text("Some new text."); 结果: [

    Some new text.

    ] 57
  • 58. 8.4 值 val() 获得第一个匹配元素的当前值。 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。 返回值 String,Array 示例 获得单个select的值和多选select的值。 HTML 代码:


    jQuery 代码: $("p").append(   "Single: "   + $("#single").val() +   " Multiple: " + $("#multiple").val().join(", ") ); 结果: [

    Single:SingleMultiple:Multiple, Multiple3

    ] 58
  • 59. 获取文本框中的值 HTML 代码: jQuery 代码: $("input").val(); 结果: some text 59
  • 60. val(val) 设置每一个匹配元素的值。 在 jQuery 1.2, 这也可以为select元件赋值 返回值 jQuery 参数 val (String) : 要设置的值。 示例 设定文本框的值 HTML 代码: jQuery 代码: $("input").val("hello world!"); 60
  • 61. val(val) check,select,radio等都能使用为之赋值 返回值 jQuery 参数 val (Array) : 用于 check/select 的值 示例 设定一个select和一个多选的select的值 HTML 代码:
    check1 check2 radio1 radio2 jQuery 代码: $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]); 61
  • 62. Q & A