文章介绍了jQuery如何设置和获取HTML元素的内容，包括html()、text()、val()、attr()、prop()等方法的使用，以及对页面尺寸如width()、height()、innerWidth()、outerWidth()、scrollTop()、scrollLeft()等的处理。
jQuery对HTML的设置与捕获和对页面尺寸的操作
jQueryHTML的设置
<body>
<header class="header">我是头部标签
<div>我是盒子</div>
</header>
<button id="btn">btn</button>
<input type="text" id="input" class="inp" name="name" name_1="name_1">
<button id="button">button</button>
</body>
1、 html() - 设置或返回所选元素的内容（包括 HTML 标记） innerHTML
console.log($('.header').html());
$('#btn').on('click', function () {
$('.header').text('<h1>我是标题</h1>')
$('#input').prop('name_1', 'iii')
})
text() - 设置或返回所选元素的文本内容 innerText
console.log($('.header').text());
val() - 设置或返回表单字段的值 value
$('#input').keydown(function () {
console.log($(this).val());
// console.log(this.value);
})
attr() 、prop()方法用于获取和返回属性值。 getAttribute
console.log($('#input').attr('id'));
console.log($('#input').prop('id'));
console.log($('#input').attr('class'));
console.log($('#input').prop('class'));
console.log($('#input').attr('name'));
console.log($('#input').prop('name'));
console.log($('#input').attr('name_1'));
console.log($('#input').prop('name_1'));
console.log($('#button').attr('disabled'));
console.log($('#button').prop('disabled'));
attr(),prop()区别：
1、arrt()可以获取和设置自定义属性，prop()不可以
2、如 checked, selected 或者 disabled 使用 prop()，
jQuery对HTML的页面尺寸的操作
<style>
#box {
width: 200px;
height: 200px;
border: 20px solid red;
padding: 20px;
margin: 30px;
background-color: aquamarine;
}
</style>
body style="height: 2000px;">
<div id="box"></div>
<button id="btn">btn</button>
</body>
width height
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
console.log($('#box').width());
console.log($('#box').height());
$('#btn').on('click', function () {
$('#box').height(300)
$(window).scrollTop(200)
})
innerWidth() innerHeight() clientWidth
innerHeight() 方法返回元素的高度（包括内边距）。
console.log($('#box').innerWidth());
console.log($('#box').innerHeight());
outerWidth() outerHeight()
outerWidth() 方法返回元素的宽度（包括内边距和边框）。 offsetWidth
outerHeight() 方法返回元素的高度（包括内边距和边框）。
console.log($('#box').outerWidth());
console.log($('#box').outerHeight());
scrollTop() scrollLeft()
scrollTop() 方法设置或者返回滚动条被卷去的元素的高度
scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度
$(window).scroll(function () {
console.log('测试');
console.log($(window).scrollTop());
})
扫一扫
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
