菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
367
0

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

原创
05/13 14:22
阅读数 62397

总结, 有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 中的 换行是: 用 的 \n, 其16进制是 0xa = (10)十进制的10 就是上面的最后的那个字节, 是不可显示字符,用点号表示
而在win中, 换行是用 CR LF两个字节表示的 CR = enter(0xd =13), LF =换行=(0x0a)

  • 所以 在js中要判断换行, 用 a_long_str.split('regExp')中的 正则表达式用 : '\r\n|[\n\r]' 前面的 \r\n用来匹配win, 后面的 [\n\r] 用来匹配linux或mac.
  • 因此,你要理解 文本文件中的内容实际上是一个 长的字符串! 换行只不过也是一个字符! 是一个不可见字符而已. 换行符是长字符串内容中的一个 普通地位的字符 而已
    \r是把光标移动到 当前行 的行首, 而\n是将光标移动下一行的开头
  • 在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
    来判断.

发表评论

0/200
367 点赞
0 评论
收藏