最近项目中经常用到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() 用好的真的非常方便,帮了我一个大忙今天。