• 技术文章 >web前端 >前端问答

    jquery怎么隐藏textarea

    青灯夜游青灯夜游2022-04-22 11:41:18原创265

    方法:1、用hide(),语法“$("textarea").hide()”;2、用slideUp(),语法“$("textarea").slideUp()”;3、用fadeOut(),语法“$("textarea").fadeOut()”。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    <textarea> 标签定义一个多行的文本输入控件。

    文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    jquery隐藏textarea的方法

    方法1:使用hide()

    hide() 方法可以隐藏被选元素。被隐藏的元素不会被完全显示(不再影响页面的布局)。

    该方法的效果与 CSS 属性 display:none 类似。

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function() {
    				$("button").click(function() {
    					$("textarea").hide();
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<textarea rows="10" cols="30">我是一个文本框。</textarea>
    		<br><button>隐藏textarea</button>
    	</body>
    </html>

    1.gif

    方法2:使用slideUp()

    slideUp() 方法以滑动方式隐藏被选元素。被隐藏的元素不会被完全显示(不再影响页面的布局)。

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function() {
    				$("button").click(function() {
    					$("textarea").slideUp();
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<textarea rows="10" cols="30">我是一个文本框。</textarea>
    		<br><button>隐藏textarea</button>
    	</body>
    </html>

    2.gif

    方法3:使用fadeOut()

    fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function() {
    				$("button").click(function() {
    					$("textarea").fadeOut();
    				})
    			})
    		</script>
    	</head>
    	<body>
    		<textarea rows="10" cols="30">我是一个文本框。</textarea>
    		<br><button>隐藏textarea</button>
    	</body>
    </html>

    3.gif

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery怎么隐藏textarea的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:node中间层有什么用 下一篇:jquery replaceall方法有什么用
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery怎么让图片逐渐消失• jquery怎么实现点击换图片• jquery怎么去掉body背景图片• jquery怎么计算某元素下有多少元素• jquery怎么删除节点下所有元素• jquery怎么实现显示与隐藏的互换
    1/1

    PHP中文网