大家对input中的value值研究的透彻么,今天看到一篇博客,很神奇  然后研究了一下input中的value值到底对应的是啥值

1、input中的value,这是大家在开发中进场遇到的一个问题

<input type="button" value="kester" onclick = "alert(value)">

这种情况下,会弹出测试的弹窗内容为“kester”

2、但是在请看一下的一种情况

<script>
var value=123;
</script>
<input type="button" onclick = "alert(value)">

心里在想,这种情况下value找不到,是不是沿着作用域找到上一层的document,应该弹出“123”,结果是错误的,然而弹出来的是一个空值

3、value确实是找不到么?答案却否定的。

在调试工具下,查看的this的属性是有一条记录的:value:“”,这样证实了value为空值,例下代码

<input type="button" onclick = "console.log(this)">

4、所以,在input中,value是永远存在的,不存在找不到的情况,赋值了value就是被赋值的值,没有赋值的value为空,这个大家都应该清楚的

5、举个例子

<script>
var val=123;
</script>
<input type="button" onclick = "console.log(val)">

value的伪装兄弟是val。val现在input对象上找,没有找到,沿着作用域在document对象上找,找到弹出123

6、不论val=123被写在前面还后面,都是可以访问到的,因为这是一个点击事件,当在出发这个点击事件的时候,页面已经解析了js

<input type="button" onclick = "console.log(val)">
<script>
var val=123;
</script>

7、是这样吗?但其实把声明放在后面是不靠谱的,如果之间还有其他<script>代码,由于网络原因无法访问到,由于<script>有阻塞作用,会阻塞后面代码,会报错。

<input type="button" onclick = "alert(val)">
<script src="http://www.qq.com/test.js"></script>
<script>
var val=123;
</script>

javascript小知识点的更多相关文章

  1. JavaScript小知识点(一)

     JavaScript 有3种方式定义对象 ①  var i = { function-x:function{ //todo }}; 这是通过Json方式定义一个函数对象. ②  function P ...

  2. javascript中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻 [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" va ...

  3. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  4. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  5. jQuery 小知识点(插件)

    1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...

  6. 深入了解webpack前,可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  7. JavaScript基本知识点——带你逐步解开JS的神秘面纱

    JavaScript基本知识点--带你逐步解开JS的神秘面纱 在我们前面的文章中已经深入学了HTML和CSS,在网页设计中我们已经有能力完成一个美观的网页框架 但仅仅是网页框架不足以展现出网页的魅力, ...

  8. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  9. 刚接触Linux,菜鸟必备的小知识点(一)

    身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...

随机推荐

  1. CAS认证原理图

  2. js 事件捕获与事件冒泡例子

    http://codepen.io/huashiyiqike/pen/qZVdag addEventListener 默认是冒泡阶段执行,也就是父亲与子都监听时,点击子,子先处理,父亲再处理,这时加s ...

  3. BZOJ 1251 序列终结者(Splay)

    题目大意 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术 ...

  4. 视觉SLAM中的数学基础 第四篇 李群与李代数(2)

    前言 理解李群与李代数,是理解许多SLAM中关键问题的基础.本讲我们继续介绍李群李代数的相关知识,重点放在李群李代数的微积分上,这对解决姿态估计问题具有重要意义. 回顾 为了描述三维空间里的运动,我们 ...

  5. Go语言实现HashSet

    set.go // set project set.go package set type Set interface { Add(e interface{}) bool Remove(e inter ...

  6. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  7. Mina、Netty、Twisted一起学(三):TCP消息固定大小的前缀(Header)

    在上一篇博文中,有介绍到用换行符分割消息的方法.但是这种方法有个小问题,如果消息中本身就包含换行符,那将会将这条消息分割成两条,结果就不对了. 本文介绍另外一种消息分割方式,即上一篇博文中讲的第2条: ...

  8. MySQL工具汇总

    本博客已经迁移至:http://cenalulu.github.io/ 本篇博文已经迁移,阅读全文请点击:http://cenalulu.github.io/mysql/mysql-tools-lis ...

  9. Hadoop入门进阶课程9--Mahout介绍、安装与应用案例

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  10. [git]解决:git config --global push.default matching

    解决:git config --global push.default matching 这个警告的意思是:需要设置默认push的分支,所以设置好全局push的默认分支就好了.命令如下: 在有git目 ...