jQuery表单应用：全选/取消全选，表单验证，网页选项卡切换

应用一：单行文本框应用

创新互联公司专注于企业全网营销推广、网站重做改版、集安网站定制设计、自适应品牌网站建设、成都h5网站建设、购物商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为集安等各大城市提供网站开发制作服务。

需要用到的 API

focus([[data],fn]) --> 当元素获得焦点时，触发 focus 事件

blur([[data],fn]) --> 当元素失去焦点时，触发 blur 事件

效果：

jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换

应用二：多行文本框应用

1、高度变化

有一些网站的评论框上面有“+”和“-”按钮，它们的功能就是用来控制评论框的高度。例如单击“-”按钮，评论框的高度将会缩小。

需要用到的 API

is(expr|obj|ele|fn) -->根据选择器、DOM元素或 jQuery对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回 true

:animated --> 匹配所有正在执行动画效果的元素

animate(params,[speed],[easing],[fn]) --> 用于创建自定义动画的函数

向上向下 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus fuga quae soluta vel. Ab accusamus blanditiis dolorum ea eaque libero mollitia numquam officia veniam. Assumenda distinctio molestias necessitatibus sed. Eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum error esse tempora vel! Accusantium aliquid eveniet impedit nisi numquam odit possimus provident quas reprehenderit ut? Doloremque praesentium quisquam voluptatum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aut corporis cupiditate dicta ducimus facere, fugiat, fugit impedit inventore maxime, mollitia nesciunt pariatur praesentium quaerat quidem ratione repudiandae voluptas.

你喜欢的运动是：

足球篮球羽毛球乒乓球

你喜欢的运动是：全选/取消全选

足球篮球羽毛球乒乓球

$('[name=items]:checkbox').click(function(){ //给复选框组点击单击事件 var flag = true; $(this).each(function(){ //遍历每一个复选框按钮 if(!this.checked){ //如果当前复选框按钮的checked属性为false，也就是没有被选中 flag = false; } }); $('#checkAll').attr('checked', flag); //只要有一个复选框没有被选中，就把 #checked 变为false });

$('[name=items]:checkbox').click(function(){ //$(this) 复选框组 //$(this).length 复选框的个数 //$(this).filter(':checked') 被选中的复选框 $('#checkAll').attr('checked', $(this).length==$(this).filter(':checked').length); });

选项1 选项2 选项3 选项4 选项5 选项6 选项7

选中添加到右边>> 全部添加到右边>>

选项8

<<选中删除到左边 <<全部删除到左边

// class为required 的文本框是必须填写的，加一个 *用以区别 $('form :input.required').each(function(){ //创建元素 var required = $(' *'); //将它追加到文档中 $(this).parent().append( required ); });

//文本框失去焦点后 $('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+''); } } });

用户名: 邮箱: 个人资料:

时事

体育

娱乐

时事

体育娱乐

重庆分公司，新征程启航

jQuery表单应用：全选/取消全选，表单验证，网页选项卡切换

其他资讯