详解jQuery设置内容和属性


Posted in jQuery onApril 11, 2019

一、设置内容以及回调函数

方法

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

例子

$("#btn1").click(function(){
 $("#test1").text("Hello world!");
});//设置文本内容
$("#btn2").click(function(){
 $("#test2").html("<b>Hello world!</b>");
});//设置元素内容
$("#btn3").click(function(){
 $("#test3").val("Dolly Duck");
});//设置值
$("#btn1").click(function(){
 $("#test1").text(function(i,origText){
  return "Old text: " + origText + " New text: Hello world!
  (index: " + i + ")";
 });
});//返回文本内容

$("#btn2").click(function(){
 $("#test2").html(function(i,origText){
  return "Old html: " + origText + " New html: Hello <b>world!</b>
  (index: " + i + ")";
 });
});//返回元素内容

TIPS

回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

二、设置属性以及回调函数

方法

attr() - 设置属性值

例子

$("button").click(function(){
 $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});//设置单个属性

$("button").click(function(){
 $("#w3s").attr({
  "href" : "http://www.w3school.com.cn/jquery",
  "title" : "W3School jQuery Tutorial"
 });
});//设置多个属性
$("button").click(function(){
 $("#w3s").attr("href", function(i,origValue){
  return origValue + "/jquery";
 });
});//回调函数

总代码

<!doctype html>
	<head>
	<title>jq设置内容和属性</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("#p1").text("hello world1!");
			});
			$("#bt2").click(function(){
				$("#p2").html("<h1>hello world2!</h1>");
			});
			$("#bt3").click(function(){
				$("#t1").val("hello world3!");
			});
			$("#bt4").click(function(){
				$("#p1").text(function(i,origText){
					return "旧文本:"+origText+"新文本:这是新文本(index:"+i+")"
				});
			});
			$("#bt5").click(function(){
				$("#p2").html(function(i,origText){
					return "旧HTML:"+origText+"新HTML:<b>这是新HTML</b>(index:"+i+")"
				});
			});
			$("#bt6").click(function(){
				$("#t1").val(function(i,origText){
					return "旧值:"+origText+"新值:这是新值(index:"+i+")"
				});
			});
			$("#bt7").click(function(){
				$("a").attr("href","https://tieba.baidu.com");
			});
			$("#bt8").click(function(){
				$("a").attr("href",function(i,origValue){return origValue + "/s?wd=1&rsv_spt=1&rsv_iqid=0xbc3b96600002e5f4&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=163&rsv_sug4=1686"});
			});
		});
	</script>
	</head>

	<body>
		<input type="button" id="bt1" value="设置文本" "">
		<input type="button" id="bt2" value="设置HTML" "">
		<input type="button" id="bt3" value="设置值" "">
		<p id="p1">这是文本</p>
		<p id="p2">这是HTML</p>
		<p>这是:<input type="text" value="值" id="t1" style ="width:500px"></p>
		<input type="button" id="bt4" value="显示旧/新文本" "">
		<input type="button" id="bt5" value="显示旧/新HTML" "">
		<input type="button" id="bt6" value="显示旧/新值" "">
		<hr><!--以上是设置内容,一下是设置属性-->
		<input type="button" id="bt7" value="改变href值为贴吧" "">
		<p><a id="baidu" href="https://www.baidu.com" rel="external nofollow" target="_blank">百度</a></p>
		<input type="button" id="bt8" value="改变href值为搜索1(回调函数)" "">
	</body>
</html>

以上所述是小编给大家介绍的jQuery设置内容和属性详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
jQuery分组选择器简单用法示例
Apr 04 #jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
You might like
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Python 创建守护进程的示例
2020/09/29 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
关于感谢信的范文
2015/01/23 职场文书
新闻报道稿范文
2015/07/23 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
志愿服务心得体会
2016/01/15 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server