jQuery进行DOM操作记录
1.在元素内部插入DOM元素
①插入到元素内部原有元素之后
append(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下:
$("#1").append("input type='button' value='确定'/>") 在1的内部元素的后面添加一个按钮
$("#1").append($(".class")[0]) 在1的内部元素的后面添加css类为class的元素集中的第一个元素
appendTo(content) 返回值:jQuery 参数-content:被插入的元素StringElement,jQuery
把所有匹配的元素添加到指定的元素内,参数既可以是字符串也可以是jQuery对象,如下:
$("#1").appendTo($("#2")) 在2的内部元素的后面添加1
②插入到元素内部原有元素之前
prepend(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
prependTo(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
它们分别与append(content)和appendTo(content)的用法一致,但区别是它们是在被插元素的内部元素之前插入元素
以上函数都只能匹配div等容器性质的元素,因为这些函数是为匹配元素内部添加元素,如一下给input添加元素会出错,因为input不能包含元素
$("input").append("ABC");
2.在元素外部插入DOM元素
①插入到元素外部之后
after(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
为每一个匹配的元素后面添加一些元素,参数既可以是字符串也可以是jQuery对象
insertAfter(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
把所有匹配的元素添加到指定的元素后面
$("#1").after($("#2")) 把2添加到1后面 $("#1").insertAfter($("#2")) 把1添加到2后面
②插入到元素外部之前
before(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
insertBefore(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
它们分别与after(content)和insertAfter(content)的用法一致,但区别是它们是在被插元素的外部之前插入元素
3.包裹DOM元素
①包裹外部元素
wrap(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery
为每一个匹配的元素外面包上一层元素
$(".1").wrap("#2") 为css类是1的元素外面包上2元素 $(".1").wrap("<div class='3'></div>") 包上<div>
wrapAll(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery
为所有匹配元素只在他们外面包裹一个元素
$(".1").wrapAll("<div class='3'></div>") 为所有css类是1的元素外面只包一层<div>
②包裹内部元素
wrapInner(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery
为每一个匹配元素内的所有子元素外部包一层元素
4.替换DOM元素
replaceAll(selector) 返回值:jQuery 参数-selector:被替换的元素Element,jQuery
用匹配的元素替换掉所有selector匹配的元素
$("#1").replaceAll(".class") 用1替换掉所有css类是class的元素
replaceWith(content) 返回值:jQuery 参数-content:用来替换的元素String,Element,jQuery
将所有匹配的元素用指定的HTML或DOM元素替换
$(".class").replaceWith("#1") 用1替换掉所有css类是class的元素
$(".class").replaceWith("<div class='3'></div>") 用div替换掉所有css类是class的元素
5.删除DOM元素
empty() 返回值:jQuery 删除所有匹配元素的内容,只是内容,还剩架子
remove(expr) 返回值:jQuery 参数-expr:筛选元素的表达式String 删除所有匹配的DOM元素
6.克隆DOM元素
clone(true) 返回值:jQuery 参数-true:是否将被克隆的元素的所有事件也克隆到新的元素上
$("#1").clone(true).appendTo("#2")
将1连其绑定的事件一起克隆,然后将克隆的新元素添加到2元素的内部所有子元素之后
转载于:https://www.cnblogs.com/ranzige/p/3821584.html
jQuery进行DOM操作记录相关推荐
- 03-老马jQuery教程-DOM操作(上)
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- jQuery的DOM操作
jQuery的DOM操作 前期:http://blog.csdn.net/goodshot/article/details/20202019 1 , 创建元素节点 传统的javascript方法,创建 ...
- jQuery 之 [ DOM操作 ]
jQuery的DOM操作 查找节点 元素节点 可以通过jQuery选择器来查找元素节点 属性节点 通过attr()方法来获取指定元素节点的属性节点 文本节点 通过text()方法来获取指定元素节点的文 ...
- jquery的dom操作之创建节点
1.创建元素节点 创建元素节点就是使用jquery创建纯净的html元素.比如下面 <!doctype html> <html lang="en"> < ...
- jquery的Dom操作查找节点
1.查找元素节点 使用之前的jquery的各种选择器按照语法:"$(选择器)"来定位到文档中的元素,我们定位后得到的是一个jquery对象.我们可以使用juery提供的方法来操作我 ...
- day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、 对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
- JQuery:DOM操作
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构. DO ...
- 2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
- jQuery中DOM操作
1.DOM操作的分类 DOM操作一般分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 2.查找节点 2.1查找元素节点 获取元素节点并打印它的文本内容 var $li = $(&q ...
最新文章
- 2-spark学习笔记-spark发展概述
- 怎么配置在谷歌和ie内核时使用不同的_重磅!微软竟然研发了谷歌内核的edge
- 《javaScript100例|03》自写javaScript+CSS轮显效果
- java犀牛是什么意思_深入浅出Rhino:Java与JS互操作
- 飞鸽传书2014怎么用?
- php 微信pic_url,一段代码实现微信公众号开发校园图书馆
- C# 简单连接数据库并执行SQL查询语句
- 锻造完美U盘小偷:活用消息机制
- 中国人工智能学会通讯——人工智能在各医学亚专科的发展现状及趋势 1.6 结束语...
- BZOJ 1934 善意的投票
- 文华财经数据导出工具
- 北斗心脏——高精度时间频率系统
- C语言DCT图像,任意长度DCT变换C语言实现方法
- PHP合并两张(多张)图片
- finecms php7cms,FineCMS评测 是精简版的Phpcms v9?
- 手机号微信号绑定微信号_相关计算机,新手机号被绑定过微信号怎么办?这是个“二次”放号的号码...
- 基础实验5-2.2 电话聊天狂人(Map的使用+例题)
- Layui表格实现显示空白行数据
- 几何画板中去除画出的线段的教程
- 电磁兼容(EMC)基础(二)
热门文章
- DXperienceEval-6.2.4 DXperience for MS Visual Studio 2002 2003 破解
- 轨道病害视觉检测:背景、方法与趋势
- 直播课 | 三维人体扫描与AI测量
- 单CPU处理1s视频仅需37ms、GPU仅需10ms,谷歌提出TVN视频架构
- 【TensorFlow】TensorFlow从浅入深系列之六 -- 教你深入理解经典损失函数(交叉熵、均方误差)
- 李沐分享斯坦福2021秋季新课:实用机器学习
- 深度学习(七十)darknet 实现编写mobilenet源码
- ubuntu同时装有MXNet和Caffe框架
- php 日期format不要零_PHP格式化日期用法代码,包括前导零示例
- java程序 计算器_简单计算器(java)