jQuery学习笔记之三 对Dom的操作

jQuery对Dom的操作

1 获得内容 - text()、html() 以及 val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

获取属性 - attr()

获取attr方法。

2 设置

同名方法。

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

3 添加新的 HTML 内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

例子。以三种不同方式创建 元素

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

4 删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

remove 可以加上过滤参数

5 对 css元素的操作,为 元素 附加class或者 去掉class .甚至 切换

addclass ,removeclass , toggleclass.

另外 可以获取或者设置元素的css 属性 ，通过

css()

6 尺寸
宽，高，包括内外边距的宽高等。

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()