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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery 移除事件的方法
Jun 20 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
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python实现简易通讯录修改版
2018/03/13 Python
flask中的wtforms使用方法
2018/07/21 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
基于FME使用Python过程图解
2020/05/13 Python
python开发入门——列表生成式
2020/09/03 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
总裁助理岗位职责
2014/02/17 职场文书
大学生见习报告范文
2014/11/03 职场文书
申报优秀教师材料
2014/12/16 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python