JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别
js代码:
//$(document).click(function (e) { // 在页面任意位置点击而触发此事件
// var select = "";
// var i = $(e.target).attr("id"); // e.target表示被点击的目标
//这里是实际项目里面寻找下拉框的方法
// select = e.target.parentNode.parentNode.getElementsByTagName('select')
//循环的方式寻找点中的HTML标签的ID
// for (var i = 0; i < select.length; i++) {
// selectId = select[i].id;
// //$.parser.parse("#" + selectId);
// }
看了许久的AJAX才发现异步的AJAX是当方法提交到服务器后不管执行的成果直接执行AJAX下面的方法,同步则是当服务器响应后 执行AJAX后面的方法,例子如下
$(window).load(function () {
$.ajax({
type: "POST",
url: "AdvancedQueryPage.aspx/CreatControl",
dataType: "json",
//若要改为同步,请取消此部分的注释,并且把下拉框的单击事件放在ajax方法的后面
//async: false,
contentType: "application/json; charset=utf-8",
success: function (msg) {
var searchCoditionBody = "";
var num = 0;
//循环原始的JSON数据
$.each(JSON.parse("{" + msg.d + "}"), function (key, name) {
//对key的名字进行解析
var info = key.toString().split('$');
if (num % 2 == 0) {
searchCoditionBody += "<tr>";
}
for (var i = 0; i < info.length; i++) {
//字典类型的拼接法则
if (info[2] == "True") {
searchCoditionBody += "<td><table style=\"width: 99%\"><tr><td style=\"width:90px; text-align: center\">" + info[0] + "</td> <td colspan=\"2\"> <select id=\"s_" + info[1] + "\" style=\"width:99%\" class=\"easyui-combotree\"></select></td></tr></table></td>";
break;
}
//时间类型的拼接法则
else if (info[2] == "DateTime") {
searchCoditionBody += "<td><table style=\"width: 99%\"><tr><td style=\"width:90px;text-align: center\">" + info[0] + "</td> <td style=\"width: 15%\"> <select id=\"s_" + info[1] + "\" style=\"width:60%\" class=\"easyui-combotree\"></select></td> <td><table style=\"width:99%\"><tr><td><input id=\"txt_beg" + info[1] + "\" style=\"width: 99%\" data-options=\"editable:false\" class=\"easyui-datebox\" /></td><td style=\"width: 6%\">至</td><td><input id=\"txt_end" + info[1] + "\" style=\"width: 99%\" data-options=\"editable:false\" class=\"easyui-datebox\" /></td></tr></table></td></tr></table></td>";
break;
}
//字符串和数字类型的拼接法则
else {
searchCoditionBody += "<td><table style=\"width:99%\"><tr><td style=\"width:90px\" text-align: center\">" + info[0] + "</td> <td style=\"width:15%\"> <select id=\"s_" + info[1] + "\" style=\"width:60%\" class=\"easyui-combotree\"></select></td><td><input id=\"txt_" + info[1] + "\" style=\"width: 99%\" class=\"easyui-textbox\" data-options=\"prompt:'在此输入...'\" /></td></tr></table></td>";
break;
}
}
num++;
if (num % 2 == 0) {
searchCoditionBody += "</tr>";
}
})
//追加到table里面最后渲染指定的这个table
$("#searchCondition").html(searchCoditionBody);
$.parser.parse($('#searchCondition'));
//给这些控件添加数据
$.each(JSON.parse("{" + msg.d + "}"), function (key, name) {
//对key的名字进行解析
var info = key.toString().split('$');
for (var i = 0; i < info.length; i++) {
var content = eval(name);
$("#s_" + info[1]).combotree('loadData', content);
break;
}
});
//如果是异步执行的话,在执行success里面方法的时候还要去同时执行ajax后面的方法
var selectId = "";
$("input").click(function () {
var selectId = $(this).parent().parent().find("select").attr("id");
$("#" + selectId).combotree({
onSelect: function (node) {
selectId = selectId.replace("s_", "");
if (node.text == "介于") {
alert($("#txt_end" + selectId).attr("id"));
$("#txt_end" + selectId).datebox({
disabled: true
});
} else {
alert($("#txt_end" + selectId).attr("id"));
$("#txt_end" + selectId).datebox({
disabled: false
});
}
}
});
});
},
error: function (err) {
alert(err.error); 2
}
});
//AJAX执行成功后的同步执行处,即,如果是同步的话这个方法就是需要等待的,如果是异步的话,这里无需等待,继续执行
//var selectId = "";
//$("input").click(function () {
// var selectId = $(this).parent().parent().find("select").attr("id");
// $("#" + selectId).combotree({
// onSelect: function (node) {
// selectId = selectId.replace("s_", "");
// if (node.text == "介于") {
// alert($("#txt_end" + selectId).attr("id"));
// $("#txt_end" + selectId).datebox({
// disabled: true
// });
// } else {
// alert($("#txt_end" + selectId).attr("id"));
// $("#txt_end" + selectId).datebox({
// disabled: false
// });
// }
// }
// });
//});
说这个是因为这个例子需要加载完所有页面的标签并且给标签赋值后调用标签的事件进行处理数据,如果是异步的话,把标签处理数据的方法放在AJAX方法后面就会导致AJAX的方法还没加载完,标签不完整,所以不能够得到标签的ID进行数据处理,解决的方法就是把点击事件放在成功的方法里面去执行或者改为同步的AJAX方法
,此外,$(function(){})是$(document).ready()的简写,它是加载完所有的DOM后就执行方法,而$(window).ready()是加载完页面所有的信息包图片后才开始执行方法,这是二者的区别,还有就是
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别的更多相关文章
- JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- js window.onload 加载多个函数和追加函数
平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...
- js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- JS - 点击事件排除父级标签
点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...
- vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路)
通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口: 说明: 因每个人写法不同.需求不同 ...
- js页面加载的几种方式的速度: window.onload、 $(window).load、 $(function(){})、 $(document).ready(function () {})、onload=‘asd()’
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 常用js,css文件统一加载方法,并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- js 一个关于图片onload加载的事
前几天一个项目让我头疼了很久,一个关于图片加载时的loading效果,因为不是太懂js,所以在网上各种找资料,但还是不理想,无赖苦心研究,终于有了一点眉目了,虽然个中还有一些道理不懂,至少目的达到了; ...
- 微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题
使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 "use strict"; Object.d ...
随机推荐
- MIPI DSI 和 D-PHY 初始化序列
MIPI DSI 和 D-PHY 初始化序列 -- 深圳 南山平山村 曾剑锋 参考文档: i.MX 6Dual/6Quad Multimedia Applications Processor Refe ...
- python练习程序(c100经典例1)
题目: 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? num=0; for i in range(1,5): for j in range(1,5): for k in ...
- 用KNN算法分类CIFAR-10图片数据
KNN分类CIFAR-10,并且做Cross Validation,CIDAR-10数据库数据如下: knn.py : 主要的试验流程 from cs231n.data_utils import lo ...
- 【自动化测试】Selenium的智能等待
dr.implicitly_wait(30) --- 智能等待 http://www.cnblogs.com/fnng/p/3214112.html =========== selenium 调用键盘 ...
- OpenGL学习之路(一)
1 引子 虽然是计算机科班出身,但从小对几何方面的东西就不太感冒,空间想象能力也较差,所以从本科到研究生,基本没接触过<计算机图形学>.为什么说基本没学过呢?因为好奇(尤其是惊叹于三维游戏 ...
- js处理日期的一些整理(js获取给定日期前一天的日期)
var date = new Date(); alert(date);//获取当前时间 alert(date.getFullYear());//获取当前年分 alert(date.getMonth() ...
- PHP中的session
来自博客园 1.初始化(使用session前都要使用,一个页面用一个就可以了) session_start(); 2.保存 $_SESSION[$sessionName]=$value; (value ...
- Excel 绘制图表,如何显示横轴的数据范围
右键点击X坐标轴,然后选中“设置图表区域格式”,然后在“坐标轴选项”--“区域”处设置X轴范围. 备注,这种方式仅使用与第一列时日期时间类型的数据. 应用场景 当,选择有两列数据,第一列为横轴数据,第 ...
- shell脚本基础——常用的sed命令举例
一般在实际使用编辑器的过程中 , 常需要执行替换文件中的字符串.移动.删除.与搜寻数据行等等动作.当然 , 一般交互式编辑器(如 vi.emacs)都能做得到上述功能 , 但文件一旦有大量上述编辑需求 ...
- 建立连接ALM的xml config文件
我就不贴所有的了,如果有谁想要所有源码和应用程序,可以密我 这里我贴下如何在第一次运行的时候自动建立一个ALMConfig的xml文件 private static void CreateALMCon ...