JQuery HTML

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

   三个简单实用的用于 DOM 操作的 jQuery 方法：

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

2.获取属性 - attr()方法用于获取属性值。

  alert($("#w3s").attr("href"));--获得链接中 href 属性的值

3.添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

• 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.删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）删除所有元素
• empty() - 从被选元素中删除子元素 删除指定属性

  

过滤被删除的元素

 子删除 class="italic" 的所有 <p> 元素：$("p").remove(".italic");

5.jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

实例(同时添加多个标签和属性)

$("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important blue");});

设置多个 CSS 属性

$("p").css({"background-color":"yellow","font-size":"200%"});

6.jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法：

• width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
• height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth()返回元素的宽度（包括内边距）
• innerHeight()返回元素的高度（包括内边距）。
• outerWidth()方法返回元素的宽度（包括内边距和边框）
• outerHeight()方法返回元素的高度（包括内边距和边框）

返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度

   $(window).width();$(document).width();

设置指定的 <div> 元素的宽度和高度：$("#div1").width(500).height(500);