.attr() handles HTML attributes and .prop() live DOM properties: after a user ticks a box, only .prop('checked') reports it. .addClass(), .removeClass(), .toggleClass() and .hasClass() edit classes; .css() reads computed styles and writes inline ones. .width() measures the content box, .innerWidth() adds padding, .outerWidth() the border and .outerWidth(true) the margin (heights match). .offset() gives {top, left} in the document, .position() in the offset parent.
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<div style="position:relative; height:50px"><input type="checkbox">
<div id="d" style="position:absolute; top:0; left:40px; width:300px; height:10px;
padding:10px; border:5px solid orange; margin:5px"></div></div>
<pre id="log" style="margin:0"></pre>
<script>
const $c = $('input').prop('checked', true), $d = $('#d').css({ background: '#e3f2fd' });
$('#log').text([`attr: ${$c.attr('checked')}, prop: ${$c.prop('checked')}`,
`width ${$d.width()}, inner ${$d.innerWidth()}, outer ${$d.outerWidth()}`,
`outer(true) ${$d.outerWidth(true)}, position ${JSON.stringify($d.position())}`].join('\n'));
</script>
Each getter forces layout: read all measurements before writing styles (Reflow, Repaint and Batching).