zoukankan      html  css  js  c++  java
  • 前端 ==> Javascript (总结)

    Javascript:JS
        基本语法:
            变量:  var  name="aray", age=20
        数据类型:
            基本数据类型:number string boolean null undefined
            引用数据类型:object
        运算符:
            ++: 自加
            --:自减
            ==:会自动转换
            ===:不会转换
        流程控制:
            顺序结构:
            分支结构:
                if (表达式) {
                    语句1;
                 } else{
                    ...
                 }
    
                if(表达式1){
                    语句1;
                }else if (表达式2){
                    语句2;
                }else if (表达式3){
                    语句3;
                }else{
                    语句4;
                }
    
    
                 switch(表达式){
                 case 值1:语句1;break;
                 case 值2: 语句2;break;
                 case 值3: 语句3;break;
                 default:语句4;
                 }
    
    
            循环结构:
                for:
                    for(初始表达式;条件表达式;自增and自减)
                    {
                        执行语句
                        ....
                    }
    
                for (变量 in 数据或对象)
                    {
                        执行语句
                    }
    
                while:
                    while(条件){
                        语句1;
                        ...
                    }
    
    
    
            异常处理:
                try{
    
                }
                catch(e){
    
                }
                finally{
    
                }
        对象:
        dom--- document objent model
    
    
    JS--1.对象:
            创建方式:
                1.var s=new string("hello")    类型:object
                2.var s2="hello2"              类型:str
                以上两种创建对象的结果是一样的
            属性和方法:
                var s="hello world";
                console.log(s.length);
                console.log(s.toUppercase())   转大写
                console.log(s.charAt(3));    通过索引获取字符
                console.log(3.indexOF("w")); 通过字符获取索引
                console.log(s.substr(1,3));   字符串截断  substr(起始位置,截断长度)
                console.log(s.substring(1,3));字符串截断  substring(起始位置 结束位置)
                切片:s.slice
                    var str1='abcde'
                    var str2=str1.slice(2,4)
                分割:s.split
                    var ret = s.split(" ")
    
                拼接:s.concat(addstr)
                    var
    
        2.数组对象:
            创建数组:
                1.var arr=[1,2,3];
                2.var test=new Array(100,"a",true);
                3.var arrname = new Array(长度);
            数据方法:
                var arr=[11,22,33,44,"zxc",true]
                console.log(arr[3])
    
                join方法:
                    var ret=arr.join(" ");
                    console.log(ret)
                反转:reverse
                    var s=[100,11,22,44,33];
                    console.log(s.reverse())
                排序:sort
                    var s=[100,11,22,44,33];
                    console.log(s.sort())    按照ASCII码排序 结果:[100,11,22,33,44]
                    自己定义:定义好之后传上去
                    function mysort(x,y){
                        return x-y
                    }
                    console.log(s.sort(mysort))
                push: 将value值添加到数字x的结尾
                    var arr=[11,22,33];
                    arr.push(44,55,66);
                    console.log(arr);
                pop:取值也是取最后一个
                    console.log(arr.pop())
                    console.log(arr);
                unshift:插入值,放在首位置
                    arr.unshift(44);
                    console.log(arr);
                shift: 移除值,先移首位置
                    arr.shift();
                    console.log(arr);
        3.date对象:
            创建date对象:
                1.var date=new Date();
                 console.log(date)
                 console.log(type(date))   类型:object
                 console.log(date.tolocalstring())
                 console.log(type(date))  类型:string
                2.var date2=new Date("2017/7/7 07:07")
                 console.log(date2)
                3.var date2=new Date()
                 console.log(date2)
                4.var date2=new Date()
                 console.log(date2)
            三元运算符:
                console.log(2>1?2:1)
            转换:
                var i=+"1"
                console.log(i)
                console.log(type(i))
            math对象:
                最大/小值:max/min
                    console.log(Math.max(11,22,33));
                    console.log(Math.min(11,22,33))
                取整向上/向下:ceil/floor
                    console.log(Math.ceil(1.23))
                    console.log(Math.ceil(1.63))
                    console.log(Math.floor(1.23))
                    console.log(Math.floor(1.63))
                2的3次方:
                    console.log(Math.pow(2,3))
        4.function对象
            函数的定义:
                1.function foo(){
                    console.log("OK")
                }
            函数的调用:
                var ret = foo()
                console.log(ret)
            函数的属性:
                2.function add(x,y){
                    return x+y
                }
                var ret=add(2,5);
                console.log(ret);
                console.log(add,length)  //2
    
                function add2(x,y,x){
                    var sum=0;
                    for(var i=0;i<arguments.length;i++){
                        console.log(arguments[i])
                        sum+=arguments[i]
                    }
                    return sum
                }
                var ret = add2(2,5,7,8,9);
                cosole.log(ret)
            匿名函数:
                (function foo(x) {
                    alert("OK")
                }(3))
        Bom对象:
            1.window对象
                window.alert(123);   window全局对象,提醒功能
    
                var ret=window.confirm(123);   有返回值。
                console.log(ret)
    
                var ret=window.prompt(123);
                console.log(ret)
            2.定时器
                1.setInterval/cleartInterval
                    function foo(){
                        console.log(123)
                    }
                    var ID = setInterval(foo,1000);
                    clearInterval(ID)  取消
    
                    例子:
    
    
    
                2.setTimeout/clearsetTimeout
                    function foo(){
                        console.log(123)
                    }
                    var ID=setTimeout(foo,1000)
                    clearTimeout(ID)
    
    JS--1.dom对象:
            介绍:
                1.DOM --- document object model(文档对象模型)
                2.定义了访问(查找)和操作html文档的标准方法。
                3.dom 把 html 文档呈现为带有元素、属性和文本的树结构(节点树)作用:导航
        2.dom 节点:
            1.节点类型:
                1.html 文档中的每个成分都是一个节点
                2.规定:
                整个文档是一个文档节点
                每个html标签是一个元素节点
                包含在html元素中的文本是文本节点
                每一个html属性是一个属性节点
                3.主要部分:document  element  text  attribute
             2.节点关系
                1.父:parent  子:child  同胞:sibling
                2.顶端节点叫:根  (root)
                3.每个节点都有父节点、除了根。
                4.一个节点可以拥有任意数量的子
                5.同胞是拥有相同父节点的节点
             3.节点查找
                1.直接查找:直接定位
                    var ele=document.getElementById("d1");   标签对象(唯一)
                    var ele_class=document.getElementsByClassName("c1");  数组对象(复数)
                    var ele_p=document.getElementsByTagName("tagname")
                    var ele-aray=document.getElementsByName("zbk")
                2.导航查找:通过某个标签定位某些标签
                    var ele_c3=document.getElementsByClassName("c3")[0]
                    ele_c3.parentElement                父标签
                    ele_c3.children                     子标签
                    ele_c3.firstElementChild            第一子
                    ele_c3,lastElementChild             最后子
                    ele_c3.parentElement.children       父子
                    ele_c3.nextElementSibling           下一个
                    ele_c3.previousElementSibling       上一个
             4.绑定事件的方式
                    1.<div onclick="foo()">div</div>
                    function foo() {
                    var ele=document.getElementsByTagName("div")[0];
                    ele.style.color="red";
                    }
    
                    2.<>
             5.节点属性操作
                文本操作:
                    1.ele.innerText   取值
                      ele.innerText="zxc"  赋值
                    2.ele.innerhtml
                      ele.innerhtml="<a href="">click</a>"
                <div class="c" id="d1">div</div>
                文本属性:
                var ele=document.getElementsByClassName("c1")[0];
                取属性值:
                ele.id=d2;
                console.log(ele.getAttribute("id"))
                console.log(ele.id)
                属性赋值:
                ele.setAttribute("id","d2")
                ele.id="d2"
                ele.setAttrubute('href','http://www.baidu.com')
            6.class属性值操作:
                console.log(ele.ClassName)
                ele.classList.add("hide")   隐藏
                ele.classList.remoce("hide")  取消隐藏
    
    js的操作
            控制html页面的所有标签对象(document,element)
    
        1.属性操作
            1. element.
    
        2.节点操作(增删改)
            1.创建节点  document.createElement("标签名")
            2.添加节点  ele_parent.appentChild(ele_child)
            3.删除节点  ele_parent.removeChild(ele_child)
            4.替换节点  ele_parent.removeChild(ele_child)
    
        3.事件
            event对象: 某次事件触发时所有的状态信息
    

      

  • 相关阅读:
    向局域网共享文件夹 写文件(示例)
    安装adb之后出现 找不到设备的情况
    .net 下发送calendar
    解决api 跨域 webconfig添加节点
    String类为什么是不可变的
    Sql
    2020职业规划
    摘录
    Docker
    软件测试工程师的职责是什么
  • 原文地址:https://www.cnblogs.com/zhongbokun/p/7687636.html
Copyright © 2011-2022 走看看