Introduction to some commonly used methods in jQuery

1. Level selector
Descendant selector "Parent element Descendant element"

For example: $("div p") selects all p elements under the div element

Child element selector "Parent element> Child element"

For example: $("div>p") selects the p element in the child element of div

First backward sibling elements "element name + sibling element"

For example: $("div+p") selects the first p element after the div element

backward all Brother element "Element name~sibling element"

For example: $("div~p") selects all p elements after the div element

2. Filter selector
                                                                                                    gt(1)"); All

elements
with numbers greater than 1 :eq       $("p:eq(1)"); "TD: ODD"); Number is all & lt; td & gt; element
: EVEN $ ("td: EVEN"); Number is all & lt; td & gt; element
: not $ ("p (" p :not(.notr)") Select all

elements without class name notr

Filter based on content
:contains(content)
:empty()


Filter based on display

:visible


3. Form selector

:text
:button
:file
:radio
:submit

4. Attribute--filter selector
[Attribute name] Select an element with this attribute
[Attribute name='value'] Select an element whose attribute is equal to a certain value
[ Attribute name!='value'] Select elements whose attributes are not equal to a certain value

For example: $("input[name='newlatter']"); Select input elements whose name attribute is newlatter

5. Form attribute selector
Use:checked :selected :enabled :disabled to filter elements
Simplification of attribute filtering selector
For example: $(":radio:checked" ) Select all the selected Radio elements

$ ("Select Option: Select") Select all the selected option elements

attr("Attribute name") Get attribute

7. Methods to get and set the value attribute
val() and val("value")

8. html() html("value")
html( ) corresponds to innerHTML
html("value") corresponds to innerHTML="value"

text() text("value")
text() corresponds to innerText()
text("value ") corresponds to innerText="value"


9. Style function
css("name of style") Get the value corresponding to the style
css("name of style","style The value of ") Set the corresponding style Set one at a time
css({"Name of style": "Value of style", "Name of style": "Value of style"}) Set multiple styles at one time

addClass("class name") Add a value corresponding to the class attribute
removeClass("class name") Delete the value corresponding to the class attribute
toggleClass("class name") Switch

width() Get the width
height() Get the height
innerWidth() Get the width (including inner margin)
outerWidth() Get the width (including inner margin and border)
outerWidth(true) Get the width (including padding, border and margin)


10. Show and hide functions
show() show
hide() hide
toggle() switch
                                                                                                                                                              using using with use use using using using   using    .                                             using Shrink upward within the specified time
Slide Down(speed) Expand downward within the specified time
slideToggle(speed) Switch the above two states within the specified time

fadeIn(speed) Within the specified time Fade in within time
fadeOut(speed) Fade out within the specified time
fadeToggle(speed) Switch the two states above

11. Custom animation
Selector.animate({" Parameters"},[time],[animation callback function]);

$(document).ready(function(){
$("button").click(function(){
　 $("div").animate({
　　 left:'250px',
　　 opacity:'0.5',
　　 　　 height:'150px',
　　 　　 width:'150px'
　　 } ,2000);
　 });
　});


12. Binding events
Selector.bind("event", event handler); Event of element To associate the corresponding event handler function, it is recommended to use on
selector.unbind("event"); to disconnect the element's event from the corresponding handler function. It is recommended to use off
selector.trigger("event"); Trigger event call

Create commonly used event functions:
click(fn)/click()
            dblclick(fn)/dblclick()
            blur(fn)/blur()
            focus(fn)/focus()
            change(fn)/change()
            keydown(fn)/keydown()
            keyup(fn)/keyup()
            mouseover(fn)/mouseover()
            mouseout(fn)/mouseout()
            submit(fn)/submit()
            load(fn)/unload(fn)

       比如：$("div").click(function(e){});//e是事件对象

                                                                                                                                                                                                                                                                     Since Source
pageX X coordinate of mouse click
pageY Y coordinate of mouse click
stopPropagation() Cancel event bubbling

For example: $(":button").click(function(e ){
              alert(e.pageX+":"                    ; Going up triggers the over function, moving away triggers the out function


15. Dynamic event function
on(event type, selector, processing function)
You can give the current and future values ​​of an element Binding events to elements that match the selector ; Internal prepended content
after() Insert content after each matching element
before() Insert content before each matching element remove() Delete node
empty() Empty node
clone() Copy node elements
clone(true) Copy node elements and bound event handlers
children() Find child elements
next() Find subsequent sibling elements
prev( ) Find previous sibling elements
Find siblings() Find sibling elements
find(selector) Find child elements and descendant elements
parent() Find parent elements
parent(selector) Find ancestor elements
eq(index) Returns the jQuery object at index+1 position
first() Gets the first element
last() Gets the last element
is(expr) Determines whether the element satisfies the expr condition
not(expr) Returns elements that do not meet certain conditions
get(index) Gets one of the matching DOM elements

17. Tool function
$.each(object,[callback])
Traversal method, used to traverse arrays and objects
FIRST, Second)
merge two arrays, merged two arrays to the first array
$ .trim (str)
to remove the string start and end the space of the string

The above is the detailed content of Introduction to some commonly used methods in jQuery. For more information, please follow other related articles on the PHP Chinese website!