Introduction to jquery

1.JQuery

(1) Introduction to jquery

is a JS framework (. js file ), its greatest feature is the use of selectors (

Using the CSS selector syntax) to find the nodes to manipulate and

Nodes are encapsulated into a jquery object, by invoking a jquery object that provides the

property or method to manipulate the underlying node. The benefits of doing this are:

One is not to consider browser compatibility issues, the other one,

The code is greatly simplified.

(2) Basic steps of programming first.html

Step1, using selectors to find nodes

Step2, invoke the properties or methods provided by the JQuery object to complete the corresponding

Operation.

(3) The reciprocal conversion of jquery objects to DOM objects

src= "Js/jquery-1.4.3.js" ></script><script type= "Text/javascript" >functionF1 () {//A variable that starts with "$" is just a        //programming habits, in order to emphasize that this is a jquery object.         //var $obj = $ (' #d1 ');        //$obj. CSS (' Color ', ' red '). CSS (' font-size ', ' 60px ');        //$obj. css ({' Color ': ' Red ', ' font-size ': ' 80px '});$ (' #d1 '). css ({' Color ': ' Red ', ' font-size ': ' 80px ')}); }        //DOM Object---"jquery object"    functionF2 () {varobj = document.getElementById (' D1 '); var$obj =$ (obj); $obj. HTML (' Hello Java '); }        //jquery Object---"Dom object    functionF3 () {var$obj = $ (' #d1 '); //Way One        //var obj = $obj. Get (0);        //Mode two        varobj = $obj. Get () [0]; Obj.innerhtml= ' Hello java '; }</script>
1) DOM Object ---" jquery object 
$ (DOM object );
2) jquery object ---"dom object 
Mode one : $obj. Get (0);
Way Two: $obj. Get () [0];2 Selector1) Basic selector selecter/s1.html 
#id
. class
Element
Selector1,selector2. Selectorn
*
2) Hierarchy selector sel
Ector/s2.html
Select1 Select2 matches all descendant elements under a given ancestor element
SELECT1>SELECT2 matches all child elements under a given parent element
Select1+select2 matches all  select2 elements immediately following the Select1 element
Select1~select2 all select2 elements after matching the select1 element
3) filter Selector 
(1) Basic filter selector selector/s3.html
: First
: Last
: Not (selector)
: Even
: Odd
: EQ (Index)
: GT (Index)
: LT (Index)
(2) Content filter selector selector/s4.html
: Contains (text) matches the element containing the given text
: Empty matches all null elements that do not contain child elements or text
: Has (selector) matches the element that contains the element that the selector matches
:p arent matches elements that contain child elements or text
(3) Visibility filter selector selector/s5.html
: Hidden matches all invisible elements,
or an  element of type hidden 
: Visible matches all visible elements
(4) Attribute filter selector selector/s6.html
Selector[attribute]
Selector[attribute=value]
Selector[attribute!=value]
(5) Sub-element filter Selector (subscript starting from 1 ) selector/s7.html  
: Nth-child (index/even/odd)
(6) Form object property Filter Selector selector/s8.html
: Enabled
:d isabled
: Checked
: Selected
4) Form Selector
: input
: Text
:p Asword
: Radio
: checkbox
: Submit
: Image
: RESET
: button
: File
: Hidden
DOM Operations1), query dom/d1.html 
HTML content of the node  : HTML () 
The text content of the node  : Text () 
attribute value of the node : attr ()
Value of the node : Val ()
2), create node dom/d2.html
$ (HTML)
3), insert node dom/d2.html
Append (): Append content to each matched element
Prepend (): front content to each matched element
After (): Insert content after each matching element
Before (): Insert content before each matching element
4), delete node dom/d3.html
Remove ()
Remove (selector)
Empty (): Empty node
5), copy node dom/d6.html
Clone ()
Clone (True): Causes the replicated node to also have the behavior (the event
Processing code piece copy )
6), attribute operation see dom/d1.html
READ:attr (");
Setting:attr (",") or once
Set multiple attr ({"": "", "": "});
Delete:removeattr (")
7) style operation dom/d7.html
Get and set : attr ("Class", "") or attr ("style",  "" ");
Append : AddClass (")
Removal : Removeclass (")
or removeclass (' S1 s2 ')
or removeclass ()//will delete all styles
Toggle Style:toggleclass(' C1 '), with that style, on Delete, no,  
is added.
Is there a style hasclass (')
Read css (")
Set css (', ') or
CSS ({":", "': '}")//Set multiple styles
Get element Offset Information
Offset ()
Valid only for visible elements
8), traverse node dom/d8.html
Children ()/children (selector) considers only child elements, regardless of other descendant elements.
Next ()/next (selector) Next brother
Nextall ()
Prev ()/prev (selector) Last brother
Siblings ()/siblings (selector) Other brothers
Find (selector): Find descendants that meet selector requirements
Parent (): Parental node
Filter element Set
filter (expression) 3 Event Handling1) Event binding event/e1.html 
Bind (TYPE,FN)
2) abbreviated form of binding method
Click (function () {
});
3) Synthetic event event/e2.html, e3.html
Hover (Enter,leave): Analog cursor Hover Event
Toggle (Fn1,fn2 ...) : Simulates a mouse continuous click event
4) Event bubbling
(1) What is event bubbling ?
Events generated by child nodes are thrown up to the parent node in turn.
(2) Get the event object ? Event/e5.html
Click (function (e) {
});
(3) Stop bubbling event/e6.html
Event.stoppropagation ()
(4) Stop default behavior event/e7.html
Event.preventdefault ()
5) Properties of the event object
Event.type Event Type (is a string, such as "click") 
Event.target: Return Event source (is DOM object !!!)  
Event.pagex/pagey
6) Analog Operation event/e8.html
Animation1) Show ()/Hide (): animate/a1.html
(1) Function: Through the simultaneous modification of the width and height of the node to achieve display or
The hidden effect.
(2) Usage :
Show (Time , [callback]);
Time : Slow,normal,fast or specify a number of milliseconds
Callback: Callback function, which is called after the animation has finished executing.
2) FadeIn () FadeOut (): animate/a2.html
(1) Role: by changing the opacity
(2) Use ibid.
3) Slideup () Slidedown (): animate/a1.html
1) Function: Change the height of the element
2) usage with show
4) Custom animate animate (Params,speed,[callback]) animate/a4.html
1) Usage :
Params: is a JavaScript object that describes when the animation ends,
The State of the node.
Speed: The unit is in milliseconds.
class Array(those DOM nodes that the jquery object contains  ) array/a1.html  
1) Length Property:The number of DOM nodes. 
2) each (FN (i)): loops through each element, this represents the DOM object being iterated
,$ (this) represents the jquery object being iterated. I means the one that is being traversed.  
The subscript of the node ( starting from 0 ). 
3) EQ (index): Returns the jquery object at the index+1 position
4) Index (OBJ): Returns the subscript, where obj can be a DOM object 
Or a jquery object. 
5) Get (): Returns an array of Dom objects
6) Get (Index): Returns the Dom object at index+1. 
var objects = $ (document). Find ('. move ');
Objects.each (function () {
if ($ (this). attr (' Load ') ==$ (' #frameMain '). attr (' src ')) {
Return
}
JQuery (This). Stop (). Animate (
{' Left ': '-' + settings.marginleft + ' px '},
Settings.duration,
Settings.easing,
function () {
if (typeof settings.closefinished = = ' function ') {
Settings.closefinished ();
}
}
);
}); Triggertriggers a class of events on each matched element. 
$ ("P"). Click (Function (event, a, b) {
Aand B are undefined types when a normal click event occurs
If triggered with the following statement, a points to "foo" and B points to "bar"
}). Trigger ("click", ["foo", "Bar"]);
Use cookies to save
$.cookie (' style ', ' css/black.css ', {expires:365});
var favstyle = $.cookie (' style ');
Lock page
$.blockui ();
Unlock
$.unblockui ();
<<adv.html.txt>>
Introduction to jquery