Change the focus style of the text box
First add a style with the class name focus in css.
css code is as follows:
.focus {
border: 1px solid #f00;
background: #fcc;
}
Then add get and lose focus events for the text box
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});
The function of multi-line text box
Set the minimum and maximum height of the comment box:
1. After clicking the "Enlarge" button, if the height of the comment box is less than 500px, 50px will be added to the original height;
2. After clicking the "Reduce" button, if the height of the comment box is greater than 50px, it will be reduced by 50px based on the original height;
$(function(){
var $comment = $('#comment'); //Get the comment box
$( '.bigger').click(function(){
if(!$comment.is(":animated")){ //Determine whether it is animated
if($comment.height() < 500 ){
$comment.animate({height : " =50"}, 400);
}
}
})
$('.smaller').click(function( ){
if(!$comment.is(":animated")){ //Determine whether it is animated
if($comment.height() > 50){
$comment.animate( {height : "-=50"}, 400);
}
}
})
})
Changes in scroll bar height
Control more Changes to the scroll bar of the line text box:
$(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);
})
})
Application of check boxes
Basic application: Select all check boxes, invert selection, and unselect all operations.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
