Jquery基础学习（一）

来源：互联网发布：java设计模式spring 编辑：程序博客网时间：2024/05/16 07:08

jQuery入门

什么是jQuery

jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less，do more"，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。

如何使用jQuery

jQuery的使用非常简单，我们只需要引入jQuery库的js文件，然后直接使用即可。你可以前往官方网站下载jQuery库的js文件，你也可以直接如下在HTML页面中引入该文件的URI。

<!-- 引入jQuery库的js文件 --><script src="//code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script><!-- 编写JS代码并使用jQuery --><script type="text/javascript">// 以下代码将把id为username的元素的value值改为"Hello CodePlayer!"。jQuery("#username").val("Hello CodePlayer!");</script>

jQuery库的js文件一般有两个版本：一个是jquery-version.js(这里的version表示具体版本号，下同)，一个是jquery-version.min.js。

前者是jQuery库的源代码版本，它带有注释信息，建议你在开发环境中使用该文件，以便于调试或阅读源代码。

后者是前者经过压缩处理后的版本，它去除了多余的注释、空白字符等信息，并缩短了变量的名称，以减小js文件的体积。建议你在生产环境中使用该文件，以便于用户浏览器能够更快地加载jQuery库。

jQuery的运行原理

这里我们仅简单地介绍一下jQuery的运行原理。在jQuery库中实际上定义了一个jQuery()方法，它是jQuery库的核心。我们调用该方法并传入指定的参数，就可以返回一个jQuery实例对象，该对象中包含匹配的一个或多个DOM元素。接着，我们就可以使用jQuery对象上的方法来操作它所匹配的DOM元素。

jQuery对象上提供的方法足够我们进行几乎所有的DOM操作。

ready() 准备就绪时执行代码

如果你觉得这种写法有点麻烦，你还可以使用下面这种简写的方法：

// $( function ) 是 $(document).ready( function ) 的简写形式$( function(){    // 在这里编写我们希望在DOM准备就绪后执行的代码} );

js文件和内嵌的js代码一般不建议放在<head>标签中，而应该放在内容主体的结束标签</body>之前。从而让浏览器先加载页面内容，然后再加载并解析执行js代码。这样可以让网速较慢的用户能够更快地看到页面的展示内容，提高用户体验。

0 0