前幾篇都是長篇大論，一次看完的確有些費盡，今天簡單些，分享一個開發中使用attr() 的技巧，可能大家都沒有這樣使用過。它配合ES6標準中模板字元串模塊使用。簡單看下模板字元串它的使用： // 傳統的 JavaScript 語言，輸出模板通常是這樣寫的（下麵使用了 jQuery 的方法）。 $('# ...
前幾篇都是長篇大論，一次看完的確有些費盡，今天簡單些，分享一個開發中使用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);
}
這樣是不是更安全的實現了參數的傳遞過程。能想到在其他很多場景也能用到。
好了以上就是分享的全部內容了，感謝觀看，喜歡就關註我吧！
