您的位置：首页 > Web前端 > JQuery

一步步 jQuery （一）概念,使用,$名称冲突4种解决方法，使用层次及次数问题

2012-02-12 22:45 1256 查看

1. 基本概念：jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。

　　 jQuery库包含特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

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>

复制代码
http://www.cnblogs.com/Jack8Chen/archive/2012/02/12/2345984.html

JS

JS学习笔记

一步步 jQuery （一）概念,使用,$名称冲突4种解决方法，使用层次及次数问题

摘要: jQuery基础概念，包含8特性，外层结构，$名称冲突4种解决方法，$(document).(ready( function(){})) 使用层次及次数阅读全文

posted @ 2012-02-12 15:28 Jack 陈阅读(742) | 评论 (2) 编辑

JS 实现页面浏览工具条返回页首按步长下滑

摘要: JS 实现页面浏览工具条返回页首按步长下滑阅读全文

posted @ 2012-02-08 18:57 Jack 陈阅读(22) | 评论 (1) 编辑

js 读取SharePoint 2010 列表并用js二维数组和json对象按Category分类输出

posted @ 2012-02-07 10:57 Jack 陈阅读(658) | 评论 (5) 编辑

asp.net中使用 jQuery校验插件----jquery.validate.js

摘要: asp.net中使用 jQuery校验插件----jquery.validate.js阅读全文

posted @ 2012-01-30 15:42 Jack 陈阅读(17) | 评论 (0) 编辑

javaScript 性能优化--转载

摘要: JS性能优化阅读全文

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航