jquery-plug-in, optimized

jquery Applications:

1. Form verification:

A:jquery Validation Plug-ins: Sometimes you need to write validation properties in class, and sometimes you need to write validation information in attributes such as:

<input id= "Cemail" name= "email" size= "" class= "require email" minlength= "2"/>

$ (document). Ready (function () {

$ ("#commentForm"). Validate ()

})

B:jquery.metadata.js Plugin: All verification information can be written in the class attribute

$ (' #commentForm '). Validate ({meta: "validate"});

<inout id= "Cusername" name= "username" size= "" class= "{Validate:{required:true,minlength:2}}"

C: Remove the class attribute, using the name attribute;

$ (document). Ready (function () {

$ ("#commentForm"). Validate ({

rules:{

username:{

Required:true,

Minlength:2

},

email:{

Required:true,

Email:true

},

URL: "url",

Comment: "Required"

}

});

})

D: Custom validation information:

Class= "{validate:{required:true,message:{required: ' Please enter a name ', minlength" ' Please enter at least 2 characters '}}} "

E: Verification Code:

<input id= "Cvalcode" name= "Valcode" size= "value="/>

$.validator.addmethod (

"Formula",

function (Value,element,param) {

return value = = eval (param);

}

' Please enter the result after the mathematical formula is calculated '

)

Add Valcode:{formula: "7+9" in the rules of $ ("#commentForm"). Validate

2. Jqueryform plugin: Ajaxform () and Ajaxsubmit () method

$ ("#myForm"). Ajaxform (function () {

$ (' #output1 '). HTML ("submit successfully"). Show ();

})

*****************************

$ (' #myForm '). Submit (function () {

$ (this). Ajaxsubmit (function () {

$ (' #output1 '). HTML ("submit successfully"). Show ();

})

return false;

})

*****************************

Two methods can pass one or 0 parameters, and a single parameter can be a callback function, which can be an options object:

var options={

Target: ' #output1 ',

Beforesubmit:showrequest,//Pre-commit callback function

Success:showrespone,//callback function after successful submission

Url:url,//default is the value of action in form, and if stated, it will be overwritten

Type:type,//get,post

settimeout:3000,

Clearform:true,//After successful submission, clears the values of all form elements

Resetform:true,//After successful submission, resets the values of all form elements

Datatype:null//json ... Types returned by the receiving server

}

$ (' #myForm '). Submit (function () {

$ (this). Ajaxsubmit (options);

return false;

});

Beforesubmit the specified callback function:

function Showrequest (formdata,jqform,options) {

Formdata is an array object, Jqform is a jquery object that encapsulates the form elements

var queryString = $.param (FormData);

return true;

}

Success the specified callback function:

function Showresponse (RESPONSETEXT,STATUSTEXT,XHR, $form) {

StatusText is a return state, Success,error ...

ResponseText carries the data content returned by the server, and for the default HTML return, the first parameter is the Xmlresquest object responsetext

}

Validate the form before submission: Using the Formdata parameter, using the parameter jqform, using the Fieldvalue () method

3. Create modal window---simplemodal plug-in

$ ("#element-id"). Modal ()

$.modal ("<div>

You can also pass a parameter:

$ ("#element-id"). Modal ({options})

$.modal ("<div>

<a herf= "#" class= "Simplemodal-close" > Close </a>

"Simplemodal-close" is a default shutdown interface, as long as the current modal window is closed by calling $.modal.close ()

If you want to define a shutdown interface yourself, you can modify the global variables:

$.modal.defaults.closeclass = "Modalclose";

To modify multiple default parameters:

$.extend ($.modal.defaults,{

Closeclass: "Modalclose",

closehtml: "<a herf=" # ">Close</a>"

})

4. Cookie plugin:

A: Write Cookie:$.cookie ("The_cookie", "The_value");

B: Read Cookie:$.cookie ("The_cookie");

C: Delete Cookie:$.cookie ("The_cookie", NULL)

5. JQuery UI Plugin: Drag to sort component

$ (document). Ready (function () {

$ ("#myList"). sortable (); You can drag

})

When a single-click event Conflicts:

$ ("#myList"). Sortable ({delay:1});

Gets the order of the list elements dragged to the back, sortable ("serialize")

$ ("#myList"). Sortable ({

Delay:1,

Stop:function () {

$.post (

"Sortable.php",

$ ("#myList"). Sortable ("Serialize"),

Function (response) {

alert (response);

}

)

}

})

6. Write jquery plugin:

A:

;(function ($) {

$.fun.extend ({

"Color": function (value) {},

"Border": function (value) {}

})

}) (JQuery);

Jquery Mobile:

1. Loading order:

<link rel= "stylesheet" type= "Text/css" href= "Jquery.mobile.css" >

<script type= "Text/javascript" src= "Jquery.js" ></script>

....//This is the other JS in the project.//.

<script type= "Text/javascript" src= "Jquery.mobile.js" ></script>

2, in HTML5, the attribute name has data-prefix

jquery Performance Optimizations:

1. When the event agent:

$ (' #myTable '). On (' Click ', ' TD ', function () {

})

2. Use Join () to convert an array to a string

3, the use of $.proxy ():

<div id= "Panel" style= "Display:none" >

<button>close</button>

</div>

Execute the following code and the button element disappears

$ (' #panel '). FadeIn (function () {

$ ("#panel button"). Click (function () {

$ (this). FadeOut ();

});

});

Use $.proxy () to solve the above problems

$ (' #panel '). FadeIn (function () {

$ ("#panel button"). Click (function () {$.proxy ()

This point #panel

$ (this). FadeOut ();

},this));

});

jquery-plug-in, optimized