第四章操纵内容和属性精选文档.ppt

《第四章操纵内容和属性精选文档.ppt》由会员分享，可在线阅读，更多相关《第四章操纵内容和属性精选文档.ppt（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第四章操纵内容和属性第四章操纵内容和属性本讲稿第一页，共十页13517310450前言前言操纵操纵DOM内容内容操纵属性操纵属性保存自保存自定义数据定义数据jQuery API如何选择如何选择DOM方法和属方法和属性以适应浏览器不同所带性以适应浏览器不同所带来的问题，在此已不成为来的问题，在此已不成为问题问题本讲稿第二页，共十页13517310450目标目标1设置和访问属性2操纵类名3操纵HTML和文本内容4替换元素5移除内容6克隆内容本讲稿第三页，共十页135173104501、设置和访问元素的属性、设置和访问元素的属性移除属性移除属性传对象字面量传对象字面量 访问属性访问属性(一个参数）一

2、个参数）设置属性设置属性(两个参数）两个参数）$(X).removeAttr(名称);$(XX).attr(名称,值);如果选择集中有多个元素，则如果选择集中有多个元素，则会设置选择集中每个元素的相应属性会设置选择集中每个元素的相应属性$(XX).attr(名称);返回选择集中第一个元素的属性值返回选择集中第一个元素的属性值$(a).attr(名:值,名:值);以键：值对的方式定义字面量来设置以键：值对的方式定义字面量来设置元素的若干属性。值为字符串用元素的若干属性。值为字符串用号号$(X).attr(名称,回调函数);以回调函数作为属性的值，如果选择集有、多个元素，则回以回调函数作为属性的值

3、，如果选择集有、多个元素，则回调函数将被执行多次。从而选择集中的元素属性值就可以不调函数将被执行多次。从而选择集中的元素属性值就可以不同。同。本讲稿第四页，共十页135173104502、操纵类名、操纵类名切换类名切换类名判断是否拥有类名判断是否拥有类名 移除类名移除类名 添加类名添加类名$(X).toggleClass(类名);$(XX).addClass(类名);可以为同一个元素指定多个类名。可以为同一个元素指定多个类名。css支持链式类名定义，但支持链式类名定义，但IE6不支持不支持$(XX).removeClass(类名);返回选择集中第一个元素的属性值返回选择集中第一个元素的属性值$

4、(XX).hasClass(类名);本讲稿第五页，共十页13517310450Tip:关于关于jQuery方法方法单单/多元素：多元素：jQuery的方法总是作用于一个或多个元素之上。即其总是假定选择器返回的是一个数组。这样我们就省去了冗余的遍历代码。jQuery方法方法通用规则通用规则方法链：方法链：在jQuery中可以将一个方法链接在另一个方法之后，并对选择集执行复杂的操作。$(p.test).addClass(ohmy).show(slow);本讲稿第六页，共十页135173104503、操纵、操纵HTML和文本内容和文本内容html()设置或获取一个或多个元素的HTML内容text()

5、设置或获取一个或多个元素的文本内容append()和prepend()用于将内容添加到当前元素的子节点之后和之前。After()和before()用于将内容添加到当前元素节点之后和之前。insertAfter()和insertBefore()将某选择集中的元素插入到另一选择集元素之后和之前。使页面的模板化操作更容易wrapwrapAll()和wrapInner()将一个或多个元素包装在另外元素中。（创建一个新元素，然后将指定的已有元素放在新元素中）本讲稿第七页，共十页135173104504、替换元素、替换元素l接收选择器作为参数，而不是一个字符串参数。将参数中的内容替换掉。l注意他是通过选择

6、器来替换内容，即他是用文档中的元素来替换其他元素l将使用任何指定的HTML内容来替换选中的元素。l作用类似于MS的outerHTML属性。replaceWithreplaceAll本讲稿第八页，共十页135173104505、移除内容、移除内容l移除选择集中的所有元素。可在方法中传入选择器，与选择器相匹配的元素被保留，不会从文档中移除。l在jQuery中这些被移除的元素依然存在，可在remove()之后继续链接其他jQuery方法，以便对移除的元素继续进行操。l本质上与调用html()方法并传入一个空字符串的效果相同元素的所有子元素都将被移除。empty()remove()本讲稿第九页，共十页135173104505、克隆元素、克隆元素l复制内容（元素及其所有子节点）l给方法的第一个参数传入值true，将复制元素的事件处理函数。l与DOM中的cloneNode()方法不同，更易于使用。clone()本讲稿第十页，共十页