1.在指定节点内插入新节点
以下的内容都用于在打指定节点内添加新内容
1) append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容。
2) append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入function(index,html)函数的返回值。
3) appendTo(selector):将当前jQuery对象包含的DOM元素添加到selecctor匹配的所有DOM的内部的尾部。
4) prepend(content):在jQuery对象包含的所有DOM节点内的顶部插入content所代表的内容,其中content既可以是HTML字符串,也可以是DOM元素,还可以是jQuery对象。
5) prepend(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的顶部依次插入function(index,html)函数的返回值。
6) prependTo(selector):将当前jQuery对象包含DOM元素添加到selector匹配的所的DOM有内部的顶端。
下面是程序示范了这些方法的功能。
<!DOCTYPE html>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加HTML节点 </title>
</head>
<div id="test1"></div>
<div id="test2" style="border:1px solid black;">id为test2的元素</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 直接将一段HTML字符串添加到id为test1的元素的内部的尾端
$("#test1").append("<b>XML</b>");
// 创建一个<span.../>元素
var span = document.createElement("span");
span.innerHTML = "Java"
// 将一个DOM元素添加到id为test1的元素的内部的顶端
$("#test1").prepend(span);
// 将id为test1的元素添加到id为test2的元素内部的尾端
$("#test1").appendTo("#test2");
</script>
</body>
</html>
如果使用append(function(index,html))、prepend(function(index,html))则可以为不同元素添加不同的内容。如下:
<!DOCTYPE html>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加HTML节点 </title>
</head>
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 定义一个数组
var books = [
{name: "Java" , price:109},
{name: "Java EE" , price:89},
{name: "Android" , price:89}]
// 使用函数为不同div元素动态添加不同的内容
$("body>div").append(function(i)
// i代表jQuery对象中正在迭代处理的元素的索引,因此为0、1、2...
return "<b>书名是《" + books[i].name
+ "》,价格是:" + books[i].price;
</script>
</body>
</html>
2.添加外节点
以下的方法用于在目标节点的前面添加新节点
1) after(content):在该jQuery对象包含的所有DOM节点之后添加content对应的内容。
2) after(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点,在每个节点的后面依次添加function(index)函数的返回值。
3) before(content):在该节点jQuery对象包含的所有DOM节点之前添加content对应的内容。
4) before(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点,在每个节点的前面依次添加function(index)函数的返回值。
5) insertAfter(selector):将当前jQuery对象包含的所有DOM节点插入到selector匹配的所有节点之前。
如下程序示范了以上几个插入方法。
<!DOCTYPE html>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 插入HTML节点 </title>
</head>
<div id="test1" style="border:1px dotted black;">id为test1的元素</div><br />
<div id="test2" style="border:1px solid black;">id为test2的元素</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 直接将一段HTML字符串插入到id为test1的元素的的前面
$("#test1").before("<b>Ajax</b>");
// 直接将一段HTML字符串插入到id为test1的元素的的后面
$("#test1").after("<b>XML</b>");
// 将id为test2的元素插入hr元素之后
$("#test2").insertAfter("hr");
// 使用函数在不同节点前添加不同内容
$("body>div").before(function(i)
return "<div style='font-size:14pt'>" + i + "</div>";
</script>
</body>
</html>
下面是方法用于替换节点DOM节点
1) replaceWith(newContent):将当前jQuery对象包含的所有DOM对象替换成newContent.
2) replaceWith(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点,依次使用function(index)函数的返回值来替换jQuery对象包含的每个节点。
3) replaceAll(selector):将当前jQuery对象包含的所有DOM对象替换成selectot匹配的元素。
下面是方法用于删除指定DOM节点
1) empty():删除当前jQuery对象包含的所有DOM节点。
2) remove([selector]):删除当前jQuery对象包含的所有DOM节点。
3) detach(selector):该方法的功能与remove([selector])方法相似,区别只在于detach()方法会保留被删除元素上关联的jQuery数据,当需要在后面某个时刻重新插入该被删除元素时,则该方法会比较有用。
clone([withDataAndEvents]):复制当前jQuery对象包含的所有DOM元素并且选中这些复制出来的副本。当需要把DOM文档中元素的副本添加到其他位置时,这个函数非常有用。
<!DOCTYPE html>
<meta name="author" content=" OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 删除和复制HTML节点 </title>
</head>
<div><span id="test1">id为test1的元素</span>Java</div>
<span id="test2">id为test2的元素</span>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 将div元素内容全部清空
$("div").empty()
// 重新添加字符串
.append("重新添加");
// 删除所有id为test2的span元素
$("span").remove("#test2");
// 取得页面中div元素,并复制该元素
$("div").clone()
// 添加背景色
.css("background-color" , "#cdcdcd")
// 添加到body元素尾部
.appendTo("body");
</script>
</body>
</html>
1.在指定节点内插入新节点 以下的内容都用于在打指定节点内添加新内容1) append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容。2) append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入
一.容易混淆的html(),text(),value()
1、html()方法:可以用来读取或者获取某个元素的html内容;
<div><strong>文本内容</strong></div>
var div_html = $("div").html();
alert(div_html);
获取的结果是:<strong>...
jQuery样式选择器可以通过$(".test1.test2.tt3")方式,也可以通过$("[class='test1 test2 tt3']")方式,如下实例所示:
<html>
<head>
<title>jQuery样式选择器</title>
<script src="jquer
这里写目录标题jquery知识点总结jq认识:关于选择器:子元素过滤选择器:基础选择过滤器:属性选择器:内容过滤器:可见性选择器:表单相关的选择器:动画:动画:dom节点的操作:创建元素节点:鼠标事件:
jquery知识点总结
jq认识:
<!-- JQ版本的入口函数<script src="../js/jquery-1.11.3.js"></script><script>
// $(function(){})这就是我们的入口函数
$(func
1.创建
节点
-在
jQuery中创建一个
节点是非常迅速的,所创建出来的
节点是一个
jQuery对象
使用(“”)工厂
方法,如创建一个div
节点:(“”)工厂
方法,如创建一个div
节点:(“”)工厂
方法,如创建一个div
节点:(‘’)或$(’’),记得标签要闭合
2.插入
节点
在创建好的
节点插入有多种方式:
append() 在
节点末尾添加元素
如:append(content|fn):向每个匹配的元素内部追加内容
$(A).append(B),将B添加到A中
appendTo() 与append作用相同
DOM节点的操作对于原生Js来说就是通过document.createElement()来创建元素,然后通过setAttribute()创建元素的属性和设置属性值。如果要添加一下内容则通过innerHTML()方法给元素添加内容。最后通过appendChild()将该元素添加到body里面或者添加到某个元素里面。
而jQuery对节点操作就不用这么客观、繁琐。jQuery可以直接通过一个appe...
参考:https://www.jb51.net/article/39099.htm
jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等,本文整理了一些dom操作的常用方法,感兴趣的朋友可以参考下哈
Jquery对dom的操作也是很总要的。1.三个简单实用的用于 DOM 操作的 jQuery 方法:
· text() - 设置或返回所选元素的文本内容
· html() - 设置或返回所选元素的内容(包括 HTML 标记)
· val() - 设置或返回表单字段的值2.at
parentNode.childNodes(标准)
parentNode.childNodes 返回包含指定
节点的子
节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子
节点,包括元素
节点,文本
节点等。
如果只想要获得里面的元素
节点,则需要专门处理。 所以我们一般不提倡使用childNodes
parentNode
*DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
*HTML-DOM:用于处理HTML文档,如document.forms
*CSS-DOM:用于操作CSS,如element.style.color="green"
提示:JavaScript用于对(x)html文档进行操作,它对这三类DOM操作都提供了支持
jQuery中的DOM操作
*jQuery对JavaScript中的DOM操作进行了封装
jQuery中DOM基本操作
jQuery中的DOM操作主要对包括:建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。
【查】查找结点
查找节点非常容易,使用选择器就能轻松完成各种查找工作。
就是利用我们前面学习的选择器来查找节点的。
例:查找元素节点p返回p内的文本内容。
$("p").text();
例:查找元素节点p的属性返回属性名称对应的属性值
$("p").attr("title"); //.