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

大家好，欢迎来到IT知识分享网。

文章目录

一、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()设置的属性也是可以通过设置属性值之后来获取 })

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: #; 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>

三、尺寸和位置操作

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

获取 id 为 one 的这个div

console.log($('#one').css('height'));//200px console.log($('#one').css('width'));//200px

获取或者设置元素的宽高的，这个宽高不包括 padding/border/margin

//设置 $('#one').width(300); $('#one').height(300); //获取 console.log($('#one').width());//300 console.log($('#one').height());//300

innerWidth()/innerHeight()
方法返回元素的宽/高，包括内边距

console.log($('#one').innerWidth()); console.log($('#one').innerHeight());

outerWidth()/outerHeight()
方法返回元素的宽/高包括内边距和边框
```
console.log($('#one').outerWidth()); console.log($('#one').outerHeight()); 
```
outerWidth(true)/outerHeight(true)
方法返回元素的宽/高包括内边距、边框和外边距
```
console.log($('#one').outerWidth(true)); console.log($('#one').outerHeight(true)); 
```

获取页面可视区的宽高

console.log($(window).width()); console.log($(window).height());

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

offset()
方法会得到一个对象，对象会包含了 top 和 left 的值。
offset()方法获取元素距离document的位置（距离页面的位置）
console.log($('#son').offset());
position()
获取会得到一个对象，对象里面包含了 top 和 left 的值
position()方法获取的距离是元素有定位的父元素的位置
console.log($('#son').position());

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

获取元素内容的卷曲高度和宽度
设置元素内容内卷曲出去的高度或者宽度
$('div').scrollLeft(100);
$('div').scrollTop(100);
获取页面被卷曲的高度和宽度
console.log($(window).scrollTop());//高度
console.log($(window).scrollLeft());//宽度
设置页面被卷曲的高度和宽度
$(window).scrollTop(1000);
$(window).scrollLeft(1000);

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/134741.html