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 nameparameterBelonging
attrAttribute namejQuery core object
propAttribute namejQuery 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 nameparameterBelonging
attrAttribute name, attribute valuejQuery core object
propAttribute name, attribute valuejQuery 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 nameparameterBelonging
removeAttrAttribute namejQuery 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 nameparameterBelongingdescribe
addClassclass namejQuery core objectWhen 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 nameparameterBelonging
removeClassclass namejQuery 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 nameparameterBelonging
toggleClassclass namejQuery 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 nameparameterBelonging
valnothingjQuery 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 nameparameterBelonging
valvaluejQuery 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 nameparameterBelongingdescribe
textnothingjQuery core objecthtml tags are ignored, but line breaks, spaces, and so on are not ignored
htmlnothingjQuery core objecthtml 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 nameparameterBelongingdescribe
textreplace contentjQuery core objecthtml 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
htmlreplace contentjQuery core objecthtml 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