jQuery操作DOM 管理科学与工程学科 耿方方
jQuery操作DOM 管理科学与工程学科 耿方方
主要内容 DOM基础 访问元素 节点操作
主要内容 DOM基础 访问元素 节点操作
DOM基础 nDoM( Document Object Model)为文档提供了结构化表示方法, 通过该方法可以改变文档的内容和展示形式。在实际运用中,DOM更 像是桥梁,通过它可以实现跨平台、跨语言的标准访问。 与DOM密不可分的是 Javascrip脚本技术,DOM在Web前端的应用也 是基于 Javascript实现的,在前面的章节中我们已经讲到了在 JavaScript中是如何进行DOM操作的。 单词 Document即文档,当我们创建一个页面并加载到Web浏览器时 DoM模型则根据该页面的内容创建了一个文档文件; Object即对象 是指具有独立特性的一组数据集合,比如我们把新创建的页面文档称之 为文档对象,与对象相关联的特征称之为对象属性,访问对象的函数称 之为对象方法;Mode即模型,在页面文档中,通过树状模型展示页 面的元素和内容,而其展示方式是通过节点(node)来实现的
DOM基础 DOM（Document Object Model）为文档提供了结构化表示方法， 通过该方法可以改变文档的内容和展示形式。在实际运用中，DOM更 像是桥梁，通过它可以实现跨平台、跨语言的标准访问。 与DOM密不可分的是JavaScript脚本技术，DOM在Web前端的应用也 是基于JavaScript实现的，在前面的章节中我们已经讲到了在 JavaScript中是如何进行DOM操作的。 单词Document即文档，当我们创建一个页面并加载到Web浏览器时， DOM模型则根据该页面的内容创建了一个文档文件；Object即对象， 是指具有独立特性的一组数据集合，比如我们把新创建的页面文档称之 为文档对象，与对象相关联的特征称之为对象属性，访问对象的函数称 之为对象方法；Model即模型，在页面文档中，通过树状模型展示页 面的元素和内容，而其展示方式是通过节点（node）来实现的
访问元素 在访问页面时,需要与页面中的元素进行交互式的操作。在操作中,元 素的访问是最繁琐、最常用的,主要包括对元素属性、内容、值、CSS 的操作
访问元素 在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元 素的访问是最繁琐、最常用的，主要包括对元素属性、内容、值、CSS 的操作
访问元素 属性操作 在 jQuery中,可以对元素的属性执行获取、设置、删除操作,通过 attr方法可以对元素属性执行获取与设置操作,通过 removeAttr0则 可以执行删除元素属性操作。 我们可以通过atr方法获取元素的属性,其语法结构如下所示 attr(name)
访问元素 属性操作 在jQuery中，可以对元素的属性执行获取、设置、删除操作，通过 attr()方法可以对元素属性执行获取与设置操作，通过removeAttr()则 可以执行删除元素属性操作。 我们可以通过attr()方法获取元素的属性，其语法结构如下所示： attr(name)
访问元素 属性操作 案例1: S(function var strAt=S(img,). attr("src"); strAit+="+$(img").attr(title"); S(#diVAlt" ). html(strAit
访问元素 属性操作 案例1： $(function(){ var strAlt=$('img').attr("src"); strAlt+=""+$("img").attr("title"); $("#divAlt").html(strAlt); });
访问元素 属性操作 设置元素的属性 ■在页面中,atr(方法不仅可以用来获取元素的属性值,还可以设置元 素的属性,其设置元素属性的语法格式妚下所示: attr(key, value attr((keyO: valued, key: valuel))
访问元素 属性操作 设置元素的属性 在页面中，attr()方法不仅可以用来获取元素的属性值，还可以设置元 素的属性，其设置元素属性的语法格式如下所示： attr(key,value) attr({key0:value0,key1:value1})
访问元素 属性操作 设置元素的属性 另外,atr(方法还可以绑定一个 unction0函数通过该函数返回的值 作为元素的属性值。语法格式如下所示 attr(key, function(index)) 其中,参数 index为当前元素的索引号,整个函数返回一个字符串作为 元素的属性值
访问元素 属性操作 设置元素的属性 另外，attr()方法还可以绑定一个function()函数,通过该函数返回的值 作为元素的属性值。语法格式如下所示： attr(key,function(index)) 其中，参数index为当前元素的索引号，整个函数返回一个字符串作为 元素的属性值
访问元素 属性操作 案例2 S(function s(img") attr( title,"这是一张风景画"; IsIng SCimg").addClass(clsing); border: 2px solid #ccc; padding: 3px; float S(img).attr(src", function(t left: return"Images/mgo"+ Math. floor(Math. random(*2+1)+".jpg /style
访问元素 属性操作 案例2 .clsImg{ border: 2px solid #ccc;padding: 3px; float: left;} $(function(){ $("img").attr("title","这是一张风景画"); $("img").addClass("clsImg"); $("img").attr("src",function(){ return "Images/img0"+ Math.floor(Math.random()*2+1)+".jpg"; }); });
访问元素 属性操作 删除元素的属性 Query中通过attr0方法设置元素的属性后,使用 removeAttr0方法可 以将元素的属性删除,其语法结构如下所示 remove Attr(name)
访问元素 属性操作 删除元素的属性 jQuery中通过attr()方法设置元素的属性后，使用removeAttr()方法可 以将元素的属性删除，其语法结构如下所示： removeAttr(name)