• jQuery(3)--jQuery中的DOM操作


    查找节点

      查找元素节点,使用jQuery选择器;

      查找属性节点,在查找到元素节点后,使用attr()方法,传入要查询的属性的名字

    创建节点

       在DOM操作中往往需要动态创建HTML内容,使文档在浏览器里呈现效果发生变化,并且达到各种人机交互的目的

       $(html)方法会根据传入的html标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回

    var  li =$("<li title="香蕉">香蕉</li>")  //创建元素节点时将文本节点和属性节点一起创建了
    $(ul).append(li)                        //动态创建的元素节点不会自动添加到文档中,而是需要其他方法将其插入文档中

    插入节点

    1 append()  appenTO()       //元素内部追加内容
    2 prepend() prependTo()     //元素内部前置内容
    3 after()   insertAfter()   //元素之后插入内容      after 和 before 是作用于同级节点
    4 before()  insertBefore    //元素之前插入内容

    删除节点

    remove()  //拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点,实际上可以一次删除多个DOM节点,该节点包含的后代节点也会同时被删除
    
    empty()    //清空元素中的所有后代节点

    复制节点

    clone()   //若传入参数true,复制元素的同时复制元素中绑定的事件
    
    //eg:单击li元素后需要再复制一个li元素
    
    $("ul li").click(function(){
    
    $(this).clone().appendTo("ul")     //复制当前点击的节点,并将它追加到<ul>元素中
    
    })

    替换节点

    replaceWith()
    replaceAll()    //颠倒了replacewith()操作

    属性操作

    获取和设置元素属性 
    attr()   传入一个参数时,获取属性;传入两个参数时,设置属性
    
    var p_txt =$("p").attr("title")   //获取属性
    $("p").attr("title","your title")    //设置属性
    $("p").attr{"title":"your title","name":"your name"}   //一次性设置多个属性是,用key/value形式
    删除元素属性  removeAttr() 
    
    $("p").removeAttr("title")

    样式操作

    设置和获取样式  attr()
    
    var p_class =$("p").attr("class")     //获取样式
    $("p").attr("class","high")           //设置样式,若原来存在样式,则会被high替代
    追加样式    addClass()  
    
    如果给一个元素添加了多个class值,那么就相当于合并了它们的样式 
    如果有不同的class设定了同一样式属性,则后者覆盖前者
    
    $("p").addClass("another") 
    移除样式
    removeClass()    //不加参数时,删除所有class
    判断是否有某个样式
    hasClass()  判断元素中是否含有某个class,如果有,返回true,否则返回false
    
    $("p").hasClass("another")

    设置和获取HTML、文本和值

    1.html()方法  读取或设置某个元素中的html代码
    
    $("p").html("<strong>选择你最喜欢的水果</strong>")    //设置p的html代码
    
    var  p_html =$("p").html()  //获取p的html代码
    2.text()方法  读取或设置某个元素中的文本内容,与html()用法一样
    3、value()方法   获取和设置元素的值,无论元素是文本、下拉列表还是单选框,它都可以返回元素的值,如果元素为多选,则返回一个包含所有选择的值的数组

    遍历节点

    1、children()     //子元素
    2、next()          //后面紧邻的同辈元素
    3、prev()         //前面紧邻的同辈元素
    4、silblings()   //前后所有的同辈元素
    5、find()    //搜索所有与指定表达式匹配的元素

    CSS-DOM操作

    css() 方法获取和设置元素的样式属性
    
    var p_clor =$("p").css("color")   //获取p的颜色
    $("p").css("color","green")    //设置颜色
    $("p").css{"frontSize":"30px","backgroundColor":"#88888"}   //一次性设置多个样式属性,用key/value形式
  • 相关阅读:
    android报表图形引擎(AChartEngine)demo解析与源码
    eclipse开发android程序常见问题解决办法
    android中监听layout布局
    android中LayoutInflater详解与使用
    WordPress标题函数wp_title()详解
    内网DMZ外网之间的访问规则
    ARTS打卡计划第一周-Share-系统字典模块的设计
    ARTS打卡计划第一周-Tips-ControllerAdvice的使用
    ARTS打卡计划第一周-Review
    ARTS打卡计划第一周-Algorithm
  • 原文地址:https://www.cnblogs.com/HathawayLee/p/9605611.html
Copyright © 2020-2023  润新知