幻灯片 1

Size: px

Start display at page:

Download "幻灯片 1"

遛元
7 years ago
Views:

1 write less, do more.

2 jquery 的由来及简介 jquery 对象和 DOM 对象 jquery 选择器 jquery 中的 DOM 操作使用 jquery 创建动画效果使用 jquery 完成 Ajax 操作

3 RIA(Rich Internet Applications) 富互联网应用, 具有高度互动性丰富用户体验以及功能强大的客户端常见的 RIA 技术 Ajax Flex Silverlight JavaScript 及其框架是实现 RIA 的重要工具

5 轻量级 (Lightweight) 强大的选择器出色的 DOM 操作封装可靠的事件处理机制出色的浏览器兼容性 jquery 理念 ( 宗旨 ): 写得少, 做得多 WRITE LESS,DO MORE.

6 把以下语句添加在页面中 ( 通常为 <head> 内 ) <script type= text/javascript src= jquery.js ></script> 就这么简单!

7 使用本地副本至下载最新版本 ( 如版 ) <script type= text/javascript src= jquery min.js ></script> 使用在线版本直接嵌入 : <script type= text/javascript src= min.js ></script> 或 : http(s)://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js http(s)://ajax.aspnetcdn.com/ajax/jquery/jquery min.js

8 最常见也最基本的方式 :.ready() 函数 $(document).ready(function(){ // jquery goes here! }); 或者更短的形式 $(function(){ // jquery goes here! });

9 write less, do more.

11 jquery 对象就是通过 jquery 包装 DOM 对象后产生的对象 jquery 对象是 jquery 独有的. 如果一个对象是 jquery 对象, 那么它就可以使用 jquery 里的方法 : $( #tab ).html(); jquery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jquery 里的任何方法建议约定 : 如果获取的是 jquery 对象, 那么要在变量前面加上 $. var $variable = jquery 对象 var variable = DOM 对象

12 jquery 对象不能使用 DOM 中的方法, 但如果 jquery 没有封装想要的方法, 不得不使用 DOM 方法的时候, 有如下两种处理方法 : (1) jquery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM 对象. $("#msg")[0] (2) 使用 jquery 中的 get(index) 方法得到相应的 DOM 对象 $("#msg").get(0)

13 对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来 (jquery 对象就是通过 jquery 包装 DOM 对象后产生的对象 ), 就可以获得一个 jquery 对象. 例如 : $(document.getelementbyid( msg )) 转换后就可以使用 jquery 中的方法了

14 以下几种写法都是正确的 : $("#msg").html(); $("#msg")[0].innerhtml; $("#msg").eq(0)[0].innerhtml; $("#msg").get(0).innerhtml; 如 :$("#msg")[0],$("div").eq(1)[0], $("div").get()[1],$("td")[5] 这些都是 DOM 对象, 可以使用 DOM 中的方法, 但不能再使用 jquery 的方法

16 选择器是 jquery 的根基, 在 jquery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jquery 选择器的优点 : 简洁的写法完善的事件处理机制

17 基本选择器是 jquery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素

18 改变 id 为 one 的元素的背景色为红色 $("#one").css("backgroundcolor","red"); 改变元素名为 <p> 的所有元素的背景色为 # bbffaa, 字体颜色为红色 $("p").css({color:"red",backgroundcolor:"#bbffaa"} ); 改变第一个 <p> 元素的背景色为红色 $("p").eq(0).css("backgroundcolor","red"); 改变所有 <h1> 元素和 id 为 one 的元素的背景色为 # bbffaa $("h1,#one").css("backgroundcolor","#bbffaa");

19 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器注意 : ( prev ~ div ) 选择器只能选择 prev 元素后面的同辈元素 ; 而 jquery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

20 改变 <body> 内所有 <div> 的背景色为 # bbffaa $( body div") 改变 <body> 内子 <div> 的背景色为 # bbffaa $( body>div") 改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa $("#one+div") 改变 id 为 two 的元素后面的所有兄弟 <div> 的元素的背景色为 # bbffaa $("#two~div") 改变 id 为 two 的元素所有 <p> 兄弟元素的背景色为 # bbffaa $("#two").siblings("p")

21 <body> <div> <h1> 子选择器测试 </h1> <p> 子选择器的用法, 寻找包含在 DIV 里面的 P, 改变其外框 </p> </div> <input type="button" value=" 确定 /> <br/> <br> </body>

22 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 : 开头按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

24 改变第一个 div 元素的背景色为 # bbffaa $("div:first") 改变 id 不为 one 的所有 p 元素的背景色为 # bbffaa $("p:not('#one')") 改变索引值为偶数的 tr 元素的背景色为 # bbffaa $( tr:even") 改变索引值为大于 3 且为奇数的 p 元素的背景色为 # bbffaa $( p:gt(3):odd") 改变所有的标题元素的背景色为 # bbffaa $(":header")

25 <div> <ul id="orderlist"> <li>1<a href=""> 连接 </a> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> :last, :first, :even,: odd

26 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

27 改变含有文本 di 的 p 元素的背景色为 # bbffaa $("p:cotains(di)") 改变不包含子元素 ( 或者文本元素 ) 的 div 空元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p 元素的背景色为 # bbffaa $("p:has(.mini)") 改变含有子元素 ( 或者文本元素 ) 的 div 元素的背景色为 # bbffaa

28 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type= hidden >) 和 visible:hidden 之类的元素

29 改变所有可见的 div 元素的背景色为 # bbffaa 选取所有不可见的元素, 利用 jquery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa 选取所有的文本隐藏域, 并打印它们的值

30 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

31 选取下列元素, 改变其背景色为 # bbffaa 含有属性 title 的 div 元素. 属性 title 值等于 "test" 的 div 元素. 属性 title 值不等于 "test" 的 div 元素 ( 没有属性 title 的也将被选中 ). 属性 title 值以 "te" 开始的 div 元素. 属性 title 值以 "est" 结束的 div 元素. 属性 title 值含有 "es" 的 div 元素. 选取有属性 id 的 div 元素, 然后在结果中选取属性 title 值含有 es 的 div 元素.

32 nth-child() 选择器详解如下 : (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶 ( 奇 ) 数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素

33 选取下列元素, 改变其背景色为 # bbffaa 每个 class 为 one 的 div 父元素下的第 2 个子元素. 每个 class 为 one 的 div 父元素下的第一个子元素每个 class 为 one 的 div 父元素下的最后一个子元素如果 class 为 one 的 div 父元素下的仅仅只有一个子元素, 那么选中这个子元素

35 利用 jquery 对象的 val() 方法改变表单内可用 <input> 元素的值利用 jquery 对象的 val() 方法改变表单内不可用 <input> 元素的值利用 jquery 对象的 length 属性获取多选框的个数,input 元素的个数和多选框选中的个数利用 jquery 对象的 text() 方法获取下拉框选中的内容

36 此选择器主要对所选择的表单元素进行过滤

38 DOM(Document Object Model 文档对象模型 ): 一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类 : DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如 : XML HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性 CSS-DOM: 针对于 CSS 操作, 在 JavaScript 中, CSS- DOM 主要用于获取和设置 style 对象的各种属性

39 查找节点 : 查找元素节点 : 通过 jquery 选择器完成. 查找属性节点 : 查找到所需要的元素之后, 可以调用 jquery 对象的 attr() 方法来获取它的各种属性值

40 创建节点 : 使用 jquery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jquery 对象返回. 注意 : 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中 ; 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个 <p> 元素, 可以使用 $( <p/> ) 或 $( <p></p> ), 但不能使用 $( <p> ) 或 $( </p> ) 创建文本节点就是在创建元素节点时直接把文本内容写出来 ; 创建属性节点也是在创建元素节点时一起创建

41 动态创建了 HTML 元素之后, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点

42 以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.

43 var $newp =$( <p> 京汉高速铁路即将通车! </p>"); $newp.insertafter( #chapter ); // 将创建的 newp 元素插入到 ID 为 #chapter 的元素之后或者 $newp.appendto( body ); // 插入到 body 元素里

44 remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jquery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. empty(): 清空节点清空元素中的所有后代节点 ( 不包含属性节点 ).

45 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为. clone(true): 复制元素的同时也复制元素中的的事件

46 replacewith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素 replaceall(): 颠倒了的 replacewith() 方法. 注意 : 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

47 wrap(): 将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义. wrapall(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹. wrapinner(): 将每一个匹配的元素的子内容 ( 包括文本节点 ) 用其他结构化标记包裹起来

48 attr(): 获取 html 属性和设置属性当为该方法传递一个参数时, 即为某元素的获取指定属性当为该方法传递两个参数时, 即为某元素设置指定属性的值 jquery 中有很多方法都是一个函数实现获取和设置. 如 : attr(), html(), text(), val(), height(), width(), css() 等. removeattr(): 删除指定元素的指定属性

49 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 追加样式 : addclass() 移除样式 : removeclass() --- 从匹配的元素中删除全部或指定的 class 切换样式 : toggleclass() --- 控制样式上的重复切换. 如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式 : hasclass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

50 读取和设置某个元素中的 HTML 内容 : html(). 该方法可以用于 XHTML, 但不能用于 XML 文档读取和设置某个元素中的文本内容 : text(). 该方法既可以用于 XHTML 也可以用于 XML 文档. 读取和设置某个元素中的值 : val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值 ( 多选框只能返回第一个值 ). 如果为多选下拉列表框, 则返回一个包含所有选择值的数组

51 取得匹配元素的所有子元素组成的集合 : children(). 该方法只考虑子元素而不考虑任何后代元素. 取得匹配元素后面紧邻的同辈元素的集合 ( 但集合中只有一个元素 ): next() 取得匹配元素前面紧邻的同辈元素的集合 ( 但集合中只有一个元素 ): prev() 取得匹配元素前后所有的同辈元素 : siblings()

52 获取和设置元素的样式属性 : css() 获取和设置元素透明度 : opacity 属性获取和设置元素高度, 宽度 : height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $( p:first ).height( 2em ); 获取元素在当前视窗中的相对位移 : offset(). 其返回对象包含了两个属性 : top, left. 该方法只对可见元素有效

54 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jquery 中使用 $(document).ready() 方法.

55 对匹配的元素进行特定的事件绑定 : bind() 实例点击可以使用 slidetoggle() 来实现 jqueryslidetoggle.jsp

56 hover(): 模拟光标悬停时间. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数. toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个. toggle() 的另一个作用 : 切换元素的可见状态.

57 移除某按钮上的所有 click 事件 : $( btn ).unbind( click ) 移除某按钮上的所有事件 : $( btn ).unbind(); one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

59 jquery 遍历, 意为移动, 用于根据其相对于其他元素的关系来查找 ( 或选取 )HTML 元素以某项选择开始, 并沿着这个选择移动, 直到抵达您期望的元素为止下图展示了一个家族树通过 jquery 遍历, 您能够从被选 ( 当前的 ) 元素开始, 轻松地在家族树中向上移动 ( 祖先 ), 向下移动 ( 子孙 ), 水平移动 ( 同胞 ) 这种移动被称为对 DOM 进行遍历

60 祖先 parent() parents() parentsuntil()

61 祖先 children() find()

62 过滤 first() last() eq()

65 hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css( display, none ); show(): 将元素的 display 样式改为先前的显示状态. 以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来. 以上两个方法会同时减少 ( 增大 ) 内容的高度, 宽度和不透明度.

66 fadein(), fadeout(): 只改变元素的透明度. fadeout() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. fadein() 则相反. slidedown(), slideup(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slidedown() 方法时, 这个元素将由上至下延伸显示. slideup() 方法正好相反, 元素由下至上缩短隐藏.

67 toggle(): 切换元素的可见状态 : 如果元素时可见的, 则切换为隐藏 ; 如果元素时隐藏的, 则切换为可见的. slidetoggle(): 通过高度变化来切换匹配元素的可见性. fadeto(): 把不透明度以渐近的方式调整到指定的值 (0 1 之间 ).

68 注意用 $ 选中的元素 (jquery 对象 ) 和用 DOM 方法选中的元素 (DOM 对象 ) 含义并不相同 var one=getelementbyid( one ); $( #one ) 表现在 jquery 对象的方法和属性与 DOM 对象的并不相同, 如 one.onclick() $( #one ).click()

69 $(document). ready() 的优势在 DOM 文档载入后就执行, 载入速度更快 ; 如果找不到 DOM 中的元素, 能够自动容错 ; 在页面中多个地方使用 ready() 方法不会发生冲突

70 4. 创建 DOM 元素使用 $ 可以直接创建 DOM 元素 : var newp =$( <p> 京汉高速铁路即将通车! </p>"); 创建了 DOM 元素后, 将这个元素插入到在页面的某个具体位置上 newp.insertafter( #chapter ); // 将创建的 newp 元素插入到 ID 为 #chapter 的元素之后或者 newp.appendto("body");

71 将新元素插入到匹配元素的里的方法 : append() appendto () prepend () prependto () append() 表示在原有元素中插入新元素 $ ("body") append(newp); appendto () 表示将新元素插入到原有元素里 newp.appendto("body"); 将新元素插入到匹配元素的盘边 after () insertafter () before () insertbefore () 将新元素包含住匹配的元素 wrap ()

72 要使某个动作应用于特定的 html 元素, 需要有办法找到这个元素在 jquery 中, 执行这一任务的方法称为 jquery 选择器 jquery 选择器把网页的结构和行为完全分离利用 jquery 选择器, 能快速地找出特定的 html 元素, 然后轻松的给元素添加一系列行为动作 jquery 的选择器主要有三大类, 即 CSS 3 的基本选择器,CSS3 的位置选择器和过滤选择器

73 1. find() 方法 find() 方法可以通过查询获取新的元素集合, 通过匹配选择器来筛选元素, 例如 : $("div").find("p"); 2. hover 方法一个模仿悬停事件 ( 鼠标移动到一个对象上面及移出这个对象 ) 的方法 3. toggleclass 方法 toggleclass 方法用于切换元素的样式

Microsoft Word - 最新正文.doc

Microsoft Word - 最新正文.doc 2 2 Web 2.0 Ajax StarTrackr! GPS RFID jquery JavaScript StarTrackr! JavaScript jquery 1 jquery jquery jquery JavaScript HTML jquery JavaScript jquery jquery jquery $(document).ready()! jquery jquery (document)