jQuery学习笔记(一)---

最近开始做动态网页前台的开发,要对前台javascript进行操作,所以在此对jQuery、Javascript、AngulaJS进行学习,此时开始对jQuery的学习进行总结。

DOM(Document Object Model,文本对象模型)的每一个页面都是一个DOM对象,通过传统的Javascript方法访问页面中的元素,就是访问DOM对象。

例如:在页面中的2各<div>标记元素,其代码如下:

<div id = "divTmp">测试文本</div>

<div id = "divOut"></div>

通过下面的Javascript代码可以访问DOM对象和获取或设置其内容值:

var tDIv = document.getElementById("divTmp");//获取DOM对象

var oDiv = document.getElementById("divOut");//获取DOM对象

var cDiv = tDiv.innerHTML;//获取DOM对象中的内容

oDiv.innerHTML = cDiv;//设置DOM对象中的内容

如果执行上面的Javascript代码,将在ID为“dvOut”的标记中显示ID为“divTmp”的标记内容。


在jQuery库中,通过本身自带的方法获取页面元素的对象,我们称之为jQuery对象:为了同样实现在ID为“divOut”的标记中显示ID为“divTmp”的标记内容,采用jQuery访问页面元素的方法,其实现的代码如下:

var tDiv = $("#divTmp");//获取jQuery对象

var oDiv = $("#divOut");//获取jQuery对象

var cDiv = tDiv.html();//获取jQuery对象中的内容

oDiv.html(cDiv);//设置jQuery对象中的内容

通过上述代码对比,可以看出jQuery对象访问方法比DOM对象访问方法更简单、高效,他们都实现相同的功能。



 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章