1. 基本概念:jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。
jQuery库包含特性:
2. 使用jQuery库编写jQuery代码片段
分两步:
1)添加jQuery类库引用到页面的<head>标签内
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
2)另起一<script type="text/javascript">标签,在其内编写自己的jQuery代码片段
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
你的jQuery代码
</script>
</head>
3. jQuery 函数片段 外层结构
编写jQuery代码前,需要将其包裹在下面两种结构中
1)位于$(document).(ready( function(){})) 函数体中,目的是实现在 文档(DOM)完全加载后 执行的jQuery代码,用以避免由于文档没完全加载完全便调用jQuery函数引起的失败。
$(function(){
// jQuery 代码
});
2)位于jQuery(callback)中callback 函数体中,形式为$(function(){}),该函数用于绑定一个在文档(DOM)完全加载后 执行的jQuery代码,作用同1)一样,用这个函数时需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。
$(function(){
// jQuery代码
});
4. 解决jQuery库 名称($) 与其他库冲突 方法
1)通过引用顺序解决----最不推荐,此种方法降低了代码健壮性及可维护性
该方法就是 最后添加jQuery类库的引用,用以覆盖前面引用库的预定义
2)jQuery(callback)方式解决----推荐,但不是最好的,因为不适用懒人编码
该方法就是弃用$(document).(ready( function(){})) 而直接使用 jQuery(function(){}), 并用jQuery完整名称 替代$简介名称 编写代码
jQuery(function(){
jQuery("索引器").....
});
3)匿名函数传递$形参方式----推荐,但不是最好的,因为其内部代码执行的时间变了(详细参见后续随笔)
该方法是先定义形参为$的匿名函数,后执行函数并传递实参jQuery
(function($){
$("索引器")....
})(jQuery)
4)jQuery.noConflict()方法 重定义 jQuery 名称符号----极力推荐
调用jQuery 名为noConflict()的方法来重定义名称符号
<script type="text/javascript">
var jq$=jQuery.noConflict();//
jq$(document).ready(function(){
jq$("button").click(function(){
jq$("p").hide();
});
});
</script>
5. $(document).(ready( function(){})) 使用层次及次数问题
无限制,可以 并序使用,也可嵌套使用
<script type="text/javascript">
// Demo 1: 并序使用
$(document).ready(function () {
alert("1.1");
})
$(document).ready(function () {
alert("1.2");
})
// Demo 2: 嵌套使用
$(document).ready(function () {
$(document).ready(function () {
alert("2.1");
})
})
$(document).ready(function () {
$(document).ready(function () {
$(document).ready(function () {
alert("2.2");
})
})
})
</script>