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内容;
&lt;div&gt;&lt;strong&gt;文本内容&lt;/strong&gt;&lt;/div&gt;
var div_html = $("div").html();
alert(div_html);
获取的结果是:&lt;strong&gt...
        jQuery样式选择器可以通过$(".test1.test2.tt3")方式,也可以通过$("[class='test1 test2 tt3']")方式,如下实例所示:
&lt;html&gt;
&lt;head&gt;
		&lt;title&gt;jQuery样式选择器&lt;/title&gt;
		&lt;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 jquerydom操作包括了对html内容的添加、删除元素/内容、操作CSS等等,本文整理了一些dom操作的常用方法,感兴趣的朋友可以参考下哈 Jquerydom操作也是很总要的。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操作 *jQueryJavaScript中的DOM操作进行了封装
jQueryDOM基本操作 jQuery中的DOM操作主要对包括:建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。 【查】查找结点 查找节点非常容易,使用选择器就能轻松完成各种查找工作。 就是利用我们前面学习的选择器来查找节点的。 例:查找元素节点p返回p内的文本内容。 $("p").text(); 例:查找元素节点p的属性返回属性名称对应的属性值 $("p").attr("title"); //.