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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
详解javascript脚本何时会被执行
2021/02/05 Javascript
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python中函数传参详解
2016/07/03 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
物流毕业生个人的自我评价
2014/02/13 职场文书
中国入世承诺
2014/04/01 职场文书
村庄绿化方案
2014/05/07 职场文书
答谢会策划方案
2014/05/12 职场文书
工厂车间标语
2014/06/19 职场文书
《比的意义》教学反思
2016/02/18 职场文书
以下牛机,你有几个
2022/04/05 无线电
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers