jquery事件学习练习（CRUD and 滚动公告）

最新推荐文章于 2022-04-07 14:54:26 发布
最新推荐文章于 2022-04-07 14:54:26 发布
阅读量655 收藏
点赞数
分类专栏： JS_jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mj404/article/details/42777409
版权 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>learn_jQueryDemo2--查看删除修改-CRUD</title>
	<style type="text/css">
		#table_crud {
			border: 1px solid #abcdef;
			border-collapse: collapse;
			width: 700px;
		}
		tr {height: 40px;}
		th {border: 1px solid #abcdef;}
		td {border: 1px solid #abcdef;text-align: center;}
		td a {
			margin-right: 5px;
			color: pink;
		}

		.popDiv {
			width: 500px;
			padding: 10px;
			border: 1px solid green;
			position: absolute;
			z-index: 4;
			left: 50%;
			margin-left:-250px;
			top: 190px; 
			background: white;
			display:none;
		}
		.popDiv p {
			border-bottom: 1px solid red;
		}
	</style>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body>
	<table id="table_crud">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>职位</th>
			<th>薪资</th>
			<th>操作</th>
		</tr>

		<tr>
			<td>zhangSan</td>
			<td>25</td>
			<td>资深前端工程师</td>
			<td>12000</td>
			<td>
				<a href="#" class="view" >view</a>
				<a href="#" class="delete">remove</a>
				<a href="#">modidied</a>
			</td>
		</tr>
		<tr>
			<td>liSi</td>
			<td>28</td>
			<td>资深java程序员</td>
			<td>16000</td>
			<td>
				<a href="#" class="view" >view</a>
				<a href="#" class="delete">remove</a>
				<a href="#">modidied</a>
			</td>
		</tr>
		<tr>
			<td>wangWu</td>
			<td>30</td>
			<td>项目经理</td>
			<td>10000+提成</td>
			<td>
				<a href="#" class="view" >view</a>
				<a href="#" class="delete">remove</a>
				<a href="#">modidied</a>
			</td>
		</tr>
	</table>

	<div class="popDiv">
		<p> <strong>姓名:</strong>
			<span></span>
		</p>
		<p> <strong>年龄:</strong>
			<span></span>
		</p>
		<p>
			<strong>职位:</strong>
			<span></span>
		</p>
		<p>
			<strong>薪资:</strong>
			<span></span>
		</p>
		<a href="#" class="close">关闭</a>
	</div>

	<script type="text/javascript">

	/*查看方法!!!*/
	$('a.view').click(function() {
		//添加遮罩层让弹出详细信息后不允许在点击其他的
		var maskHeight = $(document).height();
		var maskwidth = $(document).width();
		$('body').append('<div class="mask"></div>')
		$('div.mask').css({
			'opacity': 0.4,
			'background': '#000',
			'position': 'absolute',
			'lleft': 0,
			'top': 0,
			'width': maskwidth,
			'height': maskHeight,
			'z-index': 2
		});
		// alert($(this).text());
		// $('.popDiv').css('display', 'block');
		var array = [];
		$(this).parent().siblings().each(function() {
			// alert($(this).text());
			array.push($(this).text());//新建数组，将获取到的值放在数组里面，写法和方法
		});
		// alert(array)
		//each默认传递参数!!!
		/*$('div.popDiv').show().children().each(function() {
			$(this).children('span').text(array[$(this).index()])
		});// 我觉的这样写也是可以的，嘿嘿*/
		$('div.popDiv').show().children().each(function(i) {
			$(this).children('span').text(array[i])
		})
		//关闭方法
		$('a.close').click(function() {
			$(this).parent().hide();
			// $('div.mask').hide();//不合适
			$('div.mask').remove();
		});
	});


/*删除方法*/
	$('a.delete').click(function() {
		$(this).parents('tr').remove();
	});


/*修改*/
	

</script>
</body>
</html>

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>learn_jQueryDemo3---滚动公告</title>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
	<style type="text/css">
		* {padding: 0; margin: 0;}
		body { margin: 100px;}
		ui {list-style-type: none;}
		li { height: 30px; line-height: 30px;}
	</style>
</head>
<body>
	<ui>
		<li>I Am The 000001 li...............</li>
		<li>I Am The 000002 li...............</li>
		<li>I Am The 000003 li...............</li>
		<li>I Am The 000004 li...............</li>
		<li>I Am The 000005 li...............</li>
		<li>I Am The 000006 li...............</li>
		<li>I Am The 000007 li...............</li>
		<li>I Am The 000008 li...............</li>
		<li>I Am The 000009 li...............</li>
		<li>I Am The 000010 li...............</li>
	</ui>

	<script type="text/javascript">
		/*仅仅是为了实现这个方式，但是由于频繁的操作了DOM所以不建议使用，可以学习实例知识，图片轮播*/

		setInterval(function() {
			// $('ui>li:first()').css('background', 'red');
		var newLi = $('ui>li:first()').clone(true);
		$('ui').append(newLi);
		$('ui>li:first()').remove();
		},1000);


	</script>
</body>
</html>




驭乐MJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery 事件相关内容练习1
汉南最後の読書人
11-10 846
1.$(document).ready()和window.onload方法的比较 $()和window.onload区别 /* window.onload=function(){ alert($("img").width()); } */ /* $(function(){ alert($("img").width()); }); */ /*
jquery事件练习
7F
03-27 619
Untitled Document $(document).ready(function(){ $("#btn0").click(function(){ $("#toggl").toggle("slow"); }); $("#btn1").click(function(){
JQuery 事件相关内容练习2
汉南最後の読書人
11-10 406
1.事件冒泡行为 toggle事件 span{ width:200px; margin:10px; background:#666; cursor:pointer; color:#FFF; display:block; } p{ width:200px; background:#0FF; c
js-day06-jQuery事件和DOM操作-练习题
01-19 211
jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. 　　<button onclick="alert(1);">点我</button>方式2:获取元素对象,再设置onXxx事件属性. 　　<button id="btn">点我</button&...
32-jQuery事件委托练习
yangyalun的博客
10-24 151
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;32-jQuery事件委托练习&lt;/title&gt; &lt;style&gt; *{
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
10-23
EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的组件，如对话框（dialog）、表格（datagrid）、表单（form）等，使得开发者能够快速构建界面美观、功能丰富的 web 应用。在本教程中，我们将关注如何使用 ...
jQuery操作JSON的CRUD用法实例
10-24
### jQuery操作JSON的CRUD用法实例知识点详解 ...通过上述实例的学习，我们可以了解到jQuery操作JSON的CRUD用法，掌握如何利用前端技术实现对数据的增删改查操作，为构建动态Web应用打下坚实基础。
Jquery-Ajax-CRUD-PHP中的操作
02-02
jQuery的核心特性包括选择器、DOM操作、事件处理和Ajax支持。 **2. Ajax基础** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页的技术。通过创建XMLHttpRequest对象，...
php_ajax_crud_with_jquery
01-30
【PHP AJAX CRUD with jQuery】...综上所述，"php_ajax_crud_with_jquery"项目是学习和实践PHP、AJAX和jQuery进行CRUD操作的理想实例，通过这个项目，开发者可以掌握如何在不刷新页面的情况下创建动态、实时的Web应用。
jQuery中的事件委托练习（一）
徐磊
11-24 558
1.事件委托的基本结构 $(function(){ // 事件委托： // 请别人帮忙做事，然后将做完的结果反馈给我们 $("button").click(function(){ $("ul").append("&lt;li&gt;我是新增的li&lt;/li&gt;"); }); // 在jq中，直接遍历，给所有li添加点击事件 /*$(...
jQuery-事件委托案例练习
柒青衿的博客
01-08 673
这是一个按钮控制文字大小的案例，使用了事件委托机制。 jQuery Button and Animate *{ margin:0; padding:0; } .maindiv{ font-family: "Microsoft YaHei", "微软雅黑"; width:600px; margin:0 auto; color: #
jQuery初识 - jQuery案例练习
码小余の博客
06-17 1771
jQuery事件委托 什么是事件委托 ​ 请别人帮忙做事情，然后将做完的结果反馈给我们 在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。 jQuery移入移出事件 mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件 mouseenter/mouserleave事件，子元素被移入移出不会触发父元素的事件（推荐使用） 电影排行榜案例 <!-- * @Author: 码小余
jQuery bind事件练习及tab标签切换的实现
前端岚枫
08-31 2326
1.bind事件    jQuery部分代码： $(document).ready(function(){     $("input[type=button]").bind({         click:function(){$("p").slideToggle();},         mouseover:function(){$("body").css("background-
JQuery事件编程
龙城飞马将的博客
07-28 635
作者：西岭老湿 事件编程 1 .页面载入事件 05.PHP： header('Content-type:image/png'); sleep(3); $img = imagecreatetruecolor(100,100); imagepng($img); 05-1.html &amp;lt;body&amp;gt; &amp;lt;img src=&quot;05.php&quot; alt=&quot;&quot;&a
jquery 学习笔记及小练习
qq_45309319的博客
04-07 676
jQuery 1.简介 JQuery是js函数库 本质就是js库 jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化 jquery 核心函数 <!-- 1. 作为一般函数调用: $(param) 1). 参数为函数 : 当DOM加载完成后，执行此回调函数 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 3). 参数为DOM对象: 将dom对象封装成jQuery对象 4). 参数为html标签字符串 (用得少): 创建标签对象并
JQ 实现增删改查的思路
一直专注于互联网
12-05 737
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="base.css&quot
JavaScript习题--JQuery事件实现按钮
YoSelf_的博客
08-28 362
题目 题目来自廖雪峰的官方网站 对如下的Form表单： <form id="test-form" action="test"> <legend>请选择想要学习的编程语言：</legend> <fieldset> <p><label class="selectAll"><input typ...
jquery实例教学一
weixin_34129145的博客
01-12 711
jquery实例教学一 今天我们继续探讨jquery的相关内容。 首先，我们看看基本过滤选择器：                         一、选中单行或双行 能不能选中指定的某一个呢？   二、筛选大于，小于的   三、注意选择的顺序呦 :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClas...
ajax点击事件click触发两次,Jquery中click事件重复执行的问题
weixin_28235513的博客
08-06 832
Jquery版本1.11.0问题：点击修改链接，在弹出的对话框中，点提交按钮，click事件会执行多次。而用原生js则没有问题。并且提交后，第二次提交后，多个数据都变成一个了。代码如下：点击了多少次修改，点提交时就会alert出多少个222222http://jsfiddle.net/D7eEd/个人认为原因是：click事件里不能包含click事件？不知道是不是这样。为方便查看，附带整个文档Do...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值