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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
vue实现商城购物车功能
Nov 27 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
ES6的循环与可迭代对象示例详解
Jan 31 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读取IMAP邮件
2006/10/09 PHP
给初学PHP的5个入手程序
2006/11/23 PHP
PHP 危险函数全解析
2009/09/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php实现数字补零的方法总结
2018/09/12 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Django如何实现上传图片功能
2019/08/16 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
五年级科学教学反思
2014/02/05 职场文书
银行办公室岗位职责
2014/03/10 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
高中物理教学反思
2016/02/19 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏