jQuery——jQuery的CSS，class，属性操作及案例应用

唐伯虎

　　
　　文章目录

CSS操作
class操作
- css与class操作综合案例：tab栏
属性操作
- prop方法
- - prop表格全选案例
案例：美女画廊

　　CSS操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul>
  <li>张欣欣</li>
  <li>周二珂</li>
  <li>冯招招</li>
  <li>郑啦啦</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
  
  $(function () {
  
  
  //css(name, value)
  //修改单个样式
  //name:样式名 value:样式值
  
  $("li")
    .css("backgroundColor", "pink")
    .css("color", "red")
    .css("fontSize", "32px");
  
  
  //css(obj)
  //修改多个样式
  
  $("li").css({
    backgroundColor:"pink",
    color: "red",
    fontSize:"32px",
    border: "1px solid black"
  });
  
  //获取样式
  //css(name)
  //name:想要获取的样式
  $("li").eq(0).css("fontSize", "20px");
  $("li").eq(1).css("fontSize", "21px");
  $("li").eq(2).css("fontSize", "22px");
  $("li").eq(3).css("fontSize", "23px");
  
  //A:20  b:21  c:22   d:23  e:16  f:[20, 21, 22, 23]
  
  
  //隐式迭代：
    // 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
    // 获取的时候：只会返回第一个元素对应的值。 
  console.log($("li").css("fontSize"));//显示20px
  
  
  });
  
</script>
</body>
</html>

class操作　　添加，移除类

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  li.basic {
    background-color: pink;
    font-size: 32px;
    color: red;
  }
  
  .bigger {
    font-size: 40px;
  }
  </style>
</head>
<body>
<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
  <li class="aa bb cc dd">1</li>
  <li class="aa bb cc dd">2</li>
  <li class="aa bb cc dd">3</li>
  <li class="aa bb cc dd">4</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
  
  $("input").eq(0).click(function () {
    
    // 添加一个类
    $("li").addClass("basic");
  });
  
  $("input").eq(1).click(function () {
    $("li").addClass("bigger");
  });
  
  
  $("input").eq(2).click(function () {
    
    //移除一个类
    $("li").removeClass("bigger");
  });
  
  //判断类
  $("input").eq(3).click(function () {
  
    //移除一个类
    console.log($("li").hasClass("bigger"));;
  });
  
  
  $("input").eq(4).click(function () {
  
    //判断li有没有basic类，如果有，就移除他，如果没有，添加他
    //toggle
    $("li").toggleClass("basic");
  });
  });
</script>
</body>
</html>

css与class操作综合案例：tab栏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  
  ul {
    list-style: none;
  }
  
  .wrapper {
    width: 1000px;
    height: 475px;
    margin: 0 auto;
    margin-top: 100px;
  }
  
  .tab {
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 36px;
    width: 320px;
  }
  
  .tab li {
    position: relative;
    float: left;
    width: 80px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    border-top: 4px solid #fff;
  }
  
  .tab span {
    position: absolute;
    right: 0;
    top: 10px;
    background: #ddd;
    width: 1px;
    height: 14px;
    overflow: hidden;
  }
  
  .products {
    width: 1002px;
    border: 1px solid #ddd;
    height: 476px;
  }
  
  .products .main {
    float: left;
    display: none;
  }
  
  .products .main.selected {
    display: block;
  }
  
  .tab li.active {
    border-color: red;
    border-bottom: 0;
  }
  
  </style>
  <script src="../jquery-1.12.4.js"></script>
  <script>
  $(function () {
    
    $(".tab-item").mouseenter(function () {
    //两件事件
    $(this).addClass("active").siblings().removeClass("active");
    // 当前索引
    var idx = $(this).index();  
    $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
    });
    
  });
  </script>
</head>
<body>
<div class="wrapper">
  <ul class="tab">
  <li class="tab-item active">国际大牌<span>◆</span></li>
  <li class="tab-item">国妆名牌<span>◆</span></li>
  <li class="tab-item">清洁用品<span>◆</span></li>
  <li class="tab-item">男士精品</li>
  </ul>
  <div class="products">
  <div class="main selected">
    <a href="###"><img src="imgs/guojidapai.jpg" alt=""/>第一张图片</a>
  </div>
  <div class="main">
    <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/>第二张图片</a>
  </div>
  <div class="main">
    <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/>第三张图片</a>
  </div>
  <div class="main">
    <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/>第四张图片</a>
  </div>
  </div>
</div>
</body>
</html>

属性操作　　知识点用法都在注释里

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--样式：在style里面写的，用css来操作。-->
<!--属性：在里面里面写的，用attr方法操作。-->
<img src="04.gif" alt="突破了" title="对对对">
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
  
  
  //用法和css一样
  //设置单个属性
  attr(name, value)
  $("img").attr("alt", "图破了");
  $("img").attr("title", "错错错错");
  
  //设置多个属性
  $("img").attr({
    alt:"图破了",
    title:"错错错",
    aa:"bb"
  })
  
  
  console.log($("img").attr("alt"));
  
  });
</script>
</body>
</html>

prop方法
　　对于布尔类型的属性，不要attr方法，应该用prop方法
　　prop用法跟attr方法一样。

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

<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">
<script src="jquery-1.12.4.js"></script>
<script>
  
  //对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
  $("input").eq(0).click(function () {
    $("#ck").prop("checked", true);
  });
  
  $("input").eq(1).click(function () {
    $("#ck").prop("checked", false);
  });
  });
</script>

</body>
</html>

prop表格全选案例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  * {
    padding: 0;
    margin: 0;
  }
  
  .wrap {
    width: 300px;
    margin: 100px auto 0;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #c0c0c0;
    width: 300px;
  }
  
  th,
  td {
    border: 1px solid #d0d0d0;
    color: #404060;
    padding: 10px;
  }
  
  th {
    background-color: #09c;
    font: bold 16px "微软雅黑";
    color: #fff;
  }
  
  td {
    font: 14px "微软雅黑";
  }
  
  tbody tr {
    background-color: #f0f0f0;
    text-align: center;
  }
  
  tbody tr:hover {
    cursor: pointer;
    background-color: #fafafa;
  }
  </style>
</head>
<body>
<div class="wrap">
  <table>
  <thead>
  <tr>
    <th>
    <input type="checkbox" id="j_cbAll"/>
    </th>
    <th>菜名</th>
    <th>饭店</th>
  </tr>
  </thead>
  <tbody id="j_tb">
  <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>红烧肉</td>
    <td>杨菜鸡</td>
  </tr>
  <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>西红柿鸡蛋</td>
    <td>杨菜鸡</td>
  </tr>
  <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>红烧狮子头</td>
    <td>杨菜鸡</td>
  </tr>
  <tr>
    <td>
    <input type="checkbox"/>
    </td>
    <td>美式肥牛</td>
    <td>杨菜鸡</td>
  </tr>
  
  </tbody>
  </table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
  
  $("#j_cbAll").click(function () {
    //修改下面的哪些checkbox
    $("#j_tb input").prop("checked", $(this).prop("checked"));
  });
  
  $("#j_tb input").click(function () {
  
    if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
    $("#j_cbAll").prop("checked", true)
    }else {
    $("#j_cbAll").prop("checked", false)
    }
  
  });
  
  });
</script>
</body>
</html>

案例：美女画廊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>美女画廊</title>
  <style type="text/css">
    * {
    padding: 0;
    margin: 0;
  }
  body {
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
  }
  
  h1 {
    color: #333;
    background-color: transparent;
  }
  
  a {
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
  }
  
  ul {
    padding: 0;
  }
  
  li {
    float: left;
    padding: 1em;
    list-style: none;
  }
  
  #imagegallery {
    
    list-style: none;
  }
  
  #imagegallery li {
    margin: 0px 20px 20px 0px;
    padding: 0px;
    display: inline;
  }
  
  #imagegallery li a img {
    border: 0;
  }
  </style>
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      //1. 给所有的a注册点击事件
      $("#imagegallery a").click(function () {
      var href = $(this).attr("href");
      $("#image").attr("src", href);
      
      var title = $(this).attr("title");
      $("#des").text(title);
      
      return false;
      });
    });
  </script>
</head>
<body>
  <h2>
  美女画廊
</h2>
<ul id="imagegallery">
  <li><a href="images/1.jpg" title="美女A">
  <img src="images/1-small.jpg" width="100" alt="美女1"/>
  </a></li>
  <li><a href="images/2.jpg" title="美女B">
  <img src="images/2-small.jpg" width="100" alt="美女2"/>
  </a></li>
  <li><a href="images/3.jpg" title="美女C">
  <img src="images/3-small.jpg" width="100" alt="美女3"/>
  </a></li>
  <li><a href="images/4.jpg" title="美女D">
  <img src="images/4-small.jpg" width="100" alt="美女4"/>
  </a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<p id="des">选择一个图片</p>
</body>
</html>

[jQuery] jQuery——jQuery的CSS，class，属性操作及案例应用

相关帖子

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

利用CSS换变文本选中后的颜色

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

好看的CSS剪裁GIF背景图片动画特效

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

唐伯虎 LV4