深入理解javascript函数参数与闭包,根据输入邮箱号跳转到相应登录地址的解决方法

本文知识点借鉴来自,里面写的比较详细还给出了例子,这里总结一下重点方便记忆。

话不多说,跟着小编一起来看下具体的实现代码吧

最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数。本人把学习的过程整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径,避免走弯路。内容有些多,但都是笔者对于函数的总结。

一、表单布局

<script>
var hash={
  'qq.com':'http://mail.qq.com',
  'gmail.com': 'http://mail.google.com',
  'sina.com': 'http://mail.sina.com.cn',
  '163.com': 'http://mail.163.com',
  '126.com': 'http://mail.126.com',
  'yeah.net': 'http://www.yeah.net/',
  'sohu.com': 'http://mail.sohu.com/',
  'tom.com': 'http://mail.tom.com/',
  'sogou.com': 'http://mail.sogou.com/',
  '139.com': 'http://mail.10086.cn/',
  'hotmail.com': 'http://www.hotmail.com',
  'live.com': 'http://login.live.com/',
  'live.cn': 'http://login.live.cn/',
  'live.com.cn': 'http://login.live.com.cn',
  '189.com': 'http://webmail16.189.cn/webmail/',
  'yahoo.com.cn': 'http://mail.cn.yahoo.com/',
  'yahoo.cn': 'http://mail.cn.yahoo.com/',
  'eyou.com': 'http://www.eyou.com/',
  '21cn.com': 'http://mail.21cn.com/',
  '188.com': 'http://www.188.com/',
  'foxmail.coom': 'http://www.foxmail.com'
};
$(function(){
  $(".activateBoxl").each(function(){
    var url = $(this).text().split('@')[1];

    var sel_url_val ;//定义全局变量
    $.each( hash, function(i, n){
      if(i == url){
        $(".activateBoxl").attr("href", n);//给跳转链接重新赋值
        sel_url_val = 1 ;
      }
    });
    if(sel_url_val != 1){
      alert('输入邮箱号无法正确定位');
    }
  });
})
</script>

1.函数参数

1.垂直表单(默认)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

  1.1:参数是什么

        向父 <form> 元素添加 role=”form”。
        把标签和控件放在一个带有 class .form-group 的 <div>
中。这是获取最佳间距所必需的。
        向所有的文本元素 <input>、<textarea> 和
<select> 添加 class .form-control。

您可能感兴趣的文章:

  • jquery css实现邮箱自动补全
  • Java实现邮箱找回密码实例代码
  • 如何验证会员系统中用户的邮箱是否真实存在
  • 在js中实现邮箱格式的验证方法(推荐)
  • jQuery验证手机号邮箱身份证的正则表达式(含港澳台)
  • jQuery实现邮箱下拉列表自动补全功能
  • 微信小程序-详解微信登陆、微信支付、模板消息
  • JavaWeb登陆功能实现代码
  • php实现登陆模块功能示例
  • 用AJAX实现页面登陆以及注册用户名验证的简单实例
  • js表单登陆验证示例

  1.2:参数的省略

<form action="#" role="form"> 
  <div class="form-group"> 
   <lable>姓名:<input class="form-control" type="text"/></lable> 
   <lable>性别:<input class="form-control" type="text"/></lable> 
  </div> 
 </form> 

  1.3:参数默认值

2.内联表单

  1.4:参数传递方式

向 <form> 标签添加 class .form-inline;       
默认情况下,Bootstrap 中的 input、select 和 textarea 有 100%
宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
使用 class .sr-only,您可以隐藏内联表单的标签。

  1.5:同名参数

 3.水平表单        

  1.6:arguments对象

    向父 <form> 元素添加 class .form-horizontal。       
    把标签和控件放在一个带有 class .form-group 的 <div>
中。       
    向标签添加 class .control-label。

2.闭包

<form action="#" role="form" class="form-horizontal"> 
  <div class="form-group"> 
   <lable class="control-label col-lg-2">姓名:</lable> 
   <div class=" col-lg-10"><input class="form-control" type="text"/></div> 

   <lable class="control-label col-lg-2">性别:</lable> 
   <div class="col-lg-10"><input class="form-control " type="text"/></div> 
  </div> 
 </form> 

  2.1:闭包定义

 二、支持的表单控件

  2.2:立即调用的函数表达式(IIFE, Immediately invoked function
expression)

1.输入框(Input)

1.函数参数

<lable>姓名:<input class=”form-control”
type=”text”/></lable> 

 1.1:参数是什么

2.文本框(Textarea)  可改变 rows 属性

 在定义一个函数时,有时候需要为函数传递额外的数据,不同的外部数据会得到不同的结果,这种外部数据就叫做参数。

<div class="form-group"> 
  <textarea rows="8" class="form-control"> 

   </textarea> 

 </div> 
 function keith(a){
 return a+a;
 }
 console.log(keith(3)); //6

3.复选框(Checkbox)和单选框(Radio)            
当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用
checkbox。如果您限制用户只能选择一个选项,请使用 radio。       
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline
class,控制它们显示在同一行上。

上面代码中,给keith函数传递了参数a,并且返回了a+a表达式。

<div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>篮球</lable> 
   </div> 
   <div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>音乐</lable> 
   </div> 
   <div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>绘画</lable> 
   </div> 
   <div class="radio"> 
    <lable><input type="radio"/>男</lable> 
   </div> 
   <div class="radio"> 
    <lable><input type="radio"/>女</lable> 
   </div> 

1.2:参数的省略

 4.选择框(Select)        

函数参数不是必须的,javascript规范允许省略调用时传递的实际参数。

    使用 <select>
展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。       
    使用 multiple=”multiple” 允许用户选择多个选项。

 function keith(a, b, c) {
 return a;
 }
 console.log(keith(1, 2, 3)); //1
 console.log(keith(1)); //1
 console.log(keith()); // 'undefined'
<div class="form-group"> 
     <select name="" id="" class="form-control" multiple> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
     </select> 
    </div> 

上面代码中,keith函数定义了三个参数,但是在调用时无论传递了多少个参数,javascript都不会报错。被省略的参数的默认值就变为undefined。了解函数定义与函数作用域
的都知道,函数的length属性会返回参数个数。需要注意的是,length属性与实际参数的个数无关,只是返回形式参数的个数。

 5.静态控件        

(实际参数:调用时传递的参数。     形式参数:定义时传递的参数。)

当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用
class .form-control-static。

但是没有办法省略只靠前的元素,而保留靠后的元素。如果一定要省略靠前的元素,只有显示传入undefined。

<div class="form-group"> 
  <label class="col-sm-2 control-label">Email</label> 
  <div class="col-sm-10"> 
  <p class="form-control-static">email@example.com</p> 
  </div> 
 </div> 
 function keith(a, b) {
 return a;
 }
 console.log(keith(, 1)); //SyntaxError: expected expression, got ','
 console.log(keith(undefined, 2)); //'undefined'

三、表单控件状态

上面代码中,如果省略了第一个参数,浏览器就会报错。如果给第一个参数传递undefined,则不会报错。

1.输入框焦点        

1.3:默认值

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用
box-shadow。   

在JavaScript中,函数参数的默认值是undefined。然而,在某些情况下设置不同的默认值是有用的。一般策略是在函数的主体测试参数值是否为undefined,如果是则赋予一个值,如果不是,则返回实际参数传递的值。

2.禁用的输入框 input        

 function keith(a, b) {
 (typeof b !== 'undefined') ? b = b: b = 1;
 return a * b;
 }
 console.log(keith(15)); //15
 console.log(keith(15, 2)) //30

如果您想要禁用一个输入框 input,只需要简单地添加 disabled
属性,这不仅会禁用输入框还,会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

上面代码中,做了个判断。当在调用时没有传入b参数,则默认为1。

<div> 
  <lable>姓名:<input type="text" disabled class="form-control"/></lable> 
 </div> 

从ECMAScript 6开始,定义了默认参数(default
parameters)。使用默认参数,在函数体的检查就不再需要了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图