jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

3个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值，value

jQuery获取值

例：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>
//  获取输入框里的value值
$("button").click(function(){
    alert("Value: " + $("#test").val());
  });
<p>姓名：<input type="text" id="test" value="米老鼠"></p>

jQuery设置值

http://www.w3school.com.cn/jquery/jquery_dom_set.asp

设置值，修改某属性值
text()、html()、val() 、attr()

jQuery添加元素

append() 方法在被选元素的结尾插入内容。
prepend() 方法在被选元素的开头插入内容。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>

通过 append() 和 prepend() 方法添加若干新元素

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function appendText()
{
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">追加文本</button>

</body>
</html>

jQuery after() 和 before()
在前后添加元素。
通过 after() 和 before() 方法添加若干新元素

jQuery 删除元素

remove() 方法：删除该对象及其子元素。
empty() 方法：删除被选元素的子元素。
例如：$(“#div1”).remove(); // 删除整个div及其内部的元件

$(“#div1”).empty(); // 删除div内部的元件，但是div区间仍保留

remove方法也可以有选择地删除：

<script>
$(document).ready(function(){
  $("button").click(function(){
      // 只删除class属性为italic的段落
    $("p").remove(".italic");
  });
});
</script>
</head>

<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>
</body>

jQuery - 获取并设置 CSS 类

jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类，class指属性。
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

</body>
</html>

$(“h1,h2,p”).removeClass(“blue”);

$(“h1,h2,p”).toggleClass(“blue”);

jQuery - css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});
</script>

<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>

设置：
$(“p”).css(“background-color”,”yellow”);

设置多个 CSS 属性：
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});

jQuery - 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

</body>
</html>
// 修改尺寸
 $("#div1").width(320).height(320);