jQuery 使用注意事项 与 小技巧（tips）

1

$( document ).ready()

https://learn.jquery.com/using-jquery-core/document-ready/

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

1
2
3
4
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});

Experienced developers sometimes use the shorthand $() for $( document ).ready(). If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.

1
2
3
4
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});

You can also pass a named function to $( document ).ready() instead of passing an anonymous function.

1
2
3
4
5
6
7
8
9
// Passing a named function instead of an anonymous function.
 
function readyFn( jQuery ) {
// Code to run when the document is ready.
}
 
$( document ).ready( readyFn );
// or:
$( window ).load( readyFn );

The example below shows $( document ).ready() and $( window ).load() in action. The code tries to load a website URL in an <iframe> and checks for both events:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});
 
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body>
<iframe src="http://techcrunch.com"></iframe>
</body>
</html>

1

$ 符号与其他框架的混合使用，产生的冲突的避免方式：

《1》jQuery 在其他库之后导入

method: 1

//将变量$的控制权，让渡给prototype.js(一种js框架)

jQuery.noConflict();

//使用 jQuery(), 代替$()方法

jQuery(function(){

	//do some things

});

method: 2

// 自定义一个快捷方式：

var $x = jQuery.noConflict();

$x (function(){

    //do some things

    //函数内部使用$x()方法,代替$()方法

})

method: 3

//将变量$的控制权，让渡给prototype.js(一种js框架)

jQuery.noConflict();

//使用 jQuery设置页面加载时的执行函数

jQuery(function($){

	//do some things

	//函数内部正常使用$()方法

});

method: 4

/*

	最理想的方式，通过改变少量的代码，实现最全面的兼容性！

*/

//将变量$的控制权，让渡给prototype.js(一种js框架)

jQuery.noConflict();

//定义匿名函数，并设置形参为$

//匿名函数内部的$ == jQuery

(function($){

	$(function(){

		//do some things

		//可以正常使用$()方法

	});

})(jQuery);

//执行匿名函数，且传递实参jQuery

《2》jQuery 在其他库之前导入

method: 5

//不需要调用jQuery.noConflict();

//可以使用$()方法作为其他框架/库的快捷方式

//直接使用 jQuery(), 代替$()方法

jQuery(function(){

	//do some things

	//使用 jQuery(), 代替$()方法

});

1

1

 

jQuery 使用注意事项 与 小技巧（tips）的更多相关文章

  1. 编写css相关注意事项以及小技巧

    一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...

  2. 在Android中使用am和input命令在实际使用中的注意事项以及小技巧

    在Android使用到am和进行一些操作是非常方便的,比如一个重复自动的操作,具体用来实现一些什么是看个人需求了,接下来说对于am和input的使用. 本文适用于已经大概去了解了am和input的朋友 ...

  3. 人人必知的10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...

  4. 26个jQuery使用小技巧(25)

     下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元 ...

  5. Jquery 小技巧

    [每个程序员都会的35个jQuery的小技巧]收集的35个jQuery的小技巧/代码片段,可以帮你快速开发

  6. 10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...

  7. 前端程序员应该知道的15个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  8. （译）你应该知道的jQuery小技巧

    帮助提高你jQuery应用的简单小技巧 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简 ...

  9. 程序员都会的 35 个 jQuery 小技巧

    收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...

随机推荐

  1. 初审blucms(入坑)

    作为一名初来乍到审计小白,从blueCMS入手再好不过了.通过对入门级的cms进行审计以及一个整体的框架和常见的漏洞学习,对个人而言是一次不错的学习经历.话不多说直接进入主题. 代码审计环境 Blue ...

  2. 手写Netty之多路复用Select小案例

    注意:本文只是将上文多路复用器Select.Poll.Epoll区别梳理中提出的概念与Netty中的步骤联系起来,方便后面回顾,代码中注释很多,对于大家来说如果不是怀有同样的目的,不一定有用. 单线程 ...

  3. 为了更好的多线程性能，在对象创建或者更新时，若数据大于2047字节则 Python 的 GIL 会被释放。 执行计算密集型任务如压缩或哈希时释放 GIL

    hashlib - Secure hashes and message digests - Python 3.8.3 documentation https://docs.python.org/3.8 ...

  4. setTimeout、Promise、Async/Await 的区别

    事件循环中分为宏任务队列和微任务队列其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码 ...

  5. loj10161 叶子的颜色

    CQOI 2009 给一棵有 mm 个节点的无根树,你可以选择一个度数大于 11 的节点作为根,然后给一些节点(根.内部节点.叶子均可)着以黑色或白色.你的着色方案应保证根节点到各叶子节点的简单路径上 ...

  6. K8s client 使用

    使用的k8s client包: <dependency> <groupId>io.fabric8</groupId> <artifactId>kuber ...

  7. python中numpy库的一些使用

    想不用第三方库实现点深度学习的基础部分,发现numpy真的好难(笑),在此做点遇到的函数的笔记 惯例官方文档:https://docs.scipy.org/doc/numpy-1.16.1/refer ...

  8. 设计模式（一）——Java单例模式（代码+源码分析）

    1)单例模式保证了 系统内存中该类只存在一个对象,节省了系统资源,对于一些需要频繁创建销毁的对象,使用单例模式可以提高系统性能 2)当想实例化一个单例类的时候,必须要记住使用相应的获取对象的方法,而不 ...

  9. Java一些概念

    1.Java先编译后解释 同一个.class文件在不同的虚拟机会得到不同的机器指令(Windows和Linux的机器指令不同),但是最终执行的结果却是相同的. 2.JDK包含JRE,JRE包含JVM, ...

  10. 【Azure Redis 缓存】如何得知Azure Redis服务有更新行为？

    问题描述 Azure Redis作为微软云提供的一种PaaS服务,由于PaaS的特性,服务端的安装和维护.修补.升级等操作均由平台放负责.虽然最终用户只需要关注当前服务的使用,但是后台的升级和补丁行为 ...