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

时间: 2024-10-21 18:53:25

JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别的相关文章

JS 页面加载触发事件 document.ready和window.onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 使用jq时一般都是这么开始写脚本的: $(function(){ // do something }); 例如: $(function() { $("a").click(function() { alert(&

js点击任意区域弹出层消失,js点击弹出层之外的任意区域弹出层消失,常见弹层的封装

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> *{margin:0;padding:0;} .warp{overflow:hidden;} .div1,.div2,.div3,.div4{wi

微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 1 "use strict"; 2 Object.defineProperty(exports, "__esModule", { 3 value: true 4 }); 5 const http = require('./utils/http.js'); 6 const api = require('./config.js'); 7

JS window,onload 与 $().read()

JS:window.onload的使用介绍 1.在body标签里面 2.在JS语句调用 3.同时调用多个函数 4.JS调用多个函数 5.自定义的函数多次调用 jquery $(document).ready() 与window.onload的区别

打开页面js自动加载的方法

一.js方法: 1.在body标签加onload属性: 例:<body > 2.window.onload方法 例: <script type="text/javascript"> function myfunction(){ alert("自动加载"); } window.onload = myfun();//可不加括号 </script> 二.jQuery方法: 1.window.onload =function() {ale

js中window.onload与jquery中$(document.ready())的区别

$(document).ready()是在DOM结构载入完后执行的,而window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张大容量图片) <html> <head> <script type='text/javascript' src='jquery-1.3.2.min.js'></script> <script ty

03-body标签中相关标签

今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的意思. li:list item,"列表项"的意思. 示例: <ul> <li>张三</li&g

03-body标签中相关标签-2

主要内容: 列表标签 <ul>.<ol>.<dl>表格标签 <table>表单标签 <form> 一.列表标签 列表标签分为三种. 无序列表 有序列表 定义列表 1.无序列表<ul>,无序列表中的每一项是<li> 1.1.英文单词解释如下:ul:unordered list,"无序列表"的意思.li:list item,"列表项"的意思. 示例: <ul> <li&

前端之body标签中相关标签(二)

一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li:list item,“列表项”的意思. 示例: <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> 效果: 注意: a.li不能单独存在,必须包裹在ul里面:反过来说,u