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加载方法的区别的更多相关文章

  1. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  2. js window.onload 加载多个函数和追加函数

    平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...

  3. js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  4. JS - 点击事件排除父级标签

    点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...

  5. vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路)

    通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口: 说明:  因每个人写法不同.需求不同 ...

  6. js页面加载的几种方式的速度: window.onload、 $(window).load、 $(function(){})、 $(document).ready(function () {})、onload=‘asd()’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  8. js 一个关于图片onload加载的事

    前几天一个项目让我头疼了很久,一个关于图片加载时的loading效果,因为不是太懂js,所以在网上各种找资料,但还是不理想,无赖苦心研究,终于有了一点眉目了,虽然个中还有一些道理不懂,至少目的达到了; ...

  9. 微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

    使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 "use strict"; Object.d ...

随机推荐

  1. Asp.Net判断字符是否为汉字的方法大全

    判断一个字符是不是汉字通常有三种方法: 第一种用 ASCII 码判断,缺点:把全角逗号“,”当汉字处理 第二种用汉字的 UNICODE 编码范围判 断, 第三种用正则表达式判断 1.用ASCII码判断 ...

  2. Postgresql两表联结更新

    Postgresql两表联合更新近日使用Postgresql感到有点不好用,一个联合更新非要这样写语法才对:update d_routetripset name=b.name ,    descrip ...

  3. cocos2d-x使用python脚本创建项目的简单方法

    本文有CC原创,转载请注明地址:http://blog.csdn.net/oktears/article/details/13297003 在cocos2d-x2.1.4以上的版本中,取消了使用vs模 ...

  4. vim 常用命令总结

    https://www.ibm.com/developerworks/cn/linux/l-cn-tip-vim/ 1 文档开头末尾 [[ 开头 ]]末尾 2 删除全部 :%d 3 剪切.复制.粘贴 ...

  5. Android RecyclerView使用详解(二)

    在上一篇(RecyclerView使用详解(一))文章中简单的介绍了RecyclerView的基本用法,接下来要来讲讲RecyclerView的更多用法,要实现不同的功能效果,大部分都还是在于Recy ...

  6. Ruby on Rail 开发入门

    开发一个博客网站,users资源对象和Microposts评论内容 rails generate scaffold user name:string ,email:string 生成user对象的脚手 ...

  7. 写python时加入缩进设置

    发现如果用vim写python的时候,还是设成8好像会报错,在现有的基础上,加入下面设置就好了set shiftwidth=4

  8. 使用异步任务加载网络上json数据并加载到ListView中

    Android中使用网络访问来加载网上的内容,并将其解析出来加载到控件中,是一种很常见的操作.但是Android的UI线程(也就是主线程)中是不允许进行耗时操作的,因为耗时操作会阻塞主线程,影响用户体 ...

  9. 18、GPS技术

    GPS核心API Android SDK为GPS提供了很多API,其中LocationManager类是这些API的核心.LocationManager是一个系统服务类,与TelephonyManag ...

  10. Delphi 提示在Delphi的IDE中,按Ctrl+Shift+G键可以为一个接口生成一个新的GUID。

    对于Object Pascal语言来说,最近一段时间最有意义的改进就是从Delphi3开始支持接口(interface),接口定义了能够与一个对象进行交互操作的一组过程和函数.对一个接口进行定义包含两 ...