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仿微信聊天界面
May 06 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
php URL验证正则表达式
2011/07/19 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
jquery 学习笔记一
2010/04/07 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
城南旧事读书笔记
2015/06/29 职场文书
Python基础之Socket通信原理
2021/04/22 Python