jquery的操作属性和尺寸位置操作

小小程序员.¥

于 2022-11-11 18:25:44 发布

阅读量156

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_59745705/article/details/127780733

版权

Jquery操作属性

$(function(){

//jquery中操作属性：attr() removeattr():

//设置属性

$('#btn2').click(function(){

//设置单属性

$('img').attr('src','992.gif');//以前有src属性，更改这个属性

$('img').attr('aaa','hhh');//修改自定义的属性

$('img').attr('src','bbb');//如果元素原来没有这个属性，那就是添加属性

//设置多属性

$('img').attr({

src:'992.gif',

aaa:'hahaha'

bbb:'bbb'

});

//获取属性

$('btn1').click(function(){

console.log($('img'))

})；

案例（变更图片）

Prop 操作布尔类型的属性

//prop（'属性名'，'属性值'）

//设置属性 $(':checked').prop('checked',true);

//获取属性$(':checked').prop('checked');//返回true或者false

$(function(){

//Checks属性，写在元素身上就表示选中，没有写在元素身上就表示没有选中。

//这一类属性，用原生ja是如何操作的呢，给他设置true或false，取消也是得到true或false

//document.getelementbyid('btn01').οnclick=function(){

document.getelementbyid(''ckb1'').checked = false; //设置操作

Console.log(document.getelementbyid('ckb1').checked);

};

//jquery

$('#btn01').click(function(){

Console.log($('#ckb1').attr('checked'));//无论是选中还是没选中，都返回一个undefind。

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

$('#btn1').click(function(){

console.log($('#ckb1').prop('checked'));

//如果多选框说选中状态放回一个true；如果多选框是取消选中状态那返回就是一个false。

});

宽高

.one { width: 200px; border: 10px solid red; padding: 20px; margin: 30px; } <input type="button" value="按钮" id="btn"/>
<div id="one" class="one" style="height: 200px;"></div>
<script>
$(function () {
//给按钮设置一个点击事件.
$('#btn').click(function () {
//1.1 获取id为one的这个div的宽和高.
// console.log($('#one').css('height'));//'200px'
// console.log($('#one').css('width'));//'200px'
//1.2 width() height()
//获取或者设置元素的宽高的,这个宽高不包括padding/border/margin.
//获取
// console.log($('#one').width());
// console.log($('#one').height());
//设置
// $('#one').width(300);
// $('#one').height(300);
//1.3 innerWidth()/innerHeight()
//方法返回元素的宽度/高度（包括内边距)。
// console.log($('#one').innerWidth());
// console.log($('#one').innerHeight());
//1.4 outerWidth()/outerHeight()
//方法返回元素的宽度/高度（包括内边距和边框）。
// console.log($('#one').outerWidth());
// console.log($('#one').outerHeight());
//1.5 outerWidth(true)/outerHeight(true)
//方法返回元素的宽度/高度（包括内边距、边框和外边距）。
// console.log($('#one').outerWidth(true));
// console.log($('#one').outerHeight(true));
//1.5 获取页面可视区的宽高.
// 获取可视区宽度
console.log($(window).width());
// 获取可视区高度
console.log($(window).height());
});
});

offset（）与position（）

$(function () {
//1.offset()
//获取会得到一个对象,对象里面包含了top和left的值.
//offset方法获取元素距离document的位置
$('#btn1').click(function () {
console.log($('#son').offset());
});
//2.position();
//获取会得到一个对象,对象里面包含了top和left的值.
//position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
$('#btn2').click(function () {
console.log($('#son').position());
});
});

scrollleft（）与scrollright

$(function () {
//给按钮设置一个点击事件.
$('#btn').click(function () {
//获取
//scrollLeft() 表示元素内容被卷曲出去的宽度.
//scrollTop() 表示元素内容被卷曲出去的高度
//console.log($('div').scrollLeft() + ":" + $('div').scrollTop());
//设置
//设置元素内容被卷曲出去的高度或者宽度.
//$('div').scrollLeft(217);
//$('div').scrollTop(217);
//---------------------------------------
// 获取页面被卷曲的高度
//console.log($(window).scrollTop());
// 获取页面被卷曲的宽度
//console.log($(window).scrollLeft());
//设置页面被卷曲出去的距离.
// $(window).scrollTop(1000);
// $(window).scrollLeft(1000);
});
});