jq实现置顶
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq实现置顶相关的知识，希望对你有一定的参考价值。
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)" onclick="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="请输入你要输入的关键字" onfocus="this.placeholder=‘‘" onblur="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 onclick="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>
以上是关于jq实现置顶的主要内容，如果未能解决你的问题，请参考以下文章