第08章：JQuery

1、1jQuery8.1 jQueryo jQueryn一个 JavaScript 库n封装了预定义的对象和使用函数n简化了 JavaScript 编程o jQuery 库包含以下特性：nHTML 元素选取 nHTML 元素操作 nCSS 操作 nHTML 事件函数 nJavaScript 特效和动画 nHTML DOM 遍历和修改 nAJAX 28.2 jQuery语法规则o 语法n$(selector).action()o $(this).hide() - 隐藏当前元素o $(p).hide() - 隐藏所有段落o $(p.test).hide() - 隐藏所有 class=test 的段落o

2、 $(“#test”).hide() - 隐藏所有 id=“test” 的元素n简单的代码示例o jQuery代码风格n链式操作（优化）o jQuery对象和DOM对象$(“#foo”).html()Document.getElementById(“foo”).innerHTML38.3 jQuery选择器选择器o 基本选择器基本选择器n#id : $(“#test”)n.class : $(“.test”)nelement : $(“p”)n* : $(“*”)nselector1,selector2 selectorN: $(“div,span,p.myClass”)o 层次选择器层次选择

3、器n$(“ancestor descendant”) : $(“div span”)n$(“parent child”) : $(“divspan”)n$(“prev+next”) : $(“.one+div”) / $(“prev”).next(“next”)n$(“prevsiblings”) : $(“#twodiv”) /$(“prev”).nextall(“siblings”)48.3 jQuery选择器选择器o jQuery 选择器选择器n过滤选择器过滤选择器n基本过滤选择器基本过滤选择器o :first $(“div:first”)o :last $(“div:last”)o :

4、not(selector) $(“input:not(.myClass)”)o :even $(“input:even”)o :odd $(“input:odd”)o :eq(index) $(“input:eq(1)”)o :gt(index) $(“input:gt(1)”)o :lt(index) $(“input:lt(1)o :header $(“:header”)o :animated $(“div:animated”)58.3 jQuery选择器选择器o jQuery 选择器选择器n内容过滤选择器o:contains(text) ：$(“div:contain(我)”)o:emp

5、ty $(“div:empty”)o:has(selector) $(“div:has(p)”)o:parent $(“div:parent”)n可见性过滤选择器o:hidden $(“:hidden”)o:visible $(“div:visible”)n属性过滤选择器oattribute: $(“divid”)oattribute=value : $(“divtitle=test”)oattribute!=value: $(“divtitle!=test”)oattribute=value: $(“divtitle=test”)oattribute$=value: $(“divtitle$

6、=test”) o attribute*=value: $(“divtitle*=test”) 68.3 jQuery选择器选择器o jQuery 选择器选择器n表单对象属性过滤选择器o :enabled $(“#form1 :enabled”)o :disabled $(“#form2:disabled”)o :checked $(“input:checked”)o :selected $(“select:selected”)o 示例78.3 jQuery中的中的DOM操作操作o查找节点o创建节点:n创建元素节点、创建文本节点、创建属性节点o插入节点n插入节点：append()/appendTo()/prepend()/prependTo()/after()/insertAfter()/before()/insertBefore()n移动节点o删除节点nremove() empty() o复制节点 、替换节点o属性操作o样式操作o设置和获取HTML、文本和值 设置选择框 o遍历节点：children() next() closeset()oCSS-DOM操作o示例88.4 jQuery的事