jQuery 中一些你可能忽略的知识点（2）-职坐标

jQuery 中一些你可能忽略的知识点（2）

沉沙 2018-07-18 来源：阅读 1668 评论 0

摘要：本篇jQuery教程探讨了jQuery 中一些你可能忽略的知识点，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

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

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！

jquery教程百度云 jquery参考手册 jquery离线手册下载

本文由 @沉沙发布于职坐标。未经许可，禁止转载。