jQuery学习之DOM操作

 接着昨天的继续写,这几篇只是把看书的内容系统的在写一下。

对dom的基本操作

(1)查找结点

  • 查找元素节点 
  • 查找属性节点  var $para=$("p"); var p_txt=$para.attr("title");

(2)创建结点

  • 创建元素节点  var $li_test=$("<li></li>"); $("ul").append($li_test);
  • 创建文本节点  var $li_test=$("<li>文本文档</li>"); $("ul").append($li_test);
  • 创建属性节点  var $li_test=$("<li  title="文本文档"></li>"); $("ul").append($li_test);

(3)插入节点

  • append()  向每一个匹配内部追加内容
  • appendTo() 将所有匹配的元素追加到指定的元素中.与append相反
  • prepend() 向每个匹配元素的内部前置内容
  • prependTo()
  • after() 在每个匹配元素之后插入内容
  • insertAfter() 将所有匹配的元素插入到指定元素后面
  • before() 在每个匹配元素之前插入内容
  • insertBefore()

(4)删除节点

  • remove() 从Dom中删除所有匹配的元素
  • detach() 与remove不一样的是,所有绑定的事件会保留下来
  • empty() 清空节点

(5)复制节点

  • clone()

     $(this).clone(true).appendTo(body);

     在clone()方法中传递一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。

(6)替换节点

  • replaceWith() 将所有匹配的元素替换成指定的HTML或者DOM元素

   $("p").replaceWith("<strong>= =<strong>");

  • replaceAll()反过来  

   $("<strong>= =<strong>").replaceAll("p");

(7)包裹节点

  •  wrap() 该方法对于在文档中插入额外的结构化标记非常有用
  •  wrapAll() 将所有匹配的元素用一个元素来包裹,而warp()是将所有元素进行单独包裹
  • wrapInner() 将每一个匹配元素的子内容(包括文本)用其他结构化的标记包裹起来

(8)属性操作

  •    获取属性和设置属性

     $("p").attr({"title":"myTitle","name":"myName"})

     除了attr(), 还有类似的方法html(),text(),height(),width(),val(),css()

  • 删除属性

     $("p").removeAttr("title");

(9)样式操作

  •  获取样式和设置样式

      var p_class=$("p").attr("class");

      $("p").attr("class","high"); //设置<p>元素的class为“high”

  • 追加样式

      $("p").addClass("")

  • 移除样式

     $("p").removeClass("")

  • 切换样式

     $("p").toggleClass("") 

  • 判断是否有某个样式

     $("p").hasClass("")  判断是否有某个class,如果有返回true,否则返回false

(10)设置和获取HTML文本和值

  • html()
  • text()
  • val()

(11)遍历节点

  • children() 取得匹配元素的子元素
  • next()       取得后面紧邻的同辈元素
  • prev()        取得前面紧邻的同辈元素
  • sibilings()    取得前后所有的同辈元素
  • close()        首先检查当前元素是否匹配,若匹配返回元素本身,不匹配,向上查找父元素。====
  • parent()   父元素
  • parents()  祖先元素

(12)CSS-DOM操作

  • offset()

   获取元素在当前视窗的相抵偏移,返回top,left

    var offset=$("p").offset();

    var left=offset.left;

    var top=offset.top;

  • position()

    获取元素相对于最近一个position样式设置为relative或absolute的父元素的相对偏移量

  • scrollTop()

     获取元素的滚动条距顶端的距离

     可以为该方法指定参数,控制元素内的滚动条滚动到距顶端300的位置

     $("textarea").scrollTop(300)

  • scrollLeft()
原文地址:https://www.cnblogs.com/fnncat/p/4881742.html