jquery自定义属性(类型/属性值)


Posted in Javascript onMay 21, 2013
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var ping = ''; 
switch ($('#Select3 option:selected').text()) { 
case '图片': ping += '<img'; break; 
case '文本框': ping += '<input type=text'; break; 
case '按钮': ping += '<input type=button'; break; 
} 
$('#attrzhi').blur(function () { 
ping += ' '; 
ping += $('#Select2 option:selected').text(); 
ping += '='; 
ping += $('#attrzhi').val(); 
}) 
$('#Button1').click(function () { 
ping += '/>'; 
alert(ping); 
$('#show').append(ping); 
}) }) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table> 
<tr><td><!--什么东西--> 添加类型:</td><td><select id="Select3"> 
<option>图片</option> 
<option>文本框</option> 
<option>按钮</option> 
</select></td><td rowspan="5" id='show'></td></tr> 
<tr><td> 
<!--需要设置的属性值--> 
属性:</td><td> <select id="Select2"> 
<option>src</option> 
<option>width</option> 
<option>height</option> 
<option>title</option> 
<option>value</option> 
<option>font-size</option> 
<option>color</option> 
</select> 
</td></tr> 
<tr><td>属性值:</td><td><input id="attrzhi" type="text" /></td></tr> 
<tr><td colspan="2"><div id="showattr"></div></td></tr> 
<tr><td> 内容:</td><td><input id="Text1" type="text" /></td></tr> 
<tr><td> 
<input id="Button1" type="button" value="创建" /></td></tr> 
</table> 
</div> 
</form> 
</body>
Javascript 相关文章推荐
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
jquery实现智能感知连接外网搜索
May 21 #Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 #Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 #Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 #Javascript
深入理解javaScript中的事件驱动
May 21 #Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 #Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 #Javascript
You might like
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
vuex 的简单使用
2018/03/22 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python脚本实现下载合并SAE日志
2015/02/10 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python读取LMDB中图像的方法
2018/07/02 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
迎接领导欢迎词
2014/01/11 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
高中生评语大全
2014/04/25 职场文书
2014年母亲节寄语
2014/05/07 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python