jQuery表单应用:全选/取消全选,表单验证,网页选项卡切换
应用一:单行文本框应用
创新互联公司专注于企业全网营销推广、网站重做改版、集安网站定制设计、自适应品牌网站建设、成都h5网站建设、购物商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为集安等各大城市提供网站开发制作服务。
需要用到的 API
focus([[data],fn]) --> 当元素获得焦点时,触发 focus 事件
blur([[data],fn]) --> 当元素失去焦点时,触发 blur 事件
效果:
应用二:多行文本框应用
1、高度变化
有一些网站的评论框上面有“+”和“-”按钮,它们的功能就是用来控制评论框的高度。例如单击“-”按钮,评论框的高度将会缩小。
需要用到的 API
is(expr|obj|ele|fn) -->根据选择器、DOM元素或 jQuery对象来检测匹配元素集合,如果其中至少有 一个元素符合这个给定的表达式就返回 true
:animated --> 匹配所有正在执行动画效果的元素
animate(params,[speed],[easing],[fn]) --> 用于创建自定义动画的函数
效果:
2、滚动条高度变化
有一些网站的评论框上面有“+”和“-”按钮,它们的功能就是用来控制评论框的高度。例如单击“-”按钮,评论框的高度将会缩小。
需要用到的 API
scrollTop( [val] )--> 获取匹配元素相对滚动条顶部的偏移,此方法对可见和隐藏元素都有效
效果:
应用三:复选框应用
1、用按钮控制 全选/反选/取消全选
需要用到的 API
[attribute = value] --> 匹配给定的属性是某个特定值的元素
效果:
2、用复选框控制 全选/取消全选
需要用到的 API
[attribute = value] --> 匹配给定的属性是某个特定值的元素
效果:
仔细观察一下,其实上面的操作是有 bug的,当选中控制全选的复选框,选项组里面只有部分选中时,这个还是全选吗?显然不是,我们期望只有部分选项组选中时,去掉全选框的钩子。如下图
所以还需要一段代码来对复选框组进行操作,以通过它们来控制 id 为“checkAll”的复选框,思路如下:
(1)、对复选框组绑定单击事件
(2)、定义一个 flag 变量,默认为 true
(3)、循环复选框组,当有没被选中的选项时,则把变量 flag 的值设置为 false
(4)、根据变量 flag 的值来设置 id 为“checkAll”复选框是否选中
>、如果 flag 为 true,说明复选框组都被选中
>、如果 flag 为 false,说明复选框组至少有一个没有被选中
$('[name=items]:checkbox').click(function(){ //给复选框组点击单击事件 var flag = true; $(this).each(function(){ //遍历每一个复选框按钮 if(!this.checked){ //如果当前复选框按钮的checked属性为false,也就是没有被选中 flag = false; } }); $('#checkAll').attr('checked', flag); //只要有一个复选框没有被选中,就把 #checked 变为false });
除了上述思路以外,还可以用下面的方法:
(1)、对复选框组绑定单击事件
(2)、判断复选框的总数是否与选中的复选框数量相等
(3)、如果相等,则说明全部选中了,id 为“checkAll”复选框应当处于选中状态,否则处于不选中
$('[name=items]:checkbox').click(function(){ //$(this) 复选框组 //$(this).length 复选框的个数 //$(this).filter(':checked') 被选中的复选框 $('#checkAll').attr('checked', $(this).length==$(this).filter(':checked').length); });
效果:
应用四:下拉框应用
需要用到的 API
$(A).append(B) --> 把A追加到B中
dblclick([[data],fn]) --> 当双击元素时,会发生 dblclick 事件
如上图,需要实现的功能如下:
(1)、将选中的选项添加给对方
(2)、将全部选项添加给对方
(3)、双击某个选项将其添加给对方
选中添加到右边>> 全部添加到右边>><<选中删除到左边 <<全部删除到左边
效果:
应用五:表单验证
需要用到的 API
trigger(type,[data]) --> 在每一个匹配的元素上触发某类事件
triggerHandler(type,[data]) --> 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
这个方法的行为表现与trigger类似,但有以下三个主要区别:
* 第一,他不会触发浏览器默认事件。
* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
有这样一个简单的表单页面:
class为required 的文本框是必须填写的,加一个 *用以区别
// class为required 的文本框是必须填写的,加一个 *用以区别 $('form :input.required').each(function(){ //创建元素 var required = $(' *'); //将它追加到文档中 $(this).parent().append( required ); });
验证表单元素步骤如下:
(1)、判断当前失去焦点的元素是“用户名”还是“邮箱”,然后分别处理
(2)、如果是“用户名”,判断元素值的长度是否小于6,如果小于6,则用红色提醒用户输入不正确;反之,则用绿色提醒用户输入正确
(3)、如果是“邮箱”,判断元素的值是否符合邮箱的格式,如果不符合,则用红色提醒用户输入不正确;反之,则用绿色提醒用户输入不正确
(4)、将提醒信息追加到当前元素的父元素之后
//文本框失去焦点后 $('form :input').blur(function(){ //为表单元素添加失去焦点事件 var parent = $(this).parent(); //去掉先前的提醒,否则提示消息会一直叠加 parent.find(".formtips").remove(); //验证用户名 if($(this).is('#username')){ if(this.value == '' || this.value.length<6){ var errorMsg = '请输入至少6位的用户名'; parent.append(''+errorMsg+''); }else{ var okMsg = '输入正确'; parent.append(''+okMsg+''); } } //验证邮箱 if($(this).is('#email')){ if(this.value=='' || ( this.value!='' && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){ var errorMsg = '请输入正确的E-Mail地址'; parent.append(''+errorMsg+''); }else{ var okMsg = '输入正确'; parent.append(''+okMsg+''); } } });
代码总览
应用六:切换选项卡
需要用到的 API
eq(index|-index) --> 获取第N个元素 (index从0开始)
- 时事
- 体育
- 娱乐
时事体育娱乐
效果:
分享标题:jQuery表单应用:全选/取消全选,表单验证,网页选项卡切换
URL分享:http://myzitong.com/article/gcgcsj.html