jq-特效

前言-由于最近在学习jq，就用jq来实现这个特效，如果我们要用原生的js来实现这个特效的话，我感觉我们要书写的js代码的代码量会变得很大！下面的特效我都会采用jq来实现

特效-1

html部分

<ul>
    <li>1.<button>上移</button><button>下移</button></li>
    <li>2.<button>上移</button><button>下移</button></li>
    <li>3.<button>上移</button><button>下移</button></li>
    <li>4.<button>上移</button><button>下移</button></li>
    <li>5.<button>上移</button><button>下移</button></li>
</ul>

一个ul标签里面包含5个li标签，每个li里面有两个按钮来控制当前li的上移和下移

实现思路：

我们点击当前按钮，如果点击上移，就将当前按钮的父节点添加到当前节点的父节点的前一个节点的前面，反之如果是下移的话，那么就是将当前按钮的父节点添加到当前节点的父节点的下一个节点的后面
js代码：

$(document).ready(function() {
    $('ul').find('button:even').click(function() {
        // 在当前节点的父节点的上一个节点的前面插入当前节点
        $(this).parent().prev().before($(this).parent())
    })

    $('ul').find('button:odd').click(function() {
        $(this).parent().next().after($(this).parent())
    })
})