前端标签的小技巧-----自定义标签属性(灵活使用js/JQ脚本)

做后端开发唯一的局限是—你的前端的水平。前端高,你轻松;前端菜,你受罪。
在前端对后端一无所知时,我们要勇敢站出来,自己补前端。

"button" value='提交' data-url='index' data-id='5' class='submit'  />
//jq
(function($)
{
    $('.submit').click(function(){
        //提交事件
        var url = $(this).data('url');//index
        var id = $(this).data('id');//5
    });
})(jQuery);

在这里,当要用脚本实现跳转或者获取数据时,我们可以在标签中添加属性:data-url,data-id;提前埋雷。
在脚本中我们直接获取到元素本身然后用.data(‘键值’)(这里的键值是借用关联数组的概念方便理解),获取到值。
但是仅限于data-键值=‘值’;键值是随意的,值是随意的;但是data不可更换。

"button" value='提交' data-any='index' data-num='5' class='submit' any-data='index10' any-num='10'  />
//jq
(function($)
{
    $('.submit').click(function(){
        //提交事件
        var url = $(this).data('any');//index
        var id = $(this).data('num');//5
        var url = $(this).any('data');//不可行,没有值;不识别any属性
        var id = $(this).any('num');//不可行,没有值;不识别any属性
    });
})(jQuery);

感兴趣试一试,很有帮助。

你可能感兴趣的:(web前端开发,web开发,总结,前端基础,js/jq)