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()
  • 相关阅读:
    .net core读取appsettings.config中文乱码问题
    vs2017错误:当前页面的脚本发生错误
    VS Code中无法识别npm命令
    Visual Studio报错/plugin.vs.js,行:1074,错误:缺少标识符、字符串或数字
    记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法
    Java集合框架
    java hash表
    Java Dictionary 类存储键值
    java数据结构 栈stack
    java封装
  • 原文地址:https://www.cnblogs.com/fnncat/p/4881742.html
Copyright © 2011-2022 走看看