jQuery 中让我误解的那些方法

至今我都不能说把 jQuery 中的方法在实践中都用了一遍，

一部分是用不到，一部分则是我未能体会它的魅力，

所以今天就来收录一下，那些从我们之间溜走的美丽。

 

$.fn.add()

一开始对它的理解就是 $("p").add("span") 等同于 $("p, span") 而已，

而其实不然，$.fn.add() 更多的用在链式结构上，看两个例子就懂了。

// 不但克隆 p，还在加上一个 span
$("p").clone().add("<span>Again</span>").appendTo(document.body);
// 所有的 div 加上边框和背景，p 也跟着加了个背景
$("div").css("border", "2px solid red").add("p").css("background", "yellow");

 

$.queue() 和 $.dequeue()

这个和 $.fn.queue() 并不一样哟，$.queue() 不只能运用在 jquery 动画当中，乃至可以方便地改变运行顺序/延时等。

这是个非常 nice 的方法，但我想以后再细讲，那样就可以又多一篇文章了，哈，✧٩(ˊωˋ*)و✧

 

$.fn.remove() / $.fn.detach() / $.fn.empty()

官方文档就给出了很好的解释，

$.fn.detach() 与 $.fn.remove() 不同的是，所有绑定的事件、附加的数据等都会保留下来。

而 $.fn.empty() 则是清空所有子节点，与 dom.innerHTML = "" 和 $.fn.html("") 相比更彻底，还删掉了 cache 和事件，后两者明显简单粗暴得多。

 

$.fn.attr() 和 $.fn.prop()

这个错误可以说伴随了我好几年，实在惭愧...

显然设置那些“本土”属性，$.fn.prop() 实在好太多了，当初寻找为什么设了 selected 还是显示第一项着实急死人。

// $.fn.prop() 适用于 HTML 元素本身就带有的固有属性的处理
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

// $.fn.attr() 就更适合你瞎搞了
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

　　

$.fn.closest() 和 $.fn.parents()

官方文档如斯说： $.fn.closest() 和 $.fn.parents() 的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

// 使用 $.fn.closest() 可以很好地避免想点的是 li 结果 e.target 是子级 a 的情况哟
$("li").on("click",function(e){
　　console.log(e.target);
　　console.log($(e.target).closest("li"));
});

　　

再来点小玩意儿：

$.when().then() 可以轻松解决回调，就是回调后的参数烦了点

$.when($.ajax("/page1.php"), $.ajax("/page2.php")) .then(myFunc, myFailure);

 

操作 iframe 里的元素，但这得 iframe 加载完才行，但如何检测它是否加载完成博主就不知道了，求指教

$(window).on("click",function(){
　　$("iframe").contents().find("body").html("I'm in an iframe!");
});

补充，后来检测 iframe 加载完成的方法还是找到了，但感觉并不好，但还是先分享出来吧

<iframe id="iframe" data-src="http://www.baidu.com"></iframe> 

$.fn.iframeLoaded = function(callback) {
　　return this.each(function(){
　　　　iframeLoaded(this, callback);
　　});
};
function iframeLoaded(elem, callback) {  
    iframe = typeof elem === "string" ? document.querySelector(elem) : elem;
    iframe.src = iframe.getAttribute("data-src");
    iframe.onload = iframe.onreadystatechange = function() {
        if (!iframe.readyState || iframe.readyState == "complete") {
            if (callback) callback();
        }
    }
}
$("iframe").iframeLoaded(function(){
    alert("ok");
})