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. HDU 2149 (巴什博奕) Public Sale

    没什么好说的,一道水题. #include <cstdio> int main() { int n, m; ) { if(n <= m) { for(int i = n; i < ...

  2. C实现类封装、继承、多态

    1.  概述 C语言是一种面向过程的程序设计语言,而C++是在C语言基础上衍生来了的面向对象的语言,实际上,很多C++实现的底层是用C语言实现的,如在Visual C++中的Interface其实就是 ...

  3. POJ 1861 Network (MST)

    题意:求解最小生成树,以及最小瓶颈生成树上的瓶颈边. 思路:只是求最小生成树即可.瓶颈边就是生成树上权值最大的那条边. //#include <bits/stdc++.h> #includ ...

  4. 2016第20周四java基础概念

    简单的说JDK=JRE+Java编译器.调试器.工具类库等:JRE=JVM(类似于jre目录下的bin)+必要运行的类库(类似于jre目录下的lib) JVM:Java Virtual Mechina ...

  5. MySQL的事件调度器

    自MySQL5.1.0起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务,可以看作基于时间的触发器. 一.开启 事件调度默认是关闭的,开启可执行 ...

  6. MySQL基础之第14章 存储过程和函数

    避免编写重复的语句 安全性可控 执行效率高 14.1.创建存储过程和函数 14.1.1.创建存储过程 CREATE PROCEDUREsp_name ([proc_parameter[,...]]) ...

  7. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  8. window 7 下一台cp 两个mysql 配置主从

    环境 : 个人 pc windows7 一台 ; 使用 : 官方下载: mysql-noinstall-5.5.11-win32.zip 1. 解压 成2个 (文件夹) mysql_master (主 ...

  9. 预热buffer pool

    mysqldump -u root db_name table_name> /dev/null select * from ...

  10. 获取当前的 viewController

    - (UIViewController *)currentController {    UIViewController *result = nil;    UIWindow *window = [ ...