相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能。
前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码。
本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的。(大牛可以出门右拐......)
我们可以模拟创建一个迷你jQuery。
var $ = {};
好的,就这么简单......
下面我们要在这个对象上挂载一个extend方法,用于让开发者为我这个对象添加功能和方法。
var $ = {
extend:function(ob){
/**暂时不管里面写什么**/
}
}
现在,我们就在$这个对象上添加了一个extend方法,外部可以通过$.extend(obj)的方法去调用它。
假设现在我们要往$上面添加一个方法,也就是添加一个插件,我们只需要:
$.extend({
myFunction:function(obj){
//do something....
}
})
现在只需要$.myFunction(obj);就可以实现方法内所要做的事了。
问题的关键来了,我们明明是把方法挂载在$.extend上,为什么可以直接用$去调用?这里就要看看extend内部是怎么处理传入的obj了。
var $ = {
extend:function(obj){
for(var key in obj){
this.proto[key]=obj[key];
}
}
}
原来,extend把传入的obj遍历,然后挂到$的proto上了,这样,$随时都能够调用原型上的方法。
当然,实际上jQuery的extend实现比这个复杂的多,这里只是介绍了jQuery插件底层实现的基本思想,把公共的方法挂载到对象的原型上。
具体的插件编写可以看看文章开头的链接,我把插件编写的每个细节都做了
本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容。
js代码如下:
<script type="text/javascript">
$(document).ready(function(){
$(".tkyy").click(function(event){
event.stopPropagation(); //停止事件冒泡
$(".marsk-container").toggle();
});
//点击空白处隐藏弹出层
$("body").click(function(event){
var _con = $('.tkyy_con'); // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length ==0){
$('.marsk-container').hide();
//淡出消失
}
});
});
</script>
css代码:
.marsk-container{background: #FFFFFF; display: none;position: absolute;position: fixed; top: 0; right: 0; left: 0; bottom: 0px; background: rgba(0,0,0,.5); z-index: 10; }
html代码:
<p class="tkyy"><span class="mui-icon mui-icon-arrowdown"></span>请选择退款类型 </p>
<p class="marsk-container">
<p class="tkyy_con">
<p class="mui-input-row mui-radio ">
<label>退运费</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>收到商品破损</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>少件/漏发</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>商品需要维修</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>发票问题</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>收到商品与描述不符</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>商品质量问题</label>
<input name="radio" type="radio" checked>
</p>
<p class="mui-input-row mui-radio ">
<label>描述问题</label>
<input name="radio" type="radio" checked>
</p>
</p>
</p>
效果如图:
以上就是利用jQuery实现点击弹出背景变暗遮罩效果实例的详细内容,更多请关注php中文网其它相关文章!
按对象取值:
jQuery代码如下
(function ($) {
$.getJSON('ajax/test.json', function (data) {
var items = [];
$.each(data.comments, function (key, val) {
items.push('<li class="' + 'tag' + val.class + '">' + '<a href="#">' + val.content + '</a>' + '</li>');
});
//第一个标签
$('<ul/>', {
'class':'',
html:items.join('')
}).appendTo('.tags');
//第二个标签
$('<ul/>', {
'class':'alt',
html:items.join('')
}).appendTo('.tags');
});
})(jQuery);
json代码如下
{"comments":[
{
"class":"1",
"content":"Lorem ipsum"
},
{
"class":"2",
"content":"Dolor sit amet"
},
{
"class":"3",
"content":"Consectetur adipiscing elit"
},
{
"class":"2",
"content":"Proin"
},
{
"class":"4",
"content":"Sagittis libero"
},
{
"class":"1",
"content":"Aliquet augue"
},
{
"class":"1",
"content":"Quisque dui lacus"
},
{
"class":"5",
"content":"Consequat"
},
{
"class":"2",
"content":"Dictum non"
},
{
"class":"1",
"content":"Venenatis et tortor"
},
{
"class":"3",
"content":"Suspendisse mauris"
},
{
"class":"4",
"content":"In accumsan"
},
{
"class":"1",
"content":"Egestas neque"
},
{
"class":"5",
"content":"Mauris eget felis"
},
{
"class":"1",
"content":"Suspendisse"
},
{
"class":"2",
"content":"condimentum eleifend nulla"
}
]}