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

最近项目中经常用到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:

<p>Hello</p>
World
<p>welcome</p> 

执行$("p").empty()其结果是

<p></p>
World
<p></p>

执行$("p").remove()其结果是
World

常见的就折磨多，其余再补充。

.each() 用好的真的非常方便，帮了我一个大忙今天。