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() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
二、语法
返回属性的值：
设置属性和值：
<!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>
使用函数设置属性和值：
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-50;
});
});
});
设置多个属性和值：
$(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);
}
这样是不是更安全的实现了参数的传递过程。能想到在其他很多场景也能用到。
好了以上就是分享的全部内容了，感谢关注！
原文地址：https://www.cnblogs.com/blmlove/p/12701722.html
上一篇： React实现新闻网站--详情页面的制作
下一篇： 利用递归解决问题的一些实例讲解
推荐阅读