好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

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://HdhCmsTestcnblogs测试数据/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性能优化 阅读全文

作者: Leo_wl

    

出处: http://HdhCmsTestcnblogs测试数据/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于一步步 jQuery (一)概念,使用,$名称冲突4种解决方法,使用层次及次数问题的详细内容...

  阅读:41次