jQuery 自学笔记

Posted 2022-01-31 Xiu Yan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 自学笔记相关的知识，希望对你有一定的参考价值。

文章目录

一、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: #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>

三、尺寸和位置操作

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()方法

获取元素内容的卷曲高度和宽度

scrollLeft()：表示元素内容被卷曲出去的宽度
scrollTop()：表示元素内容被卷曲出去的高度（类似坐标）
console.log($('div').scrollLeft() + ":" + $('div').scrollTop());
设置元素内容内卷曲出去的高度或者宽度

$('div').scrollLeft(100);
$('div').scrollTop(100);
获取页面被卷曲的高度和宽度
console.log($(window).scrollTop());//高度
console.log($(window).scrollLeft());//宽度
设置页面被卷曲的高度和宽度
$(window).scrollTop(1000);
$(window).scrollLeft(1000);