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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现增删改查
Dec 22 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
python实现发送邮件功能
2017/07/22 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python try except 捕获所有异常的实例
2018/10/18 Python
从0开始的Python学习016异常
2019/04/08 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
大学生饮食连锁店创业计划书
2014/01/17 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
党支部三会一课计划
2014/09/24 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
关于MySQL中的 like操作符详情
2021/11/17 MySQL
mysql自增长id用完了该怎么办
2022/02/12 MySQL