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) 设置文本内容，会替换原内容

Jquery设置属性及样式相关推荐

jQuery的属性与样式之增加样式、删除样式、切换样式
开发工具与关键技术:Visual Studio ASP.NET MVC 作者:刘剑鸿撰写时间:2019年06月14日星期五 jQuery的属性与样式之增加样式.删除样式.切换样式 1 .addCl ...
JQuery的属性与样式操作
JQuery的属性与样式操作开发工具与关键技术:JQuer和MVC开发工具作者:郑健鹏撰写时间:2019年4月7日今天我们来学习使用JQuery 插件通过JavaScript获取dom元素上的 ...
php+jq+添加css,jquery设置内联样式css()
jquery设置内联样式css() 设置内联样式css() .box1 { width: 300px; height: 300px; background-color: wheat; position ...
Jquery设置属性值
//最经常用到的jquery设置标签的属性值常用到的方法 function setProperty(){ $('#DIV3').attr("readonly",true);// ...
jquery设置属性值或移除属性
为什么80%的码农都做不了架构师?>>> 设置属性值: $("#inputID").attr("属性名","属性") ...
jQuery的属性样式
jQuery的属性与样式之.attr()与.removeAttr() attr()有4个表达式 attr(传入属性名):获取属性的值 attr(属性名, 属性值):设置属性的值 attr(属性名,函数 ...
jquery获取和设置属性_jQuery获取属性，设置属性，删除属性
jquery获取和设置属性 Today we will look into following examples – jQuery get attribute, jQuery set attribut ...
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式？
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性对于下 ...
html设置返回的样式,jQuery设置或返回元素样式属性。
jQuery css() 方法css() 方法设置或返回被选元素的一个或多个样式属性. 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); ...

Jquery设置属性及样式

Jquery设置属性及样式相关推荐

最新文章

热门文章