JavaScript+jQuery程序设计第12章 jQuery控制页面.pptVIP

jQuery控制页面 对元素内容和值进行操作 对DOM节点进行操作 对元素属性进行操作 对元素的CSS样式操作 对元素内容和值进行操作 对元素内容操作 对元素值操作 对元素内容操作 对文本内容操作 获取全部匹配元素的文本内容 text()方法 设置全部匹配元素的文本内容 text(val)方法 div span id=clock当前时间：2016-12-07 星期三 13:20:10/span /div $(div).text(); 当前时间：2016-12-07 星期三 13:20:10 $(div).text(我是通过text()方法设置的文本内容); 重新设置文本内容 对元素内容操作 对HTML内容操作 获取第一个匹配元素的HTML内容 html()方法 设置全部匹配元素的HTML内容 html(val)方法 div span id=clock当前时间：2016-12-07 星期三 13:20:10/span /div alert($(div).html()); 对元素内容操作 获取和设置元素的文本内容与HTML内容。 实例 对元素值操作 方法 说明 示例 val() 用于获取第一个匹配元素的当前值，返回值可能是一个字符串，也可能是一个数组。例如当select元素有两个选中值时，返回结果就是一个数组 $(#username).val(); val(val) 用于设置所有匹配元素的值 $(input:text).val(新值); val(arrVal) 用于为check、select和radio等元素设置值，参数为字符串数组 $(select).val([列表项1,列表项2]); 对元素值操作 为多行列表框设置并获取值。 实例 对DOM节点进行操作 查找节点 创建节点 插入节点 删除、复制与替换节点 创建节点 script type=text/javascript $(document).ready(function(){ //方法一 var $p=$(p/p); $p.html(span style=color:#FF0000方法一添加的内容/span); $(body).append($p); //方法二 var $txtP=$(pspan style=color:#FF0000方法二添加的内容/span/p); $(body).append($txtP); //方法三 $(body).append(pspan style=color:#FF0000方法三添加的内容/span/p); //弹出新添加的段落节点p的文本内容 alert($(p).text()); }); /script 插入节点 在元素内部插入 方法 说明 示例 append(content) 为所有匹配的元素的内部追加内容 $(#B).append(pA/p); appendTo(content) 将所有匹配元素添加到另一个元素的元素集合中 $(#B).appendTo(#A); prepend(content) 为所有匹配的元素的内部前置内容 $(#B).prepend(pA/p); prependTo(content) 将所有匹配元素前置到另一个元素的元素集合中 $(#B).prependTo(#A); $(pA/p).appendTo(#B); $(#B).append(pA/p); 插入节点 方法 说明 示例 after(content) 在每个匹配的元素之后插入内容 $(#B).after(pA/p); insertAfter(content) 将所有匹配的元素插入到另一个指定元素的元素集合的后面 $(ptest/p).insertAfter(#B); before(content) 在每个匹配的元素之前插入内容 $(#B).before(pA/p); insertBefore(content) 把所有匹配的元素插入到另一个指定元素的元素集合的前面 $(#B).insertBefore(#A); 在元素外部插入 删除、复制与替换节点 删除节点 div1： div id=div1span style=color:#900谁言寸草心，报得三春晖/span/div div2： div id=div2span styl