zoukankan      html  css  js  c++  java
  • jQuery中的DOM操作(三)

    一、查找节点    【返回jQuery对象
    $(选择器字符串);    
    使用jQuery函数,里面参数为选择器字符串,查询符合条件的BOM对象并返回jQuery对象
    eg:

        $('div.one span:first');    //查询所有类名为one的div里面的所有后代span里面的第一个span元素


    二、创建节点
    $(HTML文本字符串);
    使用jQuery函数,里面参数为要创建的节点字符串,返回jQuery对象
    eg:

        var $newNode = $("<span>hello<span>");    //创建一个span节点,里面内容为hello


    三、插入节点    
    对于下面这些方法的一些相关说明:
    a、参数:一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象
    b、如果将页面上的元素插入到某元素内,则该插入的元素会从页面上移动过去,原来页面上的元素则会不存在【同一元素节点在页面上是唯一的

    1、插入节点作为最后孩子
    append()    【在自身内部插入其它节点作为最后孩子
    向调用该函数的jQuery对象中所有DOM节点内容最后面插入该节点,即将该节点作为他们的最后孩子插入
    eg:

        var $node = $("<span>hello</span>");
        $('div').append($node);        //将$node插入到所选取的div内容最后,作为div的最后一个孩子


    appendTo()    【将自身插入到其它节点内容中作为最后孩子
    调用方法者与需要插入的节点和append()恰好相反
    eg:

        $("<span>hello</span>").appendTo($('div'));    //将span节点插入到所有匹配的div中并作为div的最后孩子


    2、插入节点作为开始孩子
    prepend()    【在自身内部插入其它节点作为开始孩子】    
    向调用该函数的jQuery对象中所有DOM节点内容最前面插入该节点,即将该节点作为他们的最开始的孩子插入
    eg:

        $('div').appendTo($("<span>hello</span>"));    //将span节点插入到所有匹配的div中并作为div的开始孩子


    prependTo()    【将自身插入到其它节点内容中作为开始孩子】    
    调用方法者与需要插入的节点和prependTo()恰好相反
    eg:

        $("<span>hello</span>").prependTo($('div'));    //将span节点插入到所有匹配的div中并作为div的开始孩子


    3、插入节点作为兄弟元素
    after()    【将节点插入到自身后面作为自己后面的兄弟元素
    在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点插在每个匹配元素的后面。

    insertAfter()   【将自身插入到节点后面作为节点后面的兄弟元素
    调用方法者与需要插入的节点和after()恰好相反

    before()    【将节点插入到自身前面作为自己前面的兄弟元素
    在匹配元素的前面插入内容(外部插入)作为其兄弟节点插在集合中每个匹配元    素前面。

    insertBefore()将自身插入到节点前面作为节点前面的兄弟元素
    调用方法者与需要插入的节点和before()恰好相反

    四、删除节点
    remove([selector])返回被删除的节点对象
    删除指定元素并删除其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中不包含有原来的事件及相关的jQuery数据)
    eg:

        $('div').remove('.one');    //删除类名为one的div
        $('div.one').remove();    //删除类名为one的div


    detach([selector])    【返回被删除的节点对象
    删除指定元素但会保留其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中包含有原来的事件及相关的jQuery数据)
    eg:

        $('div:not(".one")').remove(':first');    //删除类名不为one的div中的第一个div
        $('div.one').remove();    //删除类名为one的div


    empty()  【清空元素内容
    无参数,移除匹配元素的所有子节点
    eg:

        $('div:contains("one")').empty();    //清空的div内容中包含文本one的div元素内容



  • 相关阅读:
    调度算法的评价指标
    进程调度的时机 切换与过程调度方式
    处理机调度 概念和层次
    线程概念 多线程模型
    进程通信
    进程的状态与转换
    进程的定义
    系统调用
    面试题3
    第2章Arduino UNO板结构说明
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11266846.html
Copyright © 2011-2022 走看看