zoukankan      html  css  js  c++  java
  • dom节点的操作

    dom节点的操作 —— jQuery

    内部插入

    1、(结尾)append 方法 、 appendto方法(为了方便链式操作)

    (开头)prepend方法

     
     
     
     
     
    $('#div1').append($('#div2'));      //将div2 插入到 div1 里面的末尾
    $('#div1').appendto($('#div2'));     //将div1 插入到 div2 里面的末尾
    $('#div1').prepend($('#div2'));      //将div2 插入到 div1 里面的开头
    $('#div1').prependto($('#div2'));     //将div1 插入到 div2 里面的开头
     

    外部操作

    ()after方法、before方法

    ()insertafter方法、insertbefore方法

     
     
     
     
     
    $('#h2').after($('#div2'));       //将div2 插入到 h2 的末尾
    $('#h2').before($('#div2'));       //将div2 插入到 h2 的前面
     

    包裹的方法 wrap方法

    替换的方法replacewith()方法 里面可以填入标签

     
     
     
     
     
    $('#div1').replaceWith($('#div2'));     //div1被div2替换   
    $('#div2').replaceAll($('#div1'));      //div2被div1替换   
     

    删除

     
     
     
     
     
    $('#div1').empty();      //将div1里面的内容删除
     

    复制 clone

    筛选

    过滤

     
     
     
     
     
    eq()      //选取某一个,结果为jQuery对象      注意与get()区分,get(),结果为原生对象
    first()    //获取第一个
    last()     //获取最后一个
    hasClass('类名')    //有的话,返回,true    没有的话,返回false
     

    事件处理(冒泡阶段)

     
     
     
     
     
    on()     //绑定事件
    function  fn(){
      console.log('hello');   
    }
    $('p').on('click',fn);
    off()     //取消绑定事件
    $('p').off('click',fn);
    ready()   //页面加载完成事件
    $(document).ready(function(){
      
    })
     

    事件委托

     
     
     
     
     
    ul.onclick=function(event){
      if(event.taget.nodeName===LI){
         console.log(event.taget.innerHTML);     
      }
    }
    $('#ul').on('click','li',function(){
      console.log($(this).html());
    })
  • 相关阅读:
    剑指offer面试题43:n个筛子的点数
    【面试题经典重温【原创】】求子数组的最大和
    C#中RSA加密解密和签名与验证的实现
    获取Treeview中CheckBox选中项的技巧(winform)
    12个优秀的云计算操作系统
    c#隐藏TextBox中闪烁的光标
    C#操作MySQL数据库的简单例子
    如何设置MySQL远程连接
    图文并茂 在MyEclipse 8.6上搭建Android开发环境
    Web开发/设计人员应当知道的15个网站
  • 原文地址:https://www.cnblogs.com/xuyang1995/p/6060348.html
Copyright © 2011-2022 走看看