jquery之文档操作
append(content|fn) 向每个匹配的元素内部添加内容(元素内部)
appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部)
prepend(content) 向每个匹配元素内部前置内容,是向所有匹配元素内部前置内容的最好方法(元素内部)
prependTo(content) 把所有匹配的元素前置到另一个指定的元素集合中(元素内部)
after(content|fn) 在每个匹配的元素之后插入内容(元素外部),$(A).after(B)的操作,把B插入到A后面
before(content|fn) 在每个匹配的元素之前插入内容(元素外部)
insertAfter(content) 把所有匹配的元素插入到插入到另一个指定的元素集合后面
empty() 删除所有匹配元素的子元素
remove([expr]) 删除所有匹配元素
HTM示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<b>好亮</b> <h1>第一个标题</h1>
<img src="57eb.jpg">57eb.jgp
<div class="nav-2014">nav-2014
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt" style="color: red;font-size: 25px">家用电器分类</div>
<div class="dp" style="color: green;font-size: 12px;">家用电器价格</div>
<img src="rB3.jpg">
</div>
<span class="hr">11</span>
<div class="navitems-2014 chr1 chr2">
<div id="treasure"></div>
<span class="clr clr1"></span>
<span class="chr"></span>
男:<input type="checkbox" value="nan">
女:<input type="checkbox" value="nv">
<input type="text" value="2">
<input type="text" value="3">
</div>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
</div>
</div>
<h2>第二个标题</h2>
<p>第一段</p>
<p>第二段</p>
</body>
</html>
jquery举例
<script src="jquery-3.1.0.js"></script>
<script>
// 向第一个p元素内部添加b标签
$("p:first").append("<b>是红色</b>")
// 把最后一个p元素添加到li元素中
$("p:last").appendTo("li")
// 向dt类元素内容前插入最后一个p元素内容
$(".dt").prepend($("p:last"))
// 将第一个img元素插入到li元素前部
$("li").prepend($("img")[0])
// 把dp元素插入到所有li元素前部
$(".dp").prependTo($("li"))
// 向span元素内容后面插入b元素
$("span").after("<b>insert after</b>")
// before与之相似
// 将li的第一个元素插入到li的最后一个元素后面
$("li:first").insertAfter($("li:last"))
// insertBefore与insertAfter相反
// 删除ul元素的所有子节点
$("ul").empty()
// 删除所有input元素
$("input").remove()
// 删除所有div标签中类名为dt的元素,与remove功能一致?
$("div").detach(".dt")
// 将第一个b元素复制后插入到类nav-2014的前面
$("b:first").clone().prependTo(".nav-2014")
</script>
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的文档操作
1.插入操作 一.父元素.append(子元素) 追加某元素 父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...
- 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 ...
随机推荐
- iOS开发:保持程序在后台长时间运行
iOS开发:保持程序在后台长时间运行 2014 年 5 月 26 日 / NIVALXER / 0 COMMENTS iOS为了让设备尽量省电,减少不必要的开销,保持系统流畅,因而对后台机制采用墓碑式 ...
- Material Design使用记录
出现过的问题记录: 1.Crash on Android 6.0 in RippleView.draw() 解决方法: This has very simple solution. Just down ...
- android ORM框架ORMLite封装
源码:http://download.csdn.net/detail/a924571572/9415506 一.框架效率对比 由于目前公司里面android端数据的数据量基本在千条以内,所以选择了更为 ...
- C++ Daily 《6》---- 类静态对象与函数静态对象
C++ 的一个哲学基础是,你不应该为你使用的东西付出代价. class 拥有一个 static 成员,即使从未被用到,它也会被构造和析构: 而 函数拥有一个 static 成员, 如果这个函数从未被调 ...
- [转]python问题:IndentationError:expected an indented block错误解决
分类: python学习笔记2012-07-07 17:59 28433人阅读 评论(4) 收藏 举报 python语言 原文地址:http://hi.baidu.com/delinx/item/17 ...
- 【一套C语言控制台的输出框代码】
效果演示 可以生成一个输出框 首先 要创建输出框,设置输出框风格,可以设置的元素包括: 左上角符号,右上角符号,左下角符号,右下角符号,以及上下左右边界线符号,理论上,只要你电脑能显示的符号,都可以支 ...
- ASP.net页面代码执行顺序
<%=TextBox1 .Text%> <asp:TextBox ID="TextBox1" runat="server">abc< ...
- 简单的URL解析
简单的URL解析,直接举例说明了 function getUrl(){ //如果存在则取到来后面的参数,注意,?不需要取出,substring从1开始,否则取""; var qs ...
- 基于云计算Iaas平台的ZStack
2015年4月,一家全新的基础架构即服务的软件产品ZStack面世.ZStack的主创人员是自在海外云计算公司的中国人.ZStack是基于Java语言,结合了OpenStack和CloudStack上 ...
- Eclipse 打不开
查看环境变量中是否存在重复的javahome变量路径 如上图存在-vm C:\ProgramData\Oracle\Java\javapath\javaw.exe,就和自己配置的javahome变量存 ...