JQuery的选择器以及属性操作

最新推荐文章于 2022-08-30 20:37:37 发布

灯光下的投影

最新推荐文章于 2022-08-30 20:37:37 发布

阅读量280

点赞数

分类专栏： JQuery 文章标签： JQuery的选择器属性操作样式修改 class方法的使用

本文链接：https://blog.csdn.net/liuyuhua666/article/details/89787481

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery选择器：

<body>
  <div id="box">1111</div>
  <div>222</div>
  <div class="demo">
    <p>111</p>
    <p>222</p>
  </div>
  <p>333</p>
  <script src="jquery-1.12.4.js"></script>
  <script>
    // jquery提供了非常非常多的选择器， 目的：让我们非常方便的能够获取到页面中的元素
    // 1. jquery中完全兼容css的所有选择器
    // 2. jquery在css的选择器的基础上海增加了很多jquery自己的选择器
    $(function() {

      // jquery的方法
      // css(name, value) : 设置元素的样式
      // name: 样式名  value: 样式值
      // id选择器
      // $('#box').css('backgroundColor', 'red');
      // $('div').css('backgroundColor', 'red');
      $('p').css('backgroundColor', 'green');

      $('.demo p').css('color', 'red');

      $('.demo p:first-child').css('fontSize', '50px');
    });
  </script>
</body>

jQuery过滤选择器：

<body>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
    <li>这是第10个li</li>
  </ul>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function() {
      // 所有li中 下标为奇数的那些li
      // :odd 所有下标为奇数
      // :even: 所有下标为偶数
      $('li:odd').css('backgroundColor', 'pink');
      $('li:even').css('backgroundColor', 'green');

      $('li:first').css('color', 'red');
      $('li:last').css('color', 'yellow');

      $('li:eq(2)').css('fontSize', '50px');



      /* 
        :odd: 下标为奇数
        :even: 下标为偶数
        :first: 下标为0 第一个
        :last:  最后一个
        :eq(index) 指定下标的
      */
    });
  </script>
</body>

jQuery操作样式：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script src="jquery-1.12.4.js"></script>
  <script>
    // style：行内样式
    // class:  类样式


    // css() 方法：用来操作行内样式的
    // 设置单个样式  css(name, value)
    // 参数： name: 样式名  value: 样式值
    $('li').css('backgroundColor', 'pink');
    $('li').css('fontSize', 50);
    $('li').css('color', 'red');

    // css(obj) 可以设置多个样式
    // $('li').css({
    //   backgroundColor: 'pink',
    //   fontSize: 50,
    //   color: 'red'
    // });
  
    // 获取样式 css()
    // css(name)  需要获取的样式的名字
    console.log($('li').css('fontSize'));



    /* 
      css: 可以给jquery对象中所有的元素设置样式
        设置单个样式 css(name, value)
        设置多个样式： css(obj)
        获取样式： css(name)
    */
  </script>
</body>

jQuery操作class的方法：

<body>
  <ul>
    <li class="aa bb">1</li>
    <li class="aa bb">2</li>
    <li class="aa bb">3</li>
    <li class="aa bb">4</li>
    <li class="aa bb">5</li>
    <li class="aa bb">6</li>
  </ul>
  <script src="jquery-1.12.4.js"></script>
  <script>
    // addClass(name): 添加类名
    // removeClass(name): 移除类名
    // toggleClass(name): 切换类名
    // hasClass(name): 是否有某个类名

    $('li').addClass('base dd ee');
    // $('li').addClass('red');

    $('li').removeClass('bb');

    $('li').toggleClass('cc');
    $('li').toggleClass('cc');

    console.log( $('li').hasClass('red')  );
  </script>
</body>

jQuery操作属性：

<body>
  <img src="02.jpg" title="哈哈" alt="图破了">
  <img src="02.jpg" title="哈哈" alt="图破了">
  <img src="02.jpg" title="哈哈" alt="图破了">

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){

      // jquery中操作属性： attr 用法和css的用法是一样
      // attr操作标签的属性的   css用来操作样式的
      // attr(name, value)
      // 作用：设置单个属性 
      // name:属性名  value:属性值
      // $('img').attr('title', '呜呜');
      // $('img').attr('alt', '无法显示');

      // attr(obj)
      // 设置多个属性
      // $('img').attr({
      //   src: '01.jpg',
      //   title: '呜呜'
      // });

      // removeAttr() : 删除一个属性
      // console.log( $('img').attr('title') );
      // console.log( $('img').attr('alt') );

      $('img').removeAttr('title');
    });
  </script>
</body>

布尔类型属性的处理（prop()）：

<body>
  <button>选中</button>
  <button>不选中</button>
  <input type="checkbox">

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      // 自从1.6版本开始，布尔类型的属性checked disabled selected不再使用attr操作，使用prop来操作。  prop方法和attr方法的用法一模一样。
      $('button:first').click(function() {
        $('input').prop('checked', true);
        console.log($('input').prop('checked'));
      });

      $('button:last').click(function() {
        $('input').prop('checked', false);
        console.log($('input').prop('checked'));
      });
    });
  </script>
</body>

案例：

表格全选：

<!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="all"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="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() {
    // 使用变量把$('all')给存起来
    var $all = $('#all');
    var $input = $('#tb input');

    // 1. 点击上面的，控制下面的
    // 1.1 给全选注册点击事件
    // 1.2 让下面所有的input框的选中状态和全选一样
    $all.click(function() {
      // attr prop
      var isChecked = $(this).prop('checked');
      $input.prop('checked', isChecked);
    });

    // 2. 点击下面的，控制上面
    // 2.1 给下面的所有的input注册点击事件
    // 2.2 获取到下面input的总个数
    // 2.3 获取下面选中的input的个数
    // 2.4 判断两个个数是否想相等，如果相等表示全选中 否则没有全选中
    $input.click(function() {
      var allLength = $input.length;
      var checkedLength = $('#tb input:checked').length;
      // console.log(allLength, checkedLength);
      // if (allLength === checkedLength) {
      //   $('#all').prop('checked', true);
      // } else {
      //   $('#all').prop('checked', false);
      // }
      // allLength === checkedLength ? $('#all').prop('checked', true) : $('#all').prop('checked', false)
      $all.prop('checked', allLength === checkedLength);
    })

  });
</script>

</body>
</html>