jquery权威指导 3-10的练习

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量459 收藏
点赞数
分类专栏： jquery 文章标签： jquery css bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxm_ss5224/article/details/41604017
版权 
 我对css不是会，只会写一点点，刚开始学习jquery，写的代码也有很冗余，而且，目前为止还有两个bug
 1.点击全选按钮，点一次，全部选中，再点击一下，全部取消。到这里没有问题，可是再点击页面上的复选框显示的是未选中，可是用F12查看代码，是选中状态
 2.点击添加按钮，会弹出个框，添加内容正确，再点击添加，再确定，会添加两次。




<!--
  页面需求:
    1.在页面中创建一个表格，用于展示多项信息，各行间采用隔行变色的方法展示各行数据。
	2.点击全选按钮可以实现全部选中
	  1.点击全部选中，再点击删除按钮可以删除全部
	3.点击添加可以弹出框，并且添加内容
-->

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>My Excise</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
	td ,th{
	  width:100px;
	  height:30px;
	  text-align:center;
	  line-height:30px;
	  border:1px solid #abcdef
	}
	#tableOpt{
	  width:620px;
	  height:50px;
	  line-height:50px;
	  margin-top:10px;
	  border:2px solid #abcdef;
	}
	span.del,span.add{
	  width:70px;
	  padding:3px;
	  background-color:#c1c1c1;
	  border:1px solid #333;
	  cursor:pointer;
	}
	span.click{
	  background-color:#f00;
	}
	div.mask{
	   background: #000;
	   opacity: 0.4;
	   position: absolute;
	   left: 0;
	   top: 0;
	   z-index: 1;
    }
	div#pop{
	  width:300px;
	  height:230px;
	  border:2px solid #ccc;
	  position:absolute;
	  top:0;
	  left:0;
	  z-index: 2;
	  background-color:#fff;
	}
	dt,dd{
	  height:30px;
	}
	span.title{
	  font-size:16px;
	  font-weight:bold;
	}
	span.close{
	  margin-left:200px;
	  cursor:pointer;
	  padding:5px;
	  background-color:#ccc;
	}
	.hide{
	  display:none;
	}
	dd.opt{
	  margin-top:5px;
	}
	span.sure{
	  padding:4px;
	  border:2px solid #ccc;
	  cursor:pointer;
	}
	span.cancel {
      border: 2px solid #ccc;
      padding: 4px;
      margin-left: 100px;
	  cursor:pointer;
    }
  </style>
  <script type="text/javascript">
    $(function(){
	  var spanDel = $('span.del');
	  var spanAdd = $('span.add');
	  var trS = $('table tr').not(':first');
      var checkAll = $('input#allCheck');
	  var divMask = '<div class="mask"></div>';
      var maskWidth = $(document).width();
	  var maskHeight = $(document).height();

	  var popWidth = $('#pop').outerWidth();
	  var popHeight = $('#pop').outerHeight();
      ColorChange($('table tr').not(':first'));
      /* 全部选择按钮的实现*/
	  checkAll.click(function(){
     	 var trS = $('table tr').not(':first');
		 if($(this).attr('value') == 0){
		   trS.each(function(){
		     $(this).children()
			        .first()
					.children()
					.attr('checked',true);
			 checkAll.attr('value',1);
             
		   });
		 }else if($(this).attr('value') == 1){
		   trS.each(function(){
		     $(this).children()
			        .first()
					.children()
					.attr('checked',false);
		     checkAll.attr('value',0);
		   })
		 }
	  }); 

	  	/* 删除按钮的实现*/
	  spanDel.click(function(){
		 var trS = $('table tr').not(':first');
	     trS.each(function(){
	        var firstInput = $(this).children().first().children();
		    if(firstInput.attr('checked')){
		       $(this).remove();
		    }
	     });
		 ColorChange($('tr').not(':first'));
	  });
	  /*添加按钮的实现*/
	  spanAdd.click(function(){
	     $('#main').append(divMask);
		 $('div.mask').width(maskWidth).height(maskHeight);
         var pop = $('#pop');
		 //pop 的left = ($(document).width() - $('#pop').outerWidth())/2;
		 //pop 的top = ($(document).height() - $('#pop').outerHeight())/2;
		 var left = ($(document).width() - $('#pop').outerWidth())/2;
		 var top = ($(document).height() - $('#pop').outerHeight())/2;
		 pop.show().css({
		    'top': top+ 'px',
			'left': left+ 'px'
		 });

		 //close 按钮
		 var closeBut = $('span.close');
		 closeBut.click(function(){
		    pop.hide();
			$('div.mask').hide();
		 });

		 //pop添加按钮
          var sureBut = $('span.sure'); 
		  sureBut.click(function(){
			var insert = '';
			var usrname = $('[name="usrname"]').val();
			var usrage = $('[name="usrage"]').val();
			var usrsex = $('[name="usrsex"]').val();
			var usrEducation = $('[name="usrEducation"]').val();
			var usrPosition = $('[name="usrPosition"]').val();
            var nowNum = $('table>tbody>tr').length;
            if(usrname != '' || usrage != '' || usrsex != '' || usrEducation != '' || usrPosition != ''){
			    insert += " <tr><td><input type='checkbox' value="+ nowNum + " οnclick='changeCheck(this.value)'/></td><td>" + usrname + "</td><td>" + usrage + "</td><td>" + usrsex + "</td><td>" + usrEducation + "</td><td>" + usrPosition + "</td></tr>";
			   $('table>tbody').append(insert);
               ColorChange($('table tbody tr').not(':first'));
               pop.hide();
			   
			   $('div.mask').hide();
			   
			}else{
			   alert("没有输入");
			}
		  }); 
       /*pop 里的取消按钮的实现*/
	   $('span.cancel').click(function(){
	      var dl = $('#content').children().not(':first').not(':last');
		  dl.each(function(){
			var black = "";
		    $(this).children().val(black);
		  });
	   });
	  });

	  	/*表格的各行变色的实现*/
	function ColorChange(selector){
	  selector.filter(':odd').css('background-color','#007aff');
	  selector.filter(':even').css('background-color','#ccc');
	}
	});


   /* 单个checkbox添加 checked属性*/
	function changeCheck(value){
	   var tr = $('table tr').not(':first');
       tr.each(function(i){
	      if(i == value){
		     $(this).children()
			        .first()
					.children()
					.attr('checked',true);
		  }
	   });
	}

  </script>
 </head>
 <body>
    <div id="main" class="">
		<table border="0" cellspacing="0">
		<tbody>
		<tr>
		    <th>选项</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>学历</th>
			<th>职位</th>
		</tr>
		<tr>
		    <td>
			  <input type="checkbox" value="0" οnclick="changeCheck(this.value)">
			</td>
			<td>黄一</td>
			<td>24</td>
			<td>女</td>
			<td>本科</td>
			<td>员工</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="1" οnclick="changeCheck(this.value)"></td>
			<td>王二</td>
			<td>32</td>
			<td>男</td>
			<td>本科</td>
			<td>客户经理</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="2" οnclick="changeCheck(this.value)"></td>
			<td>张五</td>
			<td>27</td>
			<td>男</td>
			<td>研究生</td>
			<td>经理</td>
		</tr>
	    <tr>
		    <td><input type="checkbox" value="3" οnclick="changeCheck(this.value)"></td>
			<td>黄一</td>
			<td>24</td>
			<td>女</td>
			<td>本科</td>
			<td>员工</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="4" οnclick="changeCheck(this.value)"></td>
			<td>王二</td>
			<td>32</td>
			<td>男</td>
			<td>本科</td>
			<td>客户经理</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="5" οnclick="changeCheck(this.value)"></td>
			<td>张五</td>
			<td>27</td>
			<td>男</td>
			<td>研究生</td>
			<td>经理</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="6" οnclick="changeCheck(this.value)"></td>
			<td>黄一</td>
			<td>24</td>
			<td>女</td>
			<td>本科</td>
			<td>员工</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="7" οnclick="changeCheck(this.value)"></td>
			<td>王二</td>
			<td>32</td>
			<td>男</td>
			<td>本科</td>
			<td>客户经理</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="8" οnclick="changeCheck(this.value)"></td>
			<td>张五</td>
			<td>27</td>
			<td>男</td>
			<td>研究生</td>
			<td>经理</td>
		</tr>
		 <tr>
		    <td><input type="checkbox" value="9" οnclick="changeCheck(this.value)"></td>
			<td>黄一</td>
			<td>24</td>
			<td>女</td>
			<td>本科</td>
			<td>员工</td>
		</tr>
		<tr>
		<td><input type="checkbox" value="10" οnclick="changeCheck(this.value)"></td>
			<td>王二</td>
			<td>32</td>
			<td>男</td>
			<td>本科</td>
			<td>客户经理</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="11" οnclick="changeCheck(this.value)"></td>
			<td>张五</td>
			<td>27</td>
			<td>男</td>
			<td>研究生</td>
			<td>经理</td>
		</tr>
	    <tr>
		    <td><input type="checkbox" value="12" οnclick="changeCheck(this.value)"></td>
			<td>黄一</td>
			<td>24</td>
			<td>女</td>
			<td>本科</td>
			<td>员工</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="13" οnclick="changeCheck(this.value)"></td>
			<td>王二</td>
			<td>32</td>
			<td>男</td>
			<td>本科</td>
			<td>客户经理</td>
		</tr>
		<tr>
		    <td><input type="checkbox" value="14" οnclick="changeCheck(this.value)"></td>
			<td>张五</td>
			<td>27</td>
			<td>男</td>
			<td>研究生</td>
			<td>经理</td>
		</tr>
		</tbody>
		</table>
		<div id="tableOpt">
	     <input type="checkbox" value="0" id="allCheck">
	     <label for="allCheck">全选</label>
	     <span class="del">删除</span>
		 <span class="add">添加</span>
	    </div>
		<div id="pop" class="hide">
		    <dl id="content">
			   <dt>
			     <span class="title">添加信息</span>
			     <span class="close">X</span>  
			   </dt>
		       <dd>姓名:<input type="text" name="usrname" ></dd>
			   <dd>年龄:<input type="text" name="usrage"></dd>
			   <dd>性别:<input type="text" name="usrsex"></dd>
               <dd>学历:<input type="text" name="usrEducation"></dd>
			   <dd>职位:<input type="text" name="usrPosition"></dd>
			   <dd class="opt">
			       <span class="sure">确定</span>
				   <span class="cancel">取消</span>
			   </dd>
		    </dl>
		</div>
    </div>
 </body>
</html>

My_It5224
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery高级
alin的博客
01-21 116
jQuery高级 1. 事件冒泡 什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 阻止事件冒泡 事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagatio
jquery实例教学一
weixin_34129145的博客
01-12 708
jquery实例教学一 今天我们继续探讨jquery的相关内容。 首先，我们看看基本过滤选择器：                         一、选中单行或双行 能不能选中指定的某一个呢？   二、筛选大于，小于的   三、注意选择的顺序呦 :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClas...
【JavaWeb】JQuery练习（37）
高高冷的博客
08-18 107
引言 将进酒，杯莫停； 隔行换色 需求描述 为表格的奇数行选择红色背景，偶数行蓝色； 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="../js/jquery-3.5.1.min.js"></script> <style
jQuery练习t193，从0到1
虾米大王的学习历程
01-31 164
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { $("input[t.
jQuery练习题及答案
热门推荐
weixin_40693633的博客
07-03 8万+
一．选择题1. 下面哪种不是jquery的选择器?(  )  C。A、基本选择器                          B、层次选择器C、css选择器                                   D、表单选择器2. 当DOM加载完成后要执行的函数，下面哪个是正确的?(  )  CA、jQuery(expression, [context])  B、jQuery...
jQuery
chuanggui5310的博客
05-28 71
jQuery侧重点就是选择器和基本的DOM操作，还有一些动画操作，但是js中非DOM操作的部分基本没有涉及。 其实jQuery的门槛很低，我在看jQuery的时候对原生js的东西也知之甚少，在看的过程中遇到不会的多求助搜索引擎，多尝试，当然最好做一下笔记。 测试代码推荐直接...
2013.10-2015.9 图书馆借阅书籍情况
Jane Chiu
09-21 1546
阅读的书籍笔记共享。工业技术部分涵盖数据库，程序设计，网页设计，算法等方面，用户交互体验等方面书籍。
jquery-migrate
03-05
例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面删除1.x版本，换成3.x版本，如果有脚本错误，就引入jquery-migrate插件用于兼容低版本，同时也显示低版本方法替换成新版本方法的方案。 jQuery migrate（转移...
jquery-migrate-1.2.1.js文件
10-23
`jquery-migrate-1.2.1.js` 文件是jQuery的一个辅助工具，它主要用于帮助开发者解决在升级到较新版本的jQuery时可能遇到的向后兼容性问题。这个插件的主要目的是为了警告开发者那些在新版本中已经被废弃或者更改的...
JQuery-i18next-demo
03-09
JQuery-i18next-demo 一、包插件： 1、JQuery-i18next包 2、jquery包 3、i18next包 二、包内容页面包括使用的简单的使用方法、加载方法、alert、数组翻译词条、js内容翻译词条等模板。都已经写好。直接带入代码即可...
jquery-migrate-3.0.0.zip
01-29
在压缩包内，包含了两个主要文件：`jquery-migrate-3.0.0.js` 和 `jquery-migrate-3.0.0.min.js`。这两个文件分别是未压缩的完整版和压缩后的精简版。未压缩版本方便开发者阅读和调试，而压缩版则用于生产环境，以...
JS/JQuery-第3章上机练习.zip
04-20
在"JS/JQuery-第3章上机练习.zip"这个压缩包中，我们可以期待一系列针对这两个主题的实践练习。这些练习通常会涵盖以下几个核心知识点： 1. **基础语法与变量**：JavaScript 的基础包括数据类型（如字符串、数字、...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1395
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS 的工作原理
07-25 1042
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
bug bug bug
weixin_74075792的博客
07-24 709
it/s]C:\Users\86187\.conda\envs\yolov8\lib\site-packages\torchvision\io\image.py:13: UserWarning: Failed to load image Python extension: '[WinError 127] 找不到指定的程序。进程已结束，退出代码为 1。
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中.zip
07-31
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中
chromedriver-mac-x64_121.0.6167.184.zip
最新发布
07-31
chromedriver-mac-x64_121.0.6167.184.zip
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。.zip
07-31
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。
《jQuery权威指南》- 实战型教程，全面解析最新jQuery技术
"jQuery权威指南是陶国荣著的一本详细介绍jQuery的书籍，涵盖了118个实例和2个综合案例，适用于系统学习jQuery的初学者和开发者。该书基于jQuery的最新版本，全面讲解了jQuery的选择器、DOM操作、事件处理、动画特效...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值