web前端之jQuery脚本的书写
Posted 爸爸去哪了2之熊猫三胞胎
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端之jQuery脚本的书写相关的知识，希望对你有一定的参考价值。
web前端之jQuery脚本的书写
今天要尝试编写一个jquery脚本，其主要用于为
如果a标签title里面没有值，则添加对应的title，当有title时则不添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
$(function ()
$('a').title();
)
</script>
</head>
<body>
<a href="#" title="1">有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" title="2">有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" title="3">有标签</a><br>
<a href="#" >没有标签</a>
</body>
</html>;(function($)
$.fn.title=function()
var that=this;
$.each(that,function(index,value)
if(that[index].title==='')
that[index].title="123";
);
;
)(jQuery);这样就能简单地实现一个基础的jquery脚本。现在我们需要进阶一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
$(function ()
// $('a').title();
$('a').title("asd");
// $('a').title('set','德玛西亚');
// $('a').title('delete');
// $('a').title('get');
// $('a').title('setAll','德玛西亚');
)
</script>
</head>
<body>
<a href="#" title="1">有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" title="2">有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" title="3">有标签</a><br>
<a href="#" >没有标签</a>
</body>
</html>;(function($)
$.fn.title=function()
var result = null;
var atitle = arguments[0];
if(arguments.length > 0)
result = this.each(function (index,item)
var title = $(item).attr('title');
title = title || atitle;
$(item).attr('title',title);
)
else
result = this.each(function (index,item)
var title = $(item).attr('title');
title = title;
$(item).attr('title',title);
)
return result;
;
)(jQuery);虽然达到了我们需要的设置的数据，但是还能更深入哦：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
$(function ()
// $('a').title();
// $('a').title("asd");
$('a').title('set','德玛西亚');
$('a').title('delete');
$('a').title('get');
$('a').title('setAll','德玛西亚');
)
</script>
</head>
<body>
<a href="#" title="1">有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" title="2">有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" >没有标签</a><br>
<a href="#" title="3">有标签</a><br>
<a href="#" >没有标签</a>
</body>
</html>;(function($)
$.fn.title=function()
var result=null;
var atitle=arguments[0];
var avalue=arguments[1];
if(arguments.length > 0)
if(atitle==='set')
result = this.each(function (index,item)
var title =$(item).attr('title');
title = title || avalue;
$(item).attr('title',title);
)
else if(atitle==='get')
result = this.each(function (index,item)
var title =$(item).attr('title');
console.log(title);
)
else if(atitle==='delete')
result = this.each(function (index,item)
$(item).removeAttr('title');
)
else if(atitle==='setAll')
result = this.each(function (index,item)
$(item).attr('title',avalue);
)
else
result = this.each(function (index,item)
var title =$(item).attr('title');
title = title;
$(item).attr('title',title);
)
return result;
;
)(jQuery);学的不够深入，jquery脚本书写到此就结束了
以上是关于web前端之jQuery脚本的书写的主要内容，如果未能解决你的问题，请参考以下文章