jQuery查找元素

 

通过ID查找元素

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>通过 id 查找 HTML 元素</h1>

<p id="id01">Hello World!</p>
<p id="id02">Hello China!</p>
<p id="id03">Hello Shanghai!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("#id03");
  $("#demo").text("段落 id03 的文本是：" + myElements[0].innerHTML);
});
</script>

</body>
</html>

 

通过标签名（类名，两者类似）查找元素

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>

<body>

<h1>通过标签名查找 HTML 元素</h1>

<p>Hello World!</p>
<p>Hello China!</p>
<p>Hello Shanghai!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("p");
  $("#demo").text("第三段中的文本是：" + myElements[2].innerHTML);
});
</script>

</body>
</html>

 

通过选择器选择元素

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<h1>通过 Query 选择器查找 HTML 元素</h1>

<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  var myElements = $("p.intro");
  $("#demo").text("类名为 intro 的第三段文本是：" + myElements[2].innerHTML);
});
</script>

</body>
</html>

 

posted @ 2022-02-09 16:40  kuaiquxie  阅读(160)  评论(0)  编辑  收藏  举报