文章目录

  • 一、单层锁定
  • 1. 三种锁定标签的基本方式
  • 2. 两种锁定标签的进阶用法
  • 3. id的特殊性
  • （1）单个：`$("#id名");`
  • （2）多个`$("标签名#id名");`
  • 4.和Chrome的区分
  • 二、多层锁定


一个测试的网站：https://www.w3school.com.cn/tiy/t.asp?f=js_jquery_queryselectorall

一、单层锁定

1. 三种锁定标签的基本方式

返回的都是jQuery对象（类似数组，里面存储着DOM元素）：

  1. 标签名：$("标签名");。返回匹配到的所有元素。
  2. id名：$("#id名");。返回的只有一个，且是匹配到的第一个元素。
  3. 类名：$(".类名");。返回匹配到的所有元素。

所以使用的时候，要带下标选取列表中的元素。比如$('div')返回包含两个元素的列表，则获取第二个元素是$('div')[1]。

例子：

  • 标签名：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.min.js"></script>
</head>
<body>

<p class="intro" id='demo'>Hello World!</p>
<p class="intro" id='demo'>Hello China!</p>
<p class="intro" id='only'>Hello Shanghai!</p>

<p id="demo1"></p>

<script>
$(document).ready(function() {
  $("#demo1").text("【here】" + $("p")[2].innerHTML);
});
</script>

</body>
</html>

jquery定位html内容 jquery定位标签_html

  • 类名：
$("#demo1").text("【here】" + $(".intro")[2].innerHTML);

jquery定位html内容 jquery定位标签_类名_02

  • id名：
$("#demo1").text("【here】" + $("#only")[0].innerHTML);

jquery定位html内容 jquery定位标签_类名_02

2. 两种锁定标签的进阶用法

标签名 加上 类名或者id ：返回的也都是列表

  • 标签名 加上 类名：$("标签名.类名");。返回符合这两项要求的所有元素。
  • 标签名 加上 id名：$("标签名#id名");。不同于$("#id名");只有一个且第一个，而是返回匹配到的所有元素。

例子：

  • 标签名 加上 类名
$("#demo1").text("【here】" + $("p#intro")[2].innerHTML);

jquery定位html内容 jquery定位标签_类名_02

  • 标签名 加上 id名
$("#demo1").text("【here】" + $("p#demo")[1].innerHTML);

jquery定位html内容 jquery定位标签_html_05

3. id的特殊性

（1）单个：$("#id名");

返回的列表只有一个元素，这个元素是匹配到的第一个元素。

$("#demo1").text("【here】" + $("#demo")[0].innerHTML);

jquery定位html内容 jquery定位标签_类名_06

$("#demo1").text("【here】" + $("#demo")[1].innerHTML);

获取不到Hello China!

（2）多个$("标签名#id名");

返回匹配到的所有元素。

$("#demo1").text("【here】" + $("p#demo")[0].innerHTML);
$("#demo1").text("【here】" + $("p#demo")[1].innerHTML);

jquery定位html内容 jquery定位标签_html_07

4.和Chrome的区分

这是jQuery中的$：如果只匹配到一个标签的话，那么就直接是它；多个的话，得到的是列表，需要xxx[i]来获取其内元素。
而不是Chrome控制台中的$命令：返回第一个匹配到的标签。

jquery定位html内容 jquery定位标签_类名_08

二、多层锁定

$("父层 子层 子子层 ...");：都是返回列表，且同$("标签名#id名");一样是返回匹配到的所有元素。

例子：

$("#demo1").text("【here】" + $("body p")[2].innerHTML);

jquery定位html内容 jquery定位标签_类名_02

$("#demo1").text("【here】" + $("html body p")[2].innerHTML);

jquery定位html内容 jquery定位标签_类名_02