zoukankan      html  css  js  c++  java
  • 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()
  • 相关阅读:
    [转载]OpenGL函数参考(中文版)
    [转载]OpenGL 中常用的 GLUT 函数库
    VC6.0 VS2008 openGL环境配置 [和glut库的加入]
    java测试一个类的方法,用junit
    openal配置(更新)
    jsp URL 传参数 服务端接收后乱码的问题
    NeHe OpenGL 第二课 学习总结
    vs2008 添加头文件路径
    困惑之一:c++初始化成员列表
    C++中一些对原理描述相当好得语句
  • 原文地址:https://www.cnblogs.com/fnncat/p/4881742.html
Copyright © 2011-2022 走看看