jQuery Api learning (III. jQuery document - operation DOM element attribute)

1, Manipulating DOM basic properties

1. Get properties

When we want to get the attribute value of a DOM element, we can use either of the following two methods

Function name	parameter	Belonging
attr	Attribute name	jQuery core object
prop	Attribute name	jQuery core object

jQuery core object. Attr (attribute name):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      console.log($('div').attr('id')) // Result: container
    </script>
  </body>
</html>

jQuery core object. Prop (property name):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      console.log($('div').prop('id')) // Result: container
    </script>
  </body>
</html>

2. Add and modify attributes

When we want to assign an attribute value to a DOM element, we can use either of the following two methods

Function name	parameter	Belonging
attr	Attribute name, attribute value	jQuery core object
prop	Attribute name, attribute value	jQuery core object

jQuery core object. Prop (attribute name, attribute value):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').attr('id', 'container')
      console.log($('div').get(0)) // Result: < div id = "container" > < / div >
    </script>
  </body>
</html>

jQuery core object. Prop (attribute name, attribute value):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').prop('id', 'container')
      console.log($('div').get(0)) // Result: < div id = "container" > < / div >
    </script>
  </body>
</html>

3. Remove attributes

When we want to remove attributes from DOM elements, we can use the following method

Function name	parameter	Belonging
removeAttr	Attribute name	jQuery core object

jQuery core object. Removeattr (property name):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div id="container"></div>
    <p></p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // Remove the attributes of the element itself
      $('div').removeAttr('id')
      console.log($('div').get(0)) // Results: < div > < / div >

      // Attributes added after removal
      $('p').prop('id', 'element')
      $('p').removeAttr('id')
      console.log($('p').get(0)) // Results: < p ></p>
    </script>
  </body>
</html>

4. Differences between attr and prop setting attributes

It is recommended to use attr when setting common attributes and custom attributes, and prop when setting Boolean attributes (checked, selected, etc.)

When using attr to set an attribute with Boolean value, the setting fails, as shown in the following figure

code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="checkbox" checked>
    <button>Reverse selection</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('button').click(function () {
        $('input').attr('checked', !$('input').attr('checked'))
      })
    </script>
  </body>
</html>

As can be seen from the above dynamic diagram, when using attr to set the attribute with Boolean value, if the element has not been manually operated, it can successfully pass attr
However, once the element is manually manipulated on the screen, attr cannot successfully set the attribute value of the element

2, Action class attribute

Not only can you manipulate class attributes through attr and prop, jQuery also provides a set of special methods to manipulate class attributes

1. Add class attribute

Function name	parameter	Belonging	describe
addClass	class name	jQuery core object	When adding multiple, the class names are separated by spaces

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').addClass('container')
    </script>
  </body>
</html>

2. Remove the class attribute

Function name	parameter	Belonging
removeClass	class name	jQuery core object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').removeClass('container')
    </script>
  </body>
</html>

3. Replace class attribute

addClass is used to append the class name to the class attribute. If you want to overwrite the attribute value of the original class, you can use this method

Function name	parameter	Belonging
toggleClass	class name	jQuery core object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
    <style>
      .container {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
      .container2 {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').toggleClass('container2')
    </script>
  </body>
</html>

3, Manipulate form values and DOM text

1. Get form value

Get the value attribute value of the form:

Function name	parameter	Belonging
val	nothing	jQuery core object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="text" value="Form defaults" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      console.log($('input').val())
    </script>
  </body>
</html>

2. Add or modify form values

Add or modify the value attribute value of the form:

Function name	parameter	Belonging
val	value	jQuery core object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <input type="text" value="Form defaults" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('input').val('This is the modified form value')
      console.log($('input').val())
    </script>
  </body>
</html>

3. Get the contents of the label pair

Get the text content in the element and child elements:

Function name	parameter	Belonging	describe
text	nothing	jQuery core object	html tags are ignored, but line breaks, spaces, and so on are not ignored
html	nothing	jQuery core object	html tags, line breaks, spaces, and so on are not ignored

jQuery core object. text():

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // result:
      // aa 
      //       a
      //       bbb
      console.log($('div').text())
    </script>
  </body>
</html>

jQuery core object. html():

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // result:
      // aa 
      //       a
      //       <p>bbb</p>
      console.log($('div').html())
    </script>
  </body>
</html>

4. Replace the contents in the label pair

Replace all contents in the target element label pair:

Function name	parameter	Belonging	describe
text	replace content	jQuery core object	html tags will be ignored, but line breaks and spaces will not be ignored. If there are html tags, they will be translated and displayed on the screen
html	replace content	jQuery core object	html tags, line breaks, spaces, etc. will not be ignored. If there are html tags, they will be parsed normally

jQuery core object. Text (replacement content): the html tag will be escaped and displayed directly on the screen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').text('<span>take div Replace all contents under</span>')
      console.log($('div').get(0)) // Results: < div > & lt; span> Replace all contents under div & lt/ span></ div>
    </script>
  </body>
</html>

jQuery core object. html (replacement content): html tags will be parsed into DOM elements

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <div>aa 
      a
      <p>bbb</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $('div').html('<span>take div Replace all contents under</span>')
      console.log($('div').get(0)) // Results: < div > < span > replace all contents under div with < / span > < / div >
    </script>
  </body>
</html>

Tags: Javascript Front-end JQuery

Posted on Fri, 29 Oct 2021 04:52:32 -0400 by twcmad

Programmer Help