文章目录
一个测试的网站:https://www.w3school.com.cn/tiy/t.asp?f=js_jquery_queryselectorall
一、单层锁定
1. 三种锁定标签的基本方式
返回的都是jQuery对象(类似数组,里面存储着DOM元素):
- 标签名:
$("标签名");
。返回匹配到的所有元素。 - id名:
$("#id名");
。返回的只有一个,且是匹配到的第一个元素。 - 类名:
$(".类名");
。返回匹配到的所有元素。
所以使用的时候,要带下标选取列表中的元素。比如$('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>
- 类名:
$("#demo1").text("【here】" + $(".intro")[2].innerHTML);
- id名:
$("#demo1").text("【here】" + $("#only")[0].innerHTML);
2. 两种锁定标签的进阶用法
标签名 加上 类名或者id :返回的也都是列表
- 标签名 加上 类名:
$("标签名.类名");
。返回符合这两项要求的所有元素。 - 标签名 加上 id名:
$("标签名#id名");
。不同于$("#id名");
只有一个且第一个,而是返回匹配到的所有元素。
例子:
- 标签名 加上 类名
$("#demo1").text("【here】" + $("p#intro")[2].innerHTML);
- 标签名 加上 id名
$("#demo1").text("【here】" + $("p#demo")[1].innerHTML);
3. id的特殊性
(1)单个:$("#id名");
返回的列表只有一个元素,这个元素是匹配到的第一个元素。
$("#demo1").text("【here】" + $("#demo")[0].innerHTML);
$("#demo1").text("【here】" + $("#demo")[1].innerHTML);
获取不到Hello China!
(2)多个$("标签名#id名");
返回匹配到的所有元素。
$("#demo1").text("【here】" + $("p#demo")[0].innerHTML);
$("#demo1").text("【here】" + $("p#demo")[1].innerHTML);
4.和Chrome的区分
这是jQuery中的$
:如果只匹配到一个标签的话,那么就直接是它;多个的话,得到的是列表,需要xxx[i]
来获取其内元素。
而不是Chrome控制台中的$
命令:返回第一个匹配到的标签。
二、多层锁定
$("父层 子层 子子层 ...");
:都是返回列表,且同$("标签名#id名");
一样是返回匹配到的所有元素。
例子:
$("#demo1").text("【here】" + $("body p")[2].innerHTML);
$("#demo1").text("【here】" + $("html body p")[2].innerHTML);