《锋利的JQuery》读书要点笔记4
Posted f91og
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《锋利的JQuery》读书要点笔记4相关的知识，希望对你有一定的参考价值。
第五章 jQuery对表单，表格的操作以及更多应用
这章主要以一些具体案例讲解了jQuery对表单，表格的常用操作，以及一些常见的jQuery应用，用到的都是上几章说的东西。下面就以具体的案例来展开。
5.1 表单应用
案例1：文本框获取和失去焦点时改变其样式。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> //引入css样式 body{ font:normal 12px/17px Arial; } div{ padding:2px; } input, textarea { width: 12em; border: 1px solid #888; } .focus { border: 1px solid #f00; background: #fcc; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); }) </script> </head> <body> <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称:</label> <input id="username" type="text" /> </div> <div> <label for="pass">密码:</label> <input id="pass" type="password" /> </div> <div> <label for="msg">详细信息:</label> <textarea id="msg" rows="2" cols="20"></textarea> </div> </fieldset> </form> </body> </html>
说明：<fieldset> 标签对表单中的相关元素进行分组，会在相关表单元素周围绘制边框。 <legend> 元素为 <fieldset>元素定义标题。表单选择器 ":input" ，选取所有的<input>,<textarea>,<select>和<button>.
运行结果：
案例2：多行文本框的应用，控制评论框的高度以及滚动条高度变化
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin:0; padding:0;font:normal 12px/17px Arial; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var $comment = $(\'#comment\'); //获取评论框 $(\'.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 } } }); }); </script> </head> <body> <form action="" method="post"> <div class="msg"> <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div> <div> <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea> </div> </div> </form> </body> </html>
运行结果：
滚动条高度变化：主要是控制scrollTop属性
$(function(){ var $comment = $(\'#comment\');//获取评论框 $(\'.up\').click(function(){ //向上按钮绑定单击事件 if(!$comment.is(":animated")){//判断是否处于动画 $comment.animate({ scrollTop : "-=50" } , 400); } }) $(\'.down\').click(function(){//向下按钮绑定单击事件 if(!$comment.is(":animated")){ $comment.animate({ scrollTop : "+=50" } , 400); } }); });
案例3：复选框的应用
对复选框进行全选，反选和全不选等操作。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $(\'[name=items]:checkbox\').attr(\'checked\', true); }); //全不选 $("#CheckedNo").click(function(){ $(\'[type=checkbox]:checkbox\').attr(\'checked\', false); }); //反选 $("#CheckedRev").click(function(){ $(\'[name=items]:checkbox\').each(function(){ //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。 //$(this).attr("checked", !$(this).attr("checked")); //$(this).prop("checked", !$(this).prop("checked")); //直接使用JS原生代码，简单实用 this.checked=!this.checked; }); }); //输出值 $("#send").click(function(){ var str="你选中的是：\\r\\n"; $(\'[name=items]:checkbox:checked\').each(function(){ str+=$(this).val()+"\\r\\n"; //注意这里的val()方法取的是checkbox的value属性值，如果不设value属性值的话，取到的结果是"on" }) alert(str); }); }) </script> </head> <body> <form method="post" action=""> 你爱好的运动是？ <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="CheckedAll" value="全 选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/> </form> </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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#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\').以上是关于《锋利的JQuery》读书要点笔记4的主要内容，如果未能解决你的问题，请参考以下文章