JS点击任意标签获得该标签属性，以获得ID为例，以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别...-CSDN博客

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()可以同时编写多个，并且都可以得到执行

转载于:https://www.cnblogs.com/llcdbk/p/4710165.html