jQuery练习

于 2020-04-16 20:58:02 发布
阅读量126 收藏
点赞数
分类专栏： 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42609916/article/details/105566377
版权

表格数据操作

		<body>
		
		<style type="text/css">
			table,th,td{
				border: black 1px solid;
				border-collapse: collapse;
			}
			
		</style>
		<table>
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="datas">
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>18</td>
					<td>北京</td>
					<td>
						<a href="###">编辑</a>
						<a href="###">查看</a>
						<a href="###" onclick="deleteRow(this)">删除</a>
						<a href="###" onclick="copyRow(this)">复制</a>
					</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			function deleteRow(obj){
				if($("#datas").children().length==1){
					alert("必须有一条数据");
					return;
					
				}
				$(obj).parent().parent().remove();
			}
			
			function copyRow(obj){
				$("#datas").append($(obj).parent().parent().clone());
			}
		</script>
	</body>

全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style>
			table{
				width: 80%;
				margin: 0 auto;
				border-spacing: 0;
				border-collapse: collapse;
				border:1px solid black;
			}
			
			th,td{
				border:1px solid black;
			}
			
			th{
				height: 45px;
				font-size: 15px;
			}
			
			td{
				height: 36px;
				font-size: 12px;
			}
			
			.checkbox-center{
				text-align: center;
			}
			
			table thead tr{
				color: white;
				background: black;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" title="全选"/></th>
					<th>姓名</th>
					<th>手机号</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td class="checkbox-center"><input type="checkbox"/></td>
					<td>Tom</td>
					<td>17719841280</td>
					<td>中国北京海淀</td>
					<td>查看 编辑 删除</td>
				</tr>
				<tr>
					<td class="checkbox-center"><input type="checkbox"/></td>
					<td>Lucy</td>
					<td>12467890987</td>
					<td>中国天津</td>
					<td>查看 编辑 删除</td>
				</tr>
				<tr>
					<td class="checkbox-center"><input type="checkbox"/></td>
					<td>Timmy</td>
					<td>18879670987</td>
					<td>中国河南郑州</td>
					<td>查看 编辑 删除</td>
				</tr>
				<tr>
					<td class="checkbox-center" ><input type="checkbox"/></td>
					<td>Lily</td>
					<td>16623459087</td>
					<td>中国吉林长春</td>
					<td>查看 编辑 删除</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			$("tbody tr:nth-of-type(even)").css("background","gray");//偶数行
			$("tbody tr:nth-of-type(odd)").css("background","#ffffff");//奇数行
			
			$("tbody tr").hover(function(){
				this.style.backgroundColor="red";
			},function(){
				$("tbody tr:nth-of-type(even)").css("background","gray");//偶数行
				$("tbody tr:nth-of-type(odd)").css("background","#ffffff");//奇数行
			});
			
			$("thead tr th [type='checkbox']").click(function(){
				$("tbody tr td [type='checkbox']").prop("checked",this.checked);
				/*不可用的方法$(e).attr("checked")，与复选框状态无关，只与checked是否在HTML标签中出现有关。
				若不出现(无论复选框状态是否选中)，返回undefined。
				若checked在HTML开始标签中出现(无论复选框是否选中)，返回checked。
				(只要checked在开始标签中出现，值为何已经不重要了)*/
				console.log($("tbody tr td [type='checkbox']"));
			})
			
			$("tbody tr td [type='checkbox']").bind("click",function(){
				$("thead tr th [type='checkbox']").attr("checked",$("tbody tr td [type='checkbox']").length==$("tbody tr td [type='checkbox']:checked").length);
				console.log($("tbody tr td [type='checkbox']").length);
				console.log($("tbody tr td [type='checkbox']:checked").length);
			})
			
		</script>
	</body>
</html>
诗里有清风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery练习
冰零0o的博客
06-06 943
需要的jquery库：核心库：jquery-1.8.3.js校验库：jquery.validate.js中文校验库：messages_zh.js下载地址：https://download.csdn.net/download/weixin_42072596/104618051、省市二级联动&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;m...
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
jquery练习
12-16
通过练习，加深对jQuery的理解，提高编写高效、简洁代码的能力。 总结来说，jQuery作为一款强大的JavaScript库，它简化了许多前端开发中的常见任务，提高了开发效率。通过学习和实践jQuery，开发者可以更好地驾驭...
jQuery练习题
发则韩的博客
01-01 548
jQuery重写隔行换色.html jQuery弹广告动态隐藏和消失.html 省市联动.html
练习 | JQuery基本练习
虎鲸虎鲸
02-17 859
文章目录题1：点击图片放大显示题2：滑动门题3：数据管理操作题4：轮播图题5：动画下拉菜单栏题6：手风琴 题1：点击图片放大显示 点击图片列表中的某个元素，该图片放大显示 解 思路： 1.点击图片，放大指定图片，容器可见；需要设置阻止事件冒泡 2.点击其他区域，容器不可见 完整代码见 GitHub <!-- html代码 --> <div class="g-index"...
JQuery练习题1
05-10
jQuery练习题1
JQuery练习集合
02-05
JQuery练习集合 包括：节点遍历、节点替换、链式编程、链式each、选择过滤器、相对选择器、球队选择、属性选择器等等例子
Jquery部分效果练习
07-01
新人，最近练习的一些jquery实现的前端效果
jquery练习实例
10-16
里面有几个jquery的实例，还有一部分方法
jQuery选择器上机练习题及答案.rar
12-02
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）查找id号为tigerLily的元素 （2）查找拥有类myList的元素 （3）查找所有的input元素 （4）查找所有img元素和tr元素 （5）查找id号为coffeePot和id号为someDiv的元素 （6）选择具有id属性的所有元素 （7）选择具有id属性的input元素 （8）选择其value属性等于A的元素 （9）选择其value属性等于A或等于C的元素 （10）选择其title属性值中含有dog的img元素 （11）选择其href属性值以http开头的a元素 （12）选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （13）选择元素li，该元素作为拥有myList类的ul元素的直接子元素 （14）选择id号为radioA的input元素后面的第一个input兄弟元素 （15）选择id号为radioA的input元素后面的所有input兄弟元素 （16）选择dom sample页面中第3个tr元素 （17）选择其type属性值checkbox且索引为偶数的input元素 （18）选择非最后一行的tr元素 （19）选择所有的checkbox元素 （20）选择所有被选中的表单元素 （21）选择含有1972的td元素 （22）选择包含有sapn元素的div元素 （23）选择表格中每行的第一个单元格和最后一个单元格 （24）选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面，该页面中内嵌有几个CSS类：.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）将拥有alt属性的倒数第二个图片元素应用yellow类 （2）将第一个checkbox表单元素应用.green样式 （3）求id值为checkbox3的元素在所有表单元素里的顺序号 （4）用一条链式语句完成：先对所有img元素应用seeThrough样式，再为所有img元素和tr元素应用yellow样式 （5）用filter方法实现：选择单元格内容为Java或Smalltalk的单元格 （6）取图片集中的第2,3,4张图片 （7）用has方法实现:选择那些包含有ul元素的li元素 （8）将tbody每个单元格里的文字设为：我爱jQuery （9）查找form元素的后代元素中标签为label的元素 （10）查找表单元素中是否有id值为checkbox5的元素 提示： 为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
JQuery基础练习
qq_39095899的博客
04-03 260
Jquery练习 基本选择器练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery基本选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript" c...
jQuery 操作 练习题
supreme_yes的博客
04-25 2433
1.添加a的属性标签 划入显示 划出隐藏 滑动时跟随鼠标代码：JS原生&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/c
jQuery小练习1
C.
11-14 437
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="Java
1.jQuery练习1 ---表单
李天下
06-03 617
要做一个效果如图所示的表单 &amp;amp;lt;form action=&amp;quot;&amp;quot;&amp;amp;gt; &amp;amp;lt;filedset&amp;amp;gt; &amp;amp;lt;legend&amp;amp;gt;个人基本信息&amp;amp;lt;/legend&amp;amp;gt; &amp;amp;lt;div
jquery练习2:验证贵美网站注册页面
最新发布
01-02
我们可以使用jQuery来实现这一功能。首先，我们可以编写一个jQuery函数，当用户点击注册按钮时触发。在这个函数中，我们可以获取用户输入的用户名、密码、邮箱等信息，并对其进行验证。 我们可以使用正则表达式来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值