Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > jQuery对表单的操作代码集合_jquery

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

WBOY
Freigeben： 2016-05-16 18:08:30
Original
1256 Leute haben es durchsucht

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

复制代码 代码如下:



个人基本信息







首先在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);
);
Verwandte Etiketten：
表单操作
Quelle：php.cn
Vorheriger Artikel：基于jquery的合并table相同单元格的插件(精简版)_jquery Nächster Artikel：jquery load()在firefox(火狐)下显示不正常的解决方法_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1361
Regulärer Ausdruck zum Abgleichen von Wörtern Ich habe ein Skript, in dem ich versuche, neue Jobnamen mit vorhandenen Jobnamen in einer ...
Aus 2024-04-06 21:24:04
0
1
606
Sudoku-Checker funktioniert nicht? Kann mir jemand helfen, den Fehler zu identifizieren? Ich habe alles im Online-Editor versucht, erhalte aber immer noch die Fehlermeldung. Aber ...
Aus 2024-04-06 21:21:07
0
1
474
So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, w...
Aus 2024-04-06 20:22:15
0
1
454
Berechnen Sie die Summe der Felder in einer anderen Tabelle mithilfe einer MySQL-SQL-Abfrage Ich habe ein Schema wie dieses: Benutzertabelle mit den Attributen „user_id“ und „username...
Aus 2024-04-06 19:39:29
0
1
441
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage