名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。

• 本篇文章具体介绍如下

改变文本框的获得焦点的样式
具体代码如下:
<form action="#" method="POST" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称：</label>
<input id="username" type="text">
</div>
</fieldset>
</form>

首先在css中添加一个类名为focus的样式。
css具体代码如下：
具体代码如下:
.focus {
border: 1px solid #f00;
background: #fcc;
}

然后为文本框添加获取和失去焦点事件
具体代码如下:
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});

多行文本框的作用
设置评论框的最小高度和最大高度：
具体代码如下:
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化</textarea>
</div>
</div>
</form>

1,当单击“放大”按钮后，如果评论框的高度小于500px,则在原有高度的基础上增加50px;
2.当单击“缩小”按钮后，如果评论框的高度大于50px,则在原有高度的基础上减少50px;
具体代码如下:
$(function(){
var $comment = $('#comment'); //获取评论框
$('.bigger').click(function(){
if(!$comment.is(":animated")){ //判断是否处于动画
if($comment.height() < 500){
$comment.animate({height : " =50"}, 400);
}
}
})
$('.smaller').click(function(){
if(!$comment.is(":animated")){ //判断是否处于动画
if($comment.height() > 50){
$comment.animate({height : "-=50"}, 400);
}
}
})
})

滚动条高度的变化
控制多行文本框滚动条的变化：
具体代码如下:
$(function(){
var $comment = $('#comment');
$('.up').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : "-=50"}, 400);
}
})
$('.down').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : " =50"}, 400);
})
})

复选框的应用
基本应用：对复选框进行全选，反选，全不选操作。
具体代码如下:
<form>
你爱好的运动？<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乓球球
<input type="button" id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="send" value="提 交"/>
//全选
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked',true);
});
//全不选
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').attr('checked',false);
});
//反选
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked = !this.checked;
}));
//提交按钮
$("#send").click(function(){
var str = "你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str = $(this).val() '\r\n'})
alert(str);
);

随鼠标移动的图片或文字特效具体代码-网站网页设计特效→鼠标特效BFBAIChat_企业网址导航_网址分类目录_企业黄页网址提交查询专业网站！

BFBAIChat_企业网址导航_网址分类目录_企业黄页网址提交查询专业网站！

好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明，本站内容来源于互联网，如果侵犯了你的权益请联系本站删除。,