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