Notes on "sharp jQuery" -- Two Sections, sharp jquery

Notes on "sharp jQuery" -- Two Sections, sharp jquery

Chapter 3

1. DOM operations (nodes)

1) You can search for element nodes and attribute nodes.

2) create a node:

(1) Create an element node

Var addLi = $ ("<li> </li>"); or var addLi = $ ("</li> ") it cannot be var addLi =$ ("<li> ");

$ ("Ul"). append (addLi );

(2) create a text node: var addLi =$ ("<li> text node </li> ");

(3) create an attribute node: var addLi =$ ("<li class =" "> attribute node </li> ");

3) Insert nodes:

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 a node

(1) remove () // attributes can be included

(2) detach () // unlike remove (), events and additional data bound are retained.

(3) empty () // clear a node

5) copy a node

(1) clone ()

(2) clone (true) allows you to copy an element, copy the event bound to the element, and copy the event.

6) replace nodes

(1) replaceWith (); for example: $ ("p"). replaceWith (add)

(2) replaceAll; for example: add. replaceAll ("p ")

7) package nodes

(1) wrap (); for example: $ ("p"). wrap ("<B> </B>") wrap the p tag with the "B" label.

(2) wrapAll () for example $ ("p"). wrapAll ("<B> </B>") wrap all the matching p tags with B labels.

(3) wrapInner () for example $ ("p"). wrapAll ("<B> </B>") wrap all the matching p tags with B labels.

2. DOM operations (attributes)

1) attributes

(1) Get attributes: $ ("p"). attr ("title ")

(2) Set attributes: $ ("p"). attr ({"title": "myTitle", "class": "pItem "})

(3) attributes that can be obtained and set include html (), text (), height (), width (), val (), and css ()

(4) Delete attributes: $ ("p"). removeAttr ("title ")

2) style

(1) Get the style: $ ("p"). attr ("class ")

(2) set the style: $ ("p"). attr ("class", "main ")

(3) append style: $ ("p"). addClass ("other ")

(4) Remove a style:

(1st) delete one: $ ("p"). removeClass ("other ")

(2nd) delete multiple: $ ("p"). removeClass ("other"). removeClass ("main") or

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

(5) switch the style

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

(2nd) $ ("p"). toggleClass ("other") // if the class name exists, delete it. If it does not exist, add

(6) $ ("p"). hasClass ("other") determines whether a style exists.

3) html ():

(1) Obtain html ()

$ ("P"). html () Get the html content in p

(2) Set html ()

$ ("P"). html ("<B> set html () </B>") sets the html content in p.

4) text ()

(1) Get text ()

$ ("P"). text () Get the text content in p

(2) set text ()

$ ("P"). text ("set html ()") set text content in p

5) val () [equivalent to the value attribute of js]

(1) attributes can be obtained and set.

(2) enable select (), checkbox (), radio () options to be selected

3. DOM operations (traversing nodes)

1) childer () Child Element Set

2) next () matches the peer element next to the element

3) prev () matches the peer element adjacent to the element

4) silbings () matches the peer element adjacent to the element

5) closest ("xx") gets the latest Matching Element

6) parent (), parents ()

4. DOM operations (CSS)

1) single style: $ ("p00000000.css (" color "," red ");

2) multiple styles: $ ("p00000000.css ({" color ":" red "," opacity ":" 0.5 "});

3) offset (); obtains the relative displacement of elements in the current window.

4) position ();

5) scrollTop () and scrollLeft ()

Chapter 4

1. event binding: bind ("click", fn); there are three parameters, but the second parameter is generally used as event. the additional data object passed to the object by the data attribute, which is generally not used.

2. Merging events: hover () [Replaces mouseenter, mouseout], toggle ()

3. Event bubbling

1) event object [when you click the p tag, the event object will be created. The event object will be accessible only by the event processing function. After the event is processed, the event object will be destroyed ]: $ ("p "). bind ("click", function (event ){})

2) Prevent event bubbles: Add event. stopPropagation ()

3) Prevent the default action: event. preventDefault (); (for example, when you click the submit button, check that the form is invalid to prevent the form from being submitted]

4) blocking event bubbling and default behavior can be abbreviated as: return false;

5) jQuery does not support event capture.

4. Attributes of event objects:

1) event. type gets the event type

2) event. preventDefault ()

3) event. stopPropagation ()

4) event.tar get

5) event. relatedTarget

6) event. pageX and event. pageY

7) When you click event. which, the left (1), middle (2), and right (3) keys of the mouse are obtained.

8) event. metaKey

5. Remove events

1) unbind ([event type], [function to be removed ])

(1) $ ("p"). unbind ("click ");

(2) $ ("p"). unbind ("click", function (){});

(3) If the previous $ ("p"). bind ("click", mgFn = function (){});

In this case: $ ("p"). unbind ("click", mgFn );

2) one ([event type], [data, do not pass], [function]) // The processing function is executed only once.

6. Simulate the operation

1) when the user enters the page, the event is triggered: $ ("p"). trigger ("click") or $ ("p"). click ()

2) trigger a Custom Event: $ ("p"). trigger ("myclick ")

3) transmit data: trigger (event type, additional data to be transferred ])

Eg: $ ("p"). trigger ("myclick", function (event, msg1, msg2 ){})

4) perform the default operation

(1) After trigger () triggers the event, the default browser operation $ ("input"). trigger ("focus") will be executed ")

(2) do not perform the default browser operation $ ("input"). triggerHandler ("focus ")

7. Other methods:

1) bind multiple events ("mouseover mouseout", fn );

2) add an event namespace (you can use the same namespace for multiple events)

Bind ("mouseover. plugin", fn );

3) bind the element to the same event and call it in different namespaces

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 attributes and values], [Optional speed parameters], and [functions upon animation completion, optional ])

(1) $ ("p"). animate ({left: "+ = 50px", opacity: "0.5"}, 3000)

(2)

$ ("P"). animate ({left: "+ = 50px", opacity: 00000.520.},3000,function({{}(this}.css ("border": "1px solid blue"); // last step execution })

 

5) stop Animation: stop (whether to clear the animation queue after execution, (true/false), optional), whether to directly jump the animation being executed to the final state, (true/false), optional ])

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

6) Determine whether the animation is in the "is" (":") status.

Eg: $ ("p"). is (": animate ")

7) Delayed 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])

Chapter 5

1. IE6 does not support hover pseudo-class selector except hyperlink elements. You can use css to set styles and then use addClass in the script.

2. Check box

1) invert selection:

$(‘[name=item]:checkbox’).each(function(){         this.checked = !this.checked;})

 

2) select all or not select the same check box:

$(‘[name=item]:checkbox’).attr(“checked”,this.checked);

 

3. The table index $ ("tr: [odd/even]) starts from 0, so the 1st rows are even,

However, when $ ("tbody> tr: [odd/even]"), 1 is an odd number.

4. end () allows an event to be returned from the $ (this) object

5. Table:

1) check box:

 

$ ("Tbody> tr "). click (function () {// determine whether to select var hasSelected = $ (this ). hasClass ("selected"); // if selected, the selected class is removed. Otherwise, $ (this) [hasSelected? "RemoveClass": "addClass"] ("selected"); // find the internal checkbox and set the corresponding attribute $ (this ). find (": checkbox "). attr ("checked ",! HasSelected );})

 

2) Expand and close a table

By controlling the tr class and id

(1) For example, the parent row class = "parent" and id = "row_01/02 ......"

Child row class = "child _ row_01/02 ......"

(2) jQuery code:

  $(“tr.parent”).click(function(){$(this).toggleClass(“selected”).sibling(“.child_”+this.id).toggle();})

 

(3) When a parent row is expanded by default, it is collected by default when the user enters the page, as long as. click () is added after the code above ()

3) Table content filtering: Enter variable values in the search box

$ ("# FilterName "). keyup (function () {$ ("table tbody tr "). hide (). filter (": contains ('" + ($ (this ). val () + "')"). show ();}). keyup (); // triggered when the binding event is complete after the DOM is loaded