IT培训 / 新闻资讯 / Web开发教程 / web前端：表格变色示例中发现的问题——attr()与prop()

web前端：表格变色示例中发现的问题——attr()与prop()

作者：用脑袋行走的人来源： https://www.cnblogs.com/planetwithpig/p/11597047.html点击数：738发布时间： 2020-03-05 11:41:11

　　jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE6.0+、FF1.5+、Safari2.0+、Opera9.0+等。

　　在练习jQuery表格变色例子过程中，发现了一下几个问题：

　　在IEEdge浏览器中切换选中行会出现上一个表格行背景色被吃掉的情况；

　　在chrome中从上向下单击行中任意单元可以选中该行，而从下往上单击虽选中了行，而前面的按钮列未显示选中状态

　　针对以上问题，查阅了资料后，发现了原因，以及解决方法：

　　为tbody设置border-collapse:collapse;方可解决吃色问题

　　在引用jQuery版本是1.6之后的，设置radio的checked属性不应使用attr()方法，应使用prop()方法

　　在之前的jQuery版本中，都是使用attr()访问对象的属性，比如取一个图片的alt属性，就可以这样做$('#img').attr('alt');但是在某些时候，比如访问input的disabled属性时，会有些问题，在有些浏览器中，只要写了disable属性就可以，有些则要写：disabled="disabled"。所以，从1.6版本开始，jQuery使用新方法prop()获取以及设置这些属性，返回标准属性：true/false。按照官方说明，如果设置disabled和checked这些属性，应使用prop()方法（摘自《锋利的jQuery（第2版）》）

　　附上我的代码

　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXhtml1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<html>

　　<head>

　　<styletype="text/css">

　　table{

　　margin:auto;

　　border:1pxsolid#ccc;

　　padding:20px;

　　text-align:left;

　　/*添加上border-collapse属性设置之后就可以解决在IEedge中选择不同行之后吃色的问题*/

　　border-collapse:collapse;

　　}

　　tr{

　　padding:0px;

　　margin:0px;

　　}

　　td{

　　width:100px;

　　padding:0px;

　　}

　　th{

　　border-bottom:1pxsolid#ccc;

　　}

　　/*奇数行*/

　　.odd{

　　background:#ffffee;

　　}

　　/*偶数行*/

　　.even{

　　background:#fff38f;

　　}

　　.selected{

　　background:gold;

　　color:#fff;

　　}

　　</style>

　　<scripttype="text/Javascript"src="../jquery-3.4.1.js"></script>

　　<scripttype="text/javascript">

　　$(function(){

　　$("tbody>tr:odd").addClass("odd");//先排除第一行,然后给奇数行添加样式

　　$("tbody>tr:even").addClass("even");//先排除第一行,然后给偶数行添加样式

　　$('tbody>tr').click(function(){

　　$(this)

　　.addClass('selected')

　　.siblings().removeClass('selected')

　　.end()

　　//.find(':radio').attr("checked",true);//在设置input的checked属性的时候，使用的是jq中的attr（）方法；这个方法在jquery1.6以后的版本使用的时候会出现问题，应换成prop()方法。prop()方法通常用来设置元素固有的属性，比如disabled和checked属性。

　　.find(':radio').prop("checked",true);

　　});

　　//如果单选框默认情况下是选择的，则高色.

　　//$('table:radio:checked').parent().parent().addClass('selected');

　　//简化:

　　//$('table:radio:checked').parents("tr").addClass('selected');

　　//再简化:

　　$('tbody>tr:has(:checked)').addClass('selected');

　　})

　　</script>

　　</head>

　　<body>

　　<table>

　　<thead>

　　</thead>

　　<tbody>

　　</tbody>

　　</table>

　　</body>

　　</html>

　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"writeLess，DoMore"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

踩(0)

分享到：

上一篇：web前端：vue生命周期

下一篇：web前端：移动端分辨率+小程序的自适应单位RPX