Jquery设置属性及样式

要通过JQ设置元素属性及样式，首先我们得了解JQ对象和DOM对象

DOM对象与JQ对象
JQ获取的元素与原生JS获取的元素不相等，这是因为JQ获取元素时，会先通过元素js原生方式，待找到该元素后会将该元素DOM对象放入JQ对象中
而原生JS获取元素直接获取DOM对象

  var test = document.getElementById('test');
            console.log(test);
            console.log($('#test'));

如下图

在这里插入图片描述
因此DOM对象不能使用JQ中的方法如改变元素属性，样式等等，而JQ对象也不能使用DOM中的方法
但有些时候我们希望DOM对象使用JQ对象的方法，这个时候就需要将DOM对象转换为JQ对象，转换方法也很简单，直接将DOM对象传入到$()中即可
如

$(function(){
   var test = document.getElementById('test');
   // test.css('background','red');//不能正常设置
   $(test).css('background','red');//转换为JQ对象
		})

在这里插入图片描述
同时JQ对象也可转换为DOM对象，JQ对象为数组对象，我们通过索引即可获得DOM对象

$(function(){
            var test = document.getElementById('test');
            // test.css('background','red');//不能正常设置
            // $(test).css('background','red');//转换为JQ对象
            $(test)[0].style.backgroundColor = 'red';
		})

JQ操作属性
通过attr()方法
attr()第一个参数为要设置的属性，第二个参数为要设置的属性值
如果第二个参数不指定，默认获取属性值

1.获取元素属性$('#img').attr('src')
2. 设置属性值 $('#img').attr('src','1.jpg')
3.attr()还可以设置多个属性值设置多个属性值需传入对象，键为属性，值为属3.性值多个属性通过逗号分隔
一次性设置多个元素的属性需要传入对象 attr({'src':'33.jpg','alt':'测试''})
4.同时改方法还可通过函数返回值作为属性值
attr('height',function(){ return 30+50 })

删除属性通过.removeAttr('属性')

Class属性
$(this).addClass('l')添加lclass属性
$(this).removeClass('l')删除l属性
$(this).toggleClass('l')如果有则删除，没有则添加该属性
$(this).hasClass('l')判断是否有l属性有返回true没有false

css样式操作
css(width)获取元素宽度
css('width','400px')设置元素宽度
css({ width:100, heigth:100, background:'pink' })设置多组样式…

offset
offset();获取元素相对于文档的位置返回对象 top&left
offset({ left:80 top:90 });设置元素相对于文档的位置

宽高设置
$('div').width:获取宽度
$('div').height(500)设置高度

文本&表单值
('$t').val();获取表单值
val('234567');设置表单值
html();获取元素内容
html('<i>45</i>');设置元素内容，会替换原内容
text();获取文本，不包含标签
text(123456) 设置文本内容，会替换原内容

Sunshine12.5

发布了58 篇原创文章 · 获赞 1 · 访问量 2168

私信关注

Jquery设置属性及样式

猜你喜欢