锋利的jQuery读书笔记-第5章 jQuery对表单、表格的操作及更多应用

最新推荐文章于 2019-05-14 13:12:00 发布

kewen303

最新推荐文章于 2019-05-14 13:12:00 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/kewen1989/article/details/72836192

JS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了使用jQuery增强表单和表格的交互性，包括文本框聚焦效果、文本区域大小调整、复选框联动及表格行高亮等功能，并提供了一个网页选项卡的实现案例。

一、表单应用

1.一个表单有3个基本组成部分：表单标签、表单域和表单按钮

2.单行文本框，为文本框添加获取和拾取焦点事件：

 $(function(){
		$(":input").focus(function(){
			  $(this).addClass("focus");
		}).blur(function(){
			  $(this).removeClass("focus");
		});
    })

给所有的input类型组建，添加一个focus() 事件和 blur()事件，对应行为为function(）内定义。最常用的就是给文本框添加和删除高亮显示的样式。在上述代码中表现为添加class和删除class，具体样式可以在css中定义class。

3.多行文本框应用

（1）高度、宽度变化

	$(function(){
            var $comment = $('#comment');  //获取对象，jQuery对象用$标识
            $('.bigger').click(function(){ 
                if(!$comment.is(":animated")){ //判断是否处于动画，避免对话效果堆积
                    if( $comment.height() < 500 ){
                        $comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
                    }
                }
            })
            $('.smaller').click(function(){
                if(!$comment.is(":animated")){  //判断是否处于动画，避免对话效果堆积
                    if( $comment.height() > 50 ){
                        $comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
                    }
                }
            });
	});

这里有2个需要注意的点，第一个是jQuery对象用$标记，养成好习惯；第二个是对于对象是否处于动画效果状态做判断，避免动画效果积压。

是否需要设置放大缩小的缓冲效果，按照实际需要选择。

（2）滚动条高度变化

实际上没什么区别，就是一个属性： scrollTop，表示距离文本框顶端多少距离单位。

4.复选框

针对全选和全部去勾选，可以通过一个全选框来实现：

<form>
   你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
	<input type="checkbox" name="items" value="篮球"/>篮球
	<input type="checkbox" name="items" value="羽毛球"/>羽毛球
	<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
	<input type="button" id="send" value="提　交"/> 
</form>

对应js实现为，另外注意去勾选了某一个，全选样式也要去掉

   	 $("#CheckedAll").click(function(){
			//所有checkbox跟着全选的checkbox走。
			$('[name=items]:checkbox').attr("checked", this.checked );
	 });
	 	$('[name=items]:checkbox').click(function(){
				//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
				var $tmp=$('[name=items]:checkbox');
				//用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
				$('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
	 });

5.表单验证

表单验证的功能后面可以使用jQuery提供的插件（jQuery Form）进行处理，不需要单独写实现。

这里只需要记住一个概念：

客户端的校验仅仅是提升用户操作体验，服务端仍然需要对输入参数进行校验。（就是安全所说的前后端校验，JS逻辑处理前段校验，服务端代码处理后端校验）所有服务的输入值，都是不可信任的，所有前段传入的值都可以通过工具拦截绕开前段校验传入后端。

二、表格应用

先搞一个表格

<body>
<table>
		<thead>
			<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
		</thead>
		<tbody>
			<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
			<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
			<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
			<tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
			<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
			<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
		</tbody>
	</table>
</body>

然后学习一下最常用的几种场景：

（1）各行变色

	$(function(){
		$("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
		$("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
	})

这里值得注意学习的是去掉table表头第一行，避免给表头也加上样式颜色

（2）选择行高亮

		$('tbody>tr').click(function() {
			$(this)
				.addClass('selected')
				.siblings().removeClass('selected')
				.end()
				.find(':radio').attr('checked',true);
		});

这里值得注意学习的是end()的用法，此处含义为终止siblings()的使用，使当前操作对象重新回到$(this)。否则实际代码逻辑就成了

$(this).siblings().find(':radio')。

（3）复选高亮
实现需求：选中一行高亮显示，再点去高亮。 可以多选。
  $(function(){
		$("tbody>tr:odd").addClass("odd");
		$("tbody>tr:even").addClass("even");
		$('tbody>tr').click(function() {
			//判断当前是否选中
			var hasSelected=$(this).hasClass('selected');
			//如果选中，则移出selected类，否则就加上selected类
			$(this)[hasSelected?"removeClass":"addClass"]('selected')
				//查找内部的checkbox,设置对应的属性。
				.find(':checkbox').attr('checked',!hasSelected);
		});
		// 如果复选框默认情况下是选择的，则高色.
		$('tbody>tr:has(:checked)').addClass('selected');
  })

（4）内容筛选

实际就是使用jquery的contains选择器来实现：

  $(function(){
       $("table tbody tr")
					.hide()
					.filter(":contains('李')")
					.show();
  })

三、常用功能

1.网页选项卡

先构造一个HTML：

<body>

<div class="tab">
	<div class="tab_menu">
		<ul>
			<li class="selected">时事</li>
			<li>体育</li>
			<li>娱乐</li>
		</ul>
	</div>
	<div class="tab_box"> 
		 <div>时事</div>
		 <div class="hide">体育</div>
		 <div class="hide">娱乐</div>
	</div>
</div>

</body>

使用jQuery实现选项卡功能：

	$(function(){
	    var $div_li =$("div.tab_menu ul li");
	    $div_li.click(function(){
			$(this).addClass("selected")            //当前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
					.eq(index).show()   //显示 <li>元素对应的<div>元素
					.siblings().hide(); //隐藏其它几个同辈的<div>元素
		}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		})
	})

实际非常简单，就是同辈元素的隐藏和显示，另外加上鼠标的移入和移出的选项卡的高亮提示。