1.jQuery 代码的编写
1.1 获取jQuery 最新版本
进入jQuery的官方网站 http://jquery.com/. 下载最新jQuery库文件。
1.2 jQuery 库类型说明
jQuery 库的类型分成两种,分别是生产版(最小化和压缩版)和开发板(未压缩版),如下表格所示。
名称 | 大小 | 说明 |
jquery.js(开发版) | 约229kb | 完整无压缩版本,主要用于测试。学习和开发 |
jquery.min.js | 约31kb | 经过工具压缩或经过服务器开启Gzip压缩,主要应 用于产品和项目. |
1.3 jQuery环境配置
jQuery 不需要安装,把下载的jquery.js 放到网站上的一个公共的位置,想要在某个页面上使用jquery时,只需要在相关的HTML文档引入该库文件的位置即可。
1.4 在页面引入jQuery
在编写的页面代码中<head>标签内引入jQuery库后,就可以使用jQuery库了。
<script sec="jquery.js文件存放的位置" type="text/javascript" ></script>
1.5 编写简单的jQuery 代码
首先明确一点,在jQuery 库中, $就是jQuery的一个简写形式,例如$("#foo") 和 jQuery("#foo") 是等价的,$.ajax和jQuery.ajax 是等价。
下面开始编写第1个jQuery 程序
//...省略其他代码 <!-- 引入 jQuery --> <script scr="js/jquery-1.12.4.min.js" type="text/javascript"/> <script type="text/javascript"> $(document).ready(function(){ //等待Dom元素加载完毕 alert("Hello world!"); //弹出一个提示框 }); <script>
运行结果。。
在上面的代码中有一个陌生的代码片段,如下
$(document).ready(function(){
});
这段代码的作用类似于传统JavaScript 中的window.onload方法,不过与window.onload还是有些区别。
区别分成两个部分,一个是执行时机,编写个数,简化写法。
1.6 jQuery 代码风格
代码风格即程序开发人员所编写源代码的书写风格。良好代码风格的特点是使代码易读。如果能统一jQuery 代码编写风格,对日后的代码的维护是非常有利的。
2:jQuery 对象和Dom对象
2.1 DOM对象和jQuery对象简介
我们第一次学习jQuery,经常分不清哪些是jQuery对象,哪些是Dom对象,因此需要重点了解jQuery对象 和DOM对象以及他们之间的关系。
2.1.1 DOM对象
DOM(Document Object Model,文档对象模型),每一分DOM都可以表示成一颗树。下面代码构建了一个基本的网页,网页代码如下:
1 //...省略其他代码 2 <h3>例子<h3> 3 <p title="选择你喜欢吃的水果">你最喜欢的水果是?</p> 4 <ul> 5 <li>苹果</li> 6 <li>橘子</li> 7 <li>菠萝</li> 8 </ul
可以把上面的HTML结构描述为一颗DOM树,如图所示,
在这颗dom树中,<h3> <p> <ul> 以及<ul>的3个子节点都是DOM元素节点。可以通过JavaScript 中的getElementsByTagName 或者 getElementById 来获取元素节点。 像这样得到的dom元素就是DOM对象。
2.1.2 jQuery 对象
jQuery 对象就是通过jQuery 包装DOM对象产生的对象
jQuery 对象是jQuery 独有的。如果一个对象是jQuery 对象,那么就可以使用jQuery 里面的方法。
例如:$("#foo").html(); //获取id为foo的元素内的html代码。html()是jquery里的方法。
这段代码等于:document.getElementById("foo").innerHTML;
在jQuery 对象中不能使用DOM对象的任何方法。
在DOM 对象中也不能使用jQuery中的任何方法。
2.1.3 jQuery 对象和 DOM 对象的互相转换
2.1.3.1 jQuery 对象 转成DOM 对象
jQuery 对象不能使用DOM中的方法,但如果对jQuery 对象所提供的方法不熟悉,或者jQuery 没有封装想要的方法,不得不使用DOM对象的时候。就有以下的两种 处理方法了。
jQuery 提供了两种方法将一个jQuery 对象转换成DOM 对象 , 即 [index] 和 get [index]
(1) jQuery 对象是一个类型数组的对象,可以通过[index]的方法得到相应的DOM对象。
jQuery 代码如下:
var $cr = $("#cr") //jQuery 对象
var cr= $cr[0] //DOM对象
(2) 另外一种方法是 jQuery 本身提供的,通过get(index)方法得到响应的DOM对象
jQuery 代码如下:
var $cr = $("#cr"); //jQuery 对象
var cr = $cr.get(0); //DOM对象
2.1.3.2:DOM对象转成jQuery 对象
对于一个DOM对象,只需要用$()把DOM对象 包装起来,就可以获得一个jQuery 对象了,方式为$(DOM对象)。
jQuery 代码如下:
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery 对象
转换后,可以任意使用jQuery 中的方法。
通过以上方法,可以任意地相互转换jQuery 对象 和DOM 对象。
注意:平时用到的jQuery 对象都是通过$()函数制造出来的,$()函数就是一个jQuery 对象的 制造工厂。