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

  1. //将变量$的控制权，让渡给prototype.js(一种js框架)
  2. jQuery.noConflict();
  3. //使用 jQuery(), 代替$()方法
  4. jQuery(function(){
  5. 	//do some things
  6. });

method: 2

  1. // 自定义一个快捷方式：
  2. var $x = jQuery.noConflict();
  3. $x (function(){
  4.     //do some things
  5.     //函数内部使用$x()方法,代替$()方法
  6. })

method: 3

  1. //将变量$的控制权，让渡给prototype.js(一种js框架)
  2. jQuery.noConflict();
  3. //使用 jQuery设置页面加载时的执行函数
  4. jQuery(function($){
  5. 	//do some things
  6. 	//函数内部正常使用$()方法
  7. });

method: 4

  1. /*
  2. 	最理想的方式，通过改变少量的代码，实现最全面的兼容性！
  3. */
  4. //将变量$的控制权，让渡给prototype.js(一种js框架)
  5. jQuery.noConflict();
  6. //定义匿名函数，并设置形参为$
  7. //匿名函数内部的$ == jQuery
  8. (function($){
  9. 	$(function(){
  10. 		//do some things
  11. 		//可以正常使用$()方法
  12. 	});
  13. })(jQuery);
  14. //执行匿名函数，且传递实参jQuery

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

method: 5

  1. //不需要调用jQuery.noConflict();
  2. //可以使用$()方法作为其他框架/库的快捷方式
  3. //直接使用 jQuery(), 代替$()方法
  4. jQuery(function(){
  5. 	//do some things
  6. 	//使用 jQuery(), 代替$()方法
  7. });

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. Spring-01-事务

    Spring事务机制 spring事务机制最重要的两个配置项,隔离级别和传播特性. 1. 隔离级别 隔离级别针对高并发问题导致的数据库丢失更新问题 1.1 数据库的4大基本特征 原子性(Atomic) ...

  2. Flink可靠性的基石-checkpoint机制详细解析

    Checkpoint介绍 checkpoint机制是Flink可靠性的基石,可以保证Flink集群在某个算子因为某些原因(如 异常退出)出现故障时,能够将整个应用流图的状态恢复到故障之前的某一状态,保 ...

  3. python生成器 递归

    生成器 生成器:只要函数体内出现yield关键字,那么再执行函数就不会执行函数代码,会得到一个结果,该结果就是生成器   生成器就是迭代器   yield的功能 1.yield为我们提供了一种自定义迭 ...

  4. 阿姆达尔定律 Amdahl's law

    Amdahl's law - Wikipedia https://en.wikipedia.org/wiki/Amdahl%27s_law 阿姆达尔定律(英语:Amdahl's law,Amdahl' ...

  5. （Shell）Shell命令整理

    目录 常用命令 1. 上传.下载 2. 删除文件和文件夹 3. 目录操作 4. 文件的操作 4.vim 为新添加的文件后缀支持语法高亮 常用命令 1. 上传.下载 上传文件:rz,然后回车弹出上传文件 ...

  6. HTML Standard系列：Event loop、requestIdleCallback 和 requestAnimationFrame

    HTML Standard系列:Event loop.requestIdleCallback 和 requestAnimationFrame - 掘金 https://juejin.im/post/5 ...

  7. 获取当前文件路径 import 原理 一般把模块组成的集合称为包（package）

    获取当前文件路径 testpath.py import sysprint(sys.path) [root@d mapReduceLog]# python testpath.py['/data/mapR ...

  8. C++ Primer Plus读书笔记（六）分支语句和逻辑运算符

    1. 以上均包含在cctype中 1 #include<cctype> 2 //#include<ctype.h> 2.文件操作 (1)头文件 1 #include<fs ...

  9. IdentityServer4之Implicit和纯前端好像很配哦

    前言 上一篇Resource Owner Password Credentials模式虽然有用户参与,但对于非信任的第三方的来说,使用这种模式是有风险的,所以相对用的不多:这里接着说说implicit ...

  10. （七）整合 Redis集群 ,实现消息队列场景

    整合 Redis集群 ,实现消息队列场景 1.Redis集群简介 1.1 RedisCluster概念 2.SpringBoot整合Redis集群 2.1 核心依赖 2.2 核心配置 2.3 参数渲染 ...