jQuery实现输入框的放大和缩小功能示例


Posted in jQuery onJuly 21, 2018

本文实例讲述了jQuery实现输入框的放大和缩小功能。分享给大家供大家参考,具体如下:

<%@ page language="java" import="java.util.*"pageEncoding="UTF-8"%>
<%
Stringpath = request.getContextPath();
StringbasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>My JSP 'index4.jsp' startingpage</title>
  <meta http-equiv="pragma"content="no-cache">
  <meta http-equiv="cache-control"content="no-cache">
  <meta http-equiv="expires"content="0">
  <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
  <meta http-equiv="description"content="This is my page">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
  <input type="text"id="content">
  <label><input type="button"name="Submit" value="放大" id="bigger"/></label>
 <label><input type="button"name="Submit2" value="缩小" id="small"/></label>
  <script type="text/javascript">
$(function(){
var content=$("#content");
$("#bigger").click(function(){
if(content.height()<500){
content.height(content.height()+50);
}
else{
alert("已经够高了");
}
});
$("#small").click(function(){
if(content.height()>50){
content.height(content.height()-50);
}
else{
alert("无法在缩小了");
}
});
});
</script>
</body>
</html>

运行效果如下:

jQuery实现输入框的放大和缩小功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
php 动态添加记录
2009/03/10 PHP
PHP 时间日期操作实战
2011/08/26 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
javascript 写类方式之十
2009/07/05 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
一些mootools的学习资源
2010/02/07 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python中os模块详解
2016/10/14 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
垃圾回收的优点和原理
2014/05/16 面试题
教师对学生的评语
2014/04/28 职场文书
继承权公证书范本
2015/01/23 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android