第三章 jQuery操作DOM.ppt

jQuery 基础教程 宁波大学教师教育学院 梅剑峰 第三章 jQuery操作DOM 第三章 jQuery操作DOM 一、 访问元素 元素属性操作 元素内容操作 元素样式操作 元素属性操作 在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置的操作，而removeAttr()方法则可以轻松删除某一只读的属性。 ? 1、获取元素的属性 attr(name) 说明：name表示属性的名称。 例题 3-1.html 元素属性操作 元素属性操作 ? 2、设置元素的属性 attr(key,value) 说明：参数key表示属性的名称，value表示属性的值。如果要同时设置多个属性，可以用以下格式： attr({key1:value1,key2:value2}) 例题 3-2.html 元素属性操作 ? 3、删除元素的属性 removeAttr(name) 说明：name表示属性的名称。 例题 3-3.html 元素内容操作 在jQuery中，操作元素内容的方法有html()和text()，前者与JavaScript中的innerHTML属性类型，即获取或设置元素的HTML内容；或者与innerText属性类似，即获取或设置元素的文本内容。 html()— 获取元素的HTML内容 html(val)— 设置元素的HTML内容 text()— 获取元素的文本内容 text(val)— 设置元素的文本内容 例题 3-4.html 操作元素的值 在jQuery中，要获取或设置元素的值，是通过val()方法实现的。 val()— 获取元素的值 val(val)— 设置元素的值 另外，val()方法还有一个用处，就是它能使select、checkbox和radio相应的选项被选中。 例题 3-5.html 3-5-1.html 元素样式操作 在页面中，元素样式的操作包含：直接设置样式属性、获取和设置样式、增加样式、切换样式、移除样式、判断是否含有某个样式。 ? 1、直接设置样式属性 css(name,value) 说明：name为样式名称，value为样式的值。 例题 3-6.html 元素样式操作 ? 2、获取样式和设置样式 获取： $(#nav).attr(class) 设置： $(#nav).attr(class,nav2) ? 3、增加样式 addClass(class) 说明：参数class为样式名称，也可同时增加多个样式，只需要用空格将其隔开即可。 addClass(class1 class2…) 元素样式操作 ? 4、样式切换 toggleClass(class) 说明：参数class为样式名称。其功能是当元素中含有名称为class的样式时，删除该样式，否则，增加该样式。 ? 5、移除样式 removeClass([class]) 说明：参数class为样式名称，该名称是可选项，当选该名称时，则删除名称是class的样式，有多个样式时用空格隔开，如 removeClass(class1 class2…)；如果不选名称，则删除元素的所有样式。 元素样式操作 ? 6、判断是否含有某个样式 hasClass(class) 说明：参数class为样式名称。该方法用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。 例题 3-7.html 元素样式操作 二、创建节点 jQuery中，创建节点使用工厂函数$()来完成，其语法格式如下： $(html) 说明：参数html表示用于动态创建DOM元素的HTML标记字符串。 例如： 例题 3-8.html 三、插入节点 jQuery提供了一些几种插入节点的方法： ? 1、内部插入节点方法 例题 3-9.html 三、插入节点 三、插入节点 jQuery提供了一些几种插入节点的方法： ? 2、外部插入节点方法 例题 3-10.html 三、插入节点 四、复制节点 jQuery中通过clone()