jQuery开发基础第4章使用jQuery操作DOM.pptVIP

jQuery开发根底第4章使用jQuery操作DOM;; DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM。 1．DOM Core DOM Core〔核心DOM〕：它不专属于任何语言，它是一组标准的接口，任何一种支持DOM的程序语言都可以使用它。JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的组成局部。 例如： 〔1〕使用DOM Core来获取表单对象的方法： document.getElementsByTagName(form); 〔2〕使用DOM Core来获取元素的title属性： element.getAttribute(title);;4.2 对元素内容和值进行???作; 1．对文本内容操作 jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配元素的文本内容，text(val)用于设置全部匹配元素的文本内容。例如，在一个HTML页面中，包括下面3行代码。 div span id=clock当前时间：2021-07-06 星期日 13:20:10/span /div 要获取div元素的文本内容，可以使用下面的代码： $(div).text(); 得到的结果为：当前时间：2021-07-06 星期日 13:20:10 说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对XML文档有效，可以用text()方法解析XML文档元素的文本内容。 ;【例4-1】 设置div元素的文本内容 〔1〕创立一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。 〔2〕在页面的body标记中，添加一个div元素，令它的文本内容为空，代码如下： div/div 〔3〕在引入jQuery库的代码下方编写jQuery代码，实现为div标记设置文本内容，具体代码如下： script type=text/javascript $(document).ready(function(){ $(div).text(我是通过text()方法设置的文本内容); }); /script; 运行本实例，效果如图4-1所示。; 2．对HTML内容操作 jQuery提供了html()和html(val)两个方法用于对HTML内容进行操作。其中html()用于获取第一个匹配元素的HTML内容，text(val)用于设置全部匹配元素的HTML内容。例如，在一个HTML页面中，包括下面3行代码。 div span id=clock当前时间：2021-07-06 星期三 13:20:10/span /div 要获取div元素的HTML内容，可以使用下面的代码： alert($(div).html()); 得到的结果如图4-2所示。; 要重新设置div元素的HTML内容，可以使用下面的代码： $(div).html(span style=color:#FF0000我是通过html()方法设置的HTML内容/span); 这时，再应用“$(div).html();〞获取div元素的HTML内容时，将得到如图4-3所示的内容。; 对元素的文本内容与HTML内容操作的区别 【例4-2】 获取和设置元素的文本内容与HTML内容。 〔1〕创立一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。 〔2〕在页面的body标记中，添加两个div标记，这两个div标记除了id属性不同外，其他均相同，关键代码如下： 应用text()方法设置的内容 div id=div1 span id=clock当前时间：2021-07-06 星期日 13:20:10/span /div br /应用html()方法设置的内容 div id=div2 span id=clock当前时间：2021-07-06 星期日 13:20:10/span /div;〔3〕在引入jQuery库的代码下方编写jQuery代码，实现为div标记设置文本内容和HTML内容，并获取设置后的文本内容和HTML内容，具体代码如下： script type=text/javascript $(document).ready(function(){