• jquery操作DOM


    一,节点操作

    一、查找节点
     1、查找元素节点 ;利用jquery的选择器
     2、查找属性节点  ;利用Jquery的选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。Attri()方法的参数可以是一个,也可以是零个。当参数是一个时,则是要查询的属性的名字。

    二、创建节点
      1、创建元素节点 
      第一 创建元素节点  第二将其插入文档中
      $(html)  --->创建节点   ,append()添加到文档中

      2、创建文本节点
      创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。

      3、创建属性节点
     创建属性节点与创建文本节点类似,也是之金额在创建元素节点时一起创建

    三、插入节点

    append()    向每个匹配的元素内部追加内容
    appendTo()      与上诉追加相反
    Perpend()      向每个匹配的元素内容前置内容    
    perpendTo()    与上诉前置内容相反
    After()          在每个匹配的元素之后插入内容
    inserAfter()      与上诉插入相反
    Before()          在每个匹配的元素之前插入内容
    Insertbefore()      与上诉插入相反

    四、删除节点
     

    remove()      从DOM中删除所有匹配的元素,其后面的子节点也将同时删除 , 也可以设置其参数进行有选择性的删除
    detach()      跟remove()不同的是,所有绑定的事件、附加的数据都会保留下来
    empty()      并不是删除节点,而是清空节点。,也能清空所有后代的子节点。

    五、复制节点
    (通过鼠标拖动商品并将其放到购物车中)商品拖动就是用的复制节点
    Clone() 复制节点后,被复制的新元素并不具有任何行为,如果需要新元素也具有复制功能,可以使用clone(true)

    六、替换节点
     

    replacewith()   将所有匹配的元素都替换成指定的HTML或DOM元素
    replaceaAll()   与上诉方法作用相同,只是颠倒了replaceWith()的操作。

    七、包裹节点 
    wrapAll() wrap()
    将所有匹配的元素用一个元素来包裹,wrap()方法是将所有的元素进行单独的包裹。

    wrapInner()方法
    将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

    属性操作
    1获取属性和设置属性
    获取  attr(name);

    设置单个属性值  atrr(name,value) ;
    设置多个属性值  attri(name:value ,name:value) ;

    2 删除属性

    removeAttr(name) 

    样式操作

      1获取样式和设置样式

    可以使用attr()来获取样式和设置样式

      $(“p”).attr(“class”)    
    
      $(“p”).attr(“class”,”hight”)   

      2追加样式

    addClass()

    多次使用addClass()样式,不会覆盖其原先的样式。使用attr()方法会覆盖其原先的样式

      3删除样式

    removeClass(name) ,如果不带任何参数则就删除其所有的样式

      4切换样式

    Toggle()方法主要是控制行为上的重复切换。
    
    toggleClass()方法控制样式上的重复切换

    5,判断是否含有某个样式

    hasClass()可以用来判断元素是否含有某个class,如有,则返回TRUE,否则为FALSE
    $(“p”).hasClass(“another”)   等价于 $(“p”).is(“.another”);  
     


    设置和获取HTML、文本 和值
    html() 用来读取或者设置某个元素中的HTML内容,设置时只需在括号里写入值即可
    text()  用来读取或者设置某个元素中的TEXT内容,设置时只需在括号里写入值即可
    val()  此方法类似JavaScript中的value属性,用来设置和获取元素的值,无论元素是文本框,还是下拉列表还是单选框,都可以返回元素的值,如果元素是多选,则返回一个包含所有选择的值的数组  设置时只需在括号里写入值即可

    遍历节点

    children() 获得子元素
    next()  后面紧邻的同辈元素
    prev()  前面紧邻的同辈元素
    siblings() 前后所有的同辈元素
    closest()  从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素
    parent(),parents(),closest()之间的区别
    parent()    获得集合中每个匹配元素的父级元素
    Parents()    获得集合中每个匹配元素的祖先元素

    CSS-DOM操作

    Css()方法获取元素的样式属性  如 $(“p”).css(“color”);
    也可以通过css()设置某个元素的单个样式 如$(“p”).css(“color”,”red”);
    也可以同时设置多个样式属性 如$(“p”).css({“color”:”red” ,”fontSize”,”30px”});
    设置透明度    $(“p”).css(“opacity”,”0.5”);
  • 相关阅读:
    创建字典的方法
    python中,a=10.0 b=10.0 a is b 为什么输出是false
    Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
    二十三种设计模式及其python实现
    python字符串替换的2种方法
    数据库索引的实现原理?
    异步IO数据库队列缓存RabbitMQ队列
    Python 如何用列表实现栈和队列?
    Python数据结构与算法?
    django -----原生SQL语句查询与前端数据传递?
  • 原文地址:https://www.cnblogs.com/SFHa/p/9274101.html
Copyright © 2020-2023  润新知