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());
})

dom节点的操作的更多相关文章

  1. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. JS中的DOM— —节点以及操作

    DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下 ...

  3. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

  4. DOM 节点实例操作

    涉及知识点包括节点的所有知识 目的: 自动为文档创建一个目录表 自动创建目录

  5. Jquery Dom节点常用操作

    select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...

  6. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  7. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  8. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  9. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

随机推荐

  1. gitlab

    这里解决gitlab文件上传大小限制 http://blog.csdn.net/fdipzone/article/details/45544497 通过浏览器debug知道是nginx服务解释器 进入 ...

  2. mybatis---实现关联表查询

    推荐学习博客: 1.http://www.cnblogs.com/xdp-gacl/p/4264440.html 2.http://www.cnblogs.com/yaobolove/p/544404 ...

  3. C++ 中的std::vector介绍(转)

    vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单地说,vec ...

  4. lua自定义迭代器

    迭代器 http://www.tutorialspoint.com/lua/lua_iterators.htm 迭代器能够让你遍历某个集合或者容器中的每一个元素. 对于lua来说, 集合通常指代 ta ...

  5. neXtep 安装过程整理

    1 授权root用户远程登录 2  文件下载 http://www.nextep-softwares.com/ 选择DOWNLOAD NOW 选择你需要的版本 我选择的版本是 neXtep.1.0.7 ...

  6. 【转】SQL Server中的事务与锁

    SQL Server中的事务与锁   了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂 ...

  7. linux rhel7 dock6.7安装

    1. 下载dock6.7 先申请license 在这个网址下载http://dock.compbio.ucsf.edu/Online_Licensing/index.htm 2. tar zxvf * ...

  8. C/C++ 结构体 指针 简单输入输出

    #include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; int ma ...

  9. 利用Servlet导出Excel

    -----因为Excel可以打开HTML文件,因此可以利用页面的Form表单把页面中的table内容提交给Servlet,然后后台把提交上来的table内容转换成文件流的形式,并以下载的形式转给客户端 ...

  10. 响应式内容滑动插件jQuery.bxSlider

    bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...