The entry function

$(function(){...// This is the entry where the page DOM is loaded
})
Copy the code

Wait until the DOM structure is rendered to execute the internal code, rather than wait until all external resources are loaded

Dom object and jQuery conversion

  1. Dom object to jQuery object:
  • $(‘div’)
  1. JQuery objects are converted to Dom objects
  • $(‘div’)[index]
  • $(‘div’).get(index)

The selector

Base selector

The name of the usage describe
The ID selector $(‘#id’) Gets the specified ID element
Full selection selector $(‘ # ‘) Match all elements
Class selectors $(‘.class’) Gets the same class element
Label selector $(‘div’) Gets all elements of the same class of tags
Union selector $(‘div,p,li’) Select multiple elements
Intersection selector $(‘li.current’) Intersection choice

Hierarchy selector

The name of the usage describe
Child selector $(‘ul>li’) Use the > sign to get the parent son level element; Note that grandchild elements are not retrieved
Descendant selector $(‘ul li’) Get all li elements under UL, including grandchildren, using Spaces to represent descendant selectors

Filter selector

The name of the usage describe
:first $(‘li:first’) Gets the first Li element
:last $(‘li:last’) Gets the last Li element
:eq(index) $(‘li:eq(2)’) From the obtained li element, select the element with index number 2, starting with index number 0
:odd $(‘li:odd) Select the element whose index number is odd from the obtained li element
:even $(‘li:odd) Select the element whose index number is odd from the obtained li element

Screening method (emphasis)

The name of the usage describe
parent() $(‘li’).parent() Look for the parent
children(selector) $(‘ul’).children(‘li’) Equivalent to $(‘ul>li’), nearest grade (biological son)
find(selector) $(‘ul’).find(‘li’) Equivalent to $(‘ul li’), descendant selector
siblings(selector) $(‘.first’).siblings(‘li’) Find sibling nodes, not including itself
nextAll([expr]) $(‘.first’).nextAll() Look up all the peers of the current element
prevtAll $(‘.last’).prevAll() Finds all the peers of the current element
hasClass(class) $(‘div’).hasClass(‘protected’) Checks if the current element contains a particular class and returns true if it does
eq(index) $(‘li’).eq(2) Equivalent to $(‘li:eq(2)’),index starts at 0

Parent () children () find () siblings () eq ()

JQuery exclusive + chain programming

<button> quick <button> <button> quick <button> quick <button> <script> $(function(){
    	//1. Implicit iteration binds click events to all buttons
    	$('button').click(function(){
            //2. The current element changes the background color
            $(this).css('background'.'pink')
         	//3. The rest of the brothers remove the background color implicit iteration
            $(this).siblings('button').css('background'.' ')
        })
    })
<script>

<script>
   $(function(){$('button').click(function(){$(this).css('background'.'pink').siblings('button').css('background'.' ')})// chain programming
    })
<script>
Copy the code

JQuery Style Changes

The CSS method

  1. Parameter writes only the attribute name, which returns the attribute value
  • $(this).css(‘color’)
  1. Parameter attribute name, attribute value, comma-separated, is set to a set of styles, attributes must be quoted, the value of the number can not be quoted by units and quotes
  • $(this).css(‘color’,’red’)
  1. Parameters can be in the form of objects, making it easy to set multiple styles. Attribute names and attribute values are separated by colons, and attributes may not be quoted
  • $(this).css({‘color’:’white’,’font-size’:’20px’})

Set class style methods

The function is the same as the previous classList, you can manipulate the class style, pay attention to the operation class inside the parameter do not dot.

  1. Add the class
  • $(‘div’).addClass(‘current’)
  1. Remove the class
  • $(‘div’).removeClass(‘current’)
  1. Switch the class
  • $(‘div’).toggleClass(‘current’)

JQuery attribute Manipulation

Sets or gets the inherent property value prop() of the element

The inherent attributes of an element are the attributes of the element itself, such as the href of the < a > element and the type of the < input > element

  1. Get attribute syntax
  • Prop (‘ property ‘)
  1. Set property syntax
  • Prop (‘ property ‘, ‘property value ‘)

Set or get custom property value attr()

Attributes added to the element by the user. Div index=’1′

  1. Get attribute syntax
  • Attr (‘ attribute ‘) // Similar to native getAttribute()
  1. Set property syntax
  • Att (‘ attribute ‘,’ attribute value ‘) // Similar to native setAttribute()
  1. You can also get the H5 custom attribute data-x

Data cache Data ()

Data () can access data on a given element without modifying the DOM element structure. Once the page is refreshed, the previously stored data is removed

  1. Add-on data syntax
  • Data (‘name’,’value’) // Appends data to the selected element
  1. Fetch data syntax
  • Data (‘name’) // Retrieves data from the selected element
// This method can get the data-index h5 custom attribute without writing data-, return a number
$('div').data('index')
Copy the code

Form content operations

  1. Normal element content HTML () (equivalent to native innerHTML)
  • HTML () // Gets the content of the element
  • HTML (‘ content ‘) // Sets the content of the element
  1. Normal element text content text() (equivalent to innerText)
  • Text () // Gets the text content of the element
  • Text (‘ text content ‘) // Sets the text content of the element
  1. Form value val() (equivalent to native value)

JQuery element manipulation

Traverse elements

Grammar a

$(‘div’).each( function( index , domEle ) {xxx} )

  • The each() method iterates over each matched element. It’s mostly DOM processing
  • The callback takes two arguments: index is the index number of each element, and domEle is the object of each DOM element, not the jquery object
  • So to use jquery methods, you need to convert this DOM element into a jquery object
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
    	$(()=>{
            //$('div').css('color','red')
            // If you do different actions on the same type of element, you need to traverse the element (similar to for, but more powerful than for)
            // the each() method iterates
            let arr=['red'.'green'.'blue']
            $('div').each((i,domEle) = >{
           	 // The first argument to the callback must be the index number
            	console.log(i)
                // The second argument to the callback must be a DOM element object
                console.log(domEle)
               //domEle.css('color'); Dom objects have no CSS methods
               $(domEle).css('color',arr[i])
            })
        })
    <script>
</body>
Copy the code

Grammar two

$.each( object , function( index , element {xxx}))

  • The $.each() method can be used to iterate over any object. Mainly used for data processing, such as arrays, objects
  • The function inside takes two arguments: index is the index number of each element; Element traverses the content
$.each({
    name:'ggbondfucker'.age:18
},function(i,ele){
    console.log(i);// The output is the name of the name age attribute
    console.log(ele);Go over and say ggbond18
})
Copy the code

Create the element

$(‘< li ></ li >’)

Add elements

  1. Internal add

Element. Append (‘ content ‘)

  • Put content at the very end of the matching element, similar to native appendChild

Element. The prepend (‘ content ‘)

  • Place the content first inside the matching element
  1. External add

Element. After (‘ content ‘)

  • Put the content after the target element

Element. Before (‘ content ‘)

  • Place the content in front of the target element

Add elements internally, and once they’re generated, they’re parent-child

External elements are added, and once generated, they are siblings

Remove elements

element.remove()

  • Delete the matching element (itself)

element.empty()

  • Deletes all child nodes in the matching set of elements

element.html(”)

  • Clears the element content of the matched element