详解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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现动态加载瀑布流
Sep 01 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
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
js树形控件脚本代码
2008/07/24 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
wxPython学习之主框架实例
2014/09/28 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
《掌声》教学反思
2014/02/23 职场文书
服务承诺书范文
2014/05/19 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014司机年终工作总结
2014/12/05 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL