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

页面展示效果为:

如果是下面的代码:

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

页面展示效果为:

可见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());

结果为:
页面展示效果

控制台输出效果

弹窗效果

对于像这种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);

高效的方法为:

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