JS快速入门

JavaScript:

  • 概念 :一门客户端脚本语言
    • 运行在客户端浏览器中的,每一个浏览器都有一个JavaScript的解析引擎
    • 脚本语言:不需要编译,直接就可以被浏览器解析执行了
  • 功能:
    • 可以用来增强用户和html页面的交互过程,用来控制html元素,让页面有一些动态效果,增强用户的体验
  • JavaScrpit=ECMAScript+JavaScript(BOM+DOM);
  • ECMAScript:客户端脚本语言的标准
    1. 基本语法:
      1. 与html结合方式
        1. 内部js:
          • 定于
  1. DOM
    1. 概念:Document Object Model文档对象模型
      • 将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
      1. W3C DOM标准分为3个不同的部分:
        1. 核心DOM-针对任何结构化文档的标准模型
        2. Documnet:文档对象
          1. 创建:在html dom模型中可以使用window对象获取
            • window.document
            • document
          2. 方法:
            1. 获取Element对象
              1. getElenmetById():根据id属性获取元素对象,id值一般唯一
              2. getElenmetByTagName():根据元素名称获取元素对象们,返回值是一个数组
              3. getElenmetByClassName():根据ClassName():根据Class属性值获取元素对象们,返回值是一个数组
              4. getElenmetByName():根据name属性值获取元素对象们,返回值是一个数组
            2. 创建其他DOM对象
            3. 属性:
          3. Element:元素对象
            1. 获取/创建:通过document来获取和创建
            2. 方法:
              1. removeAttribute():删除属性
              2. setAttribute():设置属性
            3. Attribute:属性对象
            4. Text:文本对象
            5. Comment:注释对象
            6. Node:节点对象,以上五个对象的父对象
              • 特点:所有dom对象都可以被认为是一个节点
              • 方法:
                • CRUDdom树:
                  • appendChild():向节点列表的结尾添加一个新的子节点
                  • removeChild():删除(并返回当前节点的指定节点),由其父对象调用
                  • replaceChild():用新节点替换一个子节点
                  • 属性:
                  • parentNode:返回节点的父节点
      2. XML DOM:针对XML文档的标准模型
      3. HTML DOM:准对HTML文档的标准模型
        1. 标签体的设置和获取:innerHTML
        2. 使用html元素对象的属性
        3. 控制元素样式
          1. 使用元素的style属性来设置
                <script>
                    var div1 =                                                           document.getElementById("div1");
                 div1.onclick = function() {
                     div1.style.color = "red";
                     div1.style.fontFamily = "微软雅黑";
            div1.style.fontSize ="100px";
            }
                 script>
            
            
            
          2. 使用className
            <script>
            var div1 = document.getElementById("div1");
            div1.onclick = function() {
            div1.className="d1";
            }
            script>
            
    2. 事件监听机制
      1. 概念:某些组件被执行了某些操作后,触发了某些代码的执行
        1. 事件:某些操作.如单击,双击,鼠标移动,键盘按下
        2. 事件源:组件,如按钮,文本输入框
        3. 监听器:代码
        4. 注册监听:将事件,事件源,监听器结合在一起,当事件源发生了某个事件,则触发执行某个监听器代码
      2. 常见事件:
        1. 点击事件:
          1. onclick当用户点击某个对象时调用的事件句柄。
          2. ondblclick当用户双击某个对象时调用的事件句柄。
        2. 焦点事件:表单校验
          1. onfocus元素获得焦点
          2. onblur元素失去焦点。
        3. 加载事件,window body
          1. onload一张页面或一幅图像完成加载
        4. 鼠标事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
          1. onmousedown鼠标按钮被按下
          2. onmousemove鼠标被移动。
          3. onmouseout鼠标从某元素移开。
          4. onmouseover鼠标移到某元素之上。
          5. onmouseup鼠标按键被松开。
        5. 键盘事件(定义方法时,定义一个形参,接受event对象,event对象的button属性可以获取鼠标按钮的键值)
          1. onkeydown某个键盘按键被按下。
          2. onkeypress某个键盘按键被按下并松开。
          3. onkeyup某个键盘按键被松开。
        6. 选择和改变:
          1. onselect文本被选中。
          2. onchange域的内容被改变。
        7. 表单事件
          1. onsubmit确认按钮被点击。
            1. 表单校验:判断表单是否提交
            2. return false;
          2. onreset重置按钮被点击。

你可能感兴趣的:(JavaScript)