Lesson 9 of jQuery Learning (compiling templates and instances for ajax instances and plug-ins)

I. ajax instances

1. Data conventions between front-end and programmers

Json (commonly used), text, xml

2. Methods for processing different types of data

<Script>
$ ('Input'). click (function (){
$. Ajax ({
// Url: 'test.txt? '+ Math. random (),

Url: 'demo1. php? '+ Math. random (),
Type: 'get ',
Success: function (data ){
Certificate ('div'0000.html (data );
}
});
});
</Script>

<Script>
$ ('Input'). click (function (){
Var ul = $ ('# info> ul ');
$. Ajax ({
Url: 'demo2. php? '+ Math. random (),
Type: 'get ',
DataType: 'xml ',
Success: function (xml ){
$ (Xml). find ('title'). each (function (){
// When operating an xml file, the html () method is unavailable
// Alert ($ (this). text ())
Ul. append ('

'+ $ (This). text () +'

');
});
}
});
});
</Script>

3. ajax execution prompt

4. Details in ajax (encoding and submission methods)

Demo9
<Script src = "jquery. js"> </script>





<Script>
$ ('Input'). click (function (){
$. Ajax ({
Url: 'demo9. php? '+ Math. random (),
Type: 'get ',
Timeout: 1000,
Success: function (data ){
Certificate ('div'0000.html (data );
},
Error: function (jqXHR, textStatus, errrorThrown ){
If (errrorThrown = 'not Found '){
Response ('span'{.html ('the address you requested does not exist ');
}
If (textStatus = 'timeout '){
Response ('span'0000.html ('request timed out, Please refresh the page and reoperate ');
}
}
});
});

$ (Document). ajaxError (function (){
Response ('span'{.html ('ajax request error ');
});
</Script>

-----------------------------Ii. jquery plug-in compilation---------------------------------

Class-level development

Class-level development is to add a static method to jquery

1)Add a new global function

JQuery. myAlert = function (str) {alert (str );};

2)Use $. extend (obj)

JQuery. extend ({
MyAlert1: function (str ){
Alert (str );
},
MyAlert2: function (){
Alert (2222222 );
}
});

3)Use namespace

JQuery. ns = {
MyAlert: function (str ){
Alert (str );
}
}

Demo1
<Script src = "jquery. js"> </script>
<Script src = "demo1.js"> </script>



<Script>
// Var a = 'Warning box popped up by calling the plug-in parameter'

/* $ ('Input'). click (function (){
$. MyAlert ();
});*/
// Var a = 'the warning box popped up by the plug-in written through the extend () Method'

/* $ ('Input'). click (function (){
$. MyAlert ();
});*/
Var a = 'I have a namespace plug-in warning box'
$ ('Input'). click (function (){
$. Ns. myAlert ();
});
</Script>

Example 2: placing elements in the center

-------------------------Demo2.html --------------------------

Demo2

<Script src = "jquery. js"> </script>
<Script src = "demo2.js"> </script>

<Script>
/* Var div = $ ('# div1 ');

Div.css ({
'Top' :( $ (window). height ()-div. height ()/2,
'Left' :( $ (window). width ()-div. width ()/2,
'Position': 'absolute'
});*/

Var div = $ ('# div1 ');
2.16.ns.centerdiv(div).css ('background', 'red ');
</Script>

-------------------------- Demo2.js ---------------------------

$. Ns = {
CenterDiv: function (obj ){
Obj.css ({
'Top' :( $ (window). height ()-div. height ()/2,
'Left' :( $ (window). width ()-div. width ()/2,
'Position': 'absolute'
});

Return obj; // if there is no such sentence, the element cannot be operated in a chain. In demo2.html's example .ns.centerdiv(div).css ('background', 'red ');

Error, "Cannot call method 'css 'of undefined"
}
}

Object-level development (common)

Add methods to jquery objects

Jquery plugin development template:

; (Function ($ ){

$. Fn. pluginName = function (options ){
Var defaults = {
// Various parameters and attributes
}

Var options = $. extend (defaults, options );

This. each (function (){
// Code for implementing the Function
});

Return this;
}

}) (JQuery );

Two simple plug-in instances:

---------------------------------------- Jquery-table-1.0.js ----------------------------------

; (Function ($ ){

$. Fn. table = function (options ){
Var defaults = {
// Various parameters and attributes
EvenRowClass: 'evenrow ',
OddRowClass: 'oddrow ',
CurrentRowClass: 'currentrow ',
EventType: 'mouseover ',
EventType2: 'mouseout'
}

Var options = $. extend (defaults, options );

This. each (function (){
Var _ this = $ (this );
// Even rows
_ This. find ('tr: even'). addClass (options. evenRowClass );
// Odd number of rows
_ This. find ('tr: odd'). addClass (options. oddRowClass );

/* _ This. find ('tr '). mouseover (function (){
$ (This). addClass (options. currentRowClass );
}). Mouseout (function (){
$ (This). removeClass (options. currentRowClass );
});*/

_ This. find ('tr '). bind (options. eventType, function (){
$ (This). addClass (options. currentRowClass );
});

_ This. find ('tr '). bind (options. eventType2, function (){
$ (This). removeClass (options. currentRowClass );
});

});
Return this;
}

}) (JQuery );

1---------------------------------------table.html --------------------------------------------

Table

<Script src = "jquery. js"> </script>
<Script src = "jquery-table-1.0.js"> </script>
<Script>
$ (Function (){
$ ('# Table1'). table ({
EvenRowClass: 'evenrow1 ',
OddRowClass: 'oss row1 ',
CurrentRowClass: 'currentrow1 ',
EventType: 'click'
});
})
</Script>

Name	Age	Height	Weight
Zhang San	22	187	70 KG
Li Si	20	170	60 KG
John	30	148	40 KG
Zhang San	22	187	70 KG
Li Si	20	170	60 KG
John	30	148	40 KG
Zhang San	22	187	70 KG
Li Si	20	170	60 KG
John	30	148	40 KG
Zhang San	22	187	70 KG
Li Si	20	170	60 KG
John	30	148	40 KG

2 ----------------------------------- jquery. tab.1.0.js ----------------------------------

; (Function ($ ){

$. Fn. tab = function (options ){
Var defaults = {
// Various parameters and attributes
CurrentClass: 'current ',
TabNav: '. tabNav> li ',
TabContent: '. tabContent> div ',
EventType: 'click'
}

Var options = $. extend (defaults, options );

This. each (function (){
// Code for implementing the Function
Var _ this = $ (this );
_ This. find (options. tabNav). bind (options. eventType, function (){
$ (This). addClass (options. currentClass). siblings (). removeClass (options. currentClass );
Var index = $ (this). index ();
_ This. find (options. tabContent). eq (index). show (). siblings (). hide ();
});
});
Return this;
}

}) (JQuery );

-----------------------------------Tab.html ---------------------------------------------------

Tab
<Script src = "jquery. js"> </script>
<Script src = "jquery. tab.1.0.js"> </script>

<Script>
$ (Function (){
$ ('. Tab'). tab ({
EventType: 'mouseover ',
TabNav: '. tabNav1> li ',
CurrentClass: 'current1'
}). Find ('. tabNav1> li'hangzhou.css ('background', 'red ');
})
</Script>

• Html


• Css


• Javascript

Html
Css
Javascript



Zookeeper