jquery append,each,empty,remove方法总结

本文链接：https://blog.csdn.net/wusuopuBUPT/article/details/9861361

最近项目中经常用到jquery，周末做个小结。

1. .append()方法

/*this part of code addes a new li include img and link*/
            var li_start = $('<li class="sortable_img">');
           // $('#preview_image').append(li_start);
            
            var img = $('<img class="upload_img"/>').attr('src', data);
           // $("#preview_image").append(img);
            
            var del_link = $('<a class="del_link">X</a>').attr({
                href : '#',
                name : data
            });            
            //$("#preview_image").append(del_link); 

            $('ul#preview_image').append(
            	    li_start.append(
            	        img.append(),del_link.append()           
            ));

注意append方法有bug，可以用这种方法代替：

$('#preview_image_urls').val($('#preview_image_urls').val() + data + "\n");

其实，上面的语句就是append方法的实现原理，不过是返璞归真罢了，反而更加有效率。

2.jqueryUI的.sortable()方法

官网：http://api.jqueryui.com/sortable/

$('ul#preview_image').sortable({
 				stop: function(event, ui) {
 					$('#preview_image_urls').val("");
 					$('.upload_img').each(function(){
 		    			urls = $(this).attr("src") + "\n";
 		    			$('#preview_image_urls').val($('#preview_image_urls').val() + urls);
 					});	
 	 				var new_urls = $('#preview_image_urls').val();
					console.log(new_urls)
 	 			}
   			});

3. .each() 方法（在上面的code中有展示，不再赘言）。

4. .empty()方法和.remove()方法

empty()是只移除了指定元素中的所有子节点，拿$("p").empty()来说，他只是把<p>dsfsd</p>中的文本给移除了，而留下了<p></p>,仍保留其在dom中所占的位置。remove()则是把其从dom中删除，而不会保留其所占的位置。
demo: