zoukankan      html  css  js  c++  java

  • JavaScript、Dom

    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实现特效慢而已。

    3、变量

    • 全局变量

    • 局部变量

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

    1
    2
    var name = "seven"  # 局部变量  （一般用这个）
    age = 18            # 全局变量

    注：注释 // 或 /* */

    4、基本数据类型

    数字（Number）

    1
    2
    3
    4
    5
    var page = 111;
    var age = Number(18);
    var a1 = 1,a2 = 2, a3 = 3;  #一次声明多个变量
    parseInt("1.2");            #将字符串变成数字
    parseFloat("1.2");          #将字符串变成数字（小数）

    字符串(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) #提取字符串中两个指定的索引号之间的字符
        obj.indexOf(char) #返回字符串中检索指定字符第一次出现的位置
        obj.length #返回字符串的长度

    布尔(Boolean)

    1
    2
    3
    var status = true;
    var status = false;
    var status = Boolen(1==1) #同样，条件成立为true、不成立为false，1为true、0为false

    数组(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')   指定索引插入
        移除
            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'}

    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};
      
      
    // 字典：方式一
    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 = 'alex';
    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

    1、选择器

    1
    2
    3
    document.getElementById('id');          #按id查询
    document.getElementsByName('name');     #按名字查询
    document.getElementsByTagName('tagname'); #按标签名字查询

    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内容
      
      
    特殊的：
        input系列
        textarea标签
        select标签
      
        value属性操作用户输入和选择的值

    3、创建标签

    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);

    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

    7、其他功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    console.log()
    alert()
    confirm()
      
    // URL和刷新
    location.href
    location.href = "url"  window.location.reload()
      
    // 定时器
    setInterval("alert()",2000);  
    clearInterval(obj)
    setTimeout();  
    clearTimeout(obj)

    实例：

    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎xxx莅临指导</title>
    </head>
    <body>
        <input type="button" value="stop" onclick="Stop();"/>
        <input type="button" value="start" onclick="Start();"/>
        <script>
    //        obj1 = setInterval('Func();',100);
            obj1 = setTimeout('Func();',5000)
            function Stop(){
                clearInterval(obj1);
            }
            function Start(){
                obj1 = setInterval('Func();',100);
            }
            function Func(){
                var title = document.title;
                var first_char = title.charAt(0);
                var subchar = title.substring(1,title.length);
                var newchar = subchar + first_char;
                document.title = newchar;
            }
        </script>
    </body>
    </html>

    搜索框：

    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
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title></title>
             
            <style>
                .gray{
                    color:gray;
                }
                .black{
                    color:black;
                }
            </style>
            <script type="text/javascript">
                function Enter(){
                   var id= document.getElementById("tip")
                   id.className = 'black';
                   if(id.value=='请输入关键字'||id.value.trim()==''){
                        id.value = ''
                   }
                }
                function Leave(){
                    var id= document.getElementById("tip")
                    var val = id.value;
                    if(val.length==0||id.value.trim()==''){
                        id.value = '请输入关键字'
                        id.className = 'gray';
                    }else{
                        id.className = 'black';
                    }
                }
            </script>
        </head>
        <body>
            <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
        </body>
    </html>
  • 相关阅读:
    进程池，线程池，协程，gevent模块，协程实现单线程服务端与多线程客户端通信，IO模型
    线程相关 GIL queue event 死锁与递归锁 信号量l
    生产者消费者模型 线程相关
    进程的开启方式 进程的join方法 进程间的内存隔离 其他相关方法 守护进程 互斥锁
    udp协议 及相关 利用tcp上传文件 socketserver服务
    socket套接字 tcp协议下的粘包处理
    常用模块的完善 random shutil shevle 三流 logging
    day 29 元类
    Django入门
    MySQL多表查询
  • 原文地址：https://www.cnblogs.com/hetan/p/5406531.html
Copyright © 2011-2022 走看看