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. 相对定位、绝对定位在IE6的问题

    注意: 关于绝对定位,在IE6下定位元素的父级宽高都为奇数那么在IE6下定位元素的right,bottom都有一像素的偏差(left,top无偏差).因此应尽量使用偶数. 关于绝对定位,在IE6下父级 ...

  2. wordpress plugins collection

    1/ simple page ordering 4.8星 wordpress的plugins唯一的好处就是命名简单易懂,这款插件从名称就可以看出来,用来对page页面排序的.只需要在后台page中拖拽 ...

  3. ab做压力测试

    ab是apache 自带的一个压力测试的小工具,可用于接口简单的压力测试. 以下是AB的简要介绍 格式:ab [options] [http://]hostname[:port]/path 参数说明: ...

  4. BZOJ 3653 谈笑风生

    ORZ blutrex...... 主席树. #include<iostream> #include<cstdio> #include<cstring> #incl ...

  5. I.MX6 shutdown by software

    /************************************************************************ * I.MX6 shutdown by softwa ...

  6. HDU 5335 Walk Out (BFS,技巧)

    题意:有一个n*m的矩阵,每个格子中有一个数字,或为0,或为1.有个人要从(1,1)到达(n,m),要求所走过的格子中的数字按先后顺序串起来后,用二进制的判断大小方法,让这个数字最小.前缀0不需要输出 ...

  7. *ecshop 限制文章帮助文章显示条数

    1.打开 /themes/default/library/help.lbi 文件 <!-- {foreach from=$help_cat.article item=item} --> & ...

  8. Linux多线程下载工具Axel

    一般情况,在 Linux 下我们习惯于用 wget 下载,但该工具的缺点就是无法进行多线程下载,所以往往有时候速度不够快.这里介绍的 Axel,是 Linux 下一款不错的 HTTP 或 FTP 高速 ...

  9. Jquery 设置style:display 通过ID隐藏区域

    $("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id&q ...

  10. mysql Access denied for user \'root\'@\'localhost\'”解决办法总结,下面我们对常见的出现的一些错误代码进行分析并给出解决办法,有需要的朋友可参考一下。

    mysql Access denied for user \'root\'@\'localhost\'”解决办法总结,下面我们对常见的出现的一些错误代码进行分析并给出解决办法,有需要的朋友可参考一下. ...