jquery讲义4：操作dom元素.pptVIP

jQuery中的DOM操作 属性与特性 （1）属性(Property) 属性是JavaScript对象的内在性质，每个属性都包含名称和值。JavaScript的动态特性允许我们在脚本控制下创建JavaScript对象的属性 （2）特性(Attribute) 特性不是JavaScript的原生概念，它只适用于DOM元素。特性用于描述DOM元素标记中设定的值。 考虑如下图片元素的HTML标记： img id=myImage src=image.gif alt=An image class=someClass title=This is an image/ 在这个元素的标记中，标签名称是img，标记中的id、src、alt、class和title描述的是元素的特性，每个特性都由名称和值组成。浏览器会读取并解析这个元素的标记，以便创建在DOM中表现此元素的JavaScript对象实例。特性被收集到一个列表中，该列表作为DOM对象实例的一个名为attributes的属性中。除了在列表中保存特性，DOM对象还被赋予了多个属性，包括一些描述元素标记中特性的属性 属性与特性 保存在attributes列表中的特性值和相应的属性之间有一条活动的连接。改变特性值会导致相应的属性值也发生变化，反之亦然。 大部分情况下，JavaScript属性的名字和相应特性的名字是一致的，但也有例外，比如class特性对应className属性 操作元素属性 jQuery没有提供获取或修改元素属性的具体方法，这是因为用原生的JavaScript操作就足够简单，没有必要用jQuery来优化： objDom.title=some value; objDom.src=pic/img09.gif; 这里的关键在于如何获得元素的引用，即objDom是如何得来的。 可喜的是在jQuery中可借助于选择器、$( )函数以及包装集中很多访问单个元素的方法，我们能快速地获取页面中任一Dom元素的引用。而这些访问单个元素的方法有： 对包装集使用数组索引，比如$(whatever)[n] 使用get( )方法，通过索引返回单个元素 使用each( )方法，在回调函数中可以使用单个元素 例如：$(img)[3].title=美女；表示将页面第4张图片的title属性设为美女 包装集的attr( )方法 （1）attr(name) 获取匹配集合中第一个元素指定特性的值，name表示特性名称，如果匹配集为空或第一个元素不存在此特性，则返回undefined （2）attr(name,value) 将包装集中所有元素的已命名的特性设置为传入值，name表示要设置的特性名称，value指定特性的值，value可以是一个常量，变量或表达式，甚至可以是一个函数。 当某元素不存在name特性时，jQuery会为该元素添加name特性 包装集的removeAttr( )方法 removeAttr( )方法 从每个匹配元素中删除指定的特性，name表示要删除的特性名称。 例如： $(a).eq(1).removeAttr(href) 表示将页面第2个超级链接元素的href特性删掉 注意：删除一个特性不会删除JavaScript DOM元素中相应的属性，尽管这可能会导致属性值的改变。例如从元素中删除readonly特性会导致元素的readonly属性值由true变为false,readOnly属性本身不会删除。 思考：怎样将某复选框禁用？禁用后如何恢复？ 禁用：$(#checkbox4).attr(disabled,disabled) 或 $(#checkbox4).attr(disabled,true) 恢复：$(#checkbox4).removeAttr(disabled) 或$(#checkbox4).attr(disabled,false) 包装集的addClass( )方法 我们可以方便地使用包装集的attr(class,类名列表)来为元素应用某些样式，但是当要添加或删除某个样式的时候就显得极其不方便，这是因为class特性的类名列表是用空格隔开类名的单个字符串，因此jQuery提供了专门用于改变元素样式的方法:addClass( )、removeClass( )、hasClass( )，当然也有直接设置某一CSS属性的方法，如：css( )、width( )、height( )、offset( )、position( )等 addClass(name)方法 该方法为包装集中的所有元素添加指定的单个或多个类名，name是字符串，可以是单个的类名，也可以是用空格分隔的