详解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获取table下某一行某一列的值实现代码
Apr 07 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现鼠标拖动图片功能
Mar 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
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP解决中文乱码
2017/04/28 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
js 学习笔记(三)
2009/12/29 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
Python的argparse库使用详解
2018/10/09 Python
python实现矩阵打印
2019/03/02 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
基于python实现复制文件并重命名
2020/09/16 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
高三英语教学反思
2014/01/13 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
《悯农》教学反思
2014/04/28 职场文书
机电系毕业生求职信
2014/07/11 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
中小学生学籍证明
2014/10/25 职场文书
中学图书馆工作总结
2015/08/11 职场文书
《秋思》教学反思
2016/02/23 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
MySQL慢查询优化解决问题
2022/03/17 MySQL