jquery 获取设置值、添加元素

一，JQuery 获取内容和属性

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

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

提示：DOM = Document Object Model（文档对象模型）

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

1. text() - 设置或返回所选元素的文本内容
2. html() - 设置或返回所选元素的内容（包括 HTML 标记）
3. val() -设置或返回表单字段的值

<script type="text/javascript">
  console.log($("#test").text())
  console.log($("#test").html())
</script>

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

<script type="text/javascript">
  console.log($("#test").attr("href"))
</script>

二，jQuery 设置内容和属性

设置内容 - text()、html() 以及 val()

<script type="text/javascript">
  $("#btn1").click(function(){
    $("#test").text("Hello world!");
    });
$("#btn2").click(function(){
  $("#test").html("<b>Hello world!</b>");
    });
$("#btn3").click(function(){
  $("#test").val("Hello world");
});
</script>

设置属性 - attr()

 $("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

三， jQuery - 添加内容，元素

1. append() - 在被选元素的结尾插入内容
2. prepend() - 在被选元素的开头插入内容
3. after() -在被选元素之后插入内容
4. before() - 在被选元素之前插入内容

$("p").append("Hello World");
$("p").append("<p>Hello World</p>");