JS简单基础总结

最新推荐文章于 2022-05-09 23:39:03 发布
最新推荐文章于 2022-05-09 23:39:03 发布
阅读量167 收藏
点赞数
分类专栏： 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44022446/article/details/85043718
版权

一.  表格查询铺值
     //表格
   <table>
    <thead>
       <tr>
         <th style="text-align: center;">
             <div>序号</div>
         </th>
         <th style="text-align: center;">
             <div>姓名</div>
         </th>
         <th style="text-align: center;">
              <div>性别</div>
         </th>
       </tr>
     </thead>
     <tbody id="dataDicParent">
     </tbody>
    </table>
     铺数据值的方式 （append与html）

    var str = '<tr><td>1</td><td>mary</td><td>女</td></tr>'
     //方法一：拼接
     $("#dataDicParent").append(str);
     //方法二：赋值
     $("#dataDicParent").html(str);

 

二.  弹窗提示：js弹窗的3种方式：alert、confirm、prompt
     <%@page contentType="text/html"%>
     <%@page pageEncoding="UTF-8"%>
     <!DOCTYPE html>
     <html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
        <title>js三种弹出对话框的用法实例</title>
 
        <script language="javascript">
            function ale() {
                //这个基本没有什么说的，就是弹出一个提醒的对话框  
                alert("我敢保证，你现在用的是演示一");
            }
 
            function firm() {
 
                //利用对话框返回的值 （true 或者 false）  
 
                if(confirm("你确信要二十二画生的博客？"))
 
                {
                    //如果是true ，那么就把页面转向thcjp.cnblogs.com  
 
                    location.href = "http://blog.csdn.net/liuchangjie0112";
                } else
                {
                    //否则说明下了
                    alert("你按了取消，那就是返回false");
                }
            }
 
            function prom()
 
            {
                var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，  
 
                //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
 
                if(name) //如果返回的有内容  
 
                {
                    alert("欢迎您：" + name)
                } else {
                    alert("不能为空")
                }
            }
        </script>
    </head>
    <body>
        <p>对话框有三种</p>
        <p>1：只是提醒，不能对脚本产生任何改变；</p>
        <p>2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 ifelse判断 </p>
        <p>3： 一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p>
        <p>下面我们分别演示：</p>
        <p>演示一：提醒 对话框</p> 
        <p>
                       <input type="submit" name="Submit" value="提交" οnclick="ale()" />
        </p>
        <p>演示二 ：确认对话框 </p>
        <p>
            <input type="submit" name="Submit2" value="提交" οnclick="firm()" />
        </p>
        <p>演示三 ：要求用户输入，然后给个结果</p>
        <p>
            <input type="submit" name="Submit3" value="提交" οnclick="prom()" />
        </p>
    </body> 
         </html>

 

三. 页面跳转

    window.location.href='hello.html';

四. 延时跳转

          setTimeout("javascript:location.href='hello.html'", 5000);// 1000=1秒

 

五.  判断条件
      JS使用if () { ... } else { ... }来进行条件判断。
     ＜script＞
         //单行条件判断
         if (条件)｛//条件成立
                   语句块
         ｝else｛//条件不成立
                 语句块
         ｝
         //多行条件判断
         if (条件1)｛//条件1成立执行
                   语句块
         ｝else if（条件2）｛//条件1不成立执行条件2成立执行
                 语句块
         ｝else{//条件1条件2不成立执行
                 语句块
          }
     ＜/script＞

     多个if else语句，如果第一个语句成立后面的语句就不会执行。
     ＜script＞
          var age=18;
          if (age>14) {
             console.log('大于14岁');
          }else if(age>16){//这一语句块不会执行
             console.log('大于16岁')；
           }else if(age>18){
             console.log('大于18岁')；
           }//输出结果为大于14岁
      ＜/script＞

 


六. js获取文本框的值
      代码示例：

      document.getElementById("id").innerHTML //获取文本的内容；

      document.getElementById("id").value //获取文本框的内容；

       function getValue(){

       var input=document.getElementById("myId");//通过id获取文本框对象

       alert(input.value);//通过文本框对象获取value值
----------------------------------------------------------------

七. 给文本框赋值
     1.   

     <script>
        // 通过getElementsByTagName来获取标签名的集合
        var inputs = document.getElementsByTagName('input');
        // 声明两个变量，为for循环做准备
        var i =0 ,length = inputs.length;
        // 通过for循环赋值
        for (; i < length; i++) {
            input = inputs[i];
            // 判断input的类型是不是文本框
            if (input.type !== 'text') {
                // 结束本次循环，继续执行循环
                continue;
            }
            // 为文本框赋值，因为是从 0 开始赋值的，所以想从 1 开始的话就需要 i + 1
            input.value = i + 1;
        }
    </script>

 2. 

     $("#username").val("需要填写的值");

 

八. 获取URL中的参数值

      var str = location.href; //取得整个地址栏
      var infoList = str.split('?');
      var info = infoList[1];
      var paramInfo = info.split('&'); //根据长度判断有几个参数  1 为1个参数    2 为2个参数

 

九.  页面传值
     一：JavaScript静态页面值传递之URL篇
            能过URL进行传值.把要传递的信息接在URL上.
            例子：
            参数传出页面Post.htm—>
            <input type="text"name="username">
            <input type="text" name="sex">
            <input type="button"value="Post">
            <script language="javascript" >
             function Post()
             {
         　　//单个值 Read.htm?username=baobao;
        　　//多全值 Read.htm?username=baobao&sex=male;
      　　url= "Read.htm?username="+escape(document.all.username.value);
      　　url+= "&sex=" + escape(document.all.sex.value);
      　　location.href=url;
             }
            </script>
            
            参数接收页面Read.htm—>
           <script language="javascript" >
           /*
                *--------------- Read.htm -----------------
                * Request[key]
                * 功能:实现ASP的取得URL字符串,Request("AAA")
                * 参数:key,字符串.
                * 实例:alert(Request["AAA"])
                *--------------- Request.htm -----------------
           */
            var url=location.search;
            var Request = new Object();
            if(url.indexOf("?")!=-1)
            {
     　　varstr = url.substr(1)　//去掉?号
     　　strs= str.split("&");
     　　for(vari=0;i<strs.length;i++)
     　　{
　　 　 Request[strs[i].split("=")[0]]=unescape(strs[ i].split("=")[1]);
      　　}
            }
            alert(Request["username"])
            alert(Request["sex"])
            </script><script language="JavaScript">
            <!--
                function Request(strName)
             {
              var strHref ="www.abc.com/index.htm?a=1&b=1&c=测试测试";
              var intPos = strHref.indexOf("?");
              var strRight = strHref.substr(intPos + 1);
              var arrTmp = strRight.split("&");
              for(var i = 0; i < arrTmp.length; i++)
              {
              var arrTemp = arrTmp[i ].split("=");
              if(arrTemp[0].toUpperCase() == strName.toUpperCase())return arrTemp[1];
               }
              return "";
               }
               alert(Request("a"));
               alert(Request("b"));
               alert(Request("c"));
             //-->
           </script>
           <script>
            String.prototype.getQuery = function(name)
            {
       　　varreg = new RegExp("(^|&)"+ name+"=([^&]*)(&|$)");
       　　varr = this.substr(this.indexOf("?")+1).match(reg);
       　　if(r!=null) return unescape(r[2]); return null;
            }
             var str ="www.abc.com/index.htm?a=1&b=1&c=测试测试";
              alert(str.getQuery("a"));
              alert(str.getQuery("b"));
              alert(str.getQuery("c"));
           </script>

          优点:取值方便.可以跨域.
          缺点:值长度有限制

      二：JavaScript静态页面值传递之Cookie篇
             Cookie是浏览器存储少量命名数据.
             它与某个特定的网页或网站关联在一起.
             Cookie用来给浏览器提供内存,
             以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.

            参数传出页面Post.htm—>
            <inputtype="text" name="txt1">
            <inputtype="button" value="Post">
            <scriptlanguage="javascript" >
              functionsetCookie(name,value)
            {
            /*
             *---------------setCookie(name,value) -----------------
             *setCookie(name,value)
             * 功能:设置得变量name的值
             * 参数:name,字符串;value,字符串.
             * 实例:setCookie('username','baobao')
             *---------------setCookie(name,value) -----------------
             */
     　　 var Days = 30; //此 cookie 将被保存 30 天
     　　 var exp　= new Date();
     　　 exp.setTime(exp.getTime() +Days*24*60*60*1000);
     　　 document.cookie = name +"="+ escape (value) + ";expires=" + exp.toGMTString();
     　　 location.href = "Read.htm";//接收页面.
            }
           </script>

           参数接收页面Read.htm—>
           <scriptlanguage="javascript" >
             functiongetCookie(name)
           {
           /*
            *---------------getCookie(name) -----------------
            *getCookie(name)
            * 功能:取得变量name的值
            * 参数:name,字符串.
            * 实例:alert(getCookie("baobao"));
            *---------------getCookie(name) -----------------
            */
     　　var arr =document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));
     　　if(arr !=null) returnunescape(arr[2]); return null;
          }
           alert(getCookie("baobao"));
         </script>

         优点:可以在同源内的任意网页内访问.生命期可以设置.
         缺点:值长度有限制.

    三：JavaScript静态页面值传递之Window.open篇
           这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
           子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.

            <inputtype=text name=maintext>
            <inputtype=button value="Open">
              Read.htm
           <scriptlanguage="javascript" >
           //window.open打开的窗口.
           //利用opener指向父窗口.
           varparentText = window.opener.document.all.maintext.value;
           alert(parentText);
        </script>

          优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
          缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
-----------------------------------------------------------------------------------------

十. ajax
         JQuery提供的Ajax方法：
         $.ajax({
                    url: ,
                    type: '',
                    dataType: '',
                    data: {
                  },
                 success: function(){
                 },
                 error: function(){  
                 }
                })

       原生js实现Ajax方法：
       var Ajax={
             get: function(url, fn) {
             // XMLHttpRequest对象用于在后台与服务器交换数据   
            var xhr = new XMLHttpRequest();            
            xhr.open('GET', url, true);
            xhr.onreadystatechange = function() {
            // readyState == 4说明请求已完成
           if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
           // 从服务器获得数据 
           fn.call(this, xhr.responseText);  
          }
          };
          xhr.send();
          },
          // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
          post: function (url, data, fn) {
          var xhr = new XMLHttpRequest();
          xhr.open("POST", url, true);
         // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
       }
      };
       xhr.send(data);
      }
      }

      注释：
      1. open(method, url, async) 方法需要三个参数:

　   method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

       无法使用缓存文件（更新服务器上的文件或数据库）
       向服务器发送大量数据（POST 没有数据量限制）
       发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
　    url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　    async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

       2. send() 方法可将请求送往服务器。

       3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

       4. readyState：存有服务器响应的状态信息。

           0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
           1: 服务器连接已建立（open方法已经被调用）
           2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
           3: 请求处理中（下载中，responseText 属性已经包含部分数据）
           4: 请求已完成，且响应已就绪（下载操作已完成）
           5. responseText：获得字符串形式的响应数据。

           6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

         PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

 

十一.  数组遍历（for循环）
         第一种:普通for循环
         代码如下:
         for(j = 0; j < arr.length; j++) {
   
          } 
         简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

         第二种:优化版for循环
         代码如下:
         for(j = 0,len=arr.length; j < len; j++) {
   
          }
         简要说明: 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
         这种方法基本上是所有循环遍历方法中性能最高的一种

         第三种:弱化版for循环
         代码如下:
         for(j = 0; arr[j]!=null; j++) {
   
         }
         简要说明: 这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断
         实际上，这种方法的性能要远远小于普通for循环

         第四种:foreach循环
         代码如下:
         arr.forEach(function(e){  
   
          });
          简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

         第五种:foreach变种
         代码如下:
          Array.prototype.forEach.call(arr,function(el){  
   
           });
          简要说明: 由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。
          实际性能要比普通foreach弱

           第六种:forin循环
           代码如下:
           for(j in arr) {
           }
           简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中
           它的效率是最低的

           第七种:map遍历
           代码如下:
           arr.map(function(n){  
   
            });
           简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

            第八种:forof遍历(需要ES6支持)
            代码如下:
            for(let value of arr) {  
   
             });
            简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环

 

浮名 半生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript基础知识总结
11-28
以下是对JavaScript基础知识的总结，主要关注在网页中使用的弹出对话框、函数调用以及带有参数的函数。 1) Alert Box `alert()` 函数用于显示一个包含警告信息的单行对话框，用户只能点击“确定”按钮关闭它。在...
JavaScript基础知识总结
08-29
JavaScript 基础教程 JavaScript 是一种广泛应用于网页和网络应用的轻量级编程语言，它主要用于增强网页的交互性和动态功能。JavaScript 能够直接嵌入 HTML 页面中，为设计师提供了一种无需深入编程就能实现动态...
js简单总结
licanhong的博客
08-13 146
高级js一 1.变量 申明变量。带var就是局部变量，有作用域的限制，函数内的var变量不能在函数外使用，不带var的是全局变量，可以在函数内外使用 基本数据类型: 数值型，布尔型，字符串型 复合数据类型: 数组，对象 特殊数据类型: undefined ，null 变量传值方式：基本数据类型是值传递（复制传递） ...
Js 简单的总结
S_xiajinghan的博客
01-08 272
* 面向对象:是一种编程思想,找对象，注重的是结果 * 面向过程:也是一种编程思想，注重的是细节，注重的是每一步 * 面向对象的特性:封装,继承,多态--了解 * C# c++ Java，OC-----IOS中的 * 基于对象的语言:不能自己创建属于自己的数据类型(暂时的) * JavaScript属于基于对
JS入门简单总结
Nov_14的博客
05-09 268
JavaScript简单入门
js基础简单总结
qq_42806599的博客
09-13 165
数据类型(基本数据类型/复杂数据类型) - 基本数据类型和复杂数据类型的区别： - 保存的个数不同： - 内存保存：基本数据类型在内存单元中保存的是值 复杂数据类型内存单元中保存的是地址 - 复制操作: 浅拷贝,基本数据类型 - 基本数据类型 - s...
JavaScript之简单自我总结
滴水穿石
08-08 1593
1.JavaScript 函数 *函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 *有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。 *在使用 return 语句时，函数会停止执行，并返回指定的值。 *在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的. *函数定义作为对象的属性，称之为对象方法。 *函数如果用于创建新的对象，称之为
javascript基础教程-总结.docx
11-26
JavaScript在Web开发中的应用非常广泛，从简单的页面交互到复杂的前端应用，再到Node.js环境下的服务器端编程，都离不开JavaScript的身影。随着技术的发展，诸如ES6、TypeScript等新特性不断涌现，JavaScript将继续...
JS中的基础知识点
08-09
自己在学习中的一些基础知识点总结
JavaScript总结1
08-03
在JavaScript中，我们经常看到`<script>`标签用于引入或直接编写JS代码。一个HTML页面可以包含多个`<script>`标签，它们会按照出现的顺序依次执行。需要注意的是，虽然语句末尾的分号不是强制性的，但为了代码的清晰...
JavaScript简单总结
kk2442687723的博客
12-16 795
1、了解JavaScript JavaScript是一种基于对象和事件驱动的客户端脚本语言。 JavaScript是由 ECMAScript (语法) DOM(文档对象模型) BOM（浏览器对象模型）组成。 2、JavaScript总结 1、JavaScript的使用 在页面头部（里面）或者尾部(后面); 方法一：直接把js代码写在html页面中 script type=“text/j...
JS总结
我翱翔的天空
11-13 3162
JS学习从六月底开始，直到现在才结束。培养计划上是两周完成的任务。却用了将近五个多月。自己的时间管理到底做得是有多不好啊。一开始很认真得对代码进 行分析和实现。时间却消耗了大把大把。又赶上软考、自考、等级考试。更是一直拖着不走。这个项目自己真是付出了80%却收获了20%啊。不过这也是对自己 的一个教训。认识自己时间管理的一个能力。师傅说，培养计划上的一切安排都是针对一般人的。要想比一般人强，那就得
js基础简易总结
独滕的博客
09-23 230
js组成部分 javaScriot由三大部分组组成：ECMAScriot（JavaScript语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型） ECMAScript：是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，往往被称为JavaScript或JScript，但两者都是ECMAScript语言的实现和扩展。ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准 DOM：是文档对象模型，是w3c组织推荐的处理可扩展标记语言的标
Js基础知识总结
qq_43403676的博客
04-25 3745
Js基础知识包括逻辑运算符、比较运算符、条件运算符数据类型等
JS入门必备基础知识（适合小白）
热门推荐
a_l_f_的博客
07-17 1万+
JS入门必备基础知识（适合小白）一、JS是什么？1、JS简介2、JS的组成部分3、JS的基本特点4、JS的特性5、JS与HTML、CSS的对比二、JS的用法1、JS的引入方法1）head中的 JavaScript 函数2）body中的 JavaScript 函数3）外部的 JavaScript2、JS的基本语法3、JS中的变量1）变量名2）变量值3）全局变量与局部变量4、数据类型1）基本数据类型2）引用数据类型3） JS的数据类型转换4）typeof 操作符5、JS代码在执行时分两个阶段1）预编译2）代码执
JS知识点总结
刘珈佚的博客
09-21 5205
一：初始JavaScript 1.什么是JavaScript？ JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言。 脚本语言：不需要编译，运行过程中由js解释器逐行解释并执行。 2.HTML/CSS/JS的关系 HTML和CSS属于 标记语言-描述类语言 HTML决定页面的结构和内容，CSS给页面添加样式。 JS脚本语言-编程类语言 JS实现业务逻辑和页面控制(决定功能)。 3.浏览器执行JS 浏览器分为：渲染引擎和JS引擎 渲染引擎：解析HTML和CSS，俗称 内核 JS引擎：也
C#简单基础介绍
Morgana_的博客
04-18 457
C#的简单介绍 C#是一种新的，面向对象的编程语言。她使得程序员可以快速地编写各种基于Microsoft.NET平台的应用程序，Microsoft.NET提供了一系类的工具和服务来最大程度的开发利用计算与通讯领域。 C#语言是Microsoft发布的一种全新的编程语言，是其.Net战略的一枚重要棋子。 C#语言是面向对象的，现代的编程语言，用C#编写的应用程序可以充分利用.Net的框架体系带来的优...
SecondactivityMainActivity.java
06-24
SecondactivityMainActivity.java
mmexport1719207093976.jpg
最新发布
06-24
mmexport1719207093976.jpg
01_JS基础阶段1
08-04
在JS基础阶段1的学习中，我们学习了一些基础的编程概念和技巧。其中包括自增自减练习、变量复制、交换两个变量的...通过这些学习内容，我们打下了JS基础知识的坚实基础，为进一步学习和应用Javascript编程打下了基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值