Detailed jquery simple Form application _jquery

General Introduction

The next few blogs are a simple application of the previous knowledge to deepen understanding

Single-line text Box

Describes only one simple style: getting and losing focus changing styles

Basic structure:

<form action= "#" method= "POST" id= "Regfrom" >
 <fieldset>
 <legend> personal basic information </legend>
 <div>
 <label for= "username" > name:</label>
 <input id= "username" type= "text"/>
 </div>
 <div>
 <label for= "pass" > Password:</label>
 <input id= "Type=" Passward "/>
 </div>
 <div>
 <label for=" MSG "> Details:</label>
 < TextArea id= "msg" ></textarea>
 </div>
 </fieldset>
 </form>

Add a class to the focus style in CSS

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

Then add the get and lose focus event for the text box

$ (function () {
 $ (': input '). focus (function () {
 $ (this). addclass (' Focus ');
 }). Blur (function () {
 $ (this). Removeclass (' Focus ');
 };
 });

Effect

Multi-line text box application

1. High change

Change the height of multiple-line text boxes

Basic structure:

<form action= "#" method= "POST" id= "Regfrom" >
 <div class= "msg" >
 <div class= "Msg_caption" >
 <span class= "bigger" > Amplification </span>
 <span class= "small" > Reduce </span>
 </ div>
 <div>
 <textarea id= "comment" rows= "8" cols= "> Multiline text box, multiline text box, multiline text box, multiline text box,
  multiline text box , multi-line text boxes, multi-line text boxes, multiline text boxes, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box, multiline text box,
 </textarea>
 </div>
 </div>
 </form>

Features to implement:

1, when clicking the "Zoom in" button, if the comment box height is less than 500px, then the original height of the base to increase the 50px

1, when clicking the "Zoom Out" button, if the comment box height is greater than 50px, then the original height of the base to reduce the 50px

To add an event:

$ (function () {
 var $comment = $ (' #comment ');
 $ ('. Bigger '). Click (function () {
 if ($comment. Height () <) {
 $comment. Height ($comment. Height () +);
 }
 });
 $ ('. Small '). Click (function () {
 if ($comment. Height () >) {
 $comment. Height ($comment. Height ()); 
 }
 });
 });

Effect:

2, the scroll bar height change

To add an event:

$ (function () {
 var $comment = $ (' #comment ');
 $ ('. Bigger '). Click (function () {
 if (! $comment. Is (': Animated ')) {
 $comment. Animate ({scrolltop: '-=50 '}, );
 }
 )
 ; $ ('. Small '). Click (function () {
 if (! $comment. Is (': Animated ')) {
 $comment. Animate ({scrolltop: ' +=50 '},400 );
 }
 });
 });

Effect:

check box apply

The basic application of check boxes is to select, reverse, and select all the check boxes.

Basic style:

<form action= "#" method= "POST" id= "Regfrom" >
 <p> your hobby sport </p>
 <input type= "checkbox" Name = "Items" value= "football"/> Soccer
 <input type= "checkbox" name= "items" value= "basketball"/> Basketball <input
 type= " CheckBox "Name=" Items "value=" Badminton "/> Badminton
 <input type=" checkbox "name=" Items "value=" Table tennis "/> Table tennis
 < br/>
 <input type= "button" id= "Checkedall" value= "Select All"/> <input "
 button" type= "id=" value = "All not selected"/>
 <input type= "button" id= "Checkedrev" value= "reverse"/> <input
 "button" type= "Send" value = "Submit"/>
 </form>

To add a full selection button and an optional event

$ (' #CheckedAll '). Click (function () {
 $ (' [Name=items]:checkbox '). attr (' checked ', true);
 });
 $ (' #CheckedNo '). Click (function () {
 $ (' [Name=items]:checkbox '). attr (' checked ', false);
 });

Add an anti-election event

 $ (' #CheckedRev '). Click (function () {
 $ (' [Name=items]:checkbox '). each (function () {
 this.checked =! this.checked;
 });
 

Add commit event: Output selected value

var str = "You selected is: \ r \ n";
 $ (' #send '). Click (function () {
 
 $ (' [name=items]:checkbox:checked '). each (function () {
 str + = $ (this). Val () + "\ r\n ";
 });
 alert (str);
 });

Effect:

Drop down box Application

Basic structure:

<div class= "Centent" > <select multiple id= "Select1" style= "width:100px;height:160px"
 ; >
 <option value= "1" > Options 1</option>
 <option value= "2" > Options 2</option>
 < Option value= "3" > Options 3</option>
 <option value= "4" > Options 4</option> <option
 "5" > Options 5</option>
 <option value= "6" > Options 6</option>
 <option value= "7" > Options 7</option >
 <option value= "8" > Options 8</option>
 </select>
 <div>
 <span id= "Add" > select Add to Right >></span><br/>
 <span id= "Add_all" > Add all to Right >></span>
 </div>
 </div>
 <div class= "centent" >
 <select multiple id= "Select2" style= "width : 100px;height:160px; " ></select>
 <div>
 <span id= "Remove" ><< select Delete to left </span><br/>
 <span id= "Remove_all" ><< all deleted to left </span>
 </div>
 </div>

Features to implement:

1. Add selected options to each other

 $ (' #add '). Click (function () {
 var $options = $ (' #select1 option:selected ');
 $options. Appendto ($ (' #select2 '));
 

2, all the options to add to each other

 $ (' #add_all '). Click (function () {
 var $options = $ (' #select1 option ');
 $options. Appendto ($ (' #select2 '));
 

3. Double-click a button to add it to each other

$ (' #select1 '). DblClick (function () {
 var $options = $ (' option:selected ');
 $options. Appendto ($ (' #select2 '));
 

Effect:

Form Application

Basic structure:

<form methos= "POST" action= "" >
 <div class= "int" >
 <label for= "username" > User name </label>
 <input type= "text" id= "username" class= "required"/>
 </div>
 <div class= "int" >
 <label for= "Email" > Mailbox </label>
 <input type= "text" id= "email" class= "required"/>
 </div >
 <div class= "int" >
 <label for= "Personinfo" > Personal data </label>
 <input type= "text" Id= "Personinfo"/>
 </div>
 <div class= "sub" >
 <input type= "Submit" value= "submitted" id= " Send "/>
 <input type=" reset "id=" Red "/>
 </div>
 </form>

Verify that the user entered the correct

$ (' Form:input '). blur (function () {
 var $parent = $ (this). parent ();
 Deletes the previous hint element
 $parent. Find (". Formtips"). Remove ();
 Verify User name
 if ($ (this). is (' #username ') {
 if (this.value = = ' | | This.value.length < 6) {
  var errormsg = ' Please enter at least 6 user names ';
  $parent. Append (' <span class= "formtips onError" > ' +errormsg+ ' </span> ');
 } else{
  var okmsg = ' input correct ';
  $parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> ');
 }
 Verify that the mailbox
 if ($ (this). is (' #email ')) {
 if (this.value = = ' | | (This.value!= "" &&!/.+@.+\. [A-za-z] {2,4}$/.test (This.value))) {
  var errormsg = ' Please enter the correct e-mail address ';
  $parent. Append (' <span class= "formtips onError" > ' +errormsg+ ' </span> ');
 } else{
  var okmsg = ' input correct ';
  $parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> ');}}
 );

Submit Button Binding Event

Submit button
 $ (' #send '). Click (function () {
 $ (' form. Required:input '). Trigger (' blur ');
 var numerror = $ (' form. OnError '). Length;
 if (numerror) {return
  false;
 }
 Alert ("registered successfully");
 };

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!