Heim > Web-Frontend > js-Tutorial > Hauptteil

Jquery怎么设置属性和样式

coldplay.xixi
Freigeben: 2023-01-04 09:36:29
Original
2635 Leute haben es durchsucht

设置属性的方法:使用attr(),语法“attr(属性,值)”。设置样式的方法:1、使用addClass(),语法“addClass(类名)”;2、使用css(),语法“css("属性名","样式值")”。

Jquery怎么设置属性和样式

本教程操作环境:windows7系统、jquery3.2.1版本,Dell G3电脑,该方法适用于所有品牌电脑。

Jquery设置属性和样式的方法:

1、Jquery属性的获取与设置

//找到第一个input,通过attr设置属性value的值
$("input:first").attr('value','新设值');
//同时为多个属性赋值
$("input:first").attr({'attr1':'v1','attr2':'v2'...});
//找到最后一个input,通过使用removeAttr删除属性
$("input:last").removeAttr('value');
//得到.first-div内的文本,并以此来设置最后一个p内的文本
$('p:last').text( $(".first-div").text() )
//.html() 不传入值,就是获取.first-div类的HTML内容,不仅仅是文本
//.html( htmlString ) 用之前得到的内容来设置第一个p标签的html内容
$('p:first').html( $(".first-div").html() ) ;
//.val()获取表单id为single元素的值
$("p").text( $("#single").val() );
//设置表单text字段内的值
$("input[type='text']").val('修改表单的字段')
Nach dem Login kopieren

.html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其子元素,.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。

.html(htmlString),.text(textString).val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

2、JQuery添加与删除样式

//为class=left下的div元素增加一个新样式
$('.left div').addClass('newClass')
//找到所有的div,然后通过addClass函数增加类名
$("div").addClass(function(index,className) {
 //找到类名中包含imooc的元素,为其添加类名
 if(-1 !== className.indexOf('imooc')){    
  $(this).addClass('imoocClass') //this指向匹配元素集合中的当前元素
 }
});
//class=left下div元素删除newClass样式
$('.left div').removeClass('newClass');
//如果该元素存在该类名就去除,否则就添加
$('.left div').toggleClass('newClass');
//获取class=first的字体大小样式值
$('p:eq(1)').text( $('.first').css("font-size"));
//获取一组属性值并返回为一个对象
var value = $('.first').css(['width','height']);
//通过对象访问到对应的值
document.write( "widht:" + value.width + " height:" +value.height) ;
//设置样式属性值
$('.fourth').css("background-color","red");
//设置多个属性值
$('.seventh').css({
 'font-size'  :"15px",
 "background-color" :"#40E0D0"
});
Nach dem Login kopieren

addClasscss两个方法均用于操作页面样式,两者比较。可维护性:.addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类。css方法是通过JavaScript改变元素的样式。通过.addClass()我们可以批量的给相同的元素设置统一规则,变动起来比较方便,可以统一修改删除。

如果通过.css()方法就需要指定每一个元素一一修改,比较麻烦。灵活性:通过.css()方式可以很容易动态的去改变具体一个元素的属性,不需要繁琐的定义一个class类的规则。一般来说在不确定开始布局规则,通过动态生成的HTML代码结构中,都是通过.css()方法处理的。样式值:.addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,.css()可以获取到指定的样式值。样式的优先级:css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下:外部样式 < 内部样式 < 内联样式。

.addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上,通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的通过.css方法设置的样式属性优先级要高于.addClass()方法

相关免费学习推荐:javascript(视频)

Das obige ist der detaillierte Inhalt vonJquery怎么设置属性和样式. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!