jQuery--DOM操作(二)
一、元素的特性、属性
特性 attributes vs 属性 properties
- attributes：值为 string
- properties：值为 string、boolean、number、object
- 如果 attributes 是本来在DOM对象中就存在的，attributes和properties 的值会同步；
- 如果 attributes 是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties 的值不会同步；
- 如果 attributes 不是DOM对象内建的属性，attributes和properties 的值不会同步；
代码示例：
二、使用jQuery操作元素的属性、特性和数据
1.操作元素的特性
• 获取特性的值：attr(name)：获取第一个元素的值
• 设置特性的值：attr(name, value) attr(attributes)
• 删除特性：removeAttr(name)
代码示例：
2.操作元素的属性
• 获取属性的值：prop(name)
• 设置属性的值：prop(name, value) prop(properties)
• 删除属性：removeProp(name)
代码示例：
3.在元素中存取数据
• 获取数据的值：data([name])
• 设置数据的值：data(name, value) data(object)
• 删除数据：removeData([name])
• 判断是否有数据：jQuery.hasData(element)
三、在页面中操作 DOM 元素
1.修改元素样式
①添加或修改 class
• addClass(names)
• removeClass(names)
• toggleClass([names][, switch])
• hasClass(name)
代码示例：
demo
div
- item
- item
- item
- item
- item
- item
- item
②获取或设置 style
• css(name, value)
• css(properties)
• css(name)
③获取或设置元素尺寸
• width(value):只针对该对象集合里的第一个元素，而不是所有元素
• height(value)
• innerHeight(value)：包含内边距，不包含边框和外边距
• innerWidth(value)
• outerHeight ([includeMargin])：包含内边距和边框，不一定包含外边距，想要包含外边距，传入布尔参数，true则包含，false则不包含
• outerHeight(value)
• outerWidth ([includeMargin])
• outerWidth(value)
demo
div
④获取或设置位置和滚动
• offset(coordinates)：返回对象集合第一个元素
• position()
• scrollLeft(value)
• scrollTop(value)
代码示例：
demo
scroll:
demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores aspernatur at aut harum iure molestias nisi quos vel. A, dicta inventore nisi nobis praesentium quas ullam vero! Beatae enim laborum nam nulla quaerat quos rem. A alias asperiores assumenda rem similique sit suscipit tempora temporibus unde vel voluptatum. A accusamus amet animi cumque delectus ducimus eius, eligendi harum illum inventore ipsum iusto laudantium libero magnam nemo nisi nobis nostrum, obcaecati perferendis placeat possimus provident quo rerum sit sunt suscipit vel veniam. A asperiores at blanditiis, cumque debitis ea eveniet inventore ipsum iure iusto maxime minus mollitia nostrum, pariatur porro quae quas quasi quibusdam sed sequi sit ullam unde ut voluptatibus voluptatum? Ad alias aliquid amet architecto asperiores atque deserunt ducimus est excepturi ipsa laboriosam nemo nesciunt, nobis nulla officiis quibusdam quidem recusandae repellat, sequi sint, suscipit vero vitae? A aliquam dolore ea enim fugiat impedit laudantium minus molestias dolore doloremque eaque fugit id iste maiores, nemo nisi porro quas quibusdam quod tempora, vel velit, veniam! Inventore, omnis?
2.修改元素内容
①获取或设置元素内容
• html()
• html(content)
• text()
• text(content)
代码示例：
- item-1
- item-2
- item-3
- item-4
- item-5
- item-6
- item-7
- item-8
- item-9
②移动或插入元素
• append(content[, content, ..., content])
• prepend(content[, content, ..., content])
• before(content[, content, ..., content])
• after(content[, content, ..., content])
• appendTo(target)
• prependTo(target)
• insertBefore(target)
• insertAfter(target)
代码示例：
title
- 新闻标题-1
- 新闻标题-2
- 新闻标题-3
- 新闻标题-4
- 新闻标题-5
- 新闻标题-6
- 新闻标题-7
- 新闻标题-8
- 新闻标题-9
③包裹元素
• wrap(wrapper)
• wrapAll(wrapper)
• wrapInner(wrapper)
• unwrap()：移除元素的父元素
代码示例：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.
link1
link2
link3
link4
link5
link6
link7
④移除元素
• remove([selector])：绑定的数据和事件都会被移除
• detach([selector])：移除后还会保留事件和数据
• empty()：可以保留元素本身，清除干净元素内容
代码示例：
demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.
⑤复制和替换元素
• clone([Even[,deepEven]])
• replaceWith(content)
• replaceAll(target)
代码示例：
title
Lorem ipsum dolor sit amet.
- 新闻标题-1
- 新闻标题-2
- 新闻标题-3
- 新闻标题-4
- 新闻标题-5
- 新闻标题-6
- 新闻标题-7
- 新闻标题-8
- 新闻标题-9
注意：
appendTo(target)
prependTo(target)
insertBefore(target)
insertAfter(target)
replaceAll(target)
都是执行了破坏性操作，在链式语法中使用他们的时候，如果要选择先前选择的元素，需要使用end()
⑥处理表单元素值
• val():设置值
• val(value)：获取值
代码示例：