项目中常用的JS操作技巧
1.<a>标签-超链接中confirm方法使用介绍
<a href="a.html" onclick="if(confirm('确定删除?')==false)return false;">删除</a>
2.<select>下拉框三级联动效果
1).html代码
<select name="select_element" id="firstServiceType"></select>
<select name="select_element" id="secondServiceType"></select>
<select name="select_element" id="thirdServiceType"></select>
2).JS代码
<script type="text/javascript">
$(document).ready(function () {
$("#code").val();
GetFirstType();
$("#firstServiceType").change(function () { $("#Type").val($(this).val()); GetSecondType() });
$("#secondServiceType").change(function () { $("#Type").val($(this).val()); GetThirdType() });
$("#thirdServiceType").change(function () { $("#Type").val($(this).val()); });
});
function GetFirstType() {
$("#firstServiceType").empty();
$("#firstServiceType").append('<option>请选择</option>');
$.getJSON("/ServiceType/GetFirstType", function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Code"])
.text(item["AbbrName"])
.appendTo($("#firstServiceType"));
});
GetSecondType();
});
}
function GetSecondType() {
$("#secondServiceType").empty();
$("#secondServiceType").append('<option value="0">请选择</option>');
var url = "/ServiceType/GetSecondType/?code=" + $("#firstServiceType").val();
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Code"])
.text(item["AbbrName"])
.appendTo($("#secondServiceType"));
});
GetThirdType();
});
}
function GetThirdType() {
$("#thirdServiceType").empty();
$("#thirdServiceType").append('<option value="0">请选择</option>');
var url = "/ServiceType/GetThirdType/?code=" + $("#secondServiceType").val();
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["Code"])
.text(item["AbbrName"])
.appendTo($("#thirdServiceType"));
});
});
}
</script>
3.上传图片时预览功能
1).htm代码
<img id="img" style="width:100px; height:100px;" src=""/>
<input type="file" name="pic" id="file" />
2).JS代码
<script type="text/javascript">
$(document).ready(function () {
$("#file").bind("change", function () {
var f = document.getElementById('file').files[0];
var src = window.URL.createObjectURL(f);
$("#img").attr("src", src);
})
});
</script>
项目中常用的JS操作技巧的更多相关文章
- 项目中常用的js骚操作
//打开网址window.open("http://www.runoob.com"); //判断是否为url var url = $("#url").val() ...
- 项目中常用git命令操作指令(一般正常的话够用不够再看相关git命令)
配置git1.首先在本地创建ssh key:ssh-keygen -t rsa -C "github上注册的邮箱" //(一路回车)2.进入c:/Users/xxxx_000/.s ...
- 在项目中常用的JS方法封装
使用方法简单,只需要放在你的 utils.js 工具文件中,直接export const 加上下面封装方法,在别的文件中使用 {方法1,方法2,方法3...}引用后直接使用即可. 01.输入一个值.返 ...
- 项目中常用的js方法封装---自留
1.输入一个值,返回其数据类型 type = para => { return Object.prototype.toString.call(para).slice(8,-1) } 2.冒泡排序 ...
- 项目中常用的js方法(持续更新)
<script> var utils = { //时间戳转日期(timestamp:时间戳 默认当前时间) dateFormat: function(timestamp = new Dat ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- Android 项目中常用到的第三方组件
项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...
- 记录下项目中常用到的JavaScript/JQuery代码二(大量实例)
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
- 项目中常用的MySQL 优化
本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 一.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我 ...
随机推荐
- Cortex-M3学习小结
- Linux centos7 LAMP架构介绍、 MySQL、MariaDB介绍、MySQL安装
一.LAMP架构介绍 为Linux+Apache(httpd)+MySQL+PHP简写,把后三者安装在Linux Apache是最常用的的web服务软件,MySQL为小型的数据库存储软件,PHP为脚本 ...
- java中读取文本文件的时候@Test方法中没有中文乱码,但是@Controller中却有中文乱码
今天遇到了一个非常牛逼的BUG,在@Test标注的测试类中没有中文乱码,但是访问@Controller标注的接口却报中文乱码,找了一系列资料以及各种尝试之后,发现是因为eclipse编辑工具字符编码的 ...
- 【html&css学习】表单及表单项
表单在网络中很常见,如百度的搜索框,各种登录框密码,贴吧的帖子等都需要用表单来完成.表单是元素form且必须要有action属性来设置表单提交的地址.使用form创建的仅仅只是空表单,还有要表单项,常 ...
- Wordpress综合检测和爆破工具
WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站. 也可以把 WordPress当作一个内容管理系统(CMS)来使用.WordP ...
- java并发LockSupport
java并发LockSupport LockSupport是阻塞和唤醒线程的重要类. park()方法使得当前线程阻塞 unpark(Thread thread)唤醒线程 例子 可以把注释取消再执行, ...
- IAR STM32F10x_StdPeriph_Driver 3.4转3.6.1库
1.Fatal Error[Pe1696]: cannot open source file core_cmInstr.h STM32F10x_StdPeriph_Driver 3.4库移植换成3.6 ...
- redis学习笔记-03:redis安装
一.redis的安装和配置 1.下载redis-5.0.4.tar.gz到/opt目录下,解压命令 :tar -zxvf redis-5.0.4.tar.gz,解压后出现redis-5.0.4的文件夹 ...
- vue的高级使用技巧
全局组件注册 一般组件应用弊端,比较笨拙繁琐低效,比如我们写了一些组件,需要引用上的时候就通过import导入,那如果是高频繁需要使用的组件,则需要在每个使用的时候都需要引入并注册 假设现在有两个组件
- CH15 面向对象程序设计
面向对象程序设计是基于三个基本概念的:数据抽象.继承和多态. 第7章介绍了数据抽象的知识,简单来说,C++通过定义自己的数据类型来实现数据抽象. 数据抽象是一种依赖于接口和实现分离的编程技术:类的设计 ...