• 04-JS


    初识JavaScript

    • JavaScript 一种脚本语言,是一种动态类型、弱类型

    • JavaScript通常用来操作HTML页面的

    • html骨架,css是样式,js是行为

    js代码写在哪里

    • JavaScript代码可以写在页面的script标签里面,或者单独的js文件里面,或者标签属性里面(不推荐)

    • 写在外部.js后缀文件里面,通过script标签引入,类似于imgsrc标签引入

      • 在引入js文件的script标签里面,一定不能再写js代码

    • script标签可以放置于任何位置,不同位置要注意加载顺序,如果没有什么特殊要求,通常放在body 结束之前。

      • 如果script里面涉及到操作后面的元素,而script又非得放在前面的话,需要加上window.onload

    js代码需要注意什么

    • 注释里面是没有要求的

    • 严格区分大小写

      • alert()才是js本身自带的,Alert()不是自带的

    • 语句字符都是半角字符(字符串里面可以使用任意字符)

    • 某些完整语句后面要写分号

    • 代码要缩进,缩进要对齐

    • 引号里面代表字符串,字符串是没有代码的功能的,所以不需要满足上述要求。

    注释

    • 多行注释 /* */

    • 单行注释 //

    js里的系统弹窗代码

    • alert("内容")

    js里的打印

    • console.log(1);

    js获取元素及修改内容

    • 其实,要操作页面,就是操作标签,JS要操作标签,就要先获取标签

    • 独有标签的获取:

      • document.title   document.title
        document.body    document.body.innerHTML 
         			     document.body.innerText 
        document.head    document.head.innerHTML 
    • 其他标签的获取

      • 通过id获取元素

        • document.getElementById("box");

      • 通过class获取:(不兼容IE8及以下)

        • .getElementsByClassName();

      • 通过标签名获取

        • .getElementsByTagName();

      • 通过选择器的写法获取元素:(不兼容IE7及以下)

        • .querySelector();

        • .querySelectorAll();

      • 通过name获取

        • .getElementsByName();

    注意: 除了ID获取前面必须是document之外,其他的方式,前面可以是某个元素(不能是集合)

    • 修改页面title信息

      • document.title = "我要把标题改成666";

    • 修改别的标签的内容,得用innerHTML或者innerText

      • innerHTML 可以识别标签

      • innerText 不能识别标签

    • 获取某个确切的元素,可以直接操作这个元素

      • document.getElementById("box").innerHTML = "吃惊!";

    • 获取的是一堆元素的集合,设置操作时要通过下标(索引、序号)拿到对应的某一个再用

      • document.getElementsByClassName("box")[0].innerHTML = "美女";

    • document.write()

      • 在文档流关闭之前,给body部分新增内容,在文档流关闭之后,修改整个HTML的内容

    事件

    • 用户的操作 元素.事件 = 函数;

    • 鼠标事件

      • onclick 左键单击

      • ondblclick 左键双击

      • onmouseenter 鼠标移入

      • onmouseleave 鼠标移出

    定义变量

    • 不能使用关键字或者保留字(js里面已经赋予它有意义的词,或者留着备用的词)

    • 只能包含 数字 字母 _ $ 并且不能以数字开头

    • 严格区分大小写

    • 尽量见名知意

    • var 变量时并不要求立马赋值

    • 用,号可以让一个var定义多个变量

    `js`操作元素的标签属性

    • 规范的标签属性:

      • . 符号直接操作(可读可写)

    • 不规范(自定义)的标签属性:

      • 获取 getAttribute

      • 设置 setAttribute

      • 移除 removeAttribute

    注意:所有的 路径/颜色 获取的结果不一定就是你写的内容

    ​ 通过ID获取的元素赋值给变量后,假设修改了ID,这个变量还是表示这个元素

    ​ 自定义标签属性的操作方式,同样可以操作符合规范的标签属性

    控制元素的样式

    • 行内样式标签属性:大部分情况下,js都是通过操作行内样式达到修改样式的目的

      当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式

    • 操作复合属性时,要注意用驼峰写法(去掉-号,-号后面的第一个单词大写)

    数据类型

    • number数字

    • string字符串

    • boolean布尔值true false

    • function函数

    • underfined 未定义 一个变量声明之后没有赋值就是undefined

    • objectjs里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将它归为单独一类数据类型null

    算数运算符

    • + - * /

      当不是数字之间的运算的时候
          + 字符串拼接
          -/*%  尽量将字符串转换成数字(隐式类型转换)
      
       NaN :Not a Number   number类型
           一般在非法运算的时候才会 出现NaN
       isNaN(参数) 非常讨厌数字
          首先尽量把参数转换成数字,然后
              当参数是 数字,返回 false
              当参数不是数字,返回 true

    赋值运算符

    • += -= *= /= %=

      ++ -- 两个都存在隐式类型转换,会全部转换为数字
      ++x x++

    比较运算符

    • < > == <= >= != === !==

      == 和 ===的区别
      == 只判断值是否一样
      === 不仅仅判断值,还判断类型是否一样

    逻辑运算符

      针对布尔值
      &&  与 两边都为真,结果才为真,其他为假
      ||  或 两边都为假,结果才为假,其他都是真
      !   非 取反,真变假,假变真
    
      当逻辑运算符,两边不一定是布尔值的时候
      && 遇到假就停,但是不会进行类型转换
      || 遇到真就停,。。。
      ! 隐式类型转换,将后面的数据先转换为布尔值再取反

    if条件

    当if的条件 运算完后不是布尔值的时候,会被强制性的转换为布尔值
    哪些值,在转换为布尔值的时候为false
        false          boolean
        0              number
        ""             string
        null           object
        undefined      undefined
        NaN            number
        在if里面,能用布尔值做条件判断的时候,不要用其他的来代替,因为强制数据类型的转换需要耗费时间
        在两个值比较的时候,能用三等判断的时候,就用三等判断
  • 相关阅读:
    爬虫学习
    手刃爬虫豆瓣
    爬虫学习
    爬虫学习
    安卓学习新
    安卓知识点
    随手快递app开发的第十天
    随手快递app冲刺2开发的第九天
    随手快递app冲刺2开发的第八天
    随手快递app冲刺2开发的第七天
  • 原文地址:https://www.cnblogs.com/Jack-Ma/p/8645803.html
Copyright © 2020-2023  润新知