jQuery学习笔记(四)_ 获取和设置内容或属性

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38242407/article/details/78079891

获取内容或属性

jQuery 拥有可操作 HTML 元素和属性的强大方法,这些方法相比较于DOM的方法,真的是简便好多。最明显的是代码量。笔者真的是感触颇深。


jQuery获得内容

text()方法
设置或返回所选元素的文本内容。

html()方法
设置或返回所选元素的内容。

val()方法
设置或返回表单字段的值。

完全赘述文字并不能直观的展示,那就来写一段代码吧!

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#xinpeng1").click(function(){
    alert("Text: " + $("#xinpeng").text());//显示文本
  });
  $("#xinpeng2").click(function(){
    alert("HTML: " + $("#xinpeng").html());//显示html
  });
  $("#xinpeng3").click(function(){
    alert("value: " + $("#xinpeng4").val());//显示value
  });
});
</script>
</head>

<body>

<p id="xinpeng">Hello<b>jQuery</b>!!!</p>

<button id="xinpeng1">显示 文本</button>

<button id="xinpeng2">显示 HTML</button>

<p>姓名:<input type="text" id="xinpeng4" value="新鹏"></p>
<button id="xinpeng3">显示 value</button>

</body>
</html>

jQuery获取属性

attr()方法

用于获取属性值。

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#xinpeng").attr("href"));//获取属性href
  });
});
</script>

设置内容或属性

所用方法与获取时的完全一样,设置的不同点在于在方法内加入参数,即你要设置的内容值或属性值。

猜你喜欢

转载自blog.csdn.net/qq_38242407/article/details/78079891