管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jQuery中Form相关知识汇总

　　form中的单行文本获取和失去焦点

　　

复制代码 代码如下:

　　<!DOCTYPE html>

　　<html>

　　<head lang="en">

　　<meta charset="UTF-8">

　　<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

　　<title></title>

　　<style type="text/css">

　　input:focus, textarea:focus {

　　border: 1px solid#f00;

　　background: #fcc;

　　}

　　.focus {

　　border: 1px solid#f00;

　　background: #fcc;

　　}

　　</style>

　　</head>

　　<body>

　　<form action="#" method="post" id="regForm">

　　<fieldset>

　　<legend>个人基本信息</legend>

　　<div>

　　<label for="username">名称:</label>

　　<input id="username" type="text">

　　</div>

　　<div>

　　<label for="pass">密码:</label>

　　<input id="pass" type="password">

　　</div>

　　<div>

　　<label for="msg">详细信息:</label>

　　<textarea id="msg"></textarea>

　　</div>

　　</fieldset>

　　</form>

　　</body>

　　<script type="text/javascript">

　　/**

　　* 1.单行文本框---得到焦点和失去焦点

　　* */

　　$(function () {

　　$(":input").focus(function () {

　　$(this).addClass("focus");

　　}).blur(function () {

　　$(this).removeClass("focus");

　　})

　　})

　　</script>

　　</html>

　　更改多行文本的高度

　　

复制代码 代码如下:

　　<!DOCTYPE html>

　　<html>

　　<head lang="en">

　　<meta charset="UTF-8">

　　<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

　　<title></title>

　　<style type="text/css">

　　* { margin:0; padding:0;font:normal 12px/17px Arial; }

　　.msg {width:300px; margin:100px; }

　　.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

　　.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }

　　.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

　　</style>

　　</head>

　　<body>

　　<form>

　　<div class="msg">

　　<div class="msg_caption">

　　<span class="bigger">放大</span>

　　<span class="smaller">缩小</span>

　　</div>

　　<textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　</textarea>

　　</div>

　　</form>

　　</body>

　　<script type="text/javascript">

　　/**

　　* 多行文本框的高度调整

　　* */

　　$(function () {

　　var $comment = $('#comment');

　　$('.bigger').click(function () {

　　if(!$comment.is(":animated")) {

　　if($comment.height() < 500) {

　　//$comment.height($comment.height() + 50);//版本1

　　$comment.animate({height: "+=50"}, 400);

　　}

　　}

　　});

　　$('.smaller').click(function () {

　　if(!$comment.is(":animated")) {

　　if($comment.height() > 50) {

　　//$comment.height($comment.height() - 50);

　　$comment.animate({height: "-=50"}, 400);

　　}

　　}

　　});

　　});

　　</script>

　　</html>

　　更改多行文本的滚动条高度

　　

复制代码 代码如下:

　　<!DOCTYPE html>

　　<html>

　　<head lang="en">

　　<meta charset="UTF-8">

　　<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

　　<title></title>

　　<style type="text/css">

　　* { margin:0; padding:0;font:normal 12px/17px Arial; }

　　.msg {width:300px; margin:100px; }

　　.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

　　.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }

　　.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

　　</style>

　　</head>

　　<body>

　　<form>

　　<div class="msg">

　　<div class="msg_caption">

　　<span class="up">向上</span>

　　<span class="down">向下</span>

　　</div>

　　<textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

　　</textarea>

　　</div>

　　</form>

　　</body>

　　<script type="text/javascript">

　　/**

　　* 多行文本框的滚动条高度调整

　　* */

　　$(function () {

　　var $comment = $('#comment');

　　$('.up').click(function () {

　　if(!$comment.is(":animated")) {

　　if($comment.height() < 500) {

　　$comment.animate({scrollTop: "+=50"}, 400);

　　}

　　}

　　});

　　$('.down').click(function () {

　　if(!$comment.is(":animated")) {

　　if($comment.height() > 50) {

　　$comment.animate({scrollTop: "-=50"}, 400);

　　}

　　}

　　});

　　});

　　</script>

　　</html>

　　复选框应用

　　

复制代码 代码如下:

　　<!DOCTYPE html>

　　<html>

　　<head lang="en">

　　<meta charset="UTF-8">

　　<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>

　　<title></title>

　　<style type="text/css">

　　input:focus, textarea:focus {

　　border: 1px solid#f00;

　　background: #fcc;

　　}

　　.focus {

　　border: 1px solid#f00;

　　background: #fcc;

　　}

　　</style>

　　</head>

　　<body>

　　<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="提交"/>

　　</form>

　　</body>

　　<script type="text/javascript">

　　/**

　　* 复选框应用

　　* */

　　$(function () {

　　$("#checkedAll").click(function () {

　　$('[name=items]:checkbox').attr('checked', true);

　　});

　　$("#checkedNo").click(function () {

　　$('[name=items]:checkbox').attr('checked', false);

　　});

　　$("#checkedRev").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);

　　});

　　})

　　</script>

　　</html>

教程首页 更多教程