jQuery 中一些细节知识点2(本文会持续更新)

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);