锋利的jQuery总结(二)

    xiaoxiao2021-03-26  3

    第三章 jQuery中的DOM 操作

     

    12. 查找节点

    i 查找元素节点:选择器

    ii 查找属性节点:attr( )   e.g. varp_text = $(“p”).attr(“title”)   获取<p>元素的属性title

     

    13. 创建节点

    i 创建元素节点:$(html)  e.g.  var $li=$(“<li></li>”);  $(“ul”).append($li);

    ii 创建文本节点:var $li=$(“<li>hello</li>”);

    iii 创建属性节点:var $li=$(“<li title=’hello’>hello</li>”);

     

     

     

    14. 插入节点:

    append()  $(A).append(B) 将B元素插入到A元素

    appendTo() $(B).appendTo(A)  同上作用

    prepend()  $(A).prepend(B) 将B 元素在A 元素前置

    prependTo() $(B).prepend(A)  同上

    after()       $(A).after(B)在元素A 插入元素B

    insertAfter() $(B).insertAfter(A) 同上

    before()     $(A).before(B)  在元素A插入元素B

    insertBefore()  $(B).insertBefore(A)同时国内

     

    15.  删除节点

    remove()   某个节点用remove()删除后,其包含的所有后代节点都会被删除,返回值为一个指向已被删除的节点的引用,还可以继续使用这个元素

              可以通过传递参数选择性的删除元素 $(“ul li”).remove(“li[title=hello]”);

    detach()   与remove()的区别是,所有绑定的事件,附加的数据都会保留下来

    empty()   清空元素所有的后代节点

     

    16. 复制节点

    clone()  注意复制后得到的新节点不具有任何行为,如果也想让新节点可以复制,要传入.clone(true),传入的参数true表示复制元素的同时复制元素中所绑定的事件

     

    17. 替换节点

    replaceWith()  $(A).replaceWith(B) 用B元素替换A元素

    replaceAll()    $(B). replaceAll(A)  作用同上

    注意:替换之后原先的元素上绑定的事件会消失,需要在新元素上重新绑定

     

    18. 包裹节点

    wrap() $(A).wrap(B) 用B把A包裹起来(使A成为B的子节点)(每个匹配的A单独来一遍)

    wrapInner()   $(A).wrap(B)用B把A的子内容包裹起来

    wrapAll()  $(A).wrapAll(B)  用一个B把所有的匹配的A都包裹起来

     

    19. 属性操作

    i 获取属性和设置属性

      var p_txt =$(“p”).attr(“title”); 获取<p>元素节点属性title

     $(“p”).attr(“title” , ”your title”); 设置<p>的title属性 得到 <p title=”yourtitle”>

      $(“p”).attr({

    “title”: ”yourtitle”,

    “name”: “test”

    });       //设置多个属性

    ii 删除属性

     removeAttr()

     

    20. 样式操作

    i 获取样式 .attr(“class”)

    ii 设置样式 .attr(“class” ,”high”)

    iii 追加样式addClass() $(“p”).addClass(“another”) 会合并两个样式,后者覆盖前者

    iv 移除样式removeClass()  移除多个样式: $(“p”).removeClass(“highanother”);

    v  切换样式 toggleClass()

    vi 判断元素中是否含有某个class,hasClass()

              $("p”).hasClass(“another”); ==  $(“p”).is(“.another”);

     

    21. 获取、设置HTML、文本、和值  (在括号中传入参数即为设置)

    html()

    text()

    val()

    defaultValue表示该表单元素的初始值

     

    22. 遍历节点

    i  children()   匹配元素的节点

    ii  next()   匹配元素紧邻的同辈元素

    iii  prev()  匹配元素紧邻的同辈元素

    iv siblings()  匹配元素的所有同辈元素

    v  closest()  先检查当前元素是否匹配,若匹配直接返回元素,否则逐级向上查找元素

       parent() 获得集合中每个匹配元素的父级元素

       parents()获得集合中每个匹配元素的祖先元素

     

    23. cssDOM操作

    i   $(“p”).css(“color”,”red”);

    $(“p”).css({

    “color:,”red”,

    “opacity”:”0.5”

    });

    ii  offset() 获取元素在当前视窗的相对偏移,返回的对象包含两个值 top left

       e.g.  var os =$(“p”).offset();

            varosle=os.left;

            var ost =os.top; 

    iii position() 获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移,返回得对象包含top和left

    iv scrollTop()   scrollLeft() 获取元素的滚动条距顶端与左侧的距离

       e.g.  var $p=$(“p”);

            varscrollTop = $p.scrollTop();

            varscrollLeft = $p.scrollLeft(300);

     

    转载请注明原文地址: https://ju.6miu.com/read-600175.html

    最新回复(0)