Jquery如何设定属性和样式-百分百源码网

Jquery如何设定属性和样式

发布时间：12/01 来源：未知浏览：关键词：

Jquery设定属性和样式的办法：1、Jquery属性的猎取与设定，代码为【$("input:first").attr('value','新设值')】；2、JQuery增加与删除样式，代码为【$('.left div').toggleC】。

本教程操纵环境：windows7系统、jquery3.2.1版本，该办法适用于所有品牌电脑。

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('修改表单的字段')

.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"
});

addClass与css两个办法均用于操纵页面样式，两者比力。可保护性：.addClass()的本质是通过定义个class类的样式规则，给元素增加一个或多个类。css办法是通过JavaScript改动元素的样式。通过.addClass()我们可以大量的给雷同的元素设定统一规则，变更起来比力利便，可以统一修改删除。

假如通过.css()办法就需要指定每一个元素一一修改，比力费事。灵敏性：通过.css()方式可以很容易动态的去改动详细一个元素的属性，不需要繁琐的定义一个class类的规则。一样来说在不肯定开端规划规则，通过动态生成的HTML代码构造中，都是通过.css()办法处置的。样式值：.addClass()本质只是针对class的类的增添删除，不克不及猎取到指定样式的属性的值，.css()可以猎取到指定的样式值。样式的优先级：css的样式是有优先级的，当外部样式、内部样式和内联样式统一样式规则同时利用于统一个元素的时候，优先级如下：外部样式 < 内部样式 < 内联样式。

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