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

来源：互联网发布：拓普康数据传输软件编辑：程序博客网时间：2024/05/29 10:54

一、表单应用

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");})})

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

阅读全文

0 0