捕获
获得内容–text(),html()和val()
三个用于DOM操作的jQuery方法:
- text():设置或返回所选元素的文本内容
- html():设置或返回所选元素的内容(包括HTML标记)
- val():设置或返回表单字段的值
例1.
通过text()和html()方法获得内容:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
例2.
通过val()方法获得输入字段的值:
<script>
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
</script>
<p>名称: <input type="text" id="test" value="菜鸟教程"</p>
<button>显示值</button>
获取属性–attr()
作用:用于获取属性值
例.
如何获得链接中href属性的值:
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
设置
设置内容–text(),html()和val()
- text():设置或返回所选元素的文本内容
- html():设置或返回所选元素的内容(包括HTML标记)
- val():设置或返回表单字段的值
例.
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello Nico");
});
$("#btn2").click(function(){
$("#test2").html("<h1>Hello Nico</h1>");
});
$("#btn3").click(function(){
$("#test3").val("Haha");
});
});
</script>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
text()、html() 和 val() 的回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
例.
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
<p id="test1">gg</p>
<p id="test2">hh</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
设置属性 - attr()
作用:设置/改变属性值
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#th").attr("name"," Nico");
alert($("#th").attr("name"));
});
});
</script>
<p><a href="#" id="th" name="hh">Hello</a></p>
<button>修改 href 值</button>
attr() 方法也允许您同时设置多个属性
例.
设置多个属性:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ha").attr({
"name":"Nico", //修改属性name
"title":"qq" //设置属性title
});
$("#ha").text($("#ha").attr("title"));// 通过修改的 title 值来修改链接名称
});
});
</script>
<p><a href="#" id="ha">Hello Nico</a></p>
<button>change</button>
attr() 的回调函数
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ha").attr("href", function(i, origValue){
return origValue + "/ditu";
/*或return "http://www.sohu.com";*/
});
/*$("#ha").attr("href","http://www.baidu.com");*/
});
});
</script>
<p><a href="http://www.baidu.com" id="ha">Hello Nico</a></p>
<button>修改 href 值</button>