zoukankan      html  css  js  c++  java
  • 一步步 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>

    JS

    JS学习笔记
    摘要: jQuery基础概念,包含8特性,外层结构,$名称冲突4种解决方法,$(document).(ready( function(){})) 使用层次及次数阅读全文
    posted @ 2012-02-12 15:28 Jack 陈 阅读(742) | 评论 (2) 编辑
     
    摘要: JS 实现 页面浏览工具条 返回页首 按步长下滑阅读全文
    posted @ 2012-02-08 18:57 Jack 陈 阅读(22) | 评论 (1) 编辑
     
     
    摘要: asp.net中使用 jQuery校验插件----jquery.validate.js阅读全文
    posted @ 2012-01-30 15:42 Jack 陈 阅读(17) | 评论 (0) 编辑
     
  • 相关阅读:
    设计模式开篇——7大设计原则
    MySQL MVCC专题
    Spring常考的面试题
    HashMap常考面试题
    Equals和==的比较
    高并发编程
    一文读懂JVM
    scala实现定时任务的方法
    PLAY2.6-SCALA(十二) 表单的处理
    PLAY2.6-SCALA(十一) 模板常用场景
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2348441.html
Copyright © 2011-2022 走看看