JQuery 2

最新推荐文章于 2024-07-14 22:18:32 发布

一定不能掉头发

最新推荐文章于 2024-07-14 22:18:32 发布

阅读量66

点赞数

文章标签： java javascript 前端

本文链接：https://blog.csdn.net/LOOKOUTSTT/article/details/127627657

版权

目录
第一章 jQuery简介
1.1、jQuery简介
1.2、jQuery官网
1.3、jQuery版本介绍
1.4、jQuery引入方式
1.5、jQuery快速使用
1.6、jQuery两把利器
第二章 jQuery核心函数
2.1、选择器
2.1.1、基本选择器
2.1.1.1、标签选择器
2.1.1.2、id选择器
2.1.1.3、class选择器
2.1.1.4、通配符选择器
2.1.1.5、并集选择器
2.1.1.6、交集选择器
2.1.2、层级选择器
2.1.2.1、子代选择器
2.1.2.2、后代选择器
2.1.2.3、兄弟选择器
2.1.3、过滤选择器
2.1.3.1、基本筛选器
2.1.3.2、内容筛选器
2.1.3.3、属性筛选器
2.1.3.4、可见性筛选器
2.1.3.5、子元素筛选器
2.1.4、表单选择器
2.1.4.1、表单类型选择器
2.1.4.2、表单状态选择器
2.2、工具
2.2.1、$.each方法
2.2.2、$.trim方法
2.2.3、$.type方法
2.2.4、$.isArray方法
2.2.5、$.isFunction方法
2.3、ajax
2.3.1、$.ajax方法
2.3.2、$.get方法
2.3.3、$.post方法
第三章 jQuery核心对象
3.1、属性
3.1.1、属性
3.1.1.1、attr()
3.1.1.2、prop()
3.1.1.3、val()
3.1.2、样式
3.1.2.1、css()
3.1.2.2、addClass()
3.1.2.3、removeClass()
3.1.2.4、hasClass()
3.1.2.5、toggleClass()
3.1.3、尺寸
3.1.3.1、width()
3.1.3.2、height()
3.1.3.3、innerWidth()
3.1.3.4、innerHeight()
3.1.3.5、outerWidth()
3.1.3.6、outerHeight()
3.1.3.7、综合演示
3.1.4、位置
3.1.4.1、offset()
3.1.4.2、position()
3.1.4.3、scrollLeft()
3.1.4.4、scrollTop()
3.2、操作
3.2.1、DOM内部插入
3.2.1.1、text()
3.2.1.2、html()
3.2.1.3、append()
3.2.1.4、appendTo()
3.2.1.5、prepend()
3.2.1.6、prependTo()
3.2.2、DOM外部插入
3.2.2.1、after()
3.2.2.2、before()
3.2.2.3、insertAfter()
3.2.2.4、insertBefore()
3.2.3、DOM移除
3.2.3.1、empty()
3.2.3.2、remove()
3.2.4、DOM替换
3.2.4.1、replaceWith()
3.2.4.2、replaceAll()
3.2.5、DOM拷贝
3.2.5.1、clone()
3.2.6、DOM遍历
3.2.6.1、parent()
3.2.6.2、children()
3.2.6.3、prev()
3.2.6.4、prevAll()
3.2.6.5、next()
3.2.6.6、nextAll()
3.2.6.7、siblings()
3.3、遍历
3.3.1、遍历
3.3.1.1、each()
3.3.2、筛选
3.3.2.1、first()
3.3.2.2、last()
3.3.2.3、eq()
3.3.2.4、not()
3.3.2.5、filter()
3.4、事件
3.4.1、浏览器事件
3.4.1.1、resize()
3.4.1.2、scroll()
3.4.2、事件绑定
3.4.2.1、on()
3.4.2.2、off()
3.4.3、事件委托
3.4.3.1、delegate()
3.4.3.2、undelegate()
3.4.4、事件对象
3.4.5、表单事件
3.4.5.1、focus()
3.4.5.2、blur()
3.4.5.3、change()
3.4.5.4、select()
3.4.5.5、submit()
3.4.6、鼠标事件
3.4.6.1、click()
3.4.6.2、dblclick()
3.4.6.3、mousedown()
3.4.6.4、mouseup()
3.4.6.5、mouseenter()
3.4.6.6、mouseleave()
3.4.6.7、mouseover()
3.4.6.8、mouseout()
3.4.6.9、mousemove()
3.4.6.10、hover()
3.4.7、键盘事件
3.4.7.1、keydown()
3.4.7.2、keyup()
3.4.7.3、keypress()
3.5、动画
3.5.1、基础
3.5.1.1、hide()
3.5.1.2、show()
3.5.1.3、toggle()
3.5.2、渐变
3.5.2.1、fadeIn()
3.5.2.2、fadeOut()
3.5.2.3、fadeToggle()
3.5.3、滑动
3.5.3.1、slideDown()
3.5.3.2、slideUp()
3.5.3.3、slideToggle()
3.5.4、自定义
3.5.4.1、animate()
3.5.4.2、stop()
第四章 jQuery插件介绍
4.1、扩展jQuery工具
4.2、扩展jQuery对象
第五章 jQuery项目百练
5.1、项目百练介绍
5.2、项目百练目录

DOM操作

1.内容操作：
html(): 获取/设置元素的标签体内容。
text(): 获取/设置元素的标签体纯文本内容。
val()：获取/设置元素的value属性值。

属性操作
1.通用属性操作

attr(): 获取/设置元素的属性。
removeAttr():删除属性。
prop():获取/设置元素的属性。
removeProp():删除属性。

2.对class属性操作

addClass():添加class属性值。
removeClass():删除class属性值。
toggleClass():切换class属性。

3.CRUD操作

append():父元素将子元素追加到末尾。
对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾。
prepend():父元素将子元素追加到开头。
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。
appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。
prependTo()：
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。
after():添加元素到元素后边。
对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系。
before():添加元素到元素前边。
对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系。
insertAfter()：
对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系。
insertBefore()：
对象1.insertBefore(对象2)：将对象1添加到对象2前边。对象1和对象2是兄弟关系。
remove():移除元素。
对象.remove():将对象删除掉。
empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。

元素增删


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				var data = [{
						"id": 1,
						"name": "方便面",
						"price": 3.5,
						"brand": "白象"
					},
					{
						"id": 2,
						"name": "火腿肠",
						"price": 1.5,
						"brand": "双汇"
					},
					{
						"id": 3,
						"name": "牛奶",
						"price": 4.5,
						"brand": "蒙牛"
					},
					{
						"id": 4,
						"name": "瓜子",
						"price": 6.5,
						"brand": "金鸽"
					},
					{
						"id": 5,
						"name": "辣条",
						"price": 5.5,
						"brand": "卫龙"
					},
					{
						"id": 6,
						"name": "面包",
						"price": 3.5,
						"brand": "盼盼"
					},
				];
 
				//1.点击刷新，动态生产数据
				$("#refresh").click(function() {
 
					//先把list里的元素清空
					$("#list").empty()
					//定义变量进行字符串的拼接
					var dom = "";
					//遍历数组
					for (var i = 0; i < data.length; i++) {
						var goods = data[i];
 
						//把该条数据的值拼接成一个tr信息
						dom += "<tr>" +
							"<td><input type='checkbox' id='checkAll' class='check'/></td>" +
							"<td>" + goods.id + "</td>" +
							"<td>" + goods.name + "</td>" +
							"<td>" + goods.price + "</td>" +
							"<td>" + goods.brand + "</td>" +
							"<td>" +
							"<a href='#'>修改</a>" +
							"<button>删除</button>" +
							"</td>" +
							"</tr>";
					}
					//向list中添加数据
					$("#list").append(dom);
				});
 
				//click事件只能绑定到文档一开始存在的元素标签上，动态生产的元素不能进行事件绑定
				//动态生成的页面元素只能通过on()进行事件绑定
				//2.语法： 元素。on('事件名称','给里面那个元素萨',功能函数);
				$("#list").on('click', 'tr td button', function() {
					$(this).parents("tr").remove()
				});
 
				//3
				$("#checkAll").click(function() {
					//3.1点击全选获取状态
					var flag = $(this).prop("checked")
					//3.2让list里面所有的复选框设置相同状态
					$("#list .check").prop("checked", flag)
				})
				//4.删除选中行
				$("#batchDel").click(function() {
					$("#list .check:checked ").parents("tr").remove()
				});
			});
		</script>
	</head>
	<body>
		<button id="refresh">刷新</button>
		<hr />
		<table>
			<thead>
				<tr>
					<th>勾选</th>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>品牌</th>
					<th>操作</th>
				</tr>
			</thead>
 
			<tbody id="list">
 
			</tbody>
		</table>
		<div>
			<input type="checkbox" id="checkAll" class="check">
			<span>全选</span>
			<button id="batchDel">删除</button>
		</div>
	</body>
</html>

一定不能掉头发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 2

对象1.insertBefore(对象2)：将对象1添加到对象2前边。对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1.after(对象2)：将对象2添加到对象1后边。对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾。对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。
复制链接

扫一扫