jQuery element selection method: $ ( "selector")
jquery selector selector method can be applied to the CSS, jquery itself comes with a lot of practical selector method:
Filter Selector:
$ ( 'p: First') // first p element $ ( 'p: Last') // The last p element $ ( "p: the even") // index p is an even number of elements, starting from 0 $ ( "p: oDD") // index p odd elements, starting from 0 $ ( "p: EQ (. 1)") // given element index value $ ( "p: gt (0)") / / greater than a predetermined index value to the element $ ( "P: lt (2)") // less than a predetermined index value to the element $ ( ": focus") // currently acquired focus elements $ ( ": Animated") / / executing animation elements $ ( "P"). EQ (N) // operations in the N-th current jQuery object, similar to the index $ ( the this ) .hasClass ( " test") //Whether it contains elements of a particular class, returns a boolean $ ( 'li'). Has ( 'ul') // contain specific elements of future generations
Relations selector:
$ ( "div"). Children () // each sub-div element in the first layer $ ( "div"). the Find ( "span") // div all span elements contained, children and grandchildren $ ( "p"). the Next () // a close sibling of the p elements $ ( "p"). nextAll () // all siblings after the p element $ ( "# test"). nextUntil ( "# test2 ") // " after the element to the id between '# test2' all siblings, break off both ends with id "#test $ ( " p "). prev () // sibling element before the close p elements $ ( "p"). prevAll () // all siblings before the p elements $ ( "# the Test"). prevUntil ( "# test2") // before the id "#test" element to the id of '# All siblings between test2 ',Break off both ends $ ( "p"). Parent () // parent element of each p element $ ( "p"). Parents () // all ancestor elements each p element $ ( "#test"). parentsUntil ( "# test2") // id is "#test" element to the id as' # test2 All the elements between the parent ', break off both ends $ ( "div"). sIBLINGS () // all the siblings, not including their own
JQuery method common attributes of HTML elements to:
The basic attribute operations:
$ ( "img") attr ( "src");. // return the document in src attribute values of all images $ ( "img") attr ( "src", "test.jpg");. // set all images src attribute $ ( "img") removeAttr ( "src");. // the src attribute of the document image to delete $ ( "the INPUT [of the type = 'the CheckBox']") prop ( "the checked",. to true ); // check the box $ ( "the INPUT [of the type = 'the checkBox']") prop ( "the checked",. false ); $ ( "img") RemoveProp ( "src");. // delete img src attribute
CSS operation:
$ ( "p"). addClass ( "Selected");. // plus the 'selected' is a p-type element $ ( "p") removeClass ( "Selected");. // delete 'selected' from the p-type element $ ( "the p-") toggleClass ( "the Selected");. // If there are to delete, or to add
HTML text:
$ ( 'p') html ();. // returns html content element p $ ( "p") html ( "the Hello <B> Nick </ B>!");. // set html content elements p $ ( 'p') text ();. // returns the text element p $ ( "p") text ( "Nick");. // set text elements p . $ ( "input") val ( ); // get the value of the text box $ ( "the INPUT") Val ( "Nick");. // contents of the text box
jQuery CSS style commonly used methods of operation:
$ ( "p") CSS ( "color");. // access to view the color attribute p elements $ ( "p") CSS ( "color", "Red");. // set the color attribute for the p element Red . $ ( "p") CSS ({ "color": "Red", "background": "Yellow"}); // set the color elements is p red, background Yellow attribute (use a plurality of attributes Object form) $ ( 'P') offset (). // element viewport relative offset current, Object {Top: 122, left: 260.} $ ( 'P' .) .offset () Top $ ( ' P ' .) .offset () left $ ( "P") position (). // element offset relative to the parent element, effective for visible elements, Object {Top: 117, left: 250} $ (window). scrollTop () // Get the height of the roller carriage $ (window) .scrollLeft () // Get the width of the roller carriage $ (window) .scrollTop ( '100') // set the height of roller carriage 100 $ ( "p") height ();. // Get the height of the element p $ ( "p") width ();. / / Get the width of the element p $ ( "p: first") innerHeight, (). // Get the first matching element inner height region (including padding, not including the border) $ ( "p: first") the innerWidth (). / / Get the first matching element inner region width (including padding, not including the border) $ ( . "P: first") outerHeight () // matched elements external height (default including padding and border) $ ( "P: first" ) .outerWidth () // match the external width of the element (including default padding and border) $ (. "P: First") outerHeight ( true ) // is true margin comprises
jQuery event methods commonly used: $ ( "selector") name of the event (function {} function is executed after the trigger event ()).
$ ( "the p-") the Click ();. // click event $ ( "the p-") the DblClick ();. // double-click events
. $ ( "the INPUT [of the type = text]") Focus () // elements to obtain the focus, focus triggering event
$ ( "the INPUT [of the type = text]"). blur () // element loses focus, blur triggering event
$ ( "the Button"). mouseDown () // event is triggered when the mouse is pressed
$ ( "the button"). mouseUp () // trigger events when the mouse button on the relaxation element
$ ( "p"). mouseMove () // event is triggered when the mouse pointer moves in the specified elements
$ ( "p"). mouseOver () // triggered when the mouse pointer is over the element event
$ ( "the p-"). mouseout () // event is triggered when the mouse pointer away from the elements
$ (window) .keydown () // when the keyboard or event is triggered when the button is pressed
$ (window). keypress() //Event is triggered when the keyboard or a button is pressed, each input character will trigger a
$ ( "the INPUT"). KeyUp () // event is triggered when the button is released
$ (window) .scroll () // When the user trigger events when scrolling
$ (window) .resize () // when adjusting the size of the browser window trigger event
() $ ( "the INPUT [of the type = 'text']"). change // when the value of the element changes triggering event
$ ( "input"). the sELECT () // event is triggered when input element of text is selected
$ ( "form"). the submit () // event is triggered when the form is submitted
$ (window) .unload ( ) // when the user leaves the page