時間(jiān)：2023-02-23 浏覽量： 收藏
通(tōng)過Jquery控制(zhì)元素上下移動，進行(xíng)排序是(shì)比，功能齊全的實現(xiàn)方式。
下面是(shì)基礎的引入jq和html元素部分(fēn)：
簡體(tǐ)中文
繁體中文
<script src="static/js/jquery-1.10.2.js"></script>
<style type="text/css">
.content{
float : left;
height: 245px;
width : 400px;
}
.content p{
background: #eee;
border:1px #000 solid;
height: 30px;
width: 100%;
}
.right{
float: left;
margin-left: 10px;
height: 245px;
width: 100px;
padding: 5px;
margin-top: 84px;
}
.right div{
width: 85px;
height: 50px;
margin: 7px;
text-align: center;
background: #00BCD4;
border-radius: 4px;
cursor: pointer;
line-height: 3;
}
</style>
<body> <div class="content">
<p data="false">001</p>
<p data="false">002</p>
<p data="false">003</p>
<p data="false">004</p>
<p data="false">005</p>
<p data="false">006</p>
<p data="false">007</p>
<p data="false">008</p>
<p data="false">009</p>
</div> <div class="right">
<div onclick="goup()">上移到頂部</div>
<div onclick="up()">上移</div>
<div onclick="down()">下移</div>
<div onclick="godown()">下移到尾部</div>
</div> </body>下方代碼爲js 部分(fēn)：
var domp=$('p');
$(document).ready(function(){
$("p").on("click",function(){
var ok=$(this).attr('data');
for (var i = 0; i < domp.length; i++) {
if(domp[i]!=this){
$(domp[i]).attr('data','false');
$(domp[i]).css("background-color","#eee");
}
}
if(ok=="true"){
$(this).attr('data',"false");
$(this).css("background-color","#eee");
}else{
$(this).attr('data',"true");
$(this).css("background-color","pink");
}
});
})
/**
* 連續向上
*/
function goup(){ $.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).prev().size()>0){
$(t).parent().children("p:first-child").before(t);
}
}
})
}
/**
* 向上移動
*/
function up(){
console.log(domp.children())
$.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).prev().size()>0){
$(t).prev().before(t);
}
}
})
}
/**
* 向下移動
**/
function down(){
$.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).next().size()>0){
$(t).next().after(t);
}
}
})
}
/**
* 連續向下移動
**/
function godown(){
$.each(domp,function(i,t){
var fl=$(t).attr('data');
if(fl=="true"){
if($(t).next().size()>0){
$(t).parent().children("p:last-child").after(t);
}
}
})
}上述代碼解析：
$(document).ready（）,$('p').on（'click',function(){}）是(shì)jq比較常用的綁定事件(jiàn)方法，當然還有off()清除事件(jiàn)方法，對這(zhè)個不(bù)了解的同學可(kě)以普及一下知識點。
<p data="false">001</p> 和var ok=$(this).attr('data'); 這(zhè)種寫法，在jq控制(zhì)元素中很(hěn)常見(jiàn)，其特點就(jiù)是(shì)給元素綁一個屬性，屬性可(kě)以随便起個名字。在這(zhè)裡(lǐ)，我是(shì)用來(lái)控制(zhì)元素是(shì)否被選中的，以及用for循環控制(zhì)職能單選。
$(t).prev()是(shì)點擊元素的上一個兄弟節點，jq.before（t）方法是(shì)在某個元素jq的上面插入t元素；
$(t).next()獲取的事點擊元素的下個節點，jq.after（t）方法在某個元素jq的下面插入t元素。效果圖：
RELATED RECOMMEND
2023-02-23
外(wài)貿電(diàn)商領域 Twitter 已成爲一種極具潛力的推廣工(gōng)具，能夠爲外(wài)貿網站(zhàn)快(kuài)速導入大(dà)量流量，是(shì)外(wài)貿電(diàn)商發展的時代趨勢。一、将 Twitter 和外(wài)貿網站(zhàn)關聯起來(lái)（一）添加 Twitter 分(fēn)享按鈕在網站(zhàn)添加 Twitter 分(fēn)享按鈕意義重大(dà)。這(zhè)不(bù)僅方便客戶将網站(zhàn)産品、內(nèi)容分(fēn)享到他們自(zì)己的 Twitter，更關鍵的是(shì)，每當網站(zhàn)更新産品或文章時，我們自(zì)己要(yào)把更新內(nèi)容分(fēn)享到自(zì)己的 Twitter 上。如
2023-02-23
在當今的網絡世界中，富媒體(tǐ)對于大(dà)家(jiā)來(lái)說早已不(bù)是(shì)什麽新鮮事物(wù)，特别是(shì)谷歌(gē)廣告中頻繁出現(xiàn)的富媒體(tǐ)展示形式，那真是(shì)令人(rén)眼花缭亂。然而，你可(kě)能不(bù)知道(dào)的是(shì)，在自(zì)然排名結果裡(lǐ)同樣蘊含着豐富多(duō)樣的富媒體(tǐ)內(nèi)容。這(zhè)些富媒體(tǐ)元素就(jiù)像是(shì)一把神奇的鑰匙，即使我們的網站(zhàn)在搜索結果中處于較低(dī)排名（比如首頁非前三的位置），也能憑借它們開(kāi)啓獲取更多(duō)用戶互動的大(dà)門，讓原本激烈的關鍵詞排名競争變得不(bù)再那麽殘酷。那麽，作爲 SEO 從(cóng)
2023-02-23
外(wài)貿網站(zhàn)提示用戶是(shì)否接受cookie是(shì)因爲cookie對網站(zhàn)及用戶都有好處，但(dàn)同時也可(kě)能對用戶的隐私造成影響。Cookie是(shì)一種小(xiǎo)型文檔，由網站(zhàn)發送到用戶的設備上，用于記錄用戶的行(xíng)爲和偏好，從(cóng)而提供個性化(huà)的浏覽體(tǐ)驗。它們可(kě)以記錄用戶的登錄狀态、購(gòu)物(wù)車信息等，以便用戶下次訪問(wèn)時無需重新輸入。同時，cookie還幫助網站(zhàn)分(fēn)析用戶行(xíng)爲，如頁面浏覽量、停留時間(jiān)和點擊次數等，爲網站(zhàn)
Copyright © 2012-2024 世敏網絡 版權所有 京ICP證000000号 
閩公網安備 35020502000640号
關鍵詞聚合
