form中的单行文本获取和失去焦点 复制代码 代码如下: <br /> input:focus, textarea:focus {<br /> border: 1px solid#f00;<br /> background: #fcc;<br /> }<br /> .focus {<br /> border: 1px solid#f00;<br /> background: #fcc;<br /> }<br /> 个人基本信息 名称: 密码: 详细信息: <br /> /**<br /> * 1.单行文本框---得到焦点和失去焦点<br /> * */<br /> $(function () {<br /> $(":input").focus(function () {<br /> $(this).addClass("focus");<br /> }).blur(function () {<br /> $(this).removeClass("focus");<br /> })<br /> })<br /> 更改多行文本的高度 复制代码 代码如下: <br /> * { margin:0; padding:0;font:normal 12px/17px Arial; }<br /> .msg {width:300px; margin:100px; }<br /> .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}<br /> .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }<br /> .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}<br /> 放大 缩小 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> <br /> /**<br /> * 多行文本框的高度调整<br /> * */<br /> $(function () {<br /> var $comment = $('#comment');<br /> $('.bigger').click(function () {<br /> if(!$comment.is(":animated")) {<br /> if($comment.height() < 500) {<br /> //$comment.height($comment.height() + 50);//版本1<br /> $comment.animate({height: "+=50"}, 400);<br /> }<br /> }<br /> });<br /> $('.smaller').click(function () {<br /> if(!$comment.is(":animated")) {<br /> if($comment.height() > 50) {<br /> //$comment.height($comment.height() - 50);<br /> $comment.animate({height: "-=50"}, 400);<br /> }<br /> }<br /> });<br /> });<br /> 更改多行文本的滚动条高度 复制代码 代码如下: <br /> * { margin:0; padding:0;font:normal 12px/17px Arial; }<br /> .msg {width:300px; margin:100px; }<br /> .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}<br /> .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }<br /> .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}<br /> 向上 向下 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> 多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br> <br /> /**<br /> * 多行文本框的滚动条高度调整<br /> * */<br /> $(function () {<br /> var $comment = $('#comment');<br /> $('.up').click(function () {<br /> if(!$comment.is(":animated")) {<br /> if($comment.height() < 500) {<br /> $comment.animate({scrollTop: "+=50"}, 400);<br /> }<br /> }<br /> });<br /> $('.down').click(function () {<br /> if(!$comment.is(":animated")) {<br /> if($comment.height() > 50) {<br /> $comment.animate({scrollTop: "-=50"}, 400);<br /> }<br /> }<br /> });<br /> });<br /> 复选框应用 复制代码 代码如下: <br /> input:focus, textarea:focus {<br /> border: 1px solid#f00;<br /> background: #fcc;<br /> }<br /> .focus {<br /> border: 1px solid#f00;<br /> background: #fcc;<br /> }<br /> 你爱好的运动是? 足球 篮球 羽毛球 乒乓球 <br /> /**<br /> * 复选框应用<br /> * */<br /> $(function () {<br /> $("#checkedAll").click(function () {<br /> $('[name=items]:checkbox').attr('checked', true);<br /> });<br /> $("#checkedNo").click(function () {<br /> $('[name=items]:checkbox').attr('checked', false);<br /> });<br /> $("#checkedRev").click(function () {<br /> $('[name=items]:checkbox').each(function () {<br /> this.checked = !this.checked;<br /> });<br /> });<br /> $("#send").click(function () {<br /> var str = "你选中的是: \r\n";<br /> $('[name=items]:checkbox:checked').each(function () {<br /> str += $(this).val() + "\r\n";<br /> });<br /> alert(str);<br /> });<br /> })<br />
