网站导航
> 文档中心 > 狂神JavaScript快速入门学习笔记

狂神JavaScript快速入门学习笔记

网友: 文档中心 2022-04-24 17:12:41

狂神视频地址

1什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

2快速入门

2.1 引入JavaScript

1 内部标签

     alert('hello world');

2外部标签

2.2 基本语法入门

2.2.1定义变量

一切变量定义都是var，局部变量建议使用let定义
不加var就是全局变量
‘use strict’//放在第一行
严格检查模式预防JavaScript随意性产生问题。

2.2.2 条件控制

跟java一样。
console.log()在浏览器控制台打印变量

2.2.3 数据类型

number

整数 浮点数 科学计数法 负数

字符串

‘abc’ “abc”
在这里插入图片描述
这个语法有点像shell
字符串具有不可变性

布尔值

true false

逻辑运算

&& || !

比较运算

=
==:等于类型不一样但值相同也会true ===只有类型相同且值相同才会true
坚持不要使用==。
NaN与所有数值都不相等，包括自己。

null和undefined

null 空
undefined 未定义

数组

十分随意 例如：var a=[1,2,3,"learn"];
用arr.length 可以改变数组长度
如果数组越界返回undefined
indexof 通过元素获得下标索引
slice 截取数组的一部分，返回一个新的数组
pop push弹出压入元素
unshift 压入头部
shift 弹出头部
sort排序
reverse 元素反转
concat 合并数组，并没有改变原来数组，只是返回一个新的数组
多维数组

对象

对象是大括号，数组是中括号

var person = {name:"qinjiang",age: 3,tags:['js','java','web']}

通过delete删除对象的属性
可以动态添加
person.h=hh可以添加属性
判断属性值是否在对象中
xxx in xxx
判断一个属性是否是这个对象自身拥有的hasOwnProperty

2.2.4 流程控制

if(){}else if(){}else{}
while for 用法是一样的

for(var num in age)
遍历下标
for(var num of age)
遍历值

2.2.5 map和set //ES6

map 二维数组
map.set()加入一个元素
Set无序不重复集合
遍历set、map也可以用for (x of y)

2.3 函数

方法：对象（属性，方法）

2.3.1定义函数

function abs(x){}

调用函数 abs(x)
arguments 可以拿很多参数，可以有arguments.length
arguments 会有很多参数，有时候我们想使用多余的参数进行附加操作。需要排除已有的参数
rest获取除了已经定义参数的所有参数
function abs(x,y...rest)
必须用…rest进行定义

2.4 变量的作用域 let const 详解

var 定义的变量是有作用域的
假设在函数体中声明，则在函数体外无法访问
如果两个函数使用了相同的变量名，没有关系
内部函数可以访问外部函数的成员，反之不能
把所有变量提到最前面进行定义
默认所有全局变量都会绑定在window对象上
alert本身也是一个window对象下
js实际只有一个全局作用域，任何变量，假设没有在函数范围内找到，就会向外查找，如果在全局作用域中没有找到，报错RefrenceError
规范
由于我们使用的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量？
把自己的代码放在自己定义的为一命名空间中，降低全局冲突问题
let

function aaa(){ for(var i=0;i<100;i++){ console.log(i) } console.log(i+1);//i出了作用域还可以使用}

let关键字，解决局部作用域冲突
建议使用let关键字
const
ES6中引入关键字const
const定义只读变量

2.5 方法

定义方法
方法就是把函数放在对象内部，对象只有两个东西，属性和方法

也可以把函数定义在外面，然后用 用 : 链接类内部的函数名和类外部的函数名
apply
也可以用 apply 类外部调用函数

2.6内部对象

2.6.1 Date

var now = new Date
now.getFullyear年
now.getMonth月
now.getDate 日
now.getDay星期几
now.getHours时
now.getMinutes分
now.getSeconds秒

2.6.2JSON

在js中一切皆为对象，任何js支持的类型都可以用JSON来表示
格式 对象都用{}
数组都用[]
所有的键值对都是用key:value
JSON语法
JSON.stringfy() //对象转化为JSON字符串
JSON.parse() //JSON字符串转化为对象
JSON和js对象的区别
JSON本身就是一个字符串

2.6.3 Ajax

原生的js写法 xhr
jQuery封装好的方法${}

2.7面向对象编程

什么是面向对象？
js有一些区别
类：模板
对象：具体的表现
原型：
x__proto__y //x的原型是y
class继承
ES6引入
class 定义类

class Student{constructor(name){this.name=name;}hello(){alert('hello')}}

//继承

 class XiaoStudent extends Student{     constructor(name,grade) {  super(name);  this.grade = grade;     }     mygrade(){  alert('我是一名小学生')     } } Xiaohong=new XiaoStudent("小红",7)

本质上还是原型链

2.8操作BOM对象

js和浏览器的关系？
js诞生就是为了能让他在浏览器中运行
BOM
浏览器对象模型

window

window代表浏览器窗口
可以用来调整浏览器窗口

Navigator

Navigator 封装了浏览器窗口
大多数时候不会使用，因为会被人为修改
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

location

代表当前页面的URL

document

代表当前页面,html DOM文档树
获取具体的文档树节点
获取cookiedocument.cookie
劫持cookie原理
将cookie上传到他的服务器
服务器端可以设置cookie: httpOnly

操作DOM对象(重点)

核心：浏览器页面就是一个Dom树形结构！
更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除: 删除一个Dom节点
添加: 添加一个新的节点

增添节点

要操作Dom节点必须先获得Dom节点
定位到某一个节点
document.get...
这是原生代码之后尽量使用jquery

更新节点
创建之后//操作文本id1.innerText='123'id1.innerHTML="
 
"
删除节点

删除节点的步骤，先获取父节点，在通过父节点删除自己
通过父节点删除子节点
删除是一个动态的过程,删除的过程Child是在不断变化的
father.removeChild()
我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerText 就可以增加一个元素了，但如果这个Dom节点已经存在元素了，我们就不能这么干！会产生覆盖
追加 append
创建一个新的节点 createElement

history

history代表浏览器的历史记录

2.9操作表单

  • 文本框
  • 下拉框
  • 单选框
  • 多选框
  • 隐藏域
  • 密码框
    表单目的：获得表单信息
        
    用户名:     
    
 性别:  男 女    
    var input_text=document.getElementById('username');    var boy_value=document.getElementById('boy');    var gir_value=document.getElementById('girl');    //得到输入框的值

MD5算法加密

jQuery

js和jQuery关系：
JQuery库

获取JQuery

jQuery官网
CDN 引入：百度：

公式：$(selector).action()
选择器就是CSS选择器

        点我    $('#test-jquery').click(function (){ alert('hello,jquery');    });

选择器

  • 标签
    $('p').click()
  • id
    $('#p').click()
  • 类
    $('.class').click()

    jQuery事件

    • 鼠标事件
      在这里插入图片描述
             #divMouse{     width: 500px;     height: 500px;     border: 1px solid red; }    mouse: 
    在这里移动鼠标试试
    // 当网页元素加载完毕之后才会执行事件    /*$(document).ready(function(){    })*/    //简写    $(function (){ $('#divMouse').mousemove(function (e){     $('#mouseMove').text('x:'+e.pageX+'y'+e.pageY) })    })
  • 键盘事件

jQuery操作Dom

能够操作html css

      
       
  • JavaScript
    •    
  • Python
   $('#test-ul li[name=python]').text('111');

#小技巧

如何巩固JS

看JQuery源码，看js源码

巩固html

CSS
扒网站，全部down下来，然后对应看修改效果

后续：element bootstrap

网络标签：

相关问题