jQuery基础--CSS操作、class操作、attr操作、prop操作

2019-09-29 15:11:12 浏览数 (1)

1.1.1 css操作

功能：设置或者修改样式，操作的是style属性。

  • 设置单个样式
代码语言：javascript复制
//name：需要设置的样式名称

//value：对应的样式值

css(name, value);

//使用案例

$("#one").css("background","gray");//将背景色修改为灰色
  • 设置多个样式
代码语言：javascript复制
//参数是一个对象，对象中包含了需要设置的样式名和样式值

css(obj);

//使用案例

$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});
  • 获取样式
代码语言：javascript复制
//name:需要获取的样式名称

css(name);

//案例

$("div").css("background-color");

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

  1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

1.1.1 class操作

  • 添加样式类
代码语言：javascript复制
//name：需要添加的样式类名，注意参数不要带点.

addClass(name);

//例子,给所有的div添加one的样式。

$(“div”).addClass(“one”);
  • 移除样式类
代码语言：javascript复制
//name:需要移除的样式类名

removeClass(“name”);

//例子，移除div中one的样式类名

$(“div”).removeClass(“one”);
  • 判断是否有样式类
代码语言：javascript复制
//name:用于判断的样式类名，返回值为true false

hasClass(name)

//例子，判断第一个div是否有one的样式类

$(“div”).hasClass(“one”);
  • 切换样式类
代码语言：javascript复制
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

toggleClass(name);

//例子

$(“div”).toggleClass(“one”);

【案例：tab栏切换案例】

代码语言：javascript复制
<!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>

　属性attr操作

设置属性

代码语言：javascript复制
//用法和css一样
    //设置单个属性
    //attr(name, value)
    //$("img").attr("alt", "图破了");
    //$("img").attr("title", "错错错错");
    
    //设置多个属性
    /*$("img").attr({
      alt:"图破了",
      title:"错错错",
      aa:"bb"
    })*/

　获取属性简单

prop操作

代码语言：javascript复制
//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
    $("input").eq(0).click(function () {
      $("#ck").prop("checked", true);
    });
  
    $("input").eq(1).click(function () {
      $("#ck").prop("checked", false);
    });
  });

　　案例

代码语言：javascript复制
<!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>
css attr class

0 人点赞