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


Posted in jQuery onDecember 23, 2019

本文实例讲述了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滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现验证用户登录
Dec 10 #jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
You might like
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
python str与repr的区别
2013/03/23 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python机器人运动范围问题的解答
2019/04/29 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
测绘工程专业个人自我评价
2013/12/01 职场文书
培训心得体会
2013/12/29 职场文书
战友聚会邀请函
2014/01/18 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技