JQuery样式与属性设置方法分析


Posted in jQuery onDecember 07, 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 相关文章推荐
jQuery实现动态删除LI的方法
May 30 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery实现抽奖功能
Oct 22 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
jQuery实现轮播图效果
Nov 26 #jQuery
You might like
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python求导数的方法
2015/05/09 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python Web版语音合成实例详解
2019/07/16 Python
基于python操作ES实例详解
2019/11/16 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
网络安全方面的面试题
2016/01/07 面试题
市场部管理制度
2014/02/02 职场文书
市场营销工作计划书
2014/09/15 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年库房工作总结
2015/04/30 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js