至今我都不能说把 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");
})

  

jQuery 中让我误解的那些方法的更多相关文章

  1. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  2. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  3. jquery中获取iframe的id的方法:

    jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...

  4. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  5. jquery中隐藏div的几种方法

    //jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示disp ...

  6. JQuery中serialize()、serializeArray()和param()方法示例介绍

    在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...

  7. js原生态函数中使用jQuery中的 $(this)无效的解决方法

    原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...

  8. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  9. jQuery中动态创建、添加元素的方法总结

    <input type="button" value="创建元素" id="btn"> <div id="box ...

随机推荐

  1. 一个简单的servlet容器

    [0]README 0.1)本文部分文字转自 “深入剖析Tomcat”,旨在学习  一个简单的servlet容器  的基础知识: 0.2)for complete source code, pleas ...

  2. oracle高水位

    oracle高水位http://www.cnblogs.com/chuyuhuashi/p/3548260.htmlhttp://blog.csdn.net/wyzxg/article/details ...

  3. postman-变量/环境/过滤等

    之前虽然自己也有用postman来测试api,但都只是最简单输入url,发送,查看结果,大部分时候跟使用浏览器差不多,偶然在简书首页看到一篇 API开发神器-Postman , 深感还是得对自己使用的 ...

  4. jq中prop和attr的区别以及各自的使用

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  5. 生产者——消费者模型的java代码实现

    生产者 import java.util.Random; public class Producer extends Thread { private Storage<Product> s ...

  6. CodeIgniter 入门教程第一篇:信息发布

    一.MVC CodeIgniter 采用MVC架构即:控制层.模型层和视图层. 对应Application下面的文件夹   (图1): 所有新建文件以.php结尾 视图层 view 文件夹放入HTML ...

  7. using 关键字的使用

    using 关键字的使用主要分为两种类型:using declaration(using 声明)和using directive(using 命令): using 声明:引入特定名称空间中的一个成员. ...

  8. getParameterMap的使用

    就是前端提交到Servlet或者Action里面的参数Map哈,如果你是以表单提交,那么request.getParameterMap()中将包含你表单里面所有input标签的数据,以其name为ke ...

  9. 《挑战程序设计竞赛》2.1 穷竭搜索 POJ2718 POJ3187 POJ3050 AOJ0525

    POJ2718 Smallest Difference Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6509   Acce ...

  10. 关于Apache Shiro权限框架的一些使用误区的解释

    多了不说了,进入正题,shiro是个权限框架提供权限管理等功能,网上的教程一般都是互相抄,比如<shiro:principal property="xxx"/>这个标签 ...