Jquery operates on HTML5's data * usage instance sharing

  • 2020-03-30 03:42:25
  • OfStack

After reading the detailed specification of HTML5, you will find that the usage of this custom data attribute is very simple, that is, you can add any attribute beginning with "data-" to the HTML tag, these attributes are not displayed on the page, it will not affect your page layout and style, but it is readable and writable.

$(' #content ').data(' list'); This method, which has been around since query1.4.3, returns the corresponding data attribute.

< ! DOCTYPE HTML>
< Html>
< Head>
< Meta charset = "utf-8" >
< Title> Jquery operation HTML5 data-* usage < / title>
< / head>
< Script SRC = "(link: http://code.jquery.com/jquery-2.1.0.min.js" > < / script) >
< Script>
$(function () {
      // read the value of data-*
      $(" li "). Each (function (v) {
              The console. The log ($(this). The data (' name '));
      });
       
      // sets the value of data-*
      $(" li "). Eq (0). The data (' name ', 'Bryant');
      $(" li "). Each (function (v) {
              The console. The log ($(this). The data (' name '));
      });
       
      // delete the value of data-* & PI;   Here is the use of removeAttr, testing the official removeData is not working
      $(" li "). Eq. (0) removeAttr (' data - name ");
      $(" li "). Each (function (v) {
              The console. The log ($(this). The data (' name '));
      });
})
< / script>
< Body>
< Ul>
      < Li data - name = "kobe" > Bryant < / li>
      < Li data - name = "gasol >" Pau gasol < / li>
      < Li data - name = "Nash" > Nash < / li>
      < Li data - name = "fisher >" Fisher < / li>
< / ul>
< / body>
< / html>


Related articles: