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

  

 

posted on 2016-09-23 15:38  永恒的浪荡时光  阅读(233)  评论(0编辑  收藏  举报

导航