• 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?


    总结, 有3点:

    1. 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个
      checkbox的 prop('checked') 属性值, 确实是 true, 但是当 点击 消息框/alert框 的 "确定" 按钮后, 这个时候这些 选择框 已经不存在了! 所以在回调函数中, 再来获取 checkbox的选中状态值, 总是返回的false, 因此 你在回调函数中 的if判断, 以及设置语句 都不会生效! 它们已经消失了. 或者说, 它们存在 的空间 和 回调函数的空间 是 不同的 时空! 是异次空间! 或者说" 在 消息框中的 内容 和 在原来的html中的对应内容 不是同一个, 是影子, 是copy.

    2. 那要怎么去获取 真实 的消息框/对话框中的 checkbox 选中状态并设置相应的操作呢?
      那就是: 在原来的html页面中, 就把 判断checkbox 等的/设置 语句 script 脚本嵌入进去. 并绑定 checkbox的 click事件. 在这个事件中进行各种设置. 也就是, 趁消息框中的html内容
      还没有消失时,在这个时空中去获取 固定 下来....

    <div class="tipbox hidden">
      <p> 
      你要在消息框中显示的内容信息等.......
      </p>
      <p><input type="checkbox" class="showOnce" value='0'>不再显示提示框</p>
    <!-- 在这里嵌入script语句 , 不要在 回调函数中去写 -->
      <script>
    $('input.showOnce').click(function(){
      alert('you click in messager');
      alert('now,prop is: ' + $(this).prop('checked'));
      if($(this).prop('checked')){
        $(this).attr'1');
      }
    });
      </script>
    </div>
    
    

    上面的$(this)有点问题, 应该是:

      <script>
    $('input.showOnce').click(function(){
      if($(this).prop('checked')){
        // 要注意jquery中的 this, $this的陷阱, 有时候$this并不是想象的对象,所以谨慎的使用$this, 比如下面
        // 的语句用$(this).val(1)就无效!??
         //  $(this).val('1'); 是无效的! 
        $('input.showOnce').prop('checked',true);
        $('input.showOnce').val('1');
        // $('input.showOnce').attr('value','1'); 也是可以的
      }
    });
      </script>
    
    1. 最后就是要注意 checkbox 的val()和 attr的用法!
    • 如果设置了input[type="checkbox"]的val('值'), 会去改变以有的 attr的值, 即使 原来的input的checkbox没有 value属性, 也会自动的 / 显式的 添加 一个属性value =....
        <div id='test'>
          <input type="checkbox" id="test" >
        </div>
    
    $('input#test').val('a00');
    console.log($('div#test').html());      //  <input id="test" value="a00" type="checkbox">
    attr()函数也是一样的!
    

    js原生的 confirm 和 $.messager.confrim的区别?

    • 前者不能解释 显示消息html字符串中的 html代码, 按原样显示;
    • 后者则可以解释 显示消息中的 html代码, 也能执行 显示消息中的 script, 这个是非常重要的!

    ===================================================================================================
    js脚本和相关html部分的 有效域

    • 在js文件相互嵌入/引用/显示在消息框中 时候, js最好和它引用dom的html部分 放在一起 (在同一个页面)
    • 不要跨页面去使用js, 就是在一个页面内的js, 去引用/访问 另一个页面中的 dom元素, 往往是拿不到的
    • 甚至, 当一端html放在jeasy的messager中时,要执行它里面的dom节点的js动作, 要把js代码嵌入到这段要显示在消息框中的 html内部, 而不要放在其他地方
      总之, 就是 js代码最好和它相关引用的html放在一起, (放在/保证在 同一个时空中)

    js预览本地图像?
    就是将 FileReader读取本地图片,返回的 readAsDataUURL 方法 图片路径字符串,给 预览图像的img 标签的src
    firefox官网的一个例子:

    function previewFile() {
      var preview = document.querySelector('img');
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();
    
    // 异步回调中处理
      reader.addEventListener("load", function () {
        preview.src = reader.result;
      }, false); 
    
    // 如果file == true , 读
      if (file) {
        reader.readAsDataURL(file);
      }
    }
    

    ==================================================================
    linux上的 十六进制/二进制查看文件? xxd, od, hexdump, hexer, ghex hexyl等

    [lee@localhost ~]$ xxd xxd.txt 
    00000000: 7468 6973 2069 730a 610a 7465 7374 0a0a  this is.a.test..  (默认的用16个字节一行显示, 中间的20 就是空格, 0a就是换行,
    00000010: 6120 7370 6163 6520 6c69 6e65 3f0a       a space line?.      所以在16进制下就可以可看到换行/回车不过是一个普通字符而已!)
    [lee@localhost ~]$ 
    
    [lee@localhost ~]$ xxd -c 8  -g 1  -s 0 -l 0x08  -u xxd.txt 
    00000000: 74 68 69 73 20 69 73 0A  this is.
    00000008: 61 0A 74 65 73 74 0A 0A  a.test..
    

    -c 每行显示多少个字节
    -g 多少个字节1组
    -s 从文件的什么位置处开始(注意, 跟-o 选项不一样, -o 是说文件显示在内存的什么位置开始 -off -s是start的意思)
    -l length
    -u 使用大写的16进制字符表示, 注意这个跟 ascii码的大小写不一样, 后者是有区别的! a: 从 0x61, A: 从0x31 开始. 而16进制的a和A 都是一样的, 都是10
    最重要的是: 这里的 linux 中的 换行是: 用 的 , 其16进制是 0xa = (10)十进制的10 就是上面的最后的那个字节, 是不可显示字符,用点号表示
    而在win中, 换行是用 CR LF两个字节表示的 CR = enter(0xd =13), LF =换行=(0x0a)

    • 所以 在js中要判断换行, 用 a_long_str.split('regExp')中的 正则表达式用 : ' |[ ]' 前面的 用来匹配win, 后面的 [ ] 用来匹配linux或mac.
    • 因此,你要理解 文本文件中的内容实际上是一个 长的字符串! 换行只不过也是一个字符! 是一个不可见字符而已. 换行符是长字符串内容中的一个 普通地位的字符 而已
      是把光标移动到 当前行 的行首, 而 是将光标移动下一行的开头
    • 在vim中也可以显示16进制: 执行命令 :%!xxd (按16进制显示) , 如果按 二进制显示 :%!xxd -b 返回文本样式, 用 :%!xxd -r命令

    ==============
    在客户端预览/读取文件内容, 在浏览器的安全机制上 是不允许的? 如果确实要这样, 必须有用户进行授权, 当用户点击 文件域 input[type=file] 的时候, 就是授权的过程.
    为了实现浏览器的兼容, 用html5 提供的 FileReader , 而不用ActiveXObject, 那是ie特有的, 不兼容.

    • 对tp的上传, 有两个容易混淆的名字: 一个是 ->savePath (这个是 upload类的属性), 而 ['savepath'] 则是上传文件的属性!

    ====
    js字符串的正则匹配
    默认情况下, 是贪婪匹配, 如果要非贪婪匹配, 就在 量词的后面加上?(因为?只能匹配0次或1次,所以是非贪婪匹配)
    但是要注意:

    • js的正则总是 从 第一个可能的位置开始匹配, 但是如果 匹配位置后还有其他 文本量需要匹配, 则前面匹配的内容将不得不继续往后匹配...
      比如: 'aaab'.match(/a+?/) 将返回 一个 'a'
      但是 'aaab'.match(/a+?b/) 以为返回的是ab, 但是却返回的是 'aaab' 为什么? 因为 js总是从第一个可能的位置开始匹配, 因此它 从第一个a开始匹配, 本来这时候,非贪婪匹配 a+? 就结束了, 但是为了匹配后面的b, 所以就不得不继续匹配, 直到b, 所以返回的结果就是 'aaab'

    ========================

    关于判断js中的"数字字符串", 数字字面的字符串?

    • js中的函数/方法分为: 全局函数/对象方法; 全局函数就是不是对象的方法属性, 不需要用对象来引用, 比如这里的 Number()等, 当然对象方法就是要由对象来引用的,比如: strObj.substr, 你i不能这样 : substr(str,....)
    • 在jquery中,关于类的增减的方法有三个: addClass, removeClass, 还有一个判断是否有某个类的方法, 就是hasClass : if( $('selector'). hasClass('classnamme'))
    • 有四个函数可以判断 包括: Number, isNaN, parseFloat , parseInt
      其中 isNaN可以说是 等于Number, 因为isNaN就是根据 Number()函数的结果来判断的. 但是 Number并不是直观上的判断, 其他比如 : boolean(false=0, Nuumber(true) =1), null,
      [] '', 等都回被Number转换为数字0, 所以isNaN的返回结果都是 false
      (为什么不能直接 让一个 变量跟 NaN做 == !== 的比较? 因为任何变量跟 NaN 做比较, 都是不等的)

    而 parseFloat则是解析 字符串中的 数字

    • 包含的可解析的字符包括4种: +-, 0-9, 小数点, e/E 是科学计数法,表示的是10 的n次方. 注意不是指数函数那个e(exp)
    • 解析时忽略开头和结尾的空格, 如果开头的字符就不能解析的话, 就直接返回NaN
      而parseInt则不会解析小数点和e/E, 还要指定解析时字符所表示的基数(即进制) radix[reidiks]

    == 所以, 当从文本文件中读取出来的数据, 后, 都成为了 "字符串"类型的, 那么, 如何判断原来的文件中的 字段的数据类型呢?

    • 直接判断是没有办法了, 因为从FileReader.result到 str.split() 出来都是字符类型的结果, 所以只有用 "数字字面上的字符串" 来判断 它们的原始类型:
      为了避免其他类型的干扰, 不要单纯的用 Number/isNaN/parseFloat/parseInt, 而是用 isNaN(parseFloat())来判断, 先用parseFloat来解析, 然后用 isNaN
      来判断.

  • 相关阅读:
    如何在android 系统 C/C++ 层中添加 log 信息
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2拦截器的执行顺序
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2拦截方法的拦截器
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2实现拦截器类
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2实现文件下载的Action
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2拦截器实现文件过滤
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2手动实现文件过滤
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2实现文件上传的Action
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2手动完成输入校验(2)
    吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记:struts2手动完成输入校验
  • 原文地址:https://www.cnblogs.com/bkylee/p/12373174.html
Copyright © 2020-2023  润新知