jQuery可以用text（）html（）val（）獲取文本內容 attr（）獲取屬性
例子：
<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function () {
$("#value").click(function () {
alert("Value: " + $("#test1").val());
});
$("#btn1").click(function () {
alert("Text: " + $("#test2").text());
});
$("#btn2").click(function () {
alert("HTML: " + $("#test2").html());
});
$("#btnwww").click(function () {
alert($("#www").attr("href"));
});
});
</script>
</head>
<body>
<button id="value">顯示值</button>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
<button id="btnwww">顯示 href 值</button>
<p>姓名：<input type="text" id="test1" value="初始值"></p>
<p id="test2">這是段落中的<b>粗體</b>文本。</p>
<p><a href="http://www.baidu.com" id="www">baidu</a></p>
</body>
</html>例子：
<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").text("Hello world!");
});
});
</script>
</head>
<body>
<p>馬上更改值</p>
<button>更改值</button>
</body>
</html>
例子：
<script src="/jquery/jquery-2.1.0.js">
</script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>這個是一追加的p</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>這是追加的一行</li>");
});
});
</script>
</head>
<body>
<p>這個一p</p>
<p>這個一p</p>
<ol>
<li>這是一行</li>
<li>這是一行</li>
<li>這是一行</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表項</button>
</body>
</html>例子：
<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function () {
$("#btns").click(function () {
$("#div1").remove();
});
$("#btnq").click(function () {
$("#div2").empty();
});
});
</script>
</head>
<body>
<button id="btns">刪除 div 元素</button>
<button id="btnq">清空 div 元素</button>
<br />
<div id="div1" style="height: 100px; width: 300px; border: 1px solid black;background-color:#4cff00;">
這是要執行remove()方法的div
</div>
<div id="div2" style="height:100px;width:300px;border:1px solid black;background-color:#4cff00;">
這是要執行empty()方法的div
</div>
</body>
</html>例子：
<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1,h2,p").toggleClass("blue");
$("div").toggleClass("important");
});
});
</script>
<style type="text/css">
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<button>向元素添加類</button><br />
<h1>變色</h1>
<h2>什麼色</h2>
<p>藍色</p>
<p>是嗎</p>
<div>聽說會變大</div>
</body>
</html>jQuery的css()方法也可以和上面3個差不多設置和返回元素的樣式
例子:
<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css({ "background-color": "Green", "font-size": "200%" });
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000">變綠是嗎</p>
<p style="background-color:#444400">是的</p>
<p style="background-color:#0000ff">不是</p>
<button>爲 p 元素設置多個樣式</button>
</body>
</html>