js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点
一、总结
一句话总结：
1、jquery插入节点8个方法？
内部之前，内部之后，之前，之后；各两个
- append()和appendTo()
- append() 方法在被选元素的结尾插入指定内容。
语法1：$(selector).append(content)
语法2：$(selector).append(function(index,html))
- appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。
语法：$(content).appendTo(selector)
append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
- append() 方法在被选元素的结尾插入指定内容。
- prepend()和prependTo()
- prepend(),prependTo() 方法在被选元素的开头（内部）插入指定内容。
- 使用方法和appendTo()，append()类似
- before()和insertBefore()
- before(content|fn):在每个匹配的元素之前插入内容。
- insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
- after()和insertAfter()
- after(content|fn):在每个匹配的元素之后插入内容。
- insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
2、jquery创建节点方法？
$(html) 如：$("< li >< /li >")
36 //var $li=$('<li></li>')
37 //var $li=document.createElement('li')
3、append() 和 appendTo()的区别和联系？
append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
二、jquery创建和插入节点
1、相关知识
DOM操作
DOM操作是jQuery核心内容之一，在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。
我们之前学习了html(),text()方法为文档添加新的内容，但是更多时候我们需要在现有内容之上增加或修改某些内容，这就要用到我们接下来要讲的节点操作。
- 创建节点：$(html) 如：$("< li >< /li >")
- 插入节点
- append()和appendTo()
- append() 方法在被选元素的结尾插入指定内容。
语法1：$(selector).append(content)
语法2：$(selector).append(function(index,html))
- appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。
语法：$(content).appendTo(selector)
append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
- append() 方法在被选元素的结尾插入指定内容。
- prepend()和prependTo()
- prepend(),prependTo() 方法在被选元素的开头（内部）插入指定内容。
- 使用方法和appendTo()，append()类似
- before()和insertBefore()
- before(content|fn):在每个匹配的元素之前插入内容。
- insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
- after()和insertAfter()
- after(content|fn):在每个匹配的元素之后插入内容。
- insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
- append()和appendTo()
- 删除节点
- remove():删除匹配的元素集合中所有的子节点。
绑定的事件，附加的数据等都会被移除。
- detach():从DOM中删除所有匹配的元素。
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
- empty():删除匹配的元素集合中所有的子节点。
remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。
- remove():删除匹配的元素集合中所有的子节点。
- 复制节点
语法：$(selector).clone(includeEvents)includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。
- 包裹节点:
- wrap():把每个被选元素放置在指定的 HTML 内容或元素中。
- wrapAll():将所有匹配的元素用单个元素包裹起来
- unwrap():移出元素的父元素。
- wrapInner():将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
- 替换节点
- replaceWith():用指定的 HTML 内容或元素替换被选元素。
- replaceAll():用指定的 HTML 内容或元素替换被选元素。
replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
- 遍历节点:each()
在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。
语法：$(selector).each(function(index))
2、代码
代码9-9
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
background: #ccc;margin-top: 5px;width: 150px;
}
.orange{background: orange}
div{
background: green;
width: 20px;height: 20px;
display: inline-block;
}
</style>
</style>
</head>
<body>
<div id="div1"></div>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<input id="btn1" type="button" value="节点插入1">
<input id="btn2" type="button" value="节点插入2">
<input id="btn3" type="button" value="节点插入3">
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
//创建节点 '$()方法'创建节点
//var $li=$('<li></li>')
//var $li=document.createElement('li')
var $li=$('<li class="orange"></li>')
$('ol').append($li)
}) $('#btn2').click(function(){
$('li').append(function(index,html){
return '<div>'+index+'</div>'+html
})
}) $('#btn3').click(function(){
$('li').append($('#div1'))
})
})
</script>
</body>
</html>
代码9-10
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
background: #ccc;margin-top: 5px;width: 150px;
}
.orange{background: orange}
div{
background: green;
width: 20px;height: 20px;
display: inline-block;
}
</style>
</style>
</head>
<body>
<div id="div1"></div>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<input id="btn1" type="button" value="节点插入1">
<input id="btn2" type="button" value="节点插入2">
<input id="btn3" type="button" value="节点插入3">
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
var $li=$('<li class="orange"></li>')
//$('ol').append($li)
//$($li).appendTo('ol')
//$('ol').prepend($li)
$($li).prependTo('ol')
}) $('#btn2').click(function(){
// $('li').append(function(index,html){
// return '<div>'+index+'</div>'+html
// })
$('li').prepend(function(index,html){
return '<div>'+index+'</div>'
})
}) $('#btn3').click(function(){
//$('li').append($('#div1'))
//$($('#div1')).appendTo($('li')) //$('li').prepend($('#div1'))
$($('#div1')).prependTo($('li'))
})
})
</script>
</body>
</html>
代码9-11
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
background: #ccc;margin-top: 25px;width: 150px;
}
.orange{background: orange}
</style>
</style>
</head>
<body>
<div id="div1"></div>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<input id="btn1" type="button" value="after">
<input id="btn2" type="button" value="before">
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
var $li=$('<li class="orange">我是新添加的</li>')
//$('li').append($li)
//$('li:nth-child(2)').append($li)
//$('li:nth-child(2)').after($li)
// $('li:nth-child(2)').after(function(){
// return '<li class="orange">我是新添加的</li>'
// })
$($li).insertAfter('li:nth-child(2)')
})
$('#btn2').click(function(){
var $li=$('<li class="orange">我是新添加的</li>')
//$('li:nth-child(2)').before($li)
// $('li:nth-child(2)').before(function(){
// return '<li class="orange">我是新添加的</li>'
// })
$($li).insertBefore('li:nth-child(2)') })
})
</script>
</body>
</html>
js进阶 11-9/10/11 jquery创建和插入节点的更多相关文章
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- js进阶 11-24 jquery如何实现选项卡的制作
js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...
- iOS冰与火之歌(番外篇) - 基于PEGASUS（Trident三叉戟）的OS X 10.11.6本地提权
iOS冰与火之歌(番外篇) 基于PEGASUS(Trident三叉戟)的OS X 10.11.6本地提权 蒸米@阿里移动安全 0x00 序 这段时间最火的漏洞当属阿联酋的人权活动人士被apt攻击所使用 ...
- 战神Z7 D2安装黑苹果OS X El Capitan 10.11.2
安装之初状态:两块硬盘,都是MBR格式分区,一块是机械硬盘,安装了WIN7 32位和Linux,一块是SSD,安装的是WIN7 64位与WIN10 64位以前玩过Mavericks,安装的就是在硬盘的 ...
随机推荐
- Linux与好莱坞电影
Linux与好莱坞电影 2009年底上映的<阿凡达>是电影特效的巅峰之作,除此之外还有<2012>每次观看之后总能让我们热血沸腾. 很早以前电影特效都 ...
- 版本管理系统：svn和git
svn是常用的版本管理系统,解决团队协作开发和版本管理问题, 一.服务器端:是一个文件存储仓库,可以设置用户并管理其访问的权限.主要功能包括 ①设置文件存储路径,是管理文件版本的基础 ②设置用户:可以 ...
- sql server向表里添加字段
ADD mcTypeE VARCHAR(20) NULL,mcGoodsE VARCHAR(20) NULL, mcTypeF VARCHAR(20) NULL,mcGoodsF VARCHAR(20 ...
- 洛谷 P2655 2038年问题
P2655 2038年问题 题目描述 网络时代,机会与危机共存.“千年虫”解决之后,会不会有新的“虫”出现?回答是肯定的,“2038年”就是一个新的关卡. 也许大家都已经知道计算机的2000年问题是什 ...
- C++ 学习路线推荐
相信有非常大一部分学计算机的童鞋都是靠自学,即使本身是计算机专业的同学,也会认为只通过课堂上的学习是远远不够的,并且在上课时所用到的教材也不够好.然而自学的时候有个非常大的问题就是找不到合适的 ...
- GO语言学习（十三）Go 语言变量作用域
Go 语言变量作用域 作用域为已声明标识符所表示的常量.类型.变量.函数或包在源代码中的作用范围. Go 语言中变量可以在三个地方声明: 函数内定义的变量称为局部变量 函数外定义的变量称为全局变量 函 ...
- C#执行sql文件
C# 执行sql文件 2012-05-11 12:28:57| 分类: App Develop|举报|字号 订阅 /// <summary> /// 执行sq ...
- Codeforces Round #445 Div. 1 C Maximum Element (dp + 组合数学)
题目链接: http://codeforces.com/contest/889/problem/C 题意: 给你 \(n\)和 \(k\). 让你找一种全排列长度为\(n\)的 \(p\),满足存在下 ...
- Project Euler 613 Pythagorean Ant（概率+积分）
题目链接:点击我打开题目链接 题目大意: 给你一只蚂蚁,它在一个 边长为 \(30-40-50\) 的直角三角形\((x,y)\)上,并且它在直角三角形中选择的位置和移动方向的概率都是相等的.问你这只 ...
- C#基础数据类型与字节数组（内存中的数据格式）相互转换（BitConverter 类）
在某种通讯协议中(如 Modbus),可能需要把一些基本的数据类型内存中的表示形式转换成以字节数组的形式,方便传送.C/C++中可以利用指针等操作完成,但C#中没有指针,咋办呢?可以用BitCon ...