"Sharp jquery" notes--two Sections

Chapter III

1. Dom Operation (node)

1) Find nodes to find element nodes and attribute nodes

2) Create the node:

(1) Creating ELEMENT nodes

var Addli = $ ("<li></li>"), or var Addli = $ ("</li>") can not be var Addli = $ ("<li>");

$ ("ul"). Append (Addli);

(2) Create text node: var Addli = $ ("<li> text node </li>");

(3) Create attribute node: var Addli = $ ("<li class=" "> Attribute node </li>");

3) Insert node:

var add = $ ("<b> insert node </b>");

(1) $ ("P"). Append (add) and Add.appendto ("P"); Add to Internal

(2) $ ("P"). Prepend (add) and Add. Prependto ("P"); Add to Internal

(3) $ ("P"). After (add) and Add.insertafter ("P"); Add to External

(4) $ ("P"). Before (add) and Add. InsertBefore ("P"); Add to External

4) Delete node

(1) Remove ()//can take attributes

(2) detach ()//is different from remove (): The bound events and additional data will remain

(3) empty ()//Emptying node

5) Copy Node

(1) Clone ()

(2) Clone (True) is a copy of the element while also copying the events bound to the element, but also has the ability to copy

6) Replace node

(1) replacewith (); For example: $ ("P"). ReplaceWith (ADD)

(2) ReplaceAll; for example: Add. ReplaceAll ("P")

7) Parcel Node

(1) wrap (); For example: $ ("P"). Wrap ("<b></b>") wraps the P label with the b tag.

(2) Wrapall () such as $ ("P"). Wrapall ("<b></b>") wrap all matching p tags with a b tag

(3) Wrapinner () such as $ ("P"). Wrapall ("<b></b>") wrap all matching p tags with b tags

2. DOM Operations (attributes)

1) Properties

(1) Gets the attribute: $ ("P"). attr ("title")

(2) Set property: $ ("P"). attr ({"title": "MyTitle", "Class": "Pitem"})

(3) There are also properties that can be obtained from attributes: HTML (), text (), height (), Width (), Val (), CSS ()

(4) Delete attribute: $ ("P"). Removeattr ("title")

2) style

(1) Get Style: $ ("P"). attr ("class")

(2) Set style: $ ("P"). attr ("Class", "main")

(3) Append style: $ ("P"). AddClass ("other")

(4) To remove the style:

(1st) Delete one: $ ("P"). Removeclass ("other")

(2nd) Delete multiple: $ ("P"). Removeclass ("other"). Removeclass ("main") or

$ ("P"). Removeclass ("other main")

(5) Toggle Style

(1st) Toggle (function () {},function () {})

(2nd) $ ("P"). Toggleclass ("other")//if the class name exists then delete, not present add

(6) $ ("P"). Hasclass ("Other") determines if a style is included

3) HTML ():

(1) Get HTML ()

$ ("P"). HTML () Gets the HTML content inside P

(2) Set HTML ()

$ ("P"). HTML ("<b> set HTML () </b>") set the HTML content in P

4) Text ()

(1) Get text ()

$ ("P"). Text () Gets the textual contents of P

(2) Set text ()

$ ("P"). Text ("Set HTML ()") to set the textual content in P

5) Val () "Equals JS's Value property"

(1) Properties can also be set by acquiring properties

(2) option to make select (), checkbox (), Radio () selected

3. Dom operations (traversing nodes)

1) childer () Child elements Collection

2) Next () matches the sibling element immediately behind the element

3) prev () matches the sibling element immediately preceding the element

4) silbings () match elements immediately before and after the sibling element

5) Closest ("xx") to get the nearest match element

6) Parent (), parents ()

4. Dom Manipulation (CSS)

1) Single style: $ ("P"). CSS ("Color", "red");

2) Multiple styles: $ ("P"). css ({"Color": "Red", "opacity": "0.5"});

3) offset (); Gets the relative displacement of the element in the current window

4) position ();

5) ScrollTop (), ScrollLeft ()

Fourth Chapter

1, Event binding: Bind ("click", fn), there are three parameters, but the second parameter is generally passed as the Event.data property to the object's extra data object, it is generally useless.

2, Synthesis event: hover () "Instead of MouseEnter, mouseout", Toggle ()

3. Event bubbling

1) Event Object "When you click the P tag, the event object is created, and the event object is accessed only by the event handler, and the event object is destroyed": $ ("P"). Bind ("click", Function (event) {})

2) Prevent event bubbling: plus event.stoppropagation ()

3) Block default behavior: Event.preventdefault (); "If you sometimes submit a button, check that the form is not legal and prevent the form from submitting"

4) block event bubbling and default behavior can be simply written as: return false;

5) jquery does not support event capture

4. Properties of the Event object:

1) Event.type Get event Type

2) event. Preventdefault ()

3) event. Stoppropagation ()

4) Event.target

5) Event.relatedtarget

6) Event.pagex and Event.pagey

7) Event.which Mouse click, get left (1), Middle (2), right (3) key

8) Event.metakey

5. Removing events

1) Unbind ("Event type", "function to remove")

(1) $ ("P"). Unbind ("click");

(2) $ ("P"). Unbind ("click", Function () {});

(3) If the preceding $ ("P"). Bind ("click", Mgfn=function () {});

In this case: $ ("P"). Unbind ("click", MGFN);

2) One ("Event type", "data, can not pass", "function")//processing function only executes once

6. Analog operation

1) When the user enters the page, the event is triggered: $ ("P"). Trigger ("click") or $ ("P"). Click ()

2) Trigger Custom event: $ ("P"). Trigger ("Myclick")

3) Passing Data: Trigger ("Event Type", "additional data to be passed")

Eg: $ ("P"). Trigger ("Myclick", function (EVENT,MSG1,MSG2) {})

4) Perform the default action

(1) after the trigger () trigger event, the browser default action of $ ("input") is executed. Trigger ("Focus")

(2) Do not perform browser default action $ ("input"). Triggerhandler ("Focus")

7. Other methods:

1) Bind Multiple events bind ("MouseOver mouseout", FN);

2) Add an event namespace (you can use multiple events with the same namespace)

Bind ("Mouseover.plugin", FN);

3) element binds the same event and is called in a different namespace

Bind ("MouseOver", FN); Bind ("Mouseover.plugin", FN);

8. Animation

1) show () and hide ()-----------------------Toggle ()

2) FadeIn () and fadeout ()-----------------Fadetoggle ()

3) Slideup () and Slidedown ()-----------------Slidetoggle ()

4) Animate ("style attribute and value", "Speed parameter optional", "function when animation is complete, optional")

(1) $ ("P"). Animate ({left: "+=50px", Opacity: "0.5"},3000)

(2)

   $ ("p"). Animate ({left: "+=50px", Opacity: "0.5"},3000,function () {$ (this). CSS ("border": "1px solid Blue");//Last Step execution })

5) Stop Animation: Stop ("Whether to empty the animation queue for execution, (true/false), optional", "whether to jump to the end state of the animation being performed directly, (True/false), optional")

PS: If you use stop directly (), the animation you are performing is immediately stopped

6) Determine if it is in an animated state: Is (":")

eg:$ ("P"). Is (": Animate")

7) Delay Animation: Delay (1000)

8) Other animation methods:

(1) toggle (Speed,[callback])

(2) Fadetoggle (speed,[easing], [callback])

(3) FadeTo (speed,opacity, [callback])

(4) Slidetoggle (speed,[easing], [callback])

Fifth Chapter

1. IE6 does not support except for hyperlink elements: hover Pseudo-class selectors, you can use CSS to set styles, and then use addclass in scripts

2. check box

1) Anti-select operation:

$ (' [Name=item]:checkbox '). each (function() {         this. checked =!  this. Checked;})

2) Select all/do not use the same check box:

$ (' [Name=item]:checkbox '). attr ("Checked",this. checked);

3. The index of the table $ ("tr:" Odd/even ") starts at 0, so the 1th line is an even number,

But when $ ("Tbody>tr:" Odd/even "") 1 is odd

4, End () allows an event to be returned from the $ (this) object

5. Forms:

1) with check box:

$ ("Tbody>tr"). Click (function() {       // to determine whether VAR is currently selected        hasselected = $ (this). Hasclass ("selected");        // If selected, moves out of the selected class and vice versa        $ (this) [hasselected?] Removeclass ":" AddClass "] (" selected ");        // Find an internal checkbox, set the corresponding property        $ (this). Find (": CheckBox"). attr ("Checked",!  hasselected);    })

2) Expand and close the form

By controlling the class and ID of the TR

(1) such as the parent line's class= "parent" and id= "row_01/02 ..."

Enforcing class= "Child_ row_01/02 ..."

(2) The jquery code is:

  $ ("Tr.parent"). Click (function() {$ (this). Toggleclass ("selected"). Sibling (". Child_" +  This . ID). Toggle ();})

(3) When a parent row is expanded by default, when the user enters the page, the default needs to be closed, as long as the above code is added. Click ()

3) Table Content Filter: Enter variable values in the search box

$ ("#filterName"). KeyUp (function() {    $ ("Table Tbody tr"). Hide (). Filter (": Contains ('"+ (  $ (this). Val ()  ) +"')". Show ();}). KeyUp (); // when the DOM has finished loading, the binding event is completed when triggered

"Sharp jquery" notes--two Sections