JS快速入门

JavaScript:

• 概念 :一门客户端脚本语言
  • 运行在客户端浏览器中的,每一个浏览器都有一个JavaScript的解析引擎
  • 脚本语言:不需要编译,直接就可以被浏览器解析执行了
• 功能:
  • 可以用来增强用户和html页面的交互过程,用来控制html元素,让页面有一些动态效果,增强用户的体验
• JavaScrpit=ECMAScript+JavaScript(BOM+DOM);
• ECMAScript:客户端脚本语言的标准
  1. 基本语法:
     1. 与html结合方式
        1. 内部js:
           • 定于

4. 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重置按钮被点击。