xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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

 

 

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

 

method: 2

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

 

method: 3

 

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

 

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

 

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

method: 5

 

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

 

 

 

 

1

1

 
posted @   xgqfrms  阅读(168)  评论(3)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛