Jquery基础学习(一)
2016-01-28 14:45
507 查看
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代码。这样可以让网速较慢的用户能够更快地看到页面的展示内容,提高用户体验。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法