jQuery 细节知识点1的文章为:
http://blog.csdn.net/u010533180/article/details/53513782
11 append方法
jquery中的append方法中如果存在相同的引用,则进行替换操作。
如下例子:
var $div = $("#divLi");
var $ul = $("<ul></ul>");
var $li = $("<li></li>").attr("value", 2).text(2).click(function () {
alert($(this).attr("value"))
});
$ul.append($li);
$div.append($ul);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
页面展示效果为:
如果是下面的代码:
var $div = $("#divLi");
var $ul = $("<ul></ul>");
var $li = $("<li></li>").attr("value", 2).text(2).click(function () {
alert($(this).attr("value"))
});
$ul.append($li);
$div.append($ul);
$li.attr("value", 3).text(3);
$ol.append($li);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
页面展示效果为:
可见append对同一个引用进行的是替换操作。
需要注意的是$("<li><li>")
这种写法是创建两个相同的li对象。
12 jquery li 给value赋值时包含,$,#等时获取的值可能不对
直接例子说话
var $div = $("#divLi");
var $ul = $("<ul></ul>");
var value = "a1,2";
var $li = $("<li></li>").attr("value", value).text(value).click(function () {
alert($(this).attr("value"))
});
$ul.append($li);
$div.append($ul);
console.log("li attr value:" + $li.attr("value"));
console.log("li method value:" + $li.val());
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
结果为:
页面展示效果
控制台输出效果
弹窗效果
对于像这种value中包含特殊符号的,尽量使用html拼接进行操作。
13 循环添加大量新元素时,可以先创建一个隐藏元素,然后把这个隐藏元素添加到最终的元素,最后展现,这样可以减少页面dom的重写绘制操作。
例如:
正常的做法为:
var $div = $("#divLi");
var $ul = $("<ul></ul>");
for (var i = 0; i < 10000; i++) {
var $li = $("<li></li>").attr("value", i).text(i).click(function () {
alert($(this).attr("value"))
});
$ul.append($li);
}
$div.append($ul);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
高效的方法为:
var $div = $("#divLi");
var $ul = $("<ul></ul>");
$ul.hidden();
for (var i = 0; i < 1000; i++) {
var $li = $("<li></li>").attr("value", i).text(i).click(function () {
alert($(this).attr("value"))
});
}
$ul.append($li);
$ul.show();
$div.append($ul);