jQuery对表单、表格的操作及更多应用
2016-04-21 13:47
537 查看
一、单行文本框应用——获取和失去焦点改变样式
二、多行文本框应用
1、高度变化
2、滚动条高度变化
$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); });
二、多行文本框应用
1、高度变化
$(function(){ var $comment=$('#comment'); //获取评论框 $('.bigger').click(function(){ //"放大"按钮绑定单击事件 if(!$comment.is(":animated")){ //判断是否处于动画 if($comment.height()<500) { //重新设置高度,在原有的基础上加50 $comment.animate({height:"+=50"},400); } } }) $('.smaller').click(function(){ //"缩小"按钮绑定单击事件 if(!$comment.is(":animated")){ //判断是否处于动画 if($comment.height()>50) { //重新设置高度,在原有的基础上减50 $comment.animate({height:"-=50"},400); } } }); });
2、滚动条高度变化
$(function(){ var $comment=$('#comment'); //获取评论框 $('.up').click(function(){ //"向上"按钮绑定单击事件 if(!$comment.is(":animated")){ //判断是否处于动画 $comment.animate({scrollTop:"-=50"},400); } }) $('.smaller').click(function(){ //"缩小"按钮绑定单击事件 if(!$comment.is(":animated")){ //判断是否处于动画 $comment.animate({scrollTop:"+=50"},400); } }); });
相关文章推荐
- 什么?你还不会写JQuery 插件
- jquery 图片轮播
- 使用jquery-fileupload.js实现文件上传-webx3
- jQuery获取Select选择的Text和 Value
- jQuery之手风琴图片
- JQuery输入框获取/失去焦点行为
- jquery 插件tmpl
- JQuery判断form表单是否为空
- jQuery图片轮播特效
- JQuery禁止回车提交表单
- Thinkphp,Jquery,Ajax异步发布
- 解决jquery mobile的遇到高版本Chrome一直转圈,页面加载不出来的情况。
- 基于Jquery+Ajax+Json+高效分页
- jQuery外部框架浅析
- jquery.cookie.js操作cookie实现“记住密码”
- jquery validate插件使用心得
- 纯javaScript、jQuery实现个性化图片轮播
- jquery常用代码段
- jQuery插件datatables使用教程
- jquery多属性选择器