JQuery实现置顶、置底、向上、向下、取消排序功能
<pre name="code" class="html"><!DOCTYPE html>
<html> <head> <title>sort.html</title> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> </head> <body> <table border="1" cellpadding="10" cellspacing="0"> <thead> <tr> <th>序号</th> <th>内容</th> <th>排序</th> </tr> </thead> <tbody class="table"> <tr> <td>1</td> <td>内容一</td> <td><a href="javascript:void(0)" class="top">置顶</a> <a href="javascript:void(0)" class="upbtn">上</a> <a href="javascript:void(0)" class="downbtn">下</a> <a href="javascript:void(0)" class="bottom">置底</a></td> </tr> <tr> <td>2</td> <td>内容二</td> <td><a href="javascript:void(0)" class="top">置顶</a> <a href="javascript:void(0)" class="upbtn">上</a> <a href="javascript:void(0)" class="downbtn">下</a> <a href="javascript:void(0)" class="bottom">置底</a></td> </tr> <tr> <td>3</td> <td>内容三</td> <td><a href="javascript:void(0)" class="top">置顶</a> <a href="javascript:void(0)" class="upbtn">上</a> <a href="javascript:void(0)" class="downbtn">下</a> <a href="javascript:void(0)" class="bottom">置底</a></td> </tr> <tr> <td>4</td> <td>内容四</td> <td><a href="javascript:void(0)" class="top">置顶</a> <a href="javascript:void(0)" class="upbtn">上</a> <a href="javascript:void(0)" class="downbtn">下</a> <a href="javascript:void(0)" class="bottom">置底</a></td> </tr> <tr> <td>5</td> <td>内容五</td> <td><a href="javascript:void(0)" class="top">置顶</a> <a href="javascript:void(0)" class="upbtn">上</a> <a href="javascript:void(0)" class="downbtn">下</a> <a href="javascript:void(0)" class="bottom">置底</a></td> </tr> </tbody> </table> <a href="javascript:void(0)" οnclick="javascript:cancleRank();">取消排序</a> </body> <script type="text/javascript"> $(document).ready(function () { //上移 var $upbtn = $(".upbtn") $upbtn.click(function() { var $tr = $(this).parents("tr"); if ($tr.index() != 0) { $tr.fadeOut().fadeIn(); $tr.prev().before($tr); $tr.css("color","#f60"); colorcancel(); } }); //下移 var $downbtn = $(".downbtn"); var len = $downbtn.length; $downbtn.click(function() { var $tr = $(this).parents("tr"); if ($tr.index() != len - 1) { $tr.fadeOut().fadeIn(); $tr.next().after($tr); $tr.css("color","#f60"); colorcancel(); } }); //置顶 var $top = $(".top"); $top.click(function(){ var $tr = $(this).parents("tr"); if ($tr.index() != 0) { $tr.fadeOut().fadeIn(); $("tbody").prepend($tr); $tr.css("color","#f60"); colorcancel(); } }); //置底 var $bottom = $(".bottom"); var length = $bottom.length; $bottom.click(function(){ var $tr = $(this).parents("tr"); if ($tr.index() != length-1) { $tr.fadeOut().fadeIn(); $("tbody").append($tr); $tr.css("color","#f60"); colorcancel(); } }); }); //初始化列表 var initList = [], domArr = []; $('tbody tr').each(function(a){ initList[a] = $(this).html(); }) //取出所有tr放进数组 function getDom(){ $('tbody tr').each(function( m ){ domArr[m] = $(this); }); } //取消排序 function cancleRank(){ getDom(); $.each(initList,function(b){ $.each(domArr,function(c){ if(domArr[c].html() == initList[b]){ $('table tbody').append(domArr[c]); } }); }); $('tbody tr').each(function(){ $(this).css("color",""); }) } //取消颜色高亮 function colorcancel(){ $('tbody tr').each(function(){ var index = $(this).index()+1; var serialnumber = $(this).find("td:first").text(); if(index == serialnumber){ $(this).css("color",""); } }); } </script> </html> </pre><br> <br> <pre></pre>张一博
// 2.4置顶 $("#but button:eq(2)").click(function(){ var ding =$("#wrap ul input[type='checkbox']:checked").parents("li"); $("#wrap ul").prepend(ding); });// 2.3取消置顶
$("#but button:eq(3)").click(function(){ $("input:checked").each(function () { // 因为可能会有多选 找到选中的input 遍历 每次都是根据他自己的value找到他之前的那个位置并插进去 $("#wrap ul li").eq($(this).attr("value")-1).after($(this).parents("li")); }) }); 张一博var slide_Down = function () { $(this).addClass("active").children("a").css("color", "#FFF"); $(".header-menu").stop(false, true).eq($(this).index()).slideDown(300)}; // 找到已经点过的active将他子元素div收起 $(".header-bottom-ul").find("li.active>div").slideUp(50); if ($(this).hasClass("active")) { $(this).removeClass("active"); if ($(this).index() !== 4) { $(this).children("a").css("color", "#000") } else { $(this).children("a").css("color", "#c21e2e") } } else if (!$(this).hasClass("active")) { $(".header-menu").eq($(this).index()).slideDown(300); $(this).addClass("active").siblings("li").removeClass("active"); if ($(this).index() !== 4) { $(this).parent().children("li").eq(4).children("a").css("color", "#c21e2e").parent().siblings("li") .children("a").css("color", "#000"); $(this).children("a").css("color", "#FFF") } else { $(this).children("a").css("color", "#FFF").parent().siblings("li").children("a").css("color", "#000"); } }自己做的滑入滑出
<ul id="sharp"> <li><button>第一块</button><div class="one">我们是第一块的内容啊</div></li> <li><button>第二块</button><div class="two">我们是第二块的内容啊</div></li> </ul>//滑动
#sharp{ li{ float: left; list-style:none; position: relative; width: 200px; height: 140px; border:1px solid pink; button{ float: left; position: absolute; top:0; left:0; height: 40px; width: 200px; } div{ //display: inline-block; width: 400px; height: 100px; border:1px solid black; position: absolute; top:40px; left:0; display: none; background: #aaa; &.two{ left:-200px; background: #bbb; } } }} // 滑动$("#sharp li").hover(function(){
$("#sharp div").eq($(this).index()).slideDown(300); console.log($("#sharp div").eq($(this).index()));},function () { $("#sharp div").eq($(this).index()).slideUp(300);})2.获得页面宽度
var content = $(‘div’). width();//只是获取content宽度var contentWithPadding = $(‘div’). innerWidth();//获取content+padding的宽度
var withoutMargin = $(‘div’). outerWidth();//获取content+padding+border的宽度
var full = $(‘div’). outerWidth(true);//获取content+padding+border+margin的宽度
阴影（1）输入框内阴影.shadow （ -moz-box-shadow: inset 0 0 10px #CCC; -webkit-box-shadow: inset 0 0 10px #CCC; box-shadow: inset 0 0 10px #CCC;）（2）简单效果
.one （ -moz-box-shadow:5px 5px; -webkit-box-shadow:5px 5px; box-shadow:5px 5px;）（3）虚阴影效果
.two （ -moz-box-shadow:2px 2px 10px #06c; -webkit-box-shadow:2px 2px 10px #06c; box-shadow:2px 2px 10px #06c;）（4）渐变阴影效果
.three （ -moz-box-shadow:0 0 10px #06c; -webkit-box-shadow:0 0 10px #06c; box-shadow:0 0 10px #06c;）（5）带光晕效果
.four （ -moz-box-shadow:0 0 10px 10px #06c; -webkit-box-shadow:0 0 10px 10px #06c; box-shadow:0 0 10px 10px #06c;）（6）内阴影效果
.five （ -moz-box-shadow:inset 5px 5px 10px #06c; -webkit-box-shadow: inset 5px 5px 10px #06c; box-shadow: inset 5px 5px 10px #06c;）（7）彩色阴影
.six （ -moz-box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green; -webkit-box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green; box-shadow:0 0 10px red, 2px 2px 10px 10px yellow, 4px 4px 12px 12px green;）8.自己做的小三角加阴影 .jian{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 60px; height: 40px; border:20px solid transparent; border-left: 40px solid #e52142; position: absolute; top:0; right:-60px; filter: drop-shadow(5px 7px 3px #333);}
9.input
//默认没有小三角 input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } 默认显示有的 input::-webkit-inner-spin-button { opacity: 1; } 10.input的提示placeholder <input type="text" placeholder="请输入你要输入的关键字" οnfοcus="this.placeholder=''" οnblur="this.placeholder='请输入你要输入的关键字'"> &::placeholder{ letter-spacing: 2px; text-indent:5px;
11.函数节流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 100%; height: 200px; border: 1px solid #646464; color: #000000; } </style></head><body> <button οnclick="btn()">123</button> <div id="container"></div></body><script src="jquery-3.2.1.js"></script><script> var first = true; t = setTimeout("console.log('aaa')",2000)function btn() { if (first){ first = false; t = setTimeout("console.log('aaa')",2000) } else { clearTimeout(t); t = setTimeout("console.log('aaa')",2000) }}function alertSomething(){ alert("您的鼠标正在移动"); }; document.getElementById("container").onmousemove = alertSomething;</script></html>