JQuery实现项目的左移和右移。

左移与右移

编写网页，设置CSS完成左移右移的结构和样式设置。

通过层级选择器和表单选择器获取选中的 *** 作项。

通过append()方法将匹配到的内容追加到指定元素的尾部。

效果如下：

左移和右移和全部 左移和右移效果实现。

代码如下：

HTML部分：

    
        
            
                可选项
                
                    添加
                    移动
                    修改
                    查询
                    打印
                    删除
                
            
            
                >
                <
                >>
                <<
            
            
                已选项
                
                
            
        
    

css部分代码如下：

JQuery部分代码如下：

记得加入script引入jquery 的js文件

改进代码，或者说是另一种写法，基本原理使用选中的项目给他增加类名和删除类名。

这次直接写全部的代码：

    
    
    
    
    




    
        
            可选项
            
                添加
                移动
                修改
                查询
                打印
                删除
            
        
        
            >
            <
            >>
            <<
        
        
            已选项
            
            
        
    


    
    

记得引入JQuery文件。

用到JQuery里面的DOM *** 作。

相关知识点：

DOM节点 *** 作 1.节点追加

节点追加指的是在现有的节点树中，进行父子或兄弟节点的追加

父子节点添加指的是在匹配到的元素内部添加指定的content内容。

兄弟节点指的是在匹配到的元素外部添加指定的content内容。

语法	作用	说明
父子节点	append(content)	把content内容追加到匹配的元素内容尾部
父子节点	prepend(content)	把content内容追加到匹配的元素内容头部
父子节点	appendTo(content)	把匹配到的内容插入到content内容的尾部
父子节点	prependTo(content)	把匹配到的内容插入到content内容的头部
兄弟节点	after(content)	把content内容插入到元素的尾部
兄弟节点	before(content)	把content内容插入到元素的头部
兄弟节点	insertAfter(content)	把所有匹配的内容插入到content元素的尾部
兄弟节点	insertBefore(content)	把所有匹配的内容插入到content元素的头部

2 节点替换

节点替换是指将选中的节点替换为指定的节点

语法	说明
replaceWith(content)	将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)	用匹配的元素替换掉所有selector匹配到的元素

replaceWith()方法的参数是一个函数时，它的返回值类型必须是字符串类型，用于完成指定元素的替换 *** 作。

3 节点删除

语法	说明
empty()	清空元素的内容，但不删除元素本身
remove([expr])	清空元素的内容，并删除元素本身（可选参数expr用于筛选元素）
detach([expr])	从DOM中删除所有匹配的元素（保留所有绑定的事件、附加的数据等）

empty()方法仅能删除匹配元素的文本内容，而元素节点依然存在。

remove()方法则可以同时删除匹配元素本身和文本内容。

4 节点复制

语法	说明
clone([false])	复制匹配的元素并且选中这些复制的副本，默认参数为false
clone(true)	参数设置为true时，复制元素的所有事件处理

开发中若在复制元素节点时，想要同时复制该节点的所有事件的处理，则可以将clone()方法的 *** 作设置为true，否则节点复制时使用默认 *** 作false即可。