• js 的基础知识


    一、弱类型意识

    js变量是没有类型的

    var  a = 1;  //a 就是一个变量 不要提什么类型

    变量可以赋任何类型的值 类型仅仅是值的性质 与变量无关

    Js的基本类型

    变量未赋值时,其值为undefined

    只有一个number类型表示数字 不区分整数还是小数

     

    二、动态语言

    动态语言针对的不是变量 而是值 尤其是对象

    Var obj={name:”changwei”,age:3};    //对象字面量

    = 后面的值是什么类型?

     别提什么弱类型,因为弱类型是针对变量的

    此处问的是值是什么类型!

    Js动态语言, 可以随意创建对象

    而不需要有与之对应的类

    Js中没有class(ES6中新加了class 但它实际上与Java中的class不一样)  

    动态语言不仅可以随意创建对象 而且可以随意向对象中

    还可以从对象中删除属性及方法、添加属性、方法等成员

    这个特性对Java来说是不可想象的

    三、函数式编程

    函数(方法)可以作为参数传递给另一个函数   [函数也是值]

    函数实际上也是一个普通变量

    普通变量也可以附一个函数作为值

    函数实际上是一个对象,这个对象中包含了它的源代码

    函数名 以及调用这个源代码的方法

    function add(a,b){

    return a+b;

    }

    add 是变量吗?     

    函数是个对象吗?   函数是一个特殊的对象

    原型

    原型存在的原因是因为js中没有class 无法共享方法及静态成员

    原型是一个容器(对象) 可以存放被大量对象共享的方法及属性

    Js定义了一条寻找属性/方法规则:

    先在对象本身上找 找到就是用 找不到就去原型中找

    原型找不到 就去原型的原型中找

    ..............

    直到穷尽所有原型为止(原型链);

    DOM  

    Document Object Model 文档对象模型

    使劲就是给网页上的标签建立的,模型

    每一个都用一个对像来表示

    每一类标签都是一个类

     

    给网页上标签建模的目的是为了让js能够

    以编程的方式控制 生成网页

    DOM 是控制网页的api

    第一类api :获取标签对象

    document.getElementById(“id”)

    document.getElementsByTagName(“tagName”)

    document.getElementsByName(“name”)

    document.getElementsByClassName(“className”)

    H5时代新增的2个方法

    document.querySelector(css筛选器)    返回一个标签

    document.querySelectorAll(CSS筛选器) 返回要找到所有标签

    第二类API: 操作标签的属性

    tag.属性名=

    var value = tag .属性名

    tag.setAttribute(属性名,值)

    var value = tag.getAttribute(属性名)

    第三类: 控制标签的样式

    tag.style.color=”red”;

    tag.style.fontSize=’12px’

    Tag.style.font-size ((不可用))

    tag.style[‘font-size’]=’12px’

    样式类

    Tag.className=”样式类1,样式类2”;

    Tag.classList.add(“样式类1”)      往上加

    Tag.classList.remove(“”)           去掉

    Tag.classList.togggle(“”)    没有就加上 有的话就去掉

    Tag.classList.contains(“”)            判断是否有指定的样式类

    第四类:创建 添加 删除标签对象的API

     Var tag = document.createElement(“标签名”)

    tag.属性名=值;

    Tag.setAttribute(属性名 值)

    parentTag.appendChild(tag)  追加到父类的标签中

    tag.insertBefore()

    tag.insertAdjecentElemrnt(“四种位置”newTag);

    tag.insertAdjecentHTML(‘四种位置’,文本字符串);

    tag.remove();

    第五类:标签之间的关系:

    tag.parentNode     上级标签

    tag.childdren        下级标签

    tag.childNodes       下级节点

    tag.previousSibling     前面的兄弟标签

    tag.nextSibling         后面的兄弟标签

    第六类:事件监听

    鼠标事件   click(单击)    dbclick(双击)     context(右击)

    Mouseover(在上面)  mouseout(不在上面)      

    mouseenter(进入)   mouseleave(离开)

    Mousemove(移动)    mousewheel(滚动)

    衍生出的拖拽事件Drag  dragstart    dragenter     dragleave    drop

    衍生出的触控事件Touchstart    touchend       touchleave

    键盘事件

    Keyup(按键弹起)     keydown(按下,不放手会连续触发)       keypress

    窗口事件: resize    close  

    打印事件

    动画事件

    事件对象:当事件发生时,浏览器会生成一个事件对象 将事件相关的数据都放入这个对象中 如哪个标签触发了事件    事件发生时 鼠标的位置  键盘按键的状态(Ctrl/shift等是否按下  按下那个键?)

    监听事件:

    tag.on 事件名= function(){

    事件发生时会执行函数

    }

    // 只能挂接一个监听函数

    tag.addEventiListener(‘事件名’function(){

    })

    //可以为一个事件挂接多个监听函数

    tag.remoceEventiListener(‘事件名’)

  • 相关阅读:
    【leetcode】1. Two Sum
    【leetcode】32. Longest Valid Parentheses
    【leetcode】20. Valid Parentheses
    scala细节
    【转】CentOS下firefox安装flash说明
    Spring 容器(一)
    源码学习快捷键
    Gradle编译spring3.x报错找不到itextpdf4.2.2解决方案
    Insertion Sort
    Bubble Sort
  • 原文地址:https://www.cnblogs.com/yangxiansen/p/7860271.html
Copyright © 2020-2023  润新知