`
zachary.guo
  • 浏览: 486787 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery 学习一(基础知识)

阅读更多
    ●  The jQuery wrapper
          jQuery 中,一切都是 jQuery 对象。为了得到一组元素,我们可以使用以下简单的语法:$(selector) or jQuery(selector),其中,selector 就是 CSS 选择器。
        $() 函数其实就是 jQuery() 函数的一个别名而已,它返回一个特殊的 javascript 对象,这个对象包含的是匹配 selector 的 DOM 元素数组。所以,jQuery 使用 jQuery 方法(匹配选择器)将 DOM 元素(符合选择器的 DOM 元素)进行了包装,包装成 jQuery 对象(实际上 jQuery 方法返回的是 jQuery 对象数组,这里只是为了说明概念而已),这个对象持有很多已经定义好的方法来操作这组 DOM 元素。


    ●  Utility Functions
          jQuery 的 $() 方法是我们使用的最频繁的以期望得到 DOM 元素集合的封装(jQuery 对象)的函数,但 $() 的职责不仅仅在于此项功能。它另外的一项功能是提供命名空间前缀,用来将一些功能比较集中的函数放入同一命名空间下,并作为工具函数。下面举一个典型的例子:
/**
 * $. 前缀看起来很怪异,但是请记住,$ 和你在 javascript 定义的任何标识符都一样,它只是一个标识符。
 */
$.trim(someString);
/**
 * 这样看起来更熟悉,trim() 函数被作为 jquery 或 jQuery 的别名 $ 命名空间(注意,命名空间本身在 
 * javascript 看来也是对象,此对象[我们可以称为 jQuery 对象]的数据类型是 Object,而不是我们通过类
 * 选择器得出的 jQuery 对象,这两个对象的名字起的一样,有点晕乎)下的函数。有点类似 java 中的静态方法。
 */
jQuery.trim(someString);


    ●  The document ready handler
          我们经常希望在 DOM 全部加载完毕后去做一些事情,常用的是 window.onload。可是,window.onload 不仅仅是把整个 DOM 树加载完毕,它同时还要等待将所有的图片以及其它的外部资源完全加载完毕并且页面在浏览器中被显示(渲染)出来。可见,为了执行 window.onload 的回调函数,我们不得不等待很长时间(假设图片资源或其它的外部资源非常庞大)。更好的方法是,仅仅等到文档结构完全被解析,并且浏览器已经把 HTML 转换成 DOM 树型的这个时机做回调函数,此时不需管图片资源等是否加载到客户端(只要形成了了 DOM Tree 即可)。jquery 提供了简单的方法,一旦 DOM 树加载完毕,而不需外部资源加载完毕时来触发执行我们的代码:
$(document).ready(function() {
    ......
});

// 更为简便的写法是:
$(function() {
    ......
});


    ●  Extending jQuery
          jQuery 包装函数提供了大量的有用的函数,但作为 javascript 库,它不可能考虑到我们系统的任何一种情况,这个时候,我们需要自己去扩展 jQuery 的包装类。将页面中符合 selector 的元素置为不可用,我们需要自己去扩展 jQuery 的包装类:
/**
 * $.fn.disable 的含义是:我们要使用一个函数名为 disable 的函数扩展 jQuery 的封装器的内容,这样,
 * jQuery 对象就有了 disable 这个函数(原来是没有的)。
 */
$(selector).disable();

$.fn.disable = function() {
  return this.each(function() {
    if (typeof this.disabled != "undefined") {
      this.disabled = true;
    }
  })
};

// 等价的写法如下:
$.fn.extend({
  disable: function() {
    return this.each(function() {
      if (typeof this.disabled != "undefined") {
        this.disabled = true;
      }
    })
  }
});
分享到:
评论

相关推荐

    jquery基础知识

    总的来说,jQuery基础知识的掌握是成为一名优秀前端开发者的重要步骤。理解并熟练运用这些知识点,将有助于你创建更高效、更用户友好的web应用。随着技术的不断进步,持续学习和实践是保持竞争力的关键。

    jquery学习资料大全

    这个“jQuery学习资料大全”是一个全面的学习资源集合,它涵盖了从基础到进阶的所有关键知识点,通过系统学习和实践,你将能够熟练掌握这一强大的JavaScript库,提高你的前端开发技能。记得理论与实践相结合,多动手...

    jQuery 基础知识 基础Demo

    **jQuery基础知识** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。它的设计理念是“写得更少,做得更多”,使得网页开发变得更加高效和简便。 ### 1. ...

    jQuery基础.pptx

    1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级,“写的少,做的多” 包含以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML...

    jQuery_基础教程学习

    Jquery的知识 pdf格式的

    精选 jquery 学习资料

    本压缩包包含的“精选jQuery学习资料”是针对这一强大的库进行深入学习的重要资源。 首先,我们来看看`jquery-1.2.6.js`,这是jQuery库的1.2.6版本的源代码文件。这个版本的历史悠久,但依然具有学习价值,因为它...

    JQuery学习资料与源代码

    1. **jQuery基础知识** - DOM操作:jQuery通过简洁的语法提供了对HTML元素的选择、遍历和操作。例如,`$("#elementID")`用于选取ID为`elementID`的元素,`.html()`方法可以用于获取或设置元素的HTML内容。 - 事件...

    jQuery基础知识+实例

    **jQuery基础知识** jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画设计以及Ajax交互变得更加容易。jQuery的核心理念是"Write Less, Do More...

    JQuery学习资料

    总的来说,这份学习资料提供了全面的JQuery学习路径,从基础到高级,从理论到实践,涵盖了JQuery的核心知识点。通过深入学习和实践,你将能够熟练运用JQuery来提升网页开发的效率和质量。记得在学习过程中,结合实际...

    jquery经典学习手册

    本手册中的"Jquery金典学历例子"提供了实践案例,可以帮助你巩固理论知识,动手实践是学习jQuery的最佳方式。尝试运行和修改这些例子,将有助于你更好地理解jQuery的运作机制。 总之,jQuery作为一款强大的...

    jQuery速成,基础知识详解

    jQuery 是一款高效、简洁的 JavaScript 库,它极大简化了 JavaScript 编程,尤其是在处理网页文档对象模型(DOM)、事件处理、动画效果...无论是初学者还是经验丰富的开发者,jQuery 都是一个值得学习和使用的工具。

    jquery基础学习插件实例大全

    教程分为三个部分,即“jQ学习第一季”、“jQ学习第二季”和“jQ学习第三季”,涵盖了jQuery的基础到高级应用。 在jQuery的学习过程中,首先需要理解jQuery的核心概念,包括选择器(Selector)、DOM操作、事件处理...

    jquery学习资料

    **jQuery学习资料** ...这个“jQuery学习资料”压缩包提供的PPT教程将系统介绍这些知识,而DEMO则提供了实践机会,是学习jQuery的好帮手。通过深入学习和不断实践,你将能够熟练运用jQuery进行高效、优雅的前端开发。

    jquery基础知识要点

    jQuery 是一个广泛使用的 ...学习 jQuery 的基础知识是前端开发中的重要一环,它可以帮助开发者更高效地操作和交互网页元素,提升开发效率。通过熟练掌握这些要点,开发者可以构建更加动态和用户友好的 Web 应用。

    神奇的JQuery学习[基础学习笔记].pdf

    JQuery学习基础学习笔记为我们提供了一个全面认识和了解JQuery的机会,JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和事件处理、DOM操作、动画以及Ajax交互,从而加速了web开发过程。 ...

    jquery 学习课堂工具

    通过实践这些知识点,结合"jQuery学习课堂工具",学习者不仅可以深入理解jQuery的原理,还能掌握实际应用中的技巧,为开发高效、易用的Web应用打下坚实基础。在使用RivaFLVPlayerSetup.exe的过程中,务必参考相关...

    jquery 基础知识汇总

    **jQuery基础知识汇总** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的API和强大的功能,jQuery成为了前端开发的首选工具之一。 ### 1. jQuery...

    Jquery学习基础内容

    在本文中,我们将深入探讨jQuery的基础知识,帮助初学者更好地理解和掌握这一强大的工具。 ### 1. jQuery引入 要使用jQuery,首先需要在HTML文件中引入jQuery库。这通常通过`<script>`标签完成,可以从CDN(内容...

    jquery基础教程学习

    通过学习jQuery的基础知识,开发者可以更快地实现网页的交互和动态效果,同时减少代码量。在实际项目中,结合JSP或其他后端技术,可以构建出功能丰富的Web应用。对于想要提升前端开发技能的人来说,jQuery是不可或缺...

Global site tag (gtag.js) - Google Analytics