How to get the value of span in jquery-JS Tutorial-php.cn

How to get the value of span in jquery

藏色散人

Release： 2020-11-17 10:22:51

Original

7440 people have browsed it

Jquery method to get span value: first create a front-end code example; then set span; finally pass "$(document).ready(function(){$("button").click(function() {..}}" method to get the value of span.

How to get the value of span in jquery

Recommended: "javascript basic tutorial"

Let’s take a look at an example first. The sample code is as follows:

<html>
  <head>
    <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>
    <SCRIPT language=JavaScript>
       var test1=$("#spId").val();
       var test2=$("#spId").html();
       var test3=$("#spId").text();
     alert("val的值："  + test1);
     alert("html的值：" + test2);
     alert("text的值：" + test3);
    </script>
  </head>
  <body>
     <span id="spId">aaaa</span>
  </body>
</html>

Copy after login

The result of alert is as follows

[Value of val: undefined]

[Value of html: null]

【text value:】

None of the above three methods got the desired value. The reason why they didn’t get it was becausehtml is parsed from the top down. When parsing to $("#spId") in js, the span below does not exist yet. , of course you can’t get it.
If you change it to the following

<html>
  <head>
    <SCRIPT language=JavaScript src="js/jquery.min.js"></SCRIPT>    
  </head>
  <body>
     <span id="spId">aaaa</span>
     <SCRIPT language=JavaScript>
       var test1=$("#spId").val();
       var test2=$("#spId").html();
       var test3=$("#spId").text();
       alert("val的值："  + test1);
       alert("html的值：" + test2);
       alert("text的值：" + test3);
     </script>
  </body>
</html>

Copy after login

js is parsed after the span, the span will be there. In addition, the jquery method is to use The ready function contains these codes, it doesn’t matter where they are placed. Its function is to execute the included js only after the entire page is loaded, such as:

<script type="text/javascript">
   $(document).ready(function(){
       var test1=$("#spId").val();
       var test2=$("#spId").html();
       var test3=$("#spId").text();
       alert("val的值："  + test1);
       alert("html的值：" + test2);
       alert("text的值：" + test3);

Copy after login

   });
</script>

Copy after login

1,
Therefore, the setting and acquisition of span are as follows:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       $("#spId").text("testSpan");
       alert("text的值：" + $("#spId").text())
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">aaaa</a></span></p>
<button>切换</button>
</body>
</html>

Copy after login

If want to get the html code, just replace the text with html,

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       alert("text的值：" + $("#spId").text())
       alert("html的值：" + $("#spId").html())
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">aaaa</a></span></p>

<button>切换</button>
</body>
</html>

Copy after login

##Set html and get html, as follows

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       alert("text的值：" + $("#spId").text() + "\n" +
             "html的值：" + $("#spId").html() )

       $("#spId").text("testSpan")

       alert("text的值：" + $("#spId").text() + "\n"+
             "html的值：" + $("#spId").html() )

       $("#spId").html("<p>testSpantest</p>")

       alert("text的值：" + $("#spId").text() + "\n"+
             "html的值：" + $("#spId").html() )
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">初期值</a></span></p>

<button>切换</button>
</body>
</html>

Copy after login

Result:

三、注意点：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
       <span style="background-color: rgb(255, 204, 204);">$("#spId").text("testSpan");</span>
       alert("text的值：" + $("#spId").text())
       <span style="background-color: rgb(255, 204, 153);">alert("html的值：" + $("#spId").html())</span>
  });
});
</script>
</head>
<body>
<p><span id="spId"><a href="#">aaaa</a></span></p>

<button>切换</button>
</body>
</html>

Copy after login

结果

此时，获取的html()为【testSpan】，而不是【testSpan】

The above is the detailed content of How to get the value of span in jquery. For more information, please follow other related articles on the PHP Chinese website!