jQuery学习笔记: 获取和设置内容或属性

2019-03-2115:53:10WEB前端开发Comments1,614 views字数 887阅读模式
Excerpt

获取内容或属性

获取内容或属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

jQuery 拥有可操作 HTML 元素和属性的强大方法,这些方法相比较于DOM的方法,真的是简便好多。最明显的是代码量。笔者真的是感触颇深。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

jQuery获得内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

text()方法
设置或返回所选元素的文本内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

html()方法
设置或返回所选元素的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

val()方法
设置或返回表单字段的值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

完全赘述文字并不能直观的展示,那就来写一段代码吧!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

<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>Hello<b>jQuery</b>!!!</p>
<button>显示 文本</button>
<button>显示 HTML</button>
<p>姓名:<input type="text" value="新鹏"></p>
<button>显示 value</button>
</body>
</html>
jQuery获取属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

attr()方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

用于获取属性值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#xinpeng").attr("href"));//获取属性href
});
});
</script>
设置内容或属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

所用方法与获取时的完全一样,设置的不同点在于在方法内加入参数,即你要设置的内容值或属性值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10169.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/10169.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定