jQuery的DOM操作

    
    
    
    

--目标：
    1.复习JavaScript学习中的DOM基本介绍部分的内容
    2.熟悉使用jQuery进行文档处理 刷选和属性操作的内容
大纲
    1.关于DOM
       1）HTML可以看成一棵树，其中内容是这棵树的节点
       2）DOM树上的节点之间有父子关系 兄弟关系
       3）节点之间还有顺序关系
       4）可以通过对DOM树的操作来修改
    2.DOM操作的分类
      1) 文档处理
         (1)内部插入
            append(content|fn) 向每个匹配的元素内部追加内容
            appendTo(content)  把所有匹配的元素追加到另一个指定的元素元素集合中
            prepend(content|fn) 向每个匹配的元素内部前置内容。
            prependTo(content)  把所有匹配的元素前置到另一个、指定的元素元素集合中。
         (2)外部插入
            after(content|fn)在每个匹配的元素之后插入内容。
            before(content|fn) 在每个匹配的元素之前插入内容。
            insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
            insertBefore(content)把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
         (3)包裹
             wrap(html|ele|fn)把所有匹配的元素用其他元素的结构化标记包裹起来。
             unwrap()这个方法将移出元素的父元素
             wrapAll(html|ele)将所有匹配的元素用单个元素包裹起来
             wrapInner(html|ele|fn)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
         (4)替换
            replaceWith(content|fn)
            replaceAll(selector)
            删除
             empty()删除匹配的元素集合中所有的子节点。
             remove([expr])从DOM中删除所有匹配的元素。
             detach([expr])从DOM中删除所有匹配的元素。
             复制
             clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本。
      2) 刷选操作
         (1) 过滤
          eq(index|-index)
          first()
          last()
          hasClass(class)
          filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素集合。
          is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
          map(callback)将一组元素转换成其他数组（不论是否是元素数组）
          has(expr|ele)保留包含特定后代的元素，去掉那些不含有指定后代的元素。
          not(expr|ele|fn)从匹配元素的集合中删除与指定表达式匹配的元素
          slice(start,[end])选取一个匹配的子集
         (2)查找
          children([expr])
          closest(e|o|e)1.7*
          find(e|o|e)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
          next([expr])
          nextAll([expr])
          nextUntil([e|e][,f])
          offsetParent()
          parent([expr])
          parents([expr])
          parentsUntil([e|e][,f])
          prev([expr])
          prevall([expr])
          prevUntil([e|e][,f])
          siblings([expr])
        (3)串联
          add(e|e|h|o[,c])1.9*
          andSelf()1.8-
          addBack()1.9+
          contents()
          end()
      3) 属性操作
           attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。
           removeAttr(name)          从每一个匹配的元素中删除一个属性
           prop(n|p|k,v|f)           获取在匹配的元素集中的第一个元素的属性值。
           removeProp(name)          用来删除由.prop()方法设置的属性集

      4)CSS操作
          addClass(class|fn)        为每个匹配的元素添加指定的类名。
          removeClass([class|fn])   从所有匹配的元素中删除全部或者指定的类。
          toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。
      浏览器提供的网站开发者工具
      在jQuery中有一些方法 它既能返回值 又能设置值 getter/ settter/
      -->
按钮
PHPChina 网站模板化分

    
php 资讯
    
PHP 论坛
    
zend 产品

选择你喜欢的PHP网站

    www.php.net
    www.phpchina.com
    www.zend.com

按钮