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()