Series operation

Layout of basic HTML

<div id="box">
	<ul>
		<li class="item1">1</li>
		<li>2</li>
		<li class="item2">3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>

add

$(document).ready(function(){//Setting up the entry code for jQuery
	console.log($('#Box'). add ('li')//add adds the selected element to the current collection
})

Representation: Get the box element, then add the li element in the box jQuery DOM by adding (add the li element on the basis of getting the original jQuery dom)

addBack

$(document).ready(function(){//Setting up jQuery entry code
	console.log($('#Box'). children ('ul'). addBack ()// means merging the first two sets together
})

First select the box element, and then the child element of the box element is the ul element. AddiBack means that the two elements previously obtained are merged into a single jQuery dom.

contents

$(document).ready(function(){//Setting up jQuery code entry
	 console.log($('#Box'). contents ()// Gets the child nodes of the element
})

Get the current element in jQuery and use the contents method to get the byte points of the current element. The classification of nodes is as follows:

Classification of Nodes: Text Node, Annotation Node, Element Node, Attribute Node, Document Node, Document Fragment

end

$(document).ready(function(){//Setting up jQuery entry code
	console.log($('#box').find('li'))
 })

Currently, when a box element is retrieved, it calls the find method based on the box element to find that the Li element returns five li (this operation is called a destructive operation).

$(document).ready(function(){//Setting up jQuery entry code
	console.log($('#box').find('li').end())
	//Getting the box element matches the child element li by calling find method, and returns the last destructive operation by the end method
})

The find method destroys the jQuery dom of the current box element, so the end function is called to solve this situation. The end represents the collection of the last destructive operation (destructive operation as long as your return value changes).

The advantage of calling the end function to return to the last destructive operation is that the chain operation can be implemented as follows:

$('#box').css({
	background :'pink',
  }).css({
	width:200,
  })//Usually not true, but verification chain operations can also be true.

The $(' box') essentially takes a jQuery dom element, and then the css function returns the box attribute. The css method essentially does not destroy the last dom element (this is called a nondestructive operation).

The find method is a destructive operation, $(' box') is to get the box element and call the find method. The return result of this find method is 5 li. He changed the previous box element. This is a destructive operation. If you want to return the element of the last operation, you can use the end method.

The return result is that the current jQuery dom (which is called nondestructive operations) can be chained

The return result is a change to the current jQuery dom (which is called a destructive operation) and the end function can be called to return the result of the last destructive operation.

Operating CSS

Basic HTML layout

<div id="box">
    <div class="content"></div>
    <ul>
        <li class="item1">1</li>
        <li>2</li>
        <li class="item2">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

css function

1. Setting the css style in the way objects are passed

Setting css style (setting multiple attributes) by passing objects is recommended for code maintenance

$(document).ready(function(){//Setting up jQuery entry code
	$('li:even').css({//li indicating that the lookup index is even
		backgroundColor : 'pink',
	})
})

Call the css function with the object format array li style, use: Eve selector to select even-digit li to set css style: use css style can set the corresponding style selector in the css function to select the results, then the css function will give you the corresponding style (and do not need to write units in one place)

2. Setting css properties by passing strings

Setting css properties by passing strings (setting a single css property)

$(document).ready(function(){//Setting up jQuery entry code
	$('li:even').css('width',200);
	//Represents setting the corresponding style for an even number of li at the index location, but only one
})

It also does not need to write units, but it can only set one css attribute and set multiple css attributes invalid.

3. Get the value of the current element

$(document).ready(function(){//Setting up jQuery export code
	$('li:even').css('width')//Width value of li element indicating that the index digit of the query is even digit
	//But he can get the width value of the first li
})

Even if the selector can select all elements, I get the css attribute of the first element in the collection, set the attribute that can set all selectors selected, but get the first attribute.

// Style of Label Settings
css({
    Attribute 1: Value 1,
    Attribute 2: Value 2
    ...
 })
 // Get the attributes of the current tag
 css (attribute name) Gets the css attribute value of the first element in the collection

Location attributes

offset function

Get element location

$(document).ready(function(){//Setting up the entry code for jQuery
	//Gets the left value and top value of the selected element in the current selector
	console.log($('#box').offset())
})

The offset function returns the left and top values of an object, which locate the calculated fetch elements relative to the upper left corner of the browser based on the distance from the upper left corner of the browser.

Set the left and top values of elements

$(document).ready(function(){//Setting up the entry code for jQuery
	$('#box').offset({
		 left:100,
		 top:120,
	})
	//The offset function that sets the current element has a left value of 100 top and a 120 top value.
})

Setting the left and top values of the box element, the offset function passes an object that sets the left and top values of the attribute.

position function

Gets the value of the current position function

$(document).ready(function(){//Setting up the entry code for jQuery
	console.log($('#Box'). position (); // means to get the left and top values of the current element with location attributes
	//Returns the location of an object record element from the upper left corner of the parent
})

The position value cannot be set

$(document).ready(function(){//Setting up jQuery code
	$('#box').position({
		left:20,
	})//You cannot set the distance between elements to locate the upper left corner of the parent
})

ScrollLeft & scrollTop function

CSS Style Code

        #box{
            position:relative;
            width:200px;
            height:200px;
            padding:20px;
            border:30px solid blue;
            background: pink;
            overflow:auto;
        }
        .content{
            width:500px;
            height:100px;
            background: #000;
        }

HTML Basic Layout Code

<div id="box">
    <div class="content"></div>
    <p> peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut peanut Peanut Peanut Peanut Peanut Peanut Peanut Peanut</p>
</div>

Get scrollLeft & scrollTop

$(document).ready(function(){//Setting up jQuery code
	$('#box').scrollLeft()// Gets the distance of the current horizontal scrollbar
	$('#box').scrollTop()// Gets the current vertical scroll distance
})

The current scrollLeft and scrollTop functions execute without any parameters to indicate the distance between horizontal scrolling and vertical scrolling of the query box element, and obtain the horizontal and vertical values of the current scrollbar.

Setting scrollLeft & scrollTop

$(document).ready(function(){//Setting up jQuery export code
	$('#box').scrollLeft(50); // Sets the horizontal distance of the current element scrollbar
	$('#box').scrollTop(50); // Sets the vertical distance of the current element scrollbar
})

The number passed by the current scrollLeft and scrollTop functions represents the horizontal and vertical distances for setting the scrollbar of the current element.

Other Location Attributes

The basic layout of HTML, the basic style of CSS and the above are exactly the same.

<div id="box"></div>

InnerWidth & innerHeight function

$('#box').ready(function(){// Sets the entry code for jQuery
     console.log($('#Box'). innerWidth ()// means to get the width value (left and right padding value + width value)
     console.log($('#Box'). innerHeight ()// indicates getting height values (upper and lower padding values and height values)
})

When no value execution in innerWidth and innerHeight functions is to get the value of the current element, passing in the value means setting the value in the current innerWidth and innerHeight functions.

OuterWidth & OuterHeight Function

 $('#box').ready(function(){// Sets the entry code for jQuery
	console.log($('#box').outerWidth());
	//Represents the width value before the acquisition point (left and right padding + left and right border+width value)
	console.log($('#box').outerHeight());
	//Represents getting the current height value (upper and lower padding + upper and lower border+height value)
})

When the outerWidth and outerHeight functions do not pass parameters to execute to get the value of the current element, passing numbers in means setting the value of the current outerWidth and outerHeight functions.

Width & height function

$('#box').ready(function(){// Sets the entry code for jQuery
	console.log($('#Box'). width ();// Gets the width value of the current element
	console.log($('#Box'). height (); // Gets the height value of the current element
	$('#box').width(200); // Sets the width value of the current element
	$('#box').height(200); // Sets the height value of the current element
})

Both width and height functions can get the value of the current element when the function does not pass parameters, and can set the value of the current element when passing parameters (values).

Get the location of the element

offset function

• offset() returns the location of an object record element in the upper left corner of the browser
• Offset (object) sets the location of the element from the upper left corner of the browser

position function

• position() returns the location of an object record element from the upper left corner of the parent
• Position (object) cannot set element distance to locate the upper left corner of parent

scrollLeft function

• scrollLeft() returns the horizontal scroll distance of the scrollbar
• ScrollLeft (numerical) sets the horizontal scroll distance of the scrollbar

scrollTop function

• scrollTop() returns the vertical scroll distance of the scrollbar
• ScrollTop (numerical value) sets the vertical rolling distance of the scroll bar

height function

• height() returns the height of the current element
• Height (value) sets the height of the current element

width function

• width() returns the width value of the current element
• Width (numerical) sets the width value of the current element

innerHeight function

• innerHeight() returns the width value of the current element of the result (upper and lower padding values + height values)
• InnerHeight sets the height of the current element

innerWidth function

• innerWidth() returns the width value of the current element of the result (left and right padding value + width value)
• InnerWidth sets the width of the current element

outerHeight function

• outerHeight() returns the height of the current element (upper and lower padding values + upper and lower border values + height values)
• OuterHeight sets the height of the current element

outerWidth function

• outerWidth() returns the height of the current element (left and right padding values + left and right border values + width values)
• OuterWidth sets the height of the current element

attribute

Basic layout of HTML

<img src="1.jpg" cdfsb="fge">
<img src="2.png">
<img src="3.jpg">
<div id="box">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
   </ul>
 </div>
 <input type="text" value="vsgbdnf">

attr

Setting the legal attributes of tags with attr function (commonly used)

$(document).ready(function(){//Setting up jQuery entry code
    $('img').attr('title','peanut')//Set peanut value to title attribute by attr function
})

Set attributes to elements (any attribute can be set by attr function corresponding attribute name and attribute value), first select three IMGs and set title value to three IMGs by attr function is peanut.

Setting Illegal Attributes of Labels with Ar Function

$(document).ready(function(){//Entry code for jQuery
    $('img').attr('sdfghrd','hausheng');//Setting an illegal attribute through the attr function
})

Any illegal and legal attributes can be given by attr function. For img tag, he does not own the sdfghrd attribute, which indicates that he is an illegal attribute.

Getting Legal Attributes with attr Function

$(document).ready(function(){//Setting up jQuery entry code
    console.log($('img').attr('src'))//Getting src attributes in img elements by attr method
})

Attr is a method that only obtains the first attribute in the current set of legal attributes. Currently, it obtains three img s, and then obtains the first src attribute value in the current set through attr.

Getting Illegal Attributes with attr Function

$(document).ready(function(){//Setting up jQuery entry code
    console.log($('img').attr('cdfsb'))//Illegal attributes in the current function can also be obtained by attr function
})

Getting illegal attributes can only get the first attributes in the current collection. Currently, three IMGs are acquired, and then the first src attribute value in the current collection is acquired through attr.

Legal attributes & illegal attributes

• The legal attribute is that the tag itself exists and the attribute is innate. This is called the legal attribute.
• Illegal attributes are: it means that there is no such attribute in itself, but it is set up arbitrarily by human beings, which is called illegal attributes.

removeAttr

Remove to a legal attribute and an illegal attribute

$(document).ready(function(){//Setting up jQuery entry code
    $('img').removeAttr('src');//Remove src as a legal attribute by removeAttr
    $('img').removeAttr('cdfsb');//Remove the illegal attribute cdfsb by removeAttr
 })

A legal and illegal attribute can be deleted by removeAttr. When a function is executed, it can be deleted by passing a wave of strings in which the deleted belongings (in the form of strings) are shown.

prop

prop denotes setting legitimate attributes

$(document).ready(function(){//Setting up jQuery entry code
    $('img').prop('title','Legal Attribute')//The current presentation img element has legal properties set through the prop method
    $('img').prop('cadcv','invalid property')//Currently, the img element is illegally attributed through the prop method array
    console.log($('img').prop('cadcv'))
    //Illegal properties set with prop numbers are not displayed on the page, but they can be queried.
    console.log( $('img').prop('alt'));//When prop passes a parameter, it means getting the value of the current element
})

Setting legitimate attributes by prop method can be displayed on HTML tags. Illegal attributes set by prop method can not be displayed on HTML tags, but he can query that there is this illegal element.

removeProp

$(document).ready(function(){//Setting up jQuery entry code
    $('img').prop('acdsfgb','invalid property')
     // The prop function can set illegal attributes, but the illegal attributes will not appear in HTML tags.
     //(attr can be displayed on HTML tags)
     console.log($('img').prop('acdsfgb'))//Query for illegal properties currently set through prop
     $('img').removeProp('acdsfgb')//Delete current illegal attributes
     $('img').removeProp('src')//Deleting the current legal attributes is invalid
  })

The removeProp function cannot delete legal attributes (deleting legal attributes is invalid)

That removeProp allows you to delete illegal attributes that are set by prop (deleting illegal attributes is illegal attributes that are not displayed on HTML tags)

attr

• Attr (Attribute Name, Attribute Value) Sets the element's legal/illegal attributes
• Attr (Attribute Name) Gets the legal/illegal attributes of an element

removeAttr

• RemoveAttr (Attribute Name) Deletes Legal/Illegal Attributes of Elements

prop

• Prop (attribute name, attribute value): Set the element's legal attributes
• Prop (attribute name, attribute value): Setting illegal attributes will not appear on html tags

removeProp

• RemoveProp (attribute name): Delete illegal attributes that are not represented on html tags

summary

Adding class name to addClass

$(document).ready(function(){//Setting up jQuery entry code
   $('img').addClass('huashneg')//By addClass, he adds class names to img elements
   $('img').addClass('huashneg1');//Add the class name again on the original basis
})

You can add class names to the currently selected elements by addClass (this addClass function adds class names on the original basis regardless of the previous class names)

removeClass Deletes Class Names

$(document).ready(function(){//Setting up jQuery entry code
    $('img').addClass('huashneg')//By addClass, he adds class names to img elements
    $('img').addClass('huashneg1')
    $('img').removeClass('huashneg1');//Delete the class name in the current parentheses by removeClass
 })

Deleting class names by removeClass deletes the currently specified class names and does not delete other class names

toggleClass Sets Switch Class Name

$(document).ready(function(){//Setting up jQuery entry code
   $('img').toggleClass('toggle1')//The current call to toggleClass is the class name of the setting element
   $('img').toggleClass('toggle1')//Currently, the toggleClass function is called again to delete the current class name (toggle)
})

Currently, the class name is set by toggleClass, and the next call to toggleClass is to switch the class name (delete the class name added by toggleClass last time)

html function

html functions are equivalent to innerHTML in native js

$(document).ready(function(){//Setting up jQuery entry code
    	console.log($('#Box'). HTML ()// Gets the text content of the current element
         //Get the text content in the box element (if the content is labeled, it will also appear in the text).
         //That's the innerHTML function in element js
          $('#Box'). HTML ('< P > I am the content of the P tag </p >')// Set the content of the current element
       //Setting the text in the box element content to the content in the html function (), he parses the tagged string into Tags
 })

text function

The text function is equivalent to innerText in the original js

$(document).ready(function(){//Setting up jQuery entry code
      console.log($('#box').text())
      //Represents retrieving content from a box element, similar to innerText in native js
      $('#Box'. text ('< P > I am the content of the P tag </p >')
      //Text functions are not set to convert tagged strings into tags, but simply text content.
})

val function

$(document).ready(function(){//Setting up jQuery entry code
    console.log( $(':text').val())
      //Text represents an element (type='text') with a single line text box in the selection page.
      //Getting the value value of the current element through the value function
      $(':text').val('I am value Contents')//The parameters passed in the val function represent what is set in the current input box
      //Instead of setting the value value value, it does not change the current value value.
 })

html

• html() Gets the html text content of the element
• html (text) setting element html text content

text

• text() Gets the text content of the element
• Text (text) Sets the text content of the element

val

• val() Gets the text value of input
• Val (data) sets the text value of input