jQuery 自学笔记（五）——— attr() 操作属性、prop() 操作布尔类型、尺寸和位置操作

朱雀 2023-10-11 16:55 11阅读 0赞

#### 文章目录 ####

*   *  一、attr() 操作属性
     *   *  1.1 设置属性
         *  1.2 获取属性
         *  1.3 移除属性
     *  二、 prop() 操作布尔类型的属性
     *   *  2.1 原生 js 操作 checked 属性
         *  2.2 jQuery 操作 checked 属性
         *  2.3 表格全选反选
     *  三、尺寸和位置操作
     *   *  3.1 width() 方法与 height() 方法
         *  3.2 offset() 方法 与 position() 方法
         *  3.3 scrollTop()方法 和 scrollLeft()方法

--------------------

### 一、attr() 操作属性 ###

#### 1.1 设置属性 ####

`语法：$(selector).attr(attribute,value) 其中：attribute 为规定要获取其值的属性。`

**1. 设置单属性**

$('img').attr('src', '../picture/02.jpg');//以前有这个属性，更改这个属性
    $('img').attr('aaa', '新设置属性a');       //修改自定义属性
    $('img').attr('bbb', '新设置属性b');       //如果元素没有这个属性，那就新建这个属性

**2. 设置多属性**

$('img').attr({
        
    	src:'../picture/02.jpg',
    	aaa:'新设置属性a',
    	bbb:'新设置属性b'
    })

--------------------

#### 1.2 获取属性 ####

`语法：$(selector).attr(attribute)`

示例：

$('#btn1').click(function () {
        
    	console.log($('img').attr('src'));//自带属性可以获取
    	console.log($('img').attr('aaa'));//自定义的属性也可以获取
    	console.log($('img').attr('bbb'));//如果没有这个属性，获取的值就是undefined; 
    									  //attr()设置的属性也是可以通过设置属性值之后来获取
    })

![在这里插入图片描述][6e04c70f0d374c0a80aaca9ae64baf8c.png]

--------------------

#### 1.3 移除属性 ####

`语法：$(selector).removeAttr(attribute)`

示例：

//移除单个属性
    $('img').removeAttr('alt');
    $('img').removeAttr('aaa');
    $('img').removeAttr('bbb');
    
    //移除多属性
    $('img').removeAttr('alt aaa bbb');

--------------------

### 二、 prop() 操作布尔类型的属性 ###

首先回忆一下，有一类属性比如：checked，写在元素的身上就表示选中，没有写在元素的身上就表示没有选中。

#### 2.1 原生 js 操作 checked 属性 ####

document.getElementById("btn1").onclick = function () {
        
    	//设置操作
    	document.getElementById("ckb1").checked = false;
    	//获取操作
    	console.log(document.getElementById("ckb1").checked);
    };

#### 2.2 jQuery 操作 checked 属性 ####

$('#btn1').click(function () {
        
    	console.log($('#ckb1').attr('checked')); //无论是选中还是没有选中，都返回一个undefined。
    });

原因是：在 jQuery1.6 之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用 attr 方法，只能用prop方法。

$('#btn1').click(function () {
        
    	console.log($('#ckb1').prop('checked'));
    	//如果多选框是选中状态返回一个true； 如果多选框是取消选中状态那返回就是一个false.
    });

--------------------

#### 2.3 表格全选反选 ####

代码如下：

<!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;
            }
            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;
            }
            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>
    <div id="one"></div>
    </body>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
      $(function () {
          
          //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
          //需求2:下面的多选框们,都有单击事件:
          //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.
    
          //需求1：
          $('#j_cbAll').click(function () {
          
              //获取这多选框的checked值
              var checkedValue = $(this).prop('checked');
              //让下边的多选框们的checked跟随这个checkedValue
              $('#j_tb input').prop('checked', checkedValue);
          });
          //需求2：
          $('#j_tb input').click(function () {
          
              //判断下面四个多选框是否都被选中
              var numOffAll = $('#j_tb input').length;//获取下面所有的多选框的个数
              var numOffSelect = $('#j_tb input:checked').length;//获取下面所有的多选框过滤出选中的个数
              /*console.log(numOffAll+" : "+numOffSelect);*/
              /*if (numOffAll == numOffSelect){
                  //全部被选中
                  $('#j_cbAll').prop('checked',true);
              }else{
                  //有的没选中
                  $('#j_cbAll').prop('checked',false);
              }*/
              $('#j_cbAll').prop('checked',numOffAll == numOffSelect);
          });
      });
    </script>
    </html>

![在这里插入图片描述][6f8e1a713a2e4135b08b2afb2c810b1b.gif]

--------------------

### 三、尺寸和位置操作 ###

#### 3.1 width() 方法与 height() 方法 ####

1.  获取 id 为 one 的这个div
    
        console.log($('#one').css('height'));//200px
        console.log($('#one').css('width'));//200px
2.  获取或者设置元素的宽高的，这个宽高不包括 padding/border/margin
    
        //设置
        $('#one').width(300);
        $('#one').height(300);
        //获取
        console.log($('#one').width());//300
        console.log($('#one').height());//300
3.  `innerWidth()/innerHeight()`  
    方法返回元素的宽/高，包括内边距
    
        console.log($('#one').innerWidth());
        console.log($('#one').innerHeight());
4.  `outerWidth()/outerHeight()`  
    方法返回元素的宽/高 包括内边距和边框
    
        console.log($('#one').outerWidth());
        console.log($('#one').outerHeight());
5.  `outerWidth(true)/outerHeight(true)`  
    方法返回元素的宽/高 包括内边距、边框和外边距
    
        console.log($('#one').outerWidth(true));
        console.log($('#one').outerHeight(true));
6.  获取页面可视区的宽高
    
        console.log($(window).width());
        console.log($(window).height());

--------------------

#### 3.2 offset() 方法 与 position() 方法 ####

1.  offset()  
    方法会得到一个对象，对象会包含了 top 和 left 的值。  
    offset()方法获取元素距离document的位置（距离页面的位置）  
    `console.log($('#son').offset());`
2.  position()  
    获取会得到一个对象，对象里面包含了 top 和 left 的值  
    position()方法获取的距离是元素有定位的父元素的位置  
    `console.log($('#son').position());`  
    ![在这里插入图片描述][2aa3c37ba3e448bfb355c8c555d2334e.png]

--------------------

#### 3.3 scrollTop()方法 和 scrollLeft()方法 ####

1.  **获取元素内容的卷曲高度和宽度**
    
    scrollLeft()：表示元素内容被卷曲出去的宽度  
    scrollTop()：表示元素内容被卷曲出去的高度（类似坐标）  
    `console.log($('div').scrollLeft() + ":" + $('div').scrollTop());`  
    ![在这里插入图片描述][9ecfdafe651841f3b7d191f036b7a690.png]   ![在这里插入图片描述][05a97ee7bb5b41a0b6c194f3295782a4.png]
2.  **设置元素内容内卷曲出去的高度或者宽度**
    
    `$('div').scrollLeft(100);`  
    `$('div').scrollTop(100);`  
    ![在这里插入图片描述][d0588be9b2ae4813bfbbc0e5f7701c78.gif]
3.  **获取页面被卷曲的高度和宽度**  
    `console.log($(window).scrollTop());//高度`  
    `console.log($(window).scrollLeft());//宽度`  
    ![在这里插入图片描述][cc7e57a0f88e4252a6a8f178bee9bfa5.png]  
    ![在这里插入图片描述][c06ea6ac161f4e4eb21d57076e92a121.png]
4.  设置页面被卷曲的高度和宽度  
    `$(window).scrollTop(1000);`  
    `$(window).scrollLeft(1000);`  
    ![在这里插入图片描述][f6830a1b70b9481fb898c585a85bd500.gif]

[6e04c70f0d374c0a80aaca9ae64baf8c.png]: https://img-blog.csdnimg.cn/6e04c70f0d374c0a80aaca9ae64baf8c.png
[6f8e1a713a2e4135b08b2afb2c810b1b.gif]: https://img-blog.csdnimg.cn/6f8e1a713a2e4135b08b2afb2c810b1b.gif
[2aa3c37ba3e448bfb355c8c555d2334e.png]: https://img-blog.csdnimg.cn/2aa3c37ba3e448bfb355c8c555d2334e.png
[9ecfdafe651841f3b7d191f036b7a690.png]: https://img-blog.csdnimg.cn/9ecfdafe651841f3b7d191f036b7a690.png
[05a97ee7bb5b41a0b6c194f3295782a4.png]: https://img-blog.csdnimg.cn/05a97ee7bb5b41a0b6c194f3295782a4.png
[d0588be9b2ae4813bfbbc0e5f7701c78.gif]: https://img-blog.csdnimg.cn/d0588be9b2ae4813bfbbc0e5f7701c78.gif
[cc7e57a0f88e4252a6a8f178bee9bfa5.png]: https://img-blog.csdnimg.cn/cc7e57a0f88e4252a6a8f178bee9bfa5.png
[c06ea6ac161f4e4eb21d57076e92a121.png]: https://img-blog.csdnimg.cn/c06ea6ac161f4e4eb21d57076e92a121.png
[f6830a1b70b9481fb898c585a85bd500.gif]: https://img-blog.csdnimg.cn/f6830a1b70b9481fb898c585a85bd500.gif