Java_Web应用开发技术.ppt

2. 元素内容操作 元素内容操作方法包括html()和text()。 （1）html()：获取元素的HTML内容。 （2）html(val)：利用参数val设置元素的HTML内容。 （3）text()：获取元素的文本内容。 （4）text(val)：利用参数val设置元素的文本内容。 【例9-12】html()和text()方法示例。 该示例通过html()和text()方法获取、设置有关元素的值。 注意：响应函数与HTML各元素之间的对应关系。 【实现】《源代码》 3. 元素值操作 元素值操作方法为val()。 （1）val()：获取元素的值。 （2）val(val)：利用参数val设置元素的值。 【例9-13】val()方法示例。 该示例通过val()方法获取、设置有关元素的值，例如列表元素选中的值的获取。 注意：响应函数与HTML各元素之间的对应关系。 【实现】《源代码》 说明：列表框中选项可以按着ctrl或者shift键多选； 方法join()是将返回的多个数据连接成一个字符串，默认分隔符是“，”，也可通过参数自己指定分隔符。 4. 元素样式操作 元素样式操作包括：直接设置样式、增加CSS类别、类别切换、删除类别等。 （1）css(name,value)：设置css样式，其中参数name为样式名，value为样式值。 （2）addClass(class)：添加css类别，其中参数class为类别名称。也可以添加多个类别，用空格将其隔开，即addClass(class0 class1 class2…)。 （3）toggleClass(class)：类别切换，当元素中没有该类别时（参数class）添加它，有该类别时（参数class）则删除它。 （4）removeClass(class)：删除css类别，其中参数class为类别名称。 【例9-14】元素样式操作示例。该示例对选择的元素实现样式的变更、添加、删除等修改。注意响应函数与HTML各元素之间的对应关系。 【实现】《源代码》 5. 元素遍历 在DOM元素操作中，有时需要对同一标签的全部元素进行统一操作。 在传统的JavaScript中，需要先获取元素的总长度，然后通过循环语句完成， 在jQuery中，可以使用each()方法完成元素遍历。 基本语法为：each(callback)， 参数callback是一个function函数，该函数还可以接受一个形参index，表示遍历元素的序号（从0开始），可以借助它配合this来实现元素属性的设置或获取。 【例9-15】该示例对选择元素的下一级的元素（后代元素）实现遍历，并可以对个子元素实现有关的操作。注意响应函数与HTML各元素之间的对应关系。 【实现】《源代码》 6. 元素删除 jQuery提供了两种删除元素的方法，remove()和empty()。 注意：empty()方法并非真正的删除，只是清空节点所包含的后代元素的内容。 （1）remove(expr)：删除元素，参数expr为可选项，为筛选元素的jQuery表达式。 （2）empty()：清空所选择的页面元素里的内容。 【例9-16】该示例对选择的元素实现删除或者清空页面内容。 注意：响应函数与HTML各元素之间的对应关系。 【实现】《源代码》 3.2 节点操作 页面中的各元素通过DOM模型的节点相互关联形成树状，节点可以动态地维护，包括节点创建、插入、复制、替换等。 1．创建节点 函数$()用于动态地创建页面元素。 语法格式为：$(html)，其中参数html是创建元素的html标签字符串。 例如： 在页面中动态创建一个div，其代码： var div1=$(div title=jquery理念Write Less Do More/div); //创建一个div元素 $(body).append(div1); //将创建的div元素添加到网页尾（追加操作） 注意，函数$(html)只完成DOM元素创建，需要通过插入或追加操作加入到页面。 2．插入节点 在页面中插入节点分内部和外部两种插入方法。 （1）内部插入节点方法： 下表给出了内部插入节点的有关方法及其语法格式。 语法格式 参数说明 功能描述 append(content) content表示追加到目标中的内容 向所选择的元素内部追加content元素 append(function)