前端开发技术团结互助，让我们共同进步！

当前位置：主页 > 技术资讯 > 开发技术 > 前端开发技术 >

我们的优势： 10年相关行业经验，专业设计师量身定制设计师一对一服务模式，上百家客户案例！企业保证，正规流程，正规合作 7*24小时在线服务，售后无忧

jQuey开发入门到精通-浅谈初学者最容易混淆的几个概念

文章来源：重庆网站建设围观次数：

分享到:

摘要：有用JQUEY功能之强大，方法和属性之众多，初学者短期快速上手面临不小的挑战，下面我们就来看初学者最容易混淆的几个概念吧

u=4033280927,3656706035&fm=26&gp=0.jpg

由于jquery功能强大，提供的方法和属性众多，初学者短期快速上手有不小的挑战。不过，这个库的设计者秉承了一致性与对称性原则，它的大部分概念都是从HTML和CSS 的结构中借用而来的。鉴于很多WEB开发者对这两种技术对比JAVASCRIPT更有经验，所以编程经验不多的设计者能够快速学会使用该库。

实际上，jquery框架本身就是在Javascript语言基础上进行封装的，因此jquery代码本质上也是javascript代码，自然，jquery代码与javascript代码可以相互混合使用，读者也没有必要去区分每一行代码到底是jquery代码，还是javascript代码。但是，jquery与javascript是两个不同的概念，在用法上存在差异，初学者很容易被下面这些概念所迷惑，详细比较如下。

jquery对象不等于DOM对象

新手很容易把jquery对象和DOM对象混淆在一起，或者误认为两者水火不容。

DOM是Document Object Model 的简写，中文翻译为文档对象模型。根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射成为一个由层次节点组成的文件。

示例：将下面文档加载并北浏览器解析后，会自动生成一个映射文件，该文件以结构树的形式展示当前文档的结构

<html>
<head><title>标准DOM示例</title></head>
<body><h1>标准DOM</h1>
<p>这是一份简单的<strong>文档对象模型</strong></p>
<ul>
<li>D 表示文档，DOM的物质基础</li>
<li>O 表示对象，DOM的思想基础</li>
<li>M表示模型，DOM的方法基础</li>
</ul>
</body>
</html>

【代码详解】

在这颗DOM树中，<li>、<li>、<li>标签都是<ul>标签的子节点，可以通过document对象的getElementsByTagName()或者 getElementByla()方法访问他们,也可以利用节点之间的关系，通过它们的关联指针快速进行相互访问。

上面所有的节点和元素都是DOM对象的组成部分，getElementsByTayName()和getElementByla()方法也是DOM模型提供的内置方法，所有这些构成了DOM对象基础。

jquery 对象是通过jquery 框架包装DOM对象之后产生的一个新对象，本质上它是一个普通的JAVASCRIPT对象，该对象中包括了DOM对象的集合，因此可以把DOM对象看作是一个独立的个体，而jquery可以是多个DOM对象组成的数据集合。

jquery 对象和DOM对象是可以相互转换的，因为它们所操作的对象都是DOM元素，只不过Jquey对象包含了多个DOM元素，而DOM对象本身就是一个DOM元素。简单地说，jquery对象是DOM元素的数组，也称为类数组，而DOM对象就是一个单个DOM元素。

把jquery对象转换为DOM对象

jquery对象不能够使用DOM对象的方法，但是如果需要，就应该先把jquery对象转换为DOM对象。转换的方法有以下两种。

借助数组下标来读取jquery对象集合中的某个DOM元素对象

【示例】使用jquery匹配文档中所有的li元素，返回一个jquery对象，然后通过数组下标的方法读取jquery集合中第一个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素包含的文本信息。

<html>
<head>
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $li =$("li");
var li =$li[0];
alert(li.innerHTML);
})
</script>
<title>测试</title>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>

把DOM对象转换为jQuery对象

对于DOM对象来说，直接把它传递给$()函数即可，jquery 对象会自动把它包装为jquery对象，然后就可以自由调用jquery定义的方法。

针对上面示例，可以这样来设计，使用DOM的方法获取所有的LI元素，然后使用jquery()构造函数把它封装为jquery对象，这样就可以方便地调用jquery的方法。

<html>
<head>
<script type="text/javascript">
$(function(){
var li = document.getElementsByTagName("li");//获取所有li元素
var $li = $(li[0]);//把第一个li元素封装为jQuery对象
alert($li.html()); //调用jquery对象的方法
})
</script>
<tilte>示例演示【江津网站建设】</title>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>

实际上，也可以把DOM元素数组传递给$()函数，jquery对象会自动把所有DOM元素包装在一个jquery对象中。

针对上面的示例，还可以进行下面的设计。

<script type="text/javascript">
$(function(){
var li =document.getElementByTagName("li");
var $li = $(li);
alert($li.html());
})
</script>

注意，使用document.getElementsByTagName()方法获取的DOM元素集合是一个真正的数组类型，而jquery对象仅是一个类数组，不是真正意义上的数组类型数据。

jquery 的ready 不等于JavaScript 的load

jquery 定义的ready事件与JavaScript定义的load事件都表示页面初始化行为，但是它们之间并非完全相同，为了理解这两个事件的异同，读者应该了解HTML文档加载的顺序。

HTMLDOM 文档加载是按顺序执行的，这与浏览器的渲染方式有关系，一般浏览器渲染操作的顺序大致按如下几个步骤完成：

（1）解析HTML结构。

（2）加载外部脚本和样式表文件

（3）解析并执行脚本代码。

（4）构造HTMLDOM模型。

（5）加载图片等外部文件。

（6）页面加载完毕。

下面介绍二者的差异。

执行时机不同
load事件必须等到网页中所有内容全部加载完毕之后，才被执行。如果一个页面中包含了大数据的多媒体文件，则会出现网页文档已经呈现出来，而由于网页数据还没有完全加载完毕，导致load事件不能够及时被触发。
开发人员习惯把页面初始化设置的脚本都放在load事件处理函数中，由于页面数据没有完全加载进来，导致网页呈现和脚本初始化配置不能够保持同步，从而影响了页面的可用性。
而jQuery的ready事件是在DOM结构绘制完毕之后就执行，也就是说它先于外部文件的加载就被执行了，这样就能够确保文档呈现和脚本初始化设置保持同步。
总之，ready事件先于load事件被激活，如果网页文档中没有加载外部文件，则它们的响应时间基本上是相同的。
用法不同
javascript 的load事件只能够被编写一次，下面的写法是不允许的，此时它仅能够影响最后一次指定的事件处理函数。

```
<script type="text/javascript">
window.onload=function(){
alert("页面初始化1");
}
window.onload = function(){
alert("页面初始化2");
}
window.onload = function(){
alert("页面初始化3")；
}
</scipt>
```
如果希望这三个事件处理函数中的代码都被执行，则应该把它们包含在一个处理函数中。
而对于jquery的ready事件类型来说，可以在同一文档中多次定义。例如，针对上面示例，可以使用jquery的ready事件类型来设计。

<script type="text/javascript">
var f1=function(){
alert("页面初始化1")；
}
var f2=function(){
alert("页面初始化2")；
};
var f3=function(){
alert("页面初始化3")；
};
</script>

<script src="images/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
alert("页面初始化1");
});
$(function(){
alert("页面初始化2");
});
$(function(){
alert("页面初始化3");
});
</script>

这对于复杂页面中多次配置初始化程序非常重要，也方便了用户根据需要随时进行设计。

本文由重庆网站建设整理发布,转载请保留出处，内容部分来自于互联网，如有侵权请联系我们删除。

相关热词搜索：jquey jquey入门前端开发江津网站建设

上一篇：智能社JAVASCRIPT高级教程之-JavaScript基础大纲
下一篇：开课吧全栈开发技术阶段性11-5课程笔记