communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jQuery对表单的操作代码集合_jquery

jQuery对表单的操作代码集合_jquery

WBOY
Libérer： 2016-05-16 18:08:30
original
1256 Les gens l'ont consulté

改变文本框的获得焦点的样式

复制代码 代码如下:



个人基本信息







首先在css中添加一个类名为focus的样式。
css代码如下：
复制代码 代码如下:

.focus {
border: 1px solid #f00;
background: #fcc;
}

然后为文本框添加获取和失去焦点事件
复制代码 代码如下:

$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});

多行文本框的作用
设置评论框的最小高度和最大高度：
复制代码 代码如下:




放大
缩小







1,当单击“放大”按钮后，如果评论框的高度小于500px,则在原有高度的基础上增加50px;
2.当单击“缩小”按钮后，如果评论框的高度大于50px,则在原有高度的基础上减少50px;
复制代码 代码如下:

$(function(){
var $comment = $('#comment'); //获取评论框
$('.bigger').click(function(){
if(!$comment.is(":animated")){ //判断是否处于动画
if($comment.height() $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);
})
})

复选框的应用
基本应用：对复选框进行全选，反选，全不选操作。
复制代码 代码如下:


你爱好的运动？

足球
篮球
羽毛球
乓球球




//全选
$("#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 = "你选中的是： \n";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+'\r\n'})
alert(str);
);
Étiquettes associées：
表单操作
source：php.cn
Article précédent：基于jquery的合并table相同单元格的插件(精简版)_jquery Article suivant：jquery load()在firefox(火狐)下显示不正常的解决方法_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1361
Expression régulière pour faire correspondre les mots J'ai un script dans lequel j'essaie de faire correspondre les nouveaux noms de travaux ave...
Depuis 2024-04-06 21:24:04
0
1
606
Le vérificateur de Sudoku ne fonctionne pas ? Quelqu'un peut-il m'aider à identifier l'erreur ? J'ai tout essayé sur l'éditeur en ligne mais j'obtiens toujours l'erreur. Mais quand je fa...
Depuis 2024-04-06 21:21:07
0
1
474
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal