Jquery属性的获取/设置及样式添加/删除操作技巧分析

 更新时间:2019年12月23日 10:15:07   作者:theVicTory  
这篇文章主要介绍了Jquery属性的获取/设置及样式添加/删除操作技巧,结合实例形式分析了jquery针对属性与样式的相关获取、设置、添加、删除等相关操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了Jquery属性的获取/设置及样式添加/删除操作技巧。分享给大家供大家参考,具体如下:

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()都可以使用回调函数的返回值来动态的改变多个元素的内容。

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()方法

总结

.addClass与.css方法各有利弊,一般若是静态的结构,且确定了布局的规则,可以用addClass的方法,增加统一类规则。如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jquery对元素的基本操作实例分析

    jquery对元素的基本操作实例分析

    在本篇文章里小编给大家整理了一篇关于jquery对元素的基本操作实例分析内容,对此有兴趣的朋友们可以跟着学习下。
    2022-01-01
  • jQuery中(function($){})(jQuery)详解

    jQuery中(function($){})(jQuery)详解

    本文通过具体示例向大家详细介绍了jQuery中的(function($){})(jQuery)的用法和意义,对此有相同困惑的小伙伴可以参考下本文。
    2015-07-07
  • jQuery异步提交表单实例

    jQuery异步提交表单实例

    这篇文章主要介绍了jQuery异步提交表单实例,需要的朋友可以参考下
    2017-05-05
  • 基于jQuery实现点击弹出层实例代码

    基于jQuery实现点击弹出层实例代码

    基于jquery实现点击链接弹出层效果,其基本实现原理是这样的:jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏;对jq点击弹出层相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 弹出层之1:JQuery.Boxy (一) 使用介绍

    弹出层之1:JQuery.Boxy (一) 使用介绍

    Boxy是一个基于JQuery的弹出层插件,它有相对漂亮的外观,功能齐全,支持iframe,支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重,但使用不那么方便。
    2011-10-10
  • EasyUI在表单提交之前进行验证的实例代码

    EasyUI在表单提交之前进行验证的实例代码

    这篇文章主要介绍了EasyUI在表单提交之前进行验证的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JQuery实现表格动态增加行并对新行添加事件

    JQuery实现表格动态增加行并对新行添加事件

    JQuery实现表格动态增加行,一直保持最下面有多个空白行。这样可以避免一次增加太多行可能导致页面内容太多,反应变慢
    2014-07-07
  • 非常棒的10款jQuery 幻灯片插件

    非常棒的10款jQuery 幻灯片插件

    这篇文章与大家分享的是10款非常棒的 jQuery 幻灯片插件,使用这些插件可以帮助你在网站中加入非常吸引人的幻灯片效果,另外这些插件还有制作教程。
    2011-06-06
  • Jquery 1.9.1源码分析系列(十二)之筛选操作

    Jquery 1.9.1源码分析系列(十二)之筛选操作

    这篇文章主要介绍了Jquery 1.9.1源码分析系列(十二)之筛选操作的相关资料,需要的朋友可以参考下
    2015-12-12
  • jQuery on()方法使用技巧详解

    jQuery on()方法使用技巧详解

    这篇文章主要介绍了jQuery on()方法使用技巧详解,本文讲解了trigger()绑定、多个事件绑定同一个函数、多个事件绑定不同函数、绑定自定义事件、传递数据到函数等技巧,需要的朋友可以参考下
    2015-04-04

最新评论