jq的基本选择器

最新推荐文章于 2022-08-01 09:46:46 发布

原创最新推荐文章于 2022-08-01 09:46:46 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

jq教学专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，展示了如何使用jQuery库为不同元素设置样式。通过ID选择器、类选择器以及组合选择器，可以轻松地改变网页元素的颜色和背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要引入jquery-1.12.4.js然后复制粘贴这段代码去html运行一下，可以把注释部分放出来，运行查看效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li id="four">4</li>
  <li>5</li>
  <li class="green yellow">6</li>
  <li class="green">7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>

<script src="jquery-1.12.4.js"></script>
<script>
  //入口函数
  $(function () {
    
    //jquery如何设置样式
    //css(name, value)
    //name:样式名  value：样式值
    
    //id选择器  $("#id")
    //$("#four").css("backgroundColor", "red");
  
  
    //$(".green").css("backgroundColor", "green");
  
  
    //$("li").css("color", "red");
  
  
    //交集 并集
    //$("#four,.green").css("backgroundColor", "pink");
    
    //$("li.green").css("backgroundColor", "red");
    $(".green.yellow").css("backgroundColor", "pink");
    
  });
  
  
</script>

</body>
</html>