jQuery的文档操作
1、插入操作
一、父元素.append(子元素) 追加某元素 父元素中添加新的元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
//jquery中的dom操作
//1.append(content)追加 往父元素中添加新的元素
//content:string | element | jquery元素
$('ul').append('<li>1233</li>')
$('ul').append(oli)
//如果直接的内容是当前页面中的某些元素,那么这些元素将从原位置上消失。简言之,就是一个移动操作
$('ul').append($('#app'))
二、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')
三、prepend() 前置添加, 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
四、prependTo 后置添加,第一个元素添加到父元素中
$('<a href="#">路飞学诚</a>').prependTo('ul')
五、父.after(子) 在匹配的元素之后插入内容 与 子.insertAfter(父)
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
六、父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
2、复制操作
clone() 克隆匹配的DOM元素并且选中这些克隆的副本
$('button').click(function() {
// 1.clone():克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
3、替换操作
一、replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4、删除操作
一、remove() 删除节点后,事件也会删除(简言之,删除了整个标签)
$('ul').remove();
二、detach() 删除节点后,事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
三、empty(): 清空元素中的所有后代节点
//清空掉ul中的子元素,保留ul
$('ul').empty()
jQuery的文档操作的更多相关文章
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- jQuery 的文档操作
在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...
- (20)jQuery的文档操作(创建,添加、设置样式和删除等)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
- 前端jQuery之文档操作
1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...
- jquery之文档操作
append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...
- jQuery系列(六):jQuery的文档操作
1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...
- 【JQuery】文档操作
一.前言 接着上一章的内容,接着JQuery的学习 二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
随机推荐
- Nginx 多进程连接请求/事件分发流程分析
Nginx使用多进程的方法进行任务处理,每个worker进程只有一个线程,单线程循环处理全部监听的事件.本文重点分析一下多进程间的负载均衡问题以及Nginx多进程事件处理流程,方便大家自己写程序的时候 ...
- 理解 Ruby Symbol (Ruby中的冒号)
http://blog.csdn.net/besfanfei/article/details/7966850 一直不明白:的作用 直到看到这篇文章 豁然开朗 处理符号相比字符串,占用更少的资源
- Laravel框架中Validor中错误信息$error的输出
@if (count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($e ...
- CF 148D Bag of mice 概率dp 难度:0
D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- linux 命令 --if
if else-if else 语法格式: if condition1 then command1 elif condition2 then command2 else commandN fi 例如: ...
- js固定表头的实现(转)
原文链接:http://www.th7.cn/web/js/201509/121055.shtml 参考链接:http://www.jb51.net/article/102568.htm 写两个表格, ...
- [QT][SQLITE]学习记录二 日期查询
资料例程: 1.dongfangyu SQL时间段查询 : http://blog.csdn.net/dongfangyu/article/details/4607236 2.痕网 - henw S ...
- springboot整合mybatis增删改查(一):项目创建
新建 打开 IDEA 工具,通过 File -> New -> Project->Spring Initializr 主要步骤包括: 选择 Spring Initializr 项目 ...
- RabbitMQ引入
引入MQ话题 可能很多人有疑惑:MQ到底是什么?哪些场景下要使用MQ? 前段时间安装了RabbitMQ,现在就记录下自己的学习心得吧.首先看段程序: class Program { static vo ...
- python面试(十四)
1.下面代码会输出什么? map(lambda x:x*x,[y for y in range(3)]) [, , ] 答案 2.下面代码会输出什么? def f(x, l = [] ) for i ...