jquery列表操作

Html

Css


		
		
		
		
	

    
        
        用玻璃做个椒盐饼？这是新技术展示
        上移
        下移
        置顶
        置底
        删除
    
    
        
        为什么迷信也是民俗的研究对象之一？
        上移
        下移
        置顶
        置底
        删除
    
    
        
        地铁会被暴雨淹没吗？如何自救？
        上移
        下移
        置顶
        置底
        删除
    
    
        
        如何优雅地成为德意志古典哲学的追随者
        上移
        下移
        置顶
        置底
        删除
    
    
        
        什么？你把瓷器上的图案抹掉了?
        上移
        下移
        置顶
        置底
        删除

       .active{
            background: #ccc;
        }

$(function() {
     //上移
     var $Up = $(".up");
     $Up.click(function() {
         var $oP = $(this).parents("p");
         $oP.fadeOut().fadeIn();
         $oP.addClass("active").siblings().removeClass("active");
         $oP.prev().before($oP); //prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
     }); //before() 方法在被选元素前插入指定的内容。  语法：$(selector).before(content)

//下移
     var $Down = $(".down");
     $Down.click(function() {
         var $oP = $(this).parents("p");
         $oP.fadeOut().fadeIn();
         $oP.addClass("active").siblings().removeClass("active");
         $oP.next().after($oP); //after() 方法在被选元素后插入指定的内容。
     })

//置顶
     var $Top = $(".top");
     $Top.click(function() {
         var $oP = $(this).parents("p");
         $oP.fadeOut().fadeIn(); //fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。// fadeIn() 用于淡入已隐藏的元素。
         $oP.addClass("active").siblings().removeClass("active");
         $("div").prepend($oP); //prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
     });

//置底
     var $Bottom = $(".bottom");
     $Bottom.click(function() {
         var $oP = $(this).parents("p");
         $oP.fadeOut().fadeIn();
         $oP.addClass("active").siblings().removeClass("active");
         $("#main").append($oP);
     })

//删除
     var $Delete = $(".delete");
     $Delete.click(function() {
         var $oP = $(this).parents("p");
         $oP.fadeOut().fadeIn();
         $oP.addClass("active").siblings().removeClass("active");
         $oP.remove();
     });

//全选
     $("button").eq(0).click(function() {
         $("input").attr("checked", true); //attr() 方法设置或返回被选元素的属性值。
     });

//不选
     $("button").eq(1).click(function() {
         $("input").attr("checked", false);
     });

//反选
     $("button").eq(2).click(function() {
         $("input").each(function() {
             $(this).attr("checked", !$(this).attr("checked")); //这个厉害了
         })
     });

//删除
     $("button").eq(3).click(function() {
         $("input[checked]").parents("p").remove(); //parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
         //remove() 方法移除被选元素，包括所有文本和子节点。
     })
 })

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.7.2

立即下载

jquery列表操作



代码描述：jquery上移，下移，置顶，置底，全选，反选，不选，移除

3

最新

发表评论全部评论

暂时没有评论！

小黄0

2019/3/1 10:35:00

好使吗？

areyouOk0

2019/3/1 10:39:55

非常好用，可以说是棒极了

回复

拿铁0

2017/6/27 13:35:22

简单实用
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

淡而久香

相关代码

jquery列表操作

最新