前几篇都是长篇大论，一次看完的确有些费尽，今天简单些，分享一个开发中使用attr() 的技巧，可能大家都没有这样使用过。它配合ES6标准中模板字符串模块使用。简单看下模板字符串它的使用：
// 传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。 $('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); // 上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。 $('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
这样看着是不是简洁了许多，试想下如果代码很多很长时候，需要检测是否有漏写了那个单引号或者加号等。尤其是我们再写sql语句时，说到些sql语句都懂了对吧！让我们来看下：
let sql = "select id,create_by,user_name,c_name,c_value,is_off,remarks ," +
" date_format(create_time,'%Y-%m-%d %H:%i:%s') create_time" +
" from app_shop_category a" +
" LEFT JOIN common_user_info b on a.create_by = b.user_id";
let sql1 = ` select id,create_by,user_name,c_name,c_value,is_off,remarks,
date_format(create_time,'%Y-%m-%d %H:%i:%s') create_time
from app_shop_category a
LEFT JOIN common_user_info b on a.create_by = b.user_id`;
关于模板字符串可以到ES6标准 了解更多详细内容
一、attr() 定义和用法
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
二、语法
返回属性的值：
$(selector).attr(attribute)
设置属性和值：
$(selector).attr(attribute,value)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ console.log("图片宽度为：",$("img").attr("width")) // 图片宽度为： 284
$("button").click(function(){ $("img").attr("width","500"); console.log("设置后图片宽度为：",$("img").attr("width")) // 设置后图片宽度为： 500 }); }); </script> </head> <body> <img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213"> <br> <button>为图片设置width属性</button> </body> </html>
使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))
$(document).ready(function(){ $("button").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); }); });
设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
$(document).ready(function(){ $("button").click(function(){ $("img").attr({"150",height:"100"}); }); });
三、attr() 配合ES6模板字符串的使用
接下来我们看看attr() 配合ES6的使用,示例如下：
在此我们先看看这条语句
"<a onclick='addVersion(" + id + "," + pid + ","" + pids + "","" + name + "",""+source+"");'>新增</a>";
在传递参数时拼接的参数，如果我们需要的参数很多时，这方法是不是不安全。
好了不卖关子了下面实现一个简单的分页列表，并对每条记录的操作栏设置配置操作链接，在a标签中我们首先获取本条json数据，将json数据通过data-param="${JSON.stringfy(row)}"，通过点击方法中通过$(obj).attr('data-param')返回属性的值，便可拿到放入data-param中的json。转换为json格式数据就可以了。
$('#configList').datagrid({
url: '...',
method: 'post',
rownumbers: true,
striped: true,
fitColumns: true,
border: false,
fit: true,
columns:[[
{field:'user_no',title:'账号',align:'center'},
{field: "remark", title: "备注", align: 'center'},
{field: "operate",title: "操作", align: "center",formatter:function (value,row,index) {
let config = `<a class="easyui-linkbutton" data-param='${JSON.stringify(row)}' onclick="configOperator(this)">配置</a>`;
return config;
}}
]],
onLoadSuccess:function(json){ },
onLoadError : function (rowData, rowIndex) {
$.messager.alert('提示','加载数据出现时发生错误,请稍候重试...');
},
pagination: true,
loadMsg:"正在加载，请稍后........",
});
// 配置方法 function configOperator(obj) {
let param = $(obj).attr('data-param');
let params = JSON.parse(param)
console.log(params);
}
这样是不是更安全的实现了参数的传递过程。能想到在其他很多场景也能用到。
好了以上就是分享的全部内容了，感谢观看，喜欢就关注我吧！