JavaScript 开发必须掌握技能（四）- 更好的使用jQuery attr方法

最新推荐文章于 2023-08-18 17:32:13 发布

ZXH0122

最新推荐文章于 2023-08-18 17:32:13 发布

阅读量273

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/ZXH0122/article/details/105535546

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

前几篇都是长篇大论，一次看完的确有些费尽，今天简单些，分享一个开发中使用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`;

一、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); 
}

这样是不是更安全的实现了参数的传递过程。能想到在其他很多场景也能用到。

好了以上就是分享的全部内容了，感谢观看，喜欢就关注一下我吧！

ZXH0122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 开发必须掌握技能（四）- 更好的使用jQuery attr方法

前几篇都是长篇大论，一次看完的确有些费尽，今天简单些，分享一个开发中使用attr() 的技巧，可能大家都没有这样使用过。它配合ES6标准中模板字符串模块使用。简单看下模板字符串它的使用：// 传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。$('#result').append( 'There are <b>' + basket....
复制链接

扫一扫