《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

3.1   DOM基础
示例3-1     创建一个DOM页面文档

	
		
		
		
		
	
	
		

			
Td1
			
Td2
		
		
Div
		
p
		
Span
		

			
Li1
			
Li2
		
	

3.2   访问元素
主要包括对元素属性，内容，值，css的操作。

3.2.1 元素属性的操作(获取attr()，设置attr()，删除removeAttr())
1.   获取元素的属性: attr(name)
示例3-2     通过attr(name)方法获取元素的属性

2.   设置元素的属性:attr(key, value)   attr({key0:value0, key1:value1});
示例3-3     设置元素的属性(一)

	
		
		
		
		
	
	
		
		正在加载图片
	

示例3-4     设置元素的属性(二)

3.   删除元素的属性: removeAttr(name);
3.2.2 元素内容的操作
1.   方法有html()和text()
html()获取或设置元素的html内容
text()获取或设置文本的内容
2.   html()和text()方法的区别

语法格式	参数说明	功能描述
html()	无参数	用于获取元素的HTML内容
html(val)	val参数为元素的HTML内容	用于获取元素的HTML内容
text()	无参数	用于获取元素的文本内容
text(val)	val参数为元素的文本内容	用于设置元素的文本内容

说明:html()方法仅支持XHTML的文档,不能用于xml文档，而text()都支持。
3.   示例3-5     设置或获取元素的内容

	
		
		
		
		
	
	
		
Write Less Do More
		

		

	

3.2.3 获取或设置元素值:
1.   val(val)和val() 常用于表单中获取或设置对象的值
2.   val()方法还可以获取select标记中的多个选项值: val().join(",")
3.   示例3-6   设置或获取元素的值

	
		
		
		
		
	
	
		

			
				Item 1
				Item 2
				Item 3
				Item 4
				Item 5
				Item 6
			
			

		
		

			
			

		

	

说明:在val(val）方法中，如果有参数，其参数还可以是数组的形式，即val(array).其作用是设置元素被选中。因此，$(":radio").val(["radio2","radio3"])意思是:id号为radio2和radio3的单选框被选中
3.2.4 元素样式操作
包括直接设置样式，增加CSS类别，类别切换，删除类别
1.   直接设置元素样式值: css(name, value)
示例3-7     直接设置元素样式值

	
		
		
		
		
	
	
		
 Write Less Do More
	

2.   增加CSS类别: addClass(Class)   addClass(class0 class1...)
示例3-8     增加元素CSS类别

	
		
		
		
		
	
	
		
Write Less Do More
	

注意:使用addClass()方法仅是追加样式类别，即它还保存原有的类别.
3.   类别切换: toggleClass(class)
示例3-9    类别切换

4.   删除类别:  removeClass(class)
class不写，删除所有。
注意:toggleClass()与css(),addClass()的区别



3.3 创建节点元素
格式:$(html)
例: var $div = $("

Write Less Do More

");
   $("body").append($div);
示例3-10    动态创建节点元素

	
		
		
		
		
	
	
		

			

			

				
元素名:
					
						p
						div
					
				

				
内容为:
					
				

				
属性名:
					
						title
					
				
				
属性值:
					
				
				

					
				
			
		
		

	

注意:函数$(html)只完成DOM元素创建，加入到页面还需要通过元素节点的插入或追加操作；同时在创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果.





3.4 插入节点
内部插入和外部插入

3.4.1 内部插入节点

语法格式	参数说明	功能描述
append(content)	content表示追加到目标的内容	向所选择的元素内部插入内容
append(function(index, html))	通过function函数返回追加到目标中的内容	向所选择的元素内部插入function函数返回的内容
appendTo(content)	content表示追加的内容	把所选择的元素追加到另一个指定的元素集合中
prepend(content)	content表示插入目标元素内部前面的内容	向每个所选择的元素内部前置内容
prepend(function(index, html))	通过function函数返回插入目标元素内部前面的内容	向所选择的元素内部前置function函数所返回的内容
prependTo(content)	content表示用于选择元素的jQuery表达式	将所选择的元素前置到另一个指定的元素集合中

1.   append(function(index,html))
示例3-11    插入节点(一)

	
		
		
		
		
	
	
		
jQuery
	

2.   appendTo(content)
示例3-12    插入节点(二)

3.4.3   外部插入节点

语法格式	参数说明	功能描述
after(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
after(function)	通过function函数返回插入目标外部后面的内容	向所选择的元素外部后面插入function函数所返回的内容
before(content)	content表示插入目标元素外部前面的内容	向所选择的元素外部前面插入内容
before(function)	通过function函数返回插入目标外部前面的内容	向所选择的元素外部前面插入function函数所返回的内容
nsertAfter(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部前面插入function函数所返回的内容
insertBefore(content)	content表示插入目标元素外部前面的内容	将所选择的元素插入另一个指定的元素外部前面

1.   after(function)
示例3-13    外部插入节点

	
		
		
		
		
	
	
		jQuery
	

3.5 复制节点:clone()与clone(true)
示例3-14    复制元素节点

注意:clone(true)





3.6 替换节点: replaceWith(content)与replaceAll(selector)  
示例3-15    替换元素节点

	
		
		
		
		
	
	
		
姓名:
		
邮箱:
	

注意:replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。一旦替换完成，事件全部消失。





3.7 包裹节点

语法格式	参数说明	功能描述
wrap(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用其他字符串代码包裹起来
wrap(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用其他DOM元素包裹起来
wrap(fn)	fn参数为包裹结构的一个函数	把所有选择的元素用其他DOM元素包裹起来
upwrap()	无参数	移除所选元素的父元素或包裹标记
wrapAll(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用单个元素包裹起来
wrapAll(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素用单个DOM元素包裹起来
wrapInner(html)	html参数为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来
wrapInner(elem)	elem参数用于包装所选元素的DOM元素	把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来
wrapInner(fn)	fn参数为包裹结构的一个函数	把所有选择的元素的子内容(包括文本节点)用function函数返回值包裹起来

注:wrap(html)与wrapInner(html)方法常用，前者包裹外部元素，后者包裹元素内部的文本字符。
示例3-16    包裹元素节点

	
		
		
		
		
	
	
		
最喜欢的体育运动:羽毛球
		
最爱看哪类型图书:网络，技术
	

3.8 遍历元素:each(callback)
示例3-17    遍历元素

3.9 删除元素:remove([expr])与empty()
示例3-18    删除元素

	
		
		
		
		
	
	
		

			
学号
			
1001
			
1002
			
1003
			

				
			
		
	

3.10 综合案例分析-----数据删除和图片预览在项目中的应用

3.10.1 需求分析
3.10.2 效果界面
3.10.3 功能实现
示例3-19    数据删除和图片预览在项目中的应用

	
		
		
		
		
	
	
		

			

				
选项
				
编号
				
封面
				
购书人
				
性别
				
购书价
			
			

				

				
1001
				

				
李小明
				
男
				
35.60元
			
			

				

				
1002
				

				
刘明明
				
女
				
37.80元
			
			

				

				
1003
				

				
张晓星
				
女
				
45.60元
			
		
		

			

				

					全选
					
				
			
		
		
	

3.10.4 代码分析

代码下载:点击打开链接