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載入方法的區別