JS點擊任意標籤獲得該標籤屬性,以獲得ID為例,以及AJAX的非同步原理和 $(document).ready()與window.onload載入方法的區別

來源:互聯網
上載者:User

標籤:

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.