jQuery对DOM操作_jquery拿到dom的text-优快云博客

博客主要介绍了jQuery对DOM的操作方法，包括text()用于设置或返回所选元素文本内容，html()可设置或返回含HTML标记的内容，val()用于设置或返回表单字段值，attr()能获取属性值，还给出了attr()设置单个和多个属性的写法示例。

jQuery对DOM操作—text()、html()、val()、attr()

1、text()—设置或返回所选元素的文本内容
2、html()—设置或返回所选元素的内容（包括 HTML 标记）
3、val()—设置或返回表单字段的值
4、attr()—获取属性值
举例:获取

<script>
$(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
     $("#btn3").click(function(){
    alert("val: " + $("#input").val());
  });
     $("#btn4").click(function(){
    alert("attr" + $("a:").attr("href"));
  });
});
</script>
</head>

<body>
<a href="www.baidu.com">打开百度</a>
<input type="text" id="input" value="菜鸟教程">
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>


<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示 val()的值</button>
<button id="btn4">显示 attr()的值</button>
</body>

显示结果：
第一个弹出框内容：Text:这是段落中的 粗体 文本。
第二个弹出框内容：HTML:这是段落中的<b>粗体</b>文本。
第三个弹出框内容：val():菜鸟教程
第四个弹出框内容：attr:www.baicdu.com

举例----设置

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
     $("#btn4").click(function(){
    $("a").attr({
    "href":"www.baidu.com",
    "title":"url"
    });
  });
});
</script>
</head>

<body>
<a href="www.runoob.com" id="runoob">菜鸟教程</a>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>


<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">通过val()改变默认值</button>
<button id="btn4">通过attr改变原有href的值且加title="url"的属性</button>
</body>
运行结果需自己验证。

注意：attr()设置一个属性的时候写法是：
attr(“href”:“www.baidu.com”)
attr()设置多个属性的时候写法是：
attr({
“href”:“www.baidu.com”,
“title”:“jQuery教程”
})