Javascript基础

Share

Javascript

一、1.1 JS是什么？

JS就是javascript的缩写，它是一门编程语言，有自己的语法规则。

1.2 JS能做什么？

  1. JS可以实现网页效果和实现数据交互。
  2. JS可以操作HTML+css。

    1.3 JS如何书写

    JS可以写在HTML页面当中，需要先定义一对script标签，然后在标签对之间书写代码。

    1.4 J常用的功能

  3. 功能：就是我们语言当中的函数，本质上就是一个具体的效果，功能都会有一个名字。
  4. 功能可以分为语言本身自带和开发者自定义。
  5. 功能要想起作用就必须调用——功能名称（）；
  6. alert（）；JS语言自带警示框，小括号里是警示的内容，如果是非数字则需要加引号。
  7. prompt（）；JS自带输入框，小括号里可以写两段文字中间用逗号隔开。

    1.5 查找功能

    document：getElementById（”id名称”）；
    注：
  8. document就是JS中用来表示整个HTML文档的对象。
  9. getElementById（）就是JS当中定义好的一个通过id名查找元素的功能。
  10. 就是表示所属关系。
  11. console.log();在浏览器的控制台中输出一些内容。

    1.6 修改css

    obj.style.属性名称=属性值；
    注：
  12. obj就是我们找到某个具体的HTML元素。
  13. 属性值如果是非数值的需要添加引号。
  14. 类似于font-size，background-color…这种css属性名在JS当中需要先将“-”号去除然后第二个单词首字母大写。

    1.7 JS变量

  15. 变量就是存放数据的容器。
  16. 变量的定义和赋值：var自定义变量名=变量值；
  17. 变量的使用：在需要的地方写入变量名即可。

    1.8 变量名规则

  18. 不要使用纯数字及关键字作为变量名。
  19. 不能使用中文和保留字。
  20. 一般遵循驼峰法，以数字和特殊字符开头，后面随意。

    1.9 事件操作

  21. JS当中的事件就可以理解为当用户的某种行为发生之后通过代码去完成某些响应的操作。
  22. 1
    2
    3
    事件源.事件类型=function（）{
        事件处理函数，当事件发生时需要执行的事件
    }

  23. 常用事件名称：onclick 、onmouseenter 、onmouseleave……
    注：
    事件源：事件发生在哪个元素身上。
    事件类型：具体发生的时间名称。
    事件处理函数：事件发生时要做的事情。

    1.10 JS数据类型

    数据类型就是为了方便管理数据而进行的分类，JS当中可以分为五大类：

  24. 字符型：该类型的值都被引号包裹 string
  25. 数值型：常见的数值 number
  26. 布尔型：常用于判断 true【真】 false【假】 boolean
  27. 未定义型：表示不存在只有一个值叫undefined
  28. 对象型：符合数据类型，有一个特殊值null表示空 object
    注：程序中所出现的任意数据都必须是当前类型中的。

    1.11 数据类型检测

    typeof（数据）可以返回小括号中数据所属的数据类型值。

    1.12 数字计算

  29. JS通过value属性从input身上获取出来的value值默认是字符型。
  30. parseInt（）；可以将小括号里的值转化，如果能转化则返回值不能则返回NaN。规则就是从左向右看，遇到第一个不是数字的内容直接截断。

    1.13 JS入口函数

  31. 默认情况下JS代码会阻塞HTML加载，当我们将JS写在HTML的前面且还在JS当中使用到了HTML里的元素那么就会报错。
  32. window.onload=function(){}就是当文档完全加载之后会执行function大括号里的代码。

    二、1.1 条件判断语句

    可以用设置某些代码在相应的条件满足之后才会执行。

  33. 单分支

    1
    if(条件){条件成立的时候执行}

  34. 双分支

    1
    if(条件){条件不成立}else{条件不成立执行}

  35. 多分支

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if(条件1){
        条件1成立时执行
    }else if(条件2){
        条件2成立时执行
    }else if(条件3){
        条件3成立时执行
    }else{
        以上条件都不成立时执行
    }

1.2 条件语法细节

  1. if体育局小括号中放置的是条件，不论写的是什么，JS都会自动的转成布尔值，true就表示真（条件成立），false表示条件不成立。
  2. 多条件判断语句时，如果多个条件之间存在重叠，那么一定要先写难以满足的条件。【因为只要有一个条件满足就不会再去执行其他的条件判断。】

    1.3 数组

    JS当中另外一种用来存放数据的格式，同时可以存放多个数据，之间用逗号隔开且可以是不同的数据类型。
    var 数组名称 = {值1，值2 值3，……}
    注：
  3. 一般直接将需要存放的值用逗号隔开放在[]中，最后再存入一个变量。
  4. 这个变量就可以表示当前数组。
  5. 数组定义之后JS会自动给它里面的元素分配一个编号，默认从0开始。
  6. 访问数组中元素固定格式——数组名称[编号]
  7. length属性可以返回当前数组的元素长度。

    1.4 JQ基本介绍

    Jquiery就是一款非常流行的js框架，他的里面定义好了现成的功能和属性。
  8. Jq里有一个$，他是一个函数名。
  9. Jq当前分为三个系列版本，工作中使用1系列高版本即可。
  10. Jq是函数式编程风格，使用它就好像在不停的调用函数。

    1.5 JQ基本使用步骤

  11. JQ本质就是一个JS文件，当我们使用的时候需要先引入。
    <script src="js文件路径"></script>
  12. 一个script标签具有了src属性之后就不能在执行Js所以需要再写一对script标签。

    1.6 JQ基本选择器

  13. 在css当中如何选择元素，JQ中就可以怎么选择。例如:类名 id名……
    $(‘相应的规则’)…》得到需要的元素。

    1.7 JQ操作css

    $(obj).css();
    注：
  14. css函数可以用来设置或者获取元素的样式。
  15. 设置样式又分为单属性或多属性设置，规则分别是：
    a)css("属性名","属性值")；
    b)css({属性名1：属性值1，属性名2：属性值2，……});
  16. 获取的规则就是：css（“属性名”）即可返回当前属性名对应的属性值。

    1.8 函数相关

  • 函数就是一个功能具体的代码块。
  • 函数的定义：
    1
    2
    3
    function自定义函数名(参数){
        函数体、函数内部
    }

注：

  1. 函数就是一个不用写var关键字的变量且这个变量只能在函数内部使用。
  2. 定义函数的时候参数值一般是不确定的，称之为形象。
  3. 调用函数时候可以传入具体的值，这样形参拿到之后就可以在函数内部使用。
  • 函数调用：函数定义之后只有调用才能有效果，规则就是函数名（）；

    1.9 JQ简单动画函数

  1. show 、hide 、toggle分别表示显示、隐藏、切换，默认是none和block的切换，设置一个时间参数，单位是ms后它就是改变width 、height 、opacity的动画。
  2. slideDown 、slideUp 、slideToggle 滑动显示 、隐藏 、切换和上面的区别在于有动画效果，也可以设置一个事件参数。

    1.10 JQ关系选择器

  3. parent（）选中前面元素的父元素
  4. children（）选中前面元素的所有儿子元素
  5. siblings（）选中前面元素所有兄弟元素。
    注：
    小括号里都可以设置其他选择器进行再次过滤。

    1.11 this关键字

    JS当中本身就存在一个变量，出现在事件操作当中的时候可以指代当前事件源，在JQ里使用需要写成$(this).

    三、1.1 小知识点

  6. “+”：JQ当中的选择器；可以选中前面元素的兄弟元素且让这个兄弟是紧跟着它后面的。
  7. “>”:选中当前元素下面的儿子元素。
  8. hover（）：JQ当中定义好的一个函数，可以用来表示鼠标移上和离开两个操作。
    $(obj).hover(function){移上}，function（）{离开}

    1.2 类名操作

  9. addClass（）添加类名。
  10. removeClass（）删除类名。
  11. toggleClass（）切换类名。
  12. hasClass（）判断是否有类名，有则返回true，没有则返回false。

    1.3 索引值

    index（）：JQ当中定义好的一个函数，默认情况下会返回前面元素在他自己所有的兄弟元素中排第几，可以在小括号中添加一个选择器进行过滤。

    1.4 插件

    一般插件指的就是被别人写好的一个或者多个具体的效果。
    插件的使用就是拿html——css——js需要注意的地方就是将插件默认的样式改成自己需要的。

    1.5 透明度动画

  13. fadeIn（）淡入
  14. fadeOut（）淡出
  15. fadeToggle（）切换
  16. fadeTo（时间，目标点）
    注：
  17. 前三个小括号里都可以设置一个数值单位是ms，表示动画时长。
  18. 最后一个除了可以设置时间之外还可以设置具体的目标点。

    1.6 JS与JQ的入口函数

  19. JS 的入口函数如果写多个则只会执行最后一次，JQ都会执行。
  20. JQ的入口函数\