<!DOCTYPE html>

<html>

<head>

    <title>js的内置全局函数</title>

    <script type="text/javascript">

        //js的全局函数,内置一些函数

        //encodeURIComponent/encodeURI  编码

        //1.encodeURI   把url的中文改成%号形式

        var url1 = 'http://www.baidu.com?key=中国'

        console.log('url1:'+url1);

        var url2 = encodeURI(url1);

        console.log("url2:"+url2);

        //2.不仅把url的中文改成%号形式,把特殊字符也改成%

        var url3 = encodeURIComponent(url1);

        console.log("url3:"+url3);

        //3 j解码    encodeURI是编码  decodeURI是解码  类似于python中

        var url4 = 'http%3A%2F%2Fwww.baidu.com%3Fkey%3D%E4%B8%AD%E5%9B%BD'

        url5 = decodeURIComponent(url4);

        console.log(url5);

        //4 escape编码  unescape是解码

        console.log(escape('中国'));

        //5,eval  把字符串当js代码执行

        var s = 'var i = 10;alert(i)';

        eval(s);

    </script>

</head>

<body>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>js方法</title>

    <script type="text/javascript">

        // js方法的声明 3种

        /*第一种

            function     函数名称(参数列表){

            函数体;

        }

        js的方法:不需要声明返回值,参数不需要声明类型

        */

        function add(a,b){

            console.log(a+b);

        }

        add(1,2);//3

        add("1",22);   //122

        /*第二种声明方式

            var 函数名称=function(参数列表){

            函数体;

        }

        */

        //把方法的引用传给了add1  类似于python

        var  add1 =  function(a,b){

            //打印a+b的值

            console.log(a+b);

        }

        add1(112,123);

        //声明有返回值的

        function plus(a,b){

            return a+b;

        }

        var r = plus(2,2);

        console.log('r='+r);

    </script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <title>页面定时跳转页面</title>

    <script type="text/javascript">

        //开始倒计时

        var timer;

        var second = 5;

        function start(){

            //1.设置定时器

            timer =sentInterVal(fuction(){

                if (second ==1) {

                    //2结束定时器

                    clearInterval(timer);

                    //3.跳转到订单页面

                    open('./订单页面.html');

                }

                //显示span的内容

                ducument.getElementById('time').innerHTML = second;

                second -- ;

            },1000);

        }

        //加载完后开始任务

        windows.onload = function(){

            start();

        }

    </script>

</head>

<body>

支付成功,<span id="time">5</span>秒后自动跳转订单页面

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>this关键字</title>

    <script type="text/javascript">

        windows.onload = function(){

            //给div绑定了点击事件

            document.getElementById('div1').onclick = function(){

                //this 代表当前事件事件源

                this.innerHTML = '点击' ;

            }

        }

    </script>

</head>

<body>

<div id = "div1" style="width:100px;height: 100px;border:1px solid red;"></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>焦点事件</title>

    <script type="text/javascript">

        /*

            onfoucus:获取焦点的事件

            onblur:试求焦点

        */

        function start(){

            console.log('文本框编辑中...');

            //通过id获取span标签

            var spanTag = document.getElementByID('tip');

            spanTag.innerHTML = '文本编辑中....'

        }

        function end(){

            console.log('文本框编辑结束');

            var spanTag = document.getElementByID('tip');

            spanTag.innerHTML = '结束....'

        }

    </script>

</head>

<body>

用户:<input type="text" name="输入" placeholder="请输入用户名"onfocus =" start()"onblur="end()">

<span id="tip"></span>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>js的事件</title>

    <script type="text/javascript">

        //onclick:点击事件    //仿佛又回到了android

        /*

            按钮:事件源

            点击:事件

            方法:响应的行为

        */

        function myclick(){

            alert('想我了吗?');

        }

        //Onchange事件:改变

        //改变区域

        function changeDistrict(){

            // alert('xxx');

            //1.后去选中城市

            //1.1 获取city的select标签

            cityTag = document.getElementById('city');

            // console.log(cityTag.value);

            //1.2获取选中的值

            var code = cityTag.value;

            //1.3获取区域标签

            var districtTag = document.getElementById ('district');

            switch (code){

            case 'gz':

            districtTag.innerHTML = '    <option>天河区</option><option>越秀区</option><option>番禺区</option><option>黄浦区</option>'

                break;

            case 'sz':

            districtTag.innerHTML = '    <option>1</option><option>2</option><option>3</option><option>4</option>'

                break;

            case 'zh':

            districtTag.innerHTML = '    <option>11</option><option>5</option><option>6</option><option>7</option>'

                break;

            }

        }

    </script>

</head>

<body>

<button onclick="myclick()">点我有惊喜</button>

城市:<select name =" city" id = "city"onchange="changeDistrict()">

            <option value="gz">广州</option>

            <option value="sz">深圳</option>

            <option value="zh">珠海</option>

        </select>

区:<select id="district">

    <option>天河区</option>

    <option>越秀区</option>

    <option>番禺区</option>

    <option>黄浦区</option>

</select>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <title>js数据类型转换</title>

<script type="text/javascript">

    //数据类型转换

    //原始类型:string ,number ,booolean,undefined,null

    var x = 12;

    //在控制台打印  审查元素 console

    console.log(typeof(x));

    //把numer转成字符串

    var y = x.toString();

    console.log(typeof(y));

    //2.转数字

    var s1 = "12";

    var b = parsenInt(s1)

    console.log(typeof(b));

    //3.强制类型转换

    var  a =0;

    var xx = Boolean(a);

    console.log(typeof(xx))

    //3.1 把数据转成number

    var s = '12';

    var n = Number(s);

    console.log(typeof(n));

    //===:全等:  类型与值都要等于

    //== 之哦按段值,不判断类型

    var a = '20';

    var b = 20;

    console.log(a === b) //flase

    //js也是有面向对象概念

    var obj = new Object();

    console.log(obj instanceof Object); //判断该对象是不是objcet类型的

    //for 循环

    for (var i = 0;i<10;i++){

        console.log(i);

    }

    //for in 循环数组

    console.log('====for in 循环数组')

    var arr = [120,119,110];

    for (idx in arr){

        // 遍历出的idx 是个索引

        console.log(arr[idx]) ;

    }

</script>

</head>

<body>

</body>

</html>

7.11js的总结的更多相关文章

  1. 11-JS基础

    JS声明变量 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) **提示:JavaScript 语句和 JavaScript 变量 ...

  2. 7.11js常用对象

    <!DOCTYPE html> <html> <head> <title>js常用对象</title> <script type=&q ...

  3. 11-Js类和对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 11-JS变量

    一. JavaScript 是什么 JavaScript是一种运行在客户端(浏览器)的脚本语言 客户端:客户端是相对于服务器而言的,在这里先简单理解为浏览器 浏览器就是一个客户端软件,浏览器从服务器上 ...

  5. 五 mybatis的SqlMapConfig.xml详解

    SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE conf ...

  6. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  7. 第五模块·WEB开发基础-第2章JavaScript基础

    第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...

  8. tp5商城

    记录几个要点: 用户使用firbug伪造表单字段,比如伪造表单id字段,如何防止,tp5中好像没有. xss攻击:使用htmlspecialchars() 会把img.p.等等合法标签过滤掉,想要有选 ...

随机推荐

  1. SSE图像算法优化系列四：图像转置的SSE优化（支持8位、24位、32位），提速4-6倍

    一.前言 转置操作在很多算法上都有着广泛的应用,在数学上矩阵转置更有着特殊的意义.而在图像处理上,如果说图像数据本身的转置,除了显示外,本身并无特殊含义,但是在某些情况下,确能有效的提高算法效率,比如 ...

  2. iOS AVAudioSession 配置(录音完声音变小问题)

    有这么一个场景,首先我们录音,录音完再播放发现音量变小了: 百思不得其解,查看API发现AVAudioSession里面有这么一个选项, 如果你的app涉及到了音视频通话以及播放其他语音,那么当遇到声 ...

  3. funny

    var life = { "work_hard","have_fun","make_history" };

  4. Uber使用Swift重写APP的踩坑经历及解决方案（转载）

    本文出自Uber移动架构和框架组负责人托马斯·阿特曼于2016年在湾区Swift峰会上的演讲,分享了使用Swfit重写Uber的好与坏.以下为译文: 我是托马斯·阿特曼,目前是Uber移动架构和框架组 ...

  5. 【C语言】字节对齐问题（以32位系统为例）

    1. 什么是对齐? 现代计算机中内存空间都是按照字节(byte)划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问,这就需要各类型 ...

  6. 同一个脚本在SQLPLUS和SQLDEV上的不同

    前几天收集了信息给Oracle.oracle那边表示格式不正确.让我又一次收集.我非常费解,我是依照官方文档做的呀,怎么会? 于是我果断自己搭了一个环境:RHEL5.8+10.2.0.5 客户那边没法 ...

  7. Spark Scheduler内部原理剖析

    文章正文 通过文章“Spark 核心概念RDD”我们知道,Spark的核心是根据RDD来实现的,Spark Scheduler则为Spark核心实现的重要一环,其作用就是任务调度.Spark的任务调度 ...

  8. Linux内核修炼之framebuffer分析

    Linux源代码包中/document/fb/framebuffer.txt有例如以下介绍: The frame buffer device provides an abstraction for t ...

  9. 【Jetty】Jetty 的工作原理以及与 Tomcat 的比较

    Jetty 应该是目前最活跃也是很有前景的一个 Servlet 引擎.本文将介绍 Jetty 基本架构与基本的工作原理:您将了解到 Jetty 的基本体系结构:Jetty 的启动过程:Jetty 如何 ...

  10. 11款CSS3动画工具的开发

    本文展示了11个最好的和最令人惊异的CSS3动画工具,将为开发者是非常有帮助的.CSS3有设计师和开发人员之间的良好的声誉.它是在这里帮助他们创造惊人的结果. 有了这些动画工具,你可以创造一个轻松自由 ...