zoukankan      html  css  js  c++  java
  • javascript知识点整理

    js的变量、常量、标识符
     
    number
    boolean
    undefined
    null
     
    js的注释
    JS中的注释方式是
    //开头为单行 注释
    /*
    ...为多行注释
    */
    js的运算符
     
    首先,== equality 等同,=== identity 恒等。 
    ==, 两边值类型不同的时候,要先进行类型转换,再比较。 
    ===,不做类型转换,类型不同的一定不等。
     
    == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。
    而 
    === 和 !== 只有在相同类型下,才会比较其值。
     
    自加自减运算
    逻辑运算符
    流程控制
    顺序结构
     
    分支结构
    if (表达式){
    语句1;
    }else if(表达式2){
    语句2;
    }else{
    语句3;
    }
    switch-case结构
    swittch(表达式){
    case 值1:语句1;break;
    case 值2:语句2;break;
    default:语句4
    }
    for循环
    for (初始表达式;条件表达式;自增或自减){
    执行语句
    }
    for循环的另一种形式
    for (变量 in 属组或对象){
    执行语句
    }
     
    上图如果不写break程序会自动打印下一行直到遇到break。
    上图为练习
    while循环
    while(条件){
    语句;
    }
    javascript对象
     
    字符串对象的属性和函数
    x.length 获取字符串的长度
    x.toLowerCase() 转为小写
    x.toUpperCase() 转为大写
    x.trim() 去除字符串两边的空格
     
    ----------------------
    字符串查询方法
    x.charAt(index) ----------str1.charAt(index); 获取指定位置字符串,index是索引
    x.indexOf(findstr,index) 查询字符串位置
    x.lastIndexOf(findstr)
     
    x.match(regexp) 返回匹配字符串的数组,如果没有则返回null
    x.search(regexip) 返回匹配字符串的首字符位置索引
     
    --------------------------
    字符串的处理方法
    x.slice(start,length) start表示开始的位置,length表示截取长度
    x.substring(start,end) end是结束位置
    x.slice(start,end) 切片操作字符串
    x.replace(findstr,tostr) 字符串替换
    x.split(); 分割字符串
    x.concat(addstr) 拼接字符串
     
    ---------------------------
     
    Array对象
    数组创建
    var arrname=[元素,元素1,...];
    var arrname=new Array(元素,元素1,....)
    var arrname=new Array(长度); 初始化数组对象
    var cnweek=new Array(7);
    cnweek[0]="星期日"
    cnweek[1]="星期一"
     
     
     
    ----------------------------
    数组对象的属性和方法
    join方法
    x.join(bystr)
    例子:
    var arr=[1,2,3,4,5,6,7];
    var str1=arr1.join("-");
    alert(str1);
    python字符串拼接,join的用法:
    js的join用法:
     
    concat方法
    x.concat(value,...)
    var a=[1,2,3];
    var b=a.concat(4,5);
    alert(a.toString()); 返回结果为1,2,3
    alert(b.toString()); 返回结果1,2,3,4,5
    数组排序-reverse sort
    数组切片操作
    删除子数组
    数组的push和pop
    push是将value值添加到数组的结尾
    pop是将数组最后一个元素删除
    数组的shift和unshift
    unshift是将value值插入到数组的开始
    shift是将数组的第一个元素删除
    总结js的数组特性
    1 js中的数组可以装任意类型,没有任何限制
    2 js中的数组长度是随着下标变化的,用到多长就有多长
    =========================================
    Date对象
    创建对象
     
    Date对象的方法,获取日期和时间
     
    Date对象的方法,设置日期和时间
    Date对象的方法,日期和时间的转换
    Math对象
    该对象中的方法和数字有关
    ===============================
    Function对象(重点)
    函数的定义
    function 函数名(参数){
    函数体;
    return 返回值;
    }
    函数的内置对象arguments
     
    arguments能装很多参数
     
    =================================================================
    BOM对象
     
    window对象
    概念:一个html文档对应一个window对象
    功能:控制浏览器窗口
    使用:直接调用
     
    window方法
    alert() 显示带有一短消息和一个确认按钮的警告框
    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
    prompt() 显示可提示用户输入的对话框
     
    open() 打开一个新的浏览器窗口或者查找一个已经命名的窗口。
    close() 关闭浏览器窗口
     
    setIterval() 按照指定的周期来调用函数或计算表达式
    clearInterval() 取消有setIterval设置的timeout
    scrollTo() 把内容滚动到指定的坐标。
    ======================================================
    DOM对象
    DOM 文档对象模型
    DOM定义了访问和操作HTML文档的标准方法
    HTML DOM把HTML文档出现为带有元素,属性和文本的树形结构
     
     
    节点查找
    document.getElementById("idname")
    document.getElementByTagName("tagname")
    document.getElementByName("name")
    document.getElementByClassName("name")
     
     
    导航节点属性
    parentElement 父节点标签元素
    children 所有子标签
    firstElementChild 第一个子标签元素
    lastElementChild 最后一个子标签元素
    nextElementSibling 下一个兄弟标签元素
    previousElenmentSibling 上一个兄弟标签元素
     
    节点操作
     
    创建节点
    var tag=document.createElement("input");
     
    添加节点
    somenode.appendChild(newnode); 添加一个子节点,最后面的子节点
    somenode.insertBefore(newnode,某个节点); 把增加的节点放到某个节点的前面
     
    删除节点
    removeChild();获得要删除的元素,通过父元素调用删除
     
    替换节点
    somenode.replaceChild(newnode,某个节点;
     
    节点属性操作:
    获取文本节点的值:innerText innerHTML
    attribute操作
    elementNode.setAttribute(name,value)
    elementNode.getAttribute(属性名); ------------elementNode.属性名(DHTML)
    elementNode.removeAttribute("属性名");
     
    value获取当前选中的value值
    1 input
    2 select
    3 textarea
     
    innerHTML 给节点添加html代码;
    该方法不是w3c的标准,但是主流浏览器支持
    tag.innerHTML="<p>要显示内容</p>"
     
    class操作
    elementNode.className
    elementNode.classList.add
    elementNode.classList.remove
     
     
    改变css样式
    <p id ="p2">Hello world!</p>
    document.getElementById("p2").style.color="blue";
    也可以写 .style.fontSize=48px 等等 
    =======================================================
    DOM Event事件
     
    事件类型
    onclick 当用户点击某个对象时调用的事件句柄
    ondblclick 当用户双击某个对象时调用的事件句柄
     
    onfocus 元素获得焦点
    onblur 元素失去焦点
     
    onchange 域的内容被改变 应用场景:通常用于表单元素,当元素内容被改变时触发(三级联动,select)
     
    onkeydown 某个键盘被按下
    onkeypress 某个键盘按钮被按下并松开
    onkeyup 某个键盘按键被松开
     
    onload 一张页面或一幅图像完成加载
     
    onmousedown 鼠标按钮被按下
    onmousemove 鼠标被移动
    onmouseout 鼠标从某个元素移开
    onmouseover 鼠标移到某个元素之上
     
     
    onmouseleave 鼠标从元素离开
     
    onselect 文本被选中
    onsubmit 确认按钮被点击
     
    绑定事件方式
     
    方式1
     
     
    事件介绍
    1 onload:
    onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
    比如script位置在上面,里面有执行命令,而有些变量在下面,这个时候需要onload
     
     
    2 onsubmit
    当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
    submit比bottuon多一个动作,将输入的内容提交
     
     
     
     
    4 onselect
    5 onchange
    6 onkeydown
    Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
    事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.
    一些练习题在博客中
     
     
    js的作用域
    作用域的概念有点像python中的名称空间的概念
    主要就是变量的可调用范围和调用顺序
    1 全局作用域
    在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:
    (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
    (2)所有末定义直接赋值的变量自动声明为拥有全局作用域
    (3)所有window对象的属性拥有全局作用域
    一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。
    2 局部作用域
    和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域.
     
    作用域链 Scope Chain
    在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问
     
     
    python中
    x=2
    def foo():
        print(x)
        x=3
    这样会报错,先检查 有没有这个变量,有了 就不找外面了,执行的时候 先print 没提前赋值 所以没找到。
     
     
    上图方式可以解决。
     
     
    上图为js中的一种比较复杂的作用域链的例子。
    首先看其词法分析:
    js首先 定义console.log(age)这句,发现上面没有变量,但是函数内部有,所以就不会去外面找。
    然后再次console.log(age),这次上面出现了var age=99 所以这次定义了age的值。
    然后是一个函数,这个函数没有被调用执行,pass,再然后是个age,这个age被定义为上面的函数,但是由于没有()所以没有被调用执行,然后返回值不用管,之后js运行到下面result=bar(5)
    这个时候,上面的bar被调用执行。
    由于之前定义的时候,在最后age被定义为了函数,所以当执行的时候,第一个console.log(age)打印
    的为函数类型,然后age被定义为99,所以后面打印为的是99,再然后由于内部的函数age没有被执行,所以下面的console.log还是99.
    最终结果为:
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    10个优秀HTML5网站案例赏析
    读书笔记之:More Exceptional C++ (2002) [++]
    函数模板与函数重载
    vector中元素的删除
    C++常用程序
    Linux下的示例程序
    要求或禁止在堆中产生对象
    读书笔记之:Effective C++ (2005)[++]
    读书笔记之:More Effective C++ (2007)[+]
    读书笔记之:Essential C++ (2001)[+]
  • 原文地址:https://www.cnblogs.com/ArmoredTitan/p/7373319.html
Copyright © 2011-2022 走看看