zoukankan      html  css  js  c++  java
  • Python 前端 js基础

    Javascript 概述

          JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。

    1、JavaScript代码存在形式

    1
    2
    3
    4
    5
    6
    7
    <!-- 方式一 -->
    <script type"text/javascript" src="JS文件"></script>
     
    <!-- 方式二 -->
    <script type"text/javascript">
        Js代码内容
    </script>

    2、JavaScript代码存在位置

    • HTML的head中
    • HTML的body代码块底部(推荐)

      由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。

    1
    2
    3
    4
    5
    6
    如:
     
    <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
    <script>
        alert('123');
    </script>

    3、变量

    • 全局变量
    • 局部变量

    JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量

    1
    2
    var name = "seven"  # 局部变量
    age = 18            # 全局变量

    注:注释 // 或 /* */

      js压缩:一般js文件都被压缩,然后子再传递给浏览器端,jquery.min.js就是jquery.js压缩后的,格式发生了改变,例如,函数是被压缩成一行。

    4、基本数据类型

    数字(Number)

    1
    2
    3
    4
    5
    var page = 111;
    var age = Number(18);
    var a1 = 1,a2 = 2, a3 = 3;      #统一一行来定义多个局部变量
    parseInt("1.2");               #字符串转换为int类型
    parseFloat("1.2");        #字符串转换为浮点型

      console.log(age, typeof age)         #typeof 查看数据的类型

    字符串(String)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var name = "wupeiqi";
    var name = String("wupeiqi");
    var age_str = String(18);
     
    常用方法:
        obj.trim()                      #去除空格
        obj.charAt(index)               #根据索引来取值
        obj.substring(start,end)        #获取序列,和python的切片一样
        obj.indexOf(char)               #获取想要字母的下标
        obj.length                      #获取字符串的长度

      如python 一样,js也是可以对字符串做操作的,

    布尔(Boolean)

    1
    2
    3
    var status = true;          #注意首字母是小写
    var status = false;
    var status = Boolen(1==1)

    数组(Array)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var names = ['alex', 'tony', 'eric']
    var names = Array('alex', 'tony', 'eric')       #创建数字的两种方法
     
    常用方法:
        添加
            obj.push(ele)                           #追加
            obj.unshift(ele)                        #最前插入
            obj.splice(index,0,'content')           #指定索引插入,索引,中间必须是0,content
        移除
            obj.pop()                               #数组尾部获取,并移除
            obj.shift()                             #数组头部获取,并移除
            obj.splice(index,count)                 #数组指定位置后count个字符
          
        切片
            obj.slice(start,end)          
        合并
            newArray = obj1.concat(obj2)  
        翻转
            obj.reverse()
          
        字符串化
            obj.join('_')
        长度
            obj.length
     
     
    字典
    var items = {'k1': 123, 'k2': 'tony'}

    更多操作见:http://www.shouce.ren/api/javascript/main.html

    javascript的序列化与反序列化:

      

      

    undefined

    1
    2
    undefined表示未定义值
    var name;

    null

    1
    null是一个特殊值

    5、循环语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var names = ["alex", "tony", "rain"];
     
     
    // 数组:方式一
    for(var i=0;i<names.length;i++){
        console.log(i);
        console.log(names[i]);
    }
     
     
    // 数组:方式二
    for(var index in names){
        console.log(index);
        console.log(names[index]);
    }
     
    var names = {"name": "alex", "age": 18};
     
     
    // 字典:方式一               #因为字典的key不是数字,所以只有这一种循环的模式
    for(var index in names){
        console.log(index);
        console.log(names[index]);
    }
     
     
    // while循环
    while(条件){
        // break;
        // continue;
    }

    6、条件语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    //if条件语句
     
        if(条件){
     
        }else if(条件){
             
        }else{
     
        }
     
    var name = 'python';
    var age = 1;
     
    // switch,case语句
        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }

    7、异常处理

    1
    2
    3
    4
    5
    6
    7
    try{
     
    }catch(e) {
     
    }finally{
     
    }

    8、函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    函数的声明
        function func(arg){
            return true;
        }
             
    匿名函数
        var func = function(arg){
            return "tony";
        }
     
    自执行函数
        (function(arg){
            console.log(arg);
        })('123')

    9、面向对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function Foo (name,age) {
        this.Name = name;
        this.Age = age;
        this.Func = function(arg){
            return this.Name + arg;
        }
    }
     
    var obj = new Foo('alex', 18);
    var ret = obj.Func("sb");
    console.log(ret);

    Dom 概述

          文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

    注:一般说的JS让页面动起来泛指JavaScript和Dom

      Dom等于把整个页面封装起来,可以利用,document.getXXX的方式来调用其的内容。

    1、选择器

    1
    2
    3
    document.getElementById('id');
    document.getElementsByName('name');
    document.getElementsByTagName('tagname');

      

     

      获取这个id=‘hello’正行的代码

      

      

    2、内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    innerText
    innerHTML
     
    var obj = document.getElementById('nid')
    obj.innerText                       # 获取文本内容
    obj.innerText = "hello"             # 设置文本内容
    obj.innerHTML                       # 获取HTML内容
    obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容
     
     
    特殊的:以下这些都需要value来获取值
        input系列
        textarea标签
        select标签
     
        value属性操作用户输入和选择的值

    让网页动起来:

     1     <p id="hello">1</p>
     2     <button type="button" onclick="abc()">+1</button>
     3 
     4     <script>
     5         function abc(){
     6             var a = document.getElementById("hello");
     7             var text = a.innerText;
     8             var text = parseInt(text);
     9             text += 1;
    10             a.innerText = text
    11 
    12         }
     1     <input type="text" id="search" value="请输入关键字" onfocus="abc()" onblur="cba()">
     2 
     3 
     4     <script>
     5         function abc(){
     6             var ndi = document.getElementById('search')
     7             var value = ndi.value;
     8             if(value == '请输入关键字'){
     9                 ndi.value = '';
    10             }
    11         }
    12 
    13         function cba(){
    14             var ndi = document.getElementById('search')
    15             var value = ndi.value;
    16             if(!value.trim()){
    17                 ndi.value = '请输入关键字'
    18             }
    19         }
    20 
    21     </script>
    输入框显示值

    3、创建标签

    dd

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    方式一:
        var obj = document.createElement('a');
        obj.href = "http://www.etiantian.org";
        obj.innerText = "老男孩";
     
        var container = document.getElementById('container');
        //container.appendChild(obj);
        //container.insertBefore(obj, container.firstChild);
        //container.insertBefore(obj, document.getElementById('hhh'));
     
    方式二:
        var container = document.getElementById('container');
        var obj = "<input  type='text' />";
        container.innerHTML = obj;
        // 'beforeBegin', 'afterBegin', 'beforeEnd''afterEnd'
        //container.insertAdjacentHTML("beforeEnd",obj);
     1 <body>
     2 
     3     <div id="container"></div>
     4     <a href="http://www.baidu.com" onclick="return addevent()">添加</a>
     5 
     6 
     7 <script>
     8         function addevent(){
     9             var nid = document.getElementById("container")
    10             var tag = "<input type='text' />"
    11             nid.innerHTML = tag;
    12             return false;
    13         }
    14 
    15 </script>
    16 
    17 </body>

      自定义的函数优先执行,然后再执行自带的函数。

     

    4、标签属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var obj = document.getElementById('container');
    固定属性
        obj.id
        obj.id = "nid"
        obj.className
        obj.style.fontSize = "88px";
     
    自定义属性
        obj.setAttribute(name,value)
        obj.getAttribute(name)
        obj.removeAttribute(name)

    5、提交表单

    1
    document.geElementById('form').submit()

    6、事件

    特殊的:

    1
    2
    3
    window.onload = function(){}
            //jQuery:$(document).ready(function(){})
            //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。

    特殊参数:this,event

  • 相关阅读:
    SpringMVC Controller介绍及常用注解
    spring Handler 映射
    如何更高效的对首页数据的展示
    设计表时给哪些字段加索引,索引的用处,以及能不能给所有字段加索引
    spring mybatis解决application.properties注入变量问题
    Spring配置中的id和name属性区分
    @RequestBody和@RequestParam区别
    SpringMVC中controller中方法返回类型为ResponseEntity乱码的问题
    扩展springMVC消息转换器来支持jsonp数据格式
    SpringMVC——消息转换器HttpMessageConverter
  • 原文地址:https://www.cnblogs.com/nopnog/p/7227714.html
Copyright © 2011-2022 走看看