扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了:$.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.perPage); } function selectPage(page){ return function(){ currPage = page; if (page<0) currPage = 0; if (page>=numPages()) currPage = numPages()-1; render(); $('img.page-wait',panel).attr('src','images/wait.gif'); opts.callback(currPage+1); $('img.page-wait',panel).attr('src','images/nowait.gif'); } } function render(){ var html = '<table><tbody><tr>' +'<td><a href="#"><img class="page-first"></a></td>' +'<td><a href="#"><img class="page-prev"></a></td>' +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>' +'<td><a href="#"><img class="page-next"></a></td>' +'<td><a href="#"><img class="page-last"></a></td>' +'<td><img src="images/nowait.gif" class="page-wait"></td>' +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>' +'</tr></tbody></table>'; var imgFirst = 'images/page-first-disabled.gif'; var imgPrev = 'images/page-prev-disabled.gif'; var imgNext = 'images/page-next-disabled.gif'; var imgLast = 'images/page-last-disabled.gif'; if (currPage > 0){ imgFirst = 'images/page-first.gif'; imgPrev = 'images/page-prev.gif'; } if (currPage < numPages()-1){ imgNext = 'images/page-next.gif'; imgLast = 'images/page-last.gif'; } panel.empty(); panel.append(html); $('img.page-first',panel) .bind('click',selectPage(0)) .attr('src',imgFirst); $('img.page-prev',panel) .bind('click',selectPage(currPage-1)) .attr('src',imgPrev); $('img.page-next',panel) .bind('click',selectPage(currPage+1)) .attr('src',imgNext); $('img.page-last',panel) .bind('click',selectPage(numPages()-1)) .attr('src',imgLast); $('input.page-num',panel) .val(currPage+1) .change(function(){ selectPage($(this).val()-1)(); }); } var currPage = 0; var panel = $(this); render(); }); } 下面测试一下:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mypagination.css"/> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.mypagination.js"></script> <script> $(document).ready(function(){ $('#mypage').mypagination(10112,{ callback:function(page){ alert(page); } }); }); </script> </head> <div id="mypage" class="mypagination"></div> 运行效果图如下:以上就是本文的全部内容,希望对大家的学习有所帮助。

a标签的title属性可以实现鼠标放上去显示信息的功能<a title="编辑"  href ="javascript:return false;" onclick="return false;" style="cursor: default;"><i class="edit" style="opacity: 0.2"></i></a>加入href =”javascript:return false;” 可以实现不可点击功能加入style=”opacity: 0.2”可以实现变灰的效果以上这篇a标签置灰不可点击的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看.  首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡,  通常,在js中监听事件的方法共有三种,分别是:    ele.addEventListener(type,listener,[useCapture]);//IE6~8不支持    ele.attachEvent('on'+type,listener);//IE6~10支持,IE11不支持    ele.onClick=function(){};//所有浏览器都支持  w3c规范中定义了三个事件阶段,依次是捕获阶段,目标阶段,冒泡阶段,而w3c指定的dom2级规定中,使用的是addEventListener来监听事件的.所以我们就以addEventListener来讲解,首先事假冒泡就像你从往水中扔一块石子,水中的气泡从下边往上冒一样,意思为触发事件后从子元素王父元素方向触发,而捕获机制则正好相反,捕获机制是从父元素往子元素方向进行事件触发,而addEventListener函数中的第三位参数正是来决定是使用捕获机制还是冒泡机制的,当useCapture为true是为捕获机制,当useCapture为false时是冒泡机制,我们看一下例子:复制代码<div class="parent"> <div class="child"> </div></div><script> var parent = document.getElementsByClassName('parent')[0]; var child = document.getElementsByClassName('child')[0]; parent.addEventListener('click',function(){ console.log("这里是父元素"); },false); child.addEventListener('click',function(){ console.log("这里是子元素"); },false);</script>  当我们点击子元素是显示上图,当我们将false改为true后就会发现执行顺序会反过来,这就是事件冒泡和捕获的区别,他们两个刚好相反,  那么使用这种绑定机制我们的弊端在于要去给每一个对象绑定事件会是一个特别麻烦的事情,当我们要删除一个事件或者要改变一个事件的时候会特别的繁琐,更重要的是,我们增加了JavaScript和dom节点之间的关联,而且一点出现循环引用,很有可能造成内存泄露,这些都是它的弊端,   那么解决这种弊端的一种方法就是事件代理(event delegation),这个方法可以让你避免去给每一个节点一一的添加事件,它的做法是将这些监听事件去绑定到这些节点的父元素上,在父元素上的这个监听函数自动去判断是哪一个子元素触发的事件,从而可以对触发事件的子元素进行操作,这里我们给出的例子是davidwalsh所给出的一个例子:   现在我们有一个父元素ul和几个li子元素,<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li></ul>  现在我们要实现的是,当我们点击每一个li节点的时候,都会输出li节点中的内容,按照上边的写法,你可以选中这些li,让后给他们加上这些方法,然后等到不需要了再将他们移除,如果有100个li,1000个li呢,这将会成为你的噩梦,较好的解决方法就是给父元素添加一个监听事件,之后的问题便是怎么去判断出来时哪一个li被点击了? 我们可以在监听事件中去判断当前event的target来判断是否是我们要找的节点,这里我们有一个简单的例子:// 找到父元素,绑定一个监听事件document.getElementById("parent-list").addEventListener("click", function(e) { // e.target是点击的元素 // 如果它是li元素 if(e.target && e.target.nodeName == "LI") { // console.log("List item ", e.target.id.replace("post-", ""), " was clicked!"); }});  当ul中发生点击事件后,因为addEventListener默认是冒泡事件,所以监听事件会在底层事件冒泡过来时执行,在触发了事件后,去检测是否是我们要寻找的目标元素,如果不是,就会忽略过去,那我们不仅仅可以通过目标元素的标签是不是我们需要的目标元素,我们还可以根据目标元素的属性或者类名来进行检测,利用ele.maeches这个API来进行处理,document.getElementById("myDiv").addEventListener("click",function(e) { // e.target 就是当前被点击的元素 if (e.target && e.target.matches("a.classA")) { console.log("Anchor element clicked!"); }});  因此我们可以看得出来,使用事件代理这种方式,能够给我们带来很多的便捷,可以避免很多坑,使用事件代理是一种很强大的方法.          感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

今天自己写个楼层效果,有一点烦躁,小地方犯错误。各位大神来修改不足啊!!!<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>楼层切换</title><style>*{padding: 0;margin: 0;}li{list-style: none;}.main img{width: 850px;height: 700px;float: left;}.title{width: 850px;height: 50px;text-align: center;line-height: 50px;}.floor{position: fixed;top: 20px;right: 20px;display: none;}.floor ul li{width: 70px;height: 30px;text-align: center;line-height: 30px;cursor: hand;cursor: pointer}.liStyle{background-color: red;}.loading{background:url("image/loading.gif") no-repeat center center;}#back{cursor: hand;cursor: pointer;}</style></head><body><div class="main" id="main"><h3 class="title">图片欣赏</h3><img as="image/1.jpg"/><img as="image/2.jpg"/><img as="image/3.jpg"/><img as="image/4.jpg"/><img as="image/5.jpg"/><img as="image/6.jpg"/><img as="image/7.gif"/><img as="image/8.jpg"/><img as="image/9.jpg"/><img as="image/10.jpg"/></div><div class="floor" id="floor"><ul id="floorUl"><li>第一张</li><li>第二张</li><li>第三张</li><li>第四张</li><li>第五张</li><li>第六张</li><li>第七张</li><li>第八张</li><li>第九张</li><li>第十张</li></ul><p id="back">返回顶部</p></div><script> var main = document.getElementById("main"); var floor = document.getElementById("floor"); var image = main.getElementsByTagName("img"); var floorUl = document.getElementById("floorUl"); var li = floorUl.getElementsByTagName("li"); var back = document.getElementById("back"); window.onload = window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var height = document.documentElement.clientHeight || document.body.clientHeight; for(var i = 0;i < image.length; i++){ image[i].className = "loading"; if(delay(image[i]).top < scrollTop + height){ image[i].src = image[i].getAttribute("as"); } } if(scrollTop >= image[0].offsetTop){ floor.style.display = "block"; }else { floor.style.display = "none"; } var num = 0; for(var i = 0; i < image.length;i++){ if(scrollTop >= image[i].offsetTop){ num = i; } li[i].className = ""; } li[num].className = "liStyle"; for(var i = 0;i < li.length;i++){ li[i].onclick = function(){ for(var j = 0;j < li.length;j++){ if(this == li[j]){ document.documentElement.scrollTop = image[j].offsetTop; document.body.scrollTop = image[j].offsetTop; } } } } } var time = null; back.onclick = function() {function goBack(){ var ss = document.documentElement.scrollTop || document.body.scrollTop; ss-=50; document.documentElement.scrollTop = ss; document.body.scrollTop = ss; if(ss<= 0){ clearInterval(time); } } time = setInterval(goBack,1); } function delay(obj){ var l = 0; var t = 0; while (obj){ l = l + obj.offsetLeft; t = t + obj.offsetTop; obj = obj.offsetParent; } return{left:l,top:t}; }</script></body></html> 以上这篇js实现楼层效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站。怎么把图标放在输入框的开头??<div class="form-group has-feedback"><label class="col-md-2 control-label" for="username">用户名</label><div class="col-md-6"><span class="glyphicon glyphicon-user form-control-feedback"></span><input type="text" class="form-control" id="username" name="username" placeholder="用户名" autofocus></div></div><div class="form-group has-feedback"><label class="col-md-2 control-label" for="password">密 码</label><div class="col-md-6"><i></i><span class="glyphicon glyphicon-lock form-control-feedback"></span><input type="password" class="form-control" id="password" name="password" placeholder="密码"></div></div>------解决思路----------------------改样式就好了啊,它是用绝对定位做的,left多少,再改下输入框的padding-left就可以了------解决思路----------------------样式修改下呗form-control-feedback{right:0 //改称 left:0}以上内容是小编给大家介绍的Bootstrap3 input输入框插入glyphicon图标的方法,希望对大家有所帮助,如果大家想了解更多内容敬请关注脚本之家网站!

分类:腾博会官方网

时间:2016-10-10 10:30:19