jquery $()的参数和选择器
16lz
2021-07-23
jquery $()的参数和选择器
作业标题：0719作业
作业内容：1、下载并引用jQuery 2、JavaScript 和 jQuery 对比。 3、列出 $() 的参数 4、列出选择器，并查看效果。
- 下载并引用jQuery
- JavaScript 和 jQuery 对比。
//jsdocument.querySelectorAll(".item").forEach((item) => (item.style.color = "green"));//jquery$(".item").css("color", "red");
列出 $() 的参数
选择器 包装器 html文本 回调列出选择器，并查看效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>$() 选择器</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><style>* {font-size: 20px;}.title {text-align: center;}.width {width: 1200px;}tr {height: 50px;}</style></head><body><h3 class="title h3" id="titleId">用户列表</h3><table class="width" id="tableId" border="1" align="center" cellspacing="0"><thead><tr><th>编号</th><th>姓名</th><th>邮箱</th><th>电话</th><th>省份</th><th>城市</th><th>年龄</th></tr></thead><tbody><tr><th>1</th><td>天蓬</td><td>tianpeng@php.cn</td><td>13854381111</td><td>安徽</td><td>合肥</td><td>40</td></tr><tr><th>2</th><td>欧阳克</td><td>ouyangke@php.cn</td><td>13854382222</td><td>安徽</td><td>马鞍山</td><td>40</td></tr><tr><th>3</th><td>灭绝师太</td><td>miejue@php.cn</td><td>13854383333</td><td>安徽</td><td>滁州</td><td>18</td></tr><tr><th>4</th><td>裘千丈</td><td>qiuqianzhang@php.cn</td><td>13854384444</td><td>安徽</td><td>蚌埠</td><td>40</td></tr><tr><th>5</th><td>钟老师</td><td>zhonglaoshi@php.cn</td><td>13854385555</td><td>安徽</td><td>淮南</td><td>30</td></tr><tr><th>6</th><td>小编1</td><td>xiaobian1@php.cn</td><td>13854386661</td><td>安徽</td><td>安庆</td><td>18</td></tr><tr><th>7</th><td>小编2</td><td>xiaobian2@php.cn</td><td>13854386662</td><td>安徽</td><td>亳州</td><td>18</td></tr><tr><th>8</th><td>小编3</td><td>xiaobian3@php.cn</td><td>13854386663</td><td>安徽</td><td>淮北</td><td>18</td></tr><tr><th>9</th><td>小编4</td><td>xiaobian4@php.cn</td><td>13854386664</td><td>安徽</td><td>阜阳</td><td>18</td></tr><tr><th>10</th><td>小编5</td><td>xiaobian5@php.cn</td><td>13854386665</td><td>安徽</td><td>六安</td><td>18</td></tr></tbody></table></body><script>//1.标签选择器console.log($("table"));$("table").css("color", "red");console.log(document.getElementsByTagName("h3"));// 2.id选择器 #代表id//jquery获取的id,是一个对象，里面有0下标console.log($("#titleId"));$("#titleId").css("background-color", "blue");//js获取的id,是html代码console.log(document.getElementById("titleId"));//3.class选择器$(".title").css("color", "green");console.log($(".title"));$(".title").css("color", "red");console.log(document.getElementsByClassName("title"));//4.dom树选择console.log($("table tbody tr th"));$("table tbody tr th").css("color", "#d4edda");$("#tableId td").css("background-color", "#f8d7da");$(".width thead th").css("background-color", "blue");//可以选择多个标签，多个ID、多个class,用,逗号隔开$("h3,th").css("background-color","#d1ecf1");$("h3,th").css("background-color", "#d1ecf1");$("#tableId,#titleId").css("background-color", "#d1ecf1");</script></html>