zoukankan      html  css  js  c++  java
  • 03 前端篇(JS)

    参考博客:http://www.cnblogs.com/yuanchenqi/articles/5980312.html

    JavaScript包括三部分: ECMAScriptDOMBOM

    Javascript在开发中大多数情况下是基于对象的,也是面向对象的。

    ECMAScript:语法、类型、语句、关键字、保留字、运算符、对象

    JavaScript 引入方式:

    1. 直接编写:建议放在 body 的最后

    <script>

        alert(“hello div”)

    </script>

    2. 导入文件:建议放在 head 里面

    <script src=”hello.js></script>

    变量:var

    注释方式:1. //     2. /* */

    数据类型: 1. Number,包括整型和浮点型  2. String   3. Boolean   4. Null   5. Undefinedundefined

    NaN:当字符串转换成数字失败时,就是NaN,属于 Number数据类型

    NaN 数据在表达式中结果一定为 false,除了 !=

    typeof:数据类型查询,只能检测基本数据类型,对象不能检测

    逻辑运算符:

    ECMAScript

    native object

    host objectDOM BOM

    DOMdocument.write

    BOMalert(111)

     

     function 创建方式:

    1. function func() {
          alert(123);
          return 8;
      }

      var ret = func()
      alert(ret)
    2. var func2 = new function ("1", "n", "函数体") ;

     

    instanceof:检测对象类型   s instanceof String

     

    字符串:

    两种创建方式:1. var s=“hello” 2. var s2=new String(“hello”)

    方法:

    1. s.length

    2. 遍历

    3. 编排方法:s.italics()  s.bold() s.anchor()

    4.大小写转换: s.toUpperCase()  s.toLowerCase()  

    5. 获取指定字符: s.charAt(3)//取对应位置的字符  

    s.charCodeAt(3)//取对应位置字符的ASCII值

    6. 查询字符串: s.match(“l”)//返回一个数组,里面是所有匹配结果   s.search(“l”)//得到第一个匹配结果的索引值

    7. s.replace(“E”,”e”);  s.split(“E”); s.concat(“ world”)// 进行字符串拼接

    8. 截取字符串: s.substr(1, 2)  //从索引 1 开始往后取 2 个元素

                 s.substring(1,3) //从索引1 取到索引2

                 s.slice(1, -2)  //后面的位置可以取负数,也是左闭右开

    9. 根据元素取索引 s.indexOf(“l”)   s.lastIndexOf(“l”)

     

    数组 Array:

    创建方式: 1. var arr=[1,2,3] 2. var arr2=new Array(1,2,3,4)

         //如果采用初始化对象方式创建数组,如果里面只有一个值且是一个数字,那么数字表示的是长度,而不是内容  var arr=new Array(3)

        //数组是可变长的

    数组对象的方法:

    1. [“hello”,”world”].join(“---”)
    2. 栈操作:push、pop(在栈顶部操作)  unshift、shift(在栈底部操作)

    arr5.push(13)

    var ret = arr5.pop()//删除最后一个元素,返回值是删除元素的值

    arr5.unshift(45)

    arr5.shift

     3. 排序:sort reverse

    arr5.reverse() //反转,直接更改数组

    arr5.sort()

    4. concat: 连接数组   b=a.concat(4,5)

    5. toString()         // a.toString() 用 ’,’ 连接数组内的每个元素

     

    Date 对象:

    1. 创建方式: var date_obj=new Date();

     

    正则对象:

     

    Math 对象:

     

    Window 对象方法:

    alert():显示带有一段消息和一个确认按钮的警告框

    confirm():显示带有一段消息以及确认按钮和取消按钮的警告框

    prompt():显示可提示用户输入的对话框

     

    setInterval():循环的,按照指定的周期(以毫秒计)来调用函数或计算表达式

    clearInterval():取消由setInterval设置的timeout

    setTimeout():只一次,在指定的毫秒后调用函数或计算表达式

    clearTimeout():取消由setTimeout设置的timeout

     

    document.getElementById(“clock”)

    document.getElementsByClassName(“div2”)

     

    History 对象方法:

    history内部三种方法:forward、back、go   history.go(-1|1)

    一个属性length:保存的是 history 的历史页面个数

     

    location:

    onclick=”location.reload()”   刷新

    onclick = “location.href=’http://www.baidu.com’”

        

     

    DOM对象:

    HTML中所有内容都是节点(NODE)

    整个文档是一个文档节点(Document 对象)

    每个HTML元素是元素节点(element对象)

    html元素内的文本是文本节点(text 对象)

    注释是注释节点(comment对象)

     

    节点(自身属性):

    attributes:节点的属性节点

    nodeType:节点类型

    nodeValue:节点值

    nodeName:节点名称

    innerHTML:节点(元素)的文本值,即 text 值

     

    导航属性:

    parentNode:节点的父节点

    firstChild:节点下第一个子元素    #text

    lastChild:节点下最后一个子元素

    childNodes:节点(元素)的子节点

     

     

    parentElement:

    firstElementChild:

    lastElementChild:

    children:子节点元素

    nextElementSibling:下一个兄弟节点标签

    previousElementSibling:上一个兄弟节点标签

     

    访问HTML元素(节点):

    getElementById()

    getElementsByTagName() :  p、div

    getElementsByClassName()

    getElementsByName():  <p name=”lily”> hello p </p>

     

     

    全局查找:

    document下查找:   document.xxx

    局部查找:   局部查找不可以通过 id 、name        var ele = document.getElementsByClassName(“div3”)

            var ele2 =ele.getElementsByTagName(“p”)

     

    HTML DOM Event:

    onclick:点击

    ondblclick:双击

    onfocus:元素获得焦点   // 练习:输入框

    onblr:失去焦点

    onchange:域的内容被改变,应用场景

    onkeydown:按下键盘某个键

    onkeypress:键盘被按下并松开

    onkeyup:键盘被松开

    onload:一张页面或一幅图像。放在body标签上,当页面记载完成后才会去执行对应函数的内容。

    window.onload=function(){ .....}

    onmousedown:按下鼠标

    onmousemove:移动鼠标

    onmouseout:鼠标离开指定区域会触发

    onmouseover:鼠标一进入指定区域就会触发

    onsubmit:只能绑定在 form 标签上

     

    event.stopPropagation():阻止事件传播

     

     

    标签的增删改查:

        添加: createElement(“p”)    appendChild(son)

    删除:removeChild(last_son)

     

    改:ele.innerHTML 、ele.innerText   前者可以解析字符串内的标签

        ele.style.fontSize=”30px”

     

        elementNode.setAttribute(name,value)

        elementNode.getAttribute(name)

     

        elementNode.className

        elementNode.classList.add(“big”)

        elementNode.classList.remove(“big”)

     

    DHTML: dynamic html(动态html)

    <a href=”javascript:void(0)”>hello</a>,实现的功能和 onclick 一样,javascript 就是一个伪协议

     

    猪猪侠要努力呀!
  • 相关阅读:
    Java中类与类的关系
    谈谈spring
    mybatis和hibernate的区别
    微信小程序文档解读(一)--api提供支持有哪些
    nodejs问题整理--fs.exists无法正确判断文件的问题
    微信小程序-多级联动
    react
    [微信小程序] 终于可以愉快的使用 async/await 啦
    [Node] 逃离回调地狱
    单例模式
  • 原文地址:https://www.cnblogs.com/mlllily/p/10356950.html
Copyright © 2011-2022 走看看