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");
})
jQuery 中让我误解的那些方法的更多相关文章
- Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- jquery中获取iframe的id的方法:
jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- jquery中隐藏div的几种方法
//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block, $("#id").hide()://表示disp ...
- JQuery中serialize()、serializeArray()和param()方法示例介绍
在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...
- js原生态函数中使用jQuery中的 $(this)无效的解决方法
原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
- jQuery中动态创建、添加元素的方法总结
<input type="button" value="创建元素" id="btn"> <div id="box ...
随机推荐
- 一个简单的servlet容器
[0]README 0.1)本文部分文字转自 “深入剖析Tomcat”,旨在学习 一个简单的servlet容器 的基础知识: 0.2)for complete source code, pleas ...
- oracle高水位
oracle高水位http://www.cnblogs.com/chuyuhuashi/p/3548260.htmlhttp://blog.csdn.net/wyzxg/article/details ...
- postman-变量/环境/过滤等
之前虽然自己也有用postman来测试api,但都只是最简单输入url,发送,查看结果,大部分时候跟使用浏览器差不多,偶然在简书首页看到一篇 API开发神器-Postman , 深感还是得对自己使用的 ...
- jq中prop和attr的区别以及各自的使用
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- 生产者——消费者模型的java代码实现
生产者 import java.util.Random; public class Producer extends Thread { private Storage<Product> s ...
- CodeIgniter 入门教程第一篇:信息发布
一.MVC CodeIgniter 采用MVC架构即:控制层.模型层和视图层. 对应Application下面的文件夹 (图1): 所有新建文件以.php结尾 视图层 view 文件夹放入HTML ...
- using 关键字的使用
using 关键字的使用主要分为两种类型:using declaration(using 声明)和using directive(using 命令): using 声明:引入特定名称空间中的一个成员. ...
- getParameterMap的使用
就是前端提交到Servlet或者Action里面的参数Map哈,如果你是以表单提交,那么request.getParameterMap()中将包含你表单里面所有input标签的数据,以其name为ke ...
- 《挑战程序设计竞赛》2.1 穷竭搜索 POJ2718 POJ3187 POJ3050 AOJ0525
POJ2718 Smallest Difference Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6509 Acce ...
- 关于Apache Shiro权限框架的一些使用误区的解释
多了不说了,进入正题,shiro是个权限框架提供权限管理等功能,网上的教程一般都是互相抄,比如<shiro:principal property="xxx"/>这个标签 ...