JavaScript 开发必须掌握技能（四）- 更好的使用jQuery attr方法
前几篇都是长篇大论，一次看完的确有些费尽，今天简单些，分享一个开发中使用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({width:"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); }
这样是不是更安全的实现了参数的传递过程。能想到在其他很多场景也能用到。
好了以上就是分享的全部内容了，感谢观看，喜欢就关注我吧！
赞 (0)