网站建设、公众号开发、微网站、微商城、小程序就找牛创网络 !

7*24小时服务专线: 152-150-65-006 023-68263070 扫描二维码加我微信 在线QQ

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

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

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

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

文章来源:重庆网站建设 发布时间:2019-06-03 15:49:05 围观次数:
分享到:

摘要:有用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)页面加载完毕。

下面介绍二者的差异。

  1. 执行时机不同

    load事件必须等到网页中所有内容全部加载完毕之后,才被执行。如果一个页面中包含了大数据的多媒体文件,则会出现网页文档已经呈现出来,而由于网页数据还没有完全加载完毕,导致load事件不能够及时被触发。

    开发人员习惯把页面初始化设置的脚本都放在load事件处理函数中,由于页面数据没有完全加载进来,导致网页呈现和脚本初始化配置不能够保持同步,从而影响了页面的可用性。

    而jQuery的ready事件是在DOM结构绘制完毕之后就执行,也就是说它先于外部文件的加载就被执行了,这样就能够确保文档呈现和脚本初始化设置保持同步。

    总之,ready事件先于load事件被激活,如果网页文档中没有加载外部文件,则它们的响应时间基本上是相同的。

  2. 用法不同

    javascript 的load事件只能够被编写一次,下面的写法是不允许的,此时它仅能够影响最后一次指定的事件处理函数。


  1. <script type="text/javascript">
    window.onload=function(){
    alert("页面初始化1");
    }
    window.onload = function(){
    alert("页面初始化2");
    }
    window.onload = function(){
    alert("页面初始化3");
    }
    </scipt>

    如果希望这三个事件处理函数中的代码都被执行,则应该把它们包含在一个处理函数中。

    而对于jquery的ready事件类型来说,可以在同一文档中多次定义。例如,针对上面示例,可以使用jquery的ready事件类型来设计。


  2. <script type="text/javascript">
    var f1=function(){
    alert("页面初始化1");
    }
    var f2=function(){
    alert("页面初始化2");
    };
    var f3=function(){
    alert("页面初始化3");
    };
    </script>
  3. <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课程笔记

热门资讯

鼠标向下滚动