jQuery實現(xiàn)輸入框的放大和縮小功能示例
本文實例講述了jQuery實現(xiàn)輸入框的放大和縮小功能。分享給大家供大家參考,具體如下:
<%@ 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("已經(jīng)夠高了"); } }); $("#small").click(function(){ if(content.height()>50){ content.height(content.height()-50); } else{ alert("無法在縮小了"); } }); }); </script> </body> </html>
運行效果如下:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試一下運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件代碼
- js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法
- jquery實現(xiàn)textarea輸入框限制字數(shù)的方法
- Jquery動態(tài)添加輸入框的方法
- jQuery表單獲取和失去焦點輸入框提示效果的實例代碼
- 基于jquery實現(xiàn)一張圖片點擊鼠標放大再點縮小
- jQuery div層的放大與縮小簡單實現(xiàn)代碼
相關(guān)文章
從零開始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
本篇文章講解如何使用jQuery方便快捷的實現(xiàn)Ajax功能.統(tǒng)一所有開發(fā)人員使用Ajax的方式.2011-02-02jquery中attr、prop、data區(qū)別與用法分析
這篇文章主要介紹了jquery中attr、prop、data區(qū)別與用法,結(jié)合實例形式分析了jQuery中attr、prop、data的區(qū)別、功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下2019-09-09jQuery改變form表單的action,并進行提交的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query改變form表單的action,并進行提交的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05jQuery實現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)ToolTip元素定位顯示功能,結(jié)合實例形式分析了jQuery針對頁面元素屬性的動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11jQuery ajax調(diào)用后臺aspx后臺文件的兩種常見方法(不是ashx)
這篇文章主要介紹了jQuery ajax調(diào)用后臺aspx后臺文件的兩種常見方法(不是ashx)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06幾種二級聯(lián)動案例(jQuery\Array\Ajax php)
這篇文章主要為大家詳細介紹了幾種二級聯(lián)動案例(jQuery\Array\Ajax php),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08