文章目录

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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。