【JavaScript学习笔记】

admin管理员组

文章数量:1588254

js学习笔记

• • 表现形式
  • 输入输出语句
  • 变量
  • 数据类型
  • 算术运算符
  • 变量
  • js预解析
  • 对象
  • • 变量、属性、函数、方法的区别
    • 利用构造函数创建对象
  • DOM和BOM
  • • Web API
    • DOM
    • • 获取元素
      • 事件
      • 操作元素*
    • 节点操作
    • • 注册事件（绑定事件）
      • 删除事件（解绑事件）
      • DOM事件流
      • 事件对象
      • 事件对象阻止默认行为
      • 阻止事件冒泡
      • 事件委托
      • 鼠标事件
      • 鼠标事件对象
      • 鼠标移动事件
      • 键盘事件
      • 键盘事件对象
    • BOM
    • • 窗口加载事件
      • 调整窗口大小事件
      • 定时器
      • this指向
    • JS执行机制
    • location对象
    • • URL
    • navigator 对象
    • history对象（在OA办公系统中常用）
  • PC端网页特效
  • • 元素偏移量offset
    • 元素可视区client系列
    • • flexible.js分析
    • 元素滚动scroll系列
    • 三大系列总结
    • mouseenter 和mouseover的区别
    • 轮播图（常见网页特效）
    • 节流阀
    • 返回顶部
  • 动画
  • • 简单动画函数封装
    • 给动画函数添加回调函数
  • 移动端网页特效
  • • 触屏事件
    • • 触摸事件对象
      • 移动端拖动元素
    • PC端常见特效
    • • 轮播图
      • classList 属性
      • click延时解决方案
    • PC端常用开发插件
    • PC端常用开发框架
    • 本地存储
    • • window.sessionStorage
      • window.localStorage

表现形式

行内，内嵌，外部引入。
在html中用双引号，在js中用单引号

• 行内

 <button onclick="alert('月薪过万')">点击我</button>

• 内嵌（常用）

<script>
	alert('文字');
</script>

• 外部引入

<script src="my.js"></script>

输入输出语句

<script>
	//这是一个输入框
	prompt('请输入用户名');
	//alert 弹出警示框 输出的 展示给用户的
	alert('计算的结果是');
	//console 控制台输出 给程序员测试用的
	console.log('hello world');
</script>

变量

1. 定义变量

<script>
	// 1.声明变量
	var age;
	// 2.赋值
	age = 10;
	// 3.输出结果，控制台输出语法  程序员看的
	console.log(age);
	// 4.变量初始化
	var name = 'lala';
	// 5.输出在页面上的内容
	document.write('<h1>我愿意</h1>')
	// 输入语句 prompt，弹出框
    prompt('您今年多大了？')
</script>

2. 变量

<script>
	// 1.用户输入姓名 存储到一个myname的变量里面
	var myname = prompt('请输入您的名字')
	// 2.输出这个用户名
	alert(myname)
</script>

3. 扩展

<script>
	// 1.更新变量
	// 2.声明多个变量
	var age=18,
		address='上海',
		gc=888;
	// 3.声明变量的特殊情况
	// 3.1 只声明不赋值，结果是undefined
	// 3.1 不声明不赋值直接使用某个变量会报错
	// 3.2 不声明就赋值，报错
</script>

4. 变量命名规范

• 区分大小写
• 字母，数字，下划线_，美元符号$组成
• 不能以数字开头
• 不能是关键字
• 变量名必须有意义
• 驼峰命名法，首字母小写，后面单词首字母大写
• 翻译网站：有道，爱词霸

数据类型

1. 数据类型同其他语言相同
   • 八进制：数字前加0
   • 十六进制：数字前加0x

<script>
	alert(Number.MAX_VALUE);// javascript 最大值 1.7976931348623157e+308
	alert(Number.MIN_VALUE);// javascript 最小值 5e-324
	alert(Infinity);//无穷大，大于任何数值
	alert(-Infinity);//无穷小，小于任何数值
	alert(NaN);//代表一个非数值
	console.log(isNAN(12)); // isNAN()判断非数字，并返回一个值，如果是数字，返回false，如果部署数字，返回true
</script>

2. 变量的数据类型，与其他语言不同之处：
   • 根据等号右边的数据类型进行判断的
   • js是动态语言，数据类型可以变化

<script>
	var x = 10;
	x = 'pink'
</script>

3. 字符串型 String
   转义符：\n
   斜杠：\\
   缩进：\t
   空格：\b
   弹出警示框：alert('');外单（引号）内双（引号）
   检测获取字符串长度：console.log(str.length);
   字符串拼接：console.log('你好' + 'pink' + true + '886');
   不同类型的都可以直接拼接；数字相加，字符串相连；变量和字符串相连：引引加加

<script>
	//弹出一个输入框（prompt）,让用户输入年龄（用户输入）
	//把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
	//使用alert语句弹出警示框（输出结果）
	var age = prompt('请输入您的年龄');
	var str = '您今年已经' + age + '岁了';
	alert(str);
</script>

4. 布尔型
   false(参加加法运算当0来看) or true(参加加法运算当1来看)
   undefined：未定义。和数字相加，最后结果为NaN，和字符串相加为undefined字符串
   null：空值。和数字相加，最后结果为数字，和字符串相加为null字符串
5. 获取数据类型：console.log(typeof 变量名);
   prompt 取过来的值是字符型的，

<script>
        // 返回的什么类型  string  number Boolean null
        console.log(typeof 123)// number
        console.log(typeof '123')// string
        console.log(typeof true)//boolean
        console.log(typeof undefined)//undefined
        console.log(typeof null)//object对象
        let num = 10
        console.log(typeof num + '11')
        // console.log('number' + '11')，无法相加
</script>

6. 数据类型转换

• 转成字符串

<script>
	// 1.toString()转成字符串
	var num = 10;
	var str = num.toString();
	// 2.string()强制转换
	console.log(String(num));
	// 3.利用 + 拼接字符串的方法实现转换效果
	console.log(num + '');
</script>

• 转成数字型

<script>
	// 1.parseInt(变量)转成数字型。自动取整，并且去掉单位
	var age = prompt('请输入您的年龄');
	console.log(parseInt(age));
	// 2.parsefloat(变量)转成数字型。去掉单位
	console.log(parseFloat('3.14'));
	// 3.利用Number(变量)
	console.log(Number('12'))
	// 4.利用算术运算 + - * / 隐式转换
	console.log('12' + 16);
</script>

算术运算符

//+ - * / %(取余，取模)
// 浮点数 算术运算里边会有问题，不能直接拿浮点数判断是否相等

arguments使用
可以用于输入变量数量不等的情况
不同作用域下变量名字可以相同

变量

局部变量和全局变量：
全局变量：在全局作用域下声明的变量。

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下，var声明的变量是全局变量
• 在函数内不适用var声明的变量也是全局变量（不建议使用）
• 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源

局部变量：局部作用域下声明的变量

• 只能在函数内部使用
• 在函数内部var声明的变量是局部变量
• 函数的形参实际上就是局部变量
• 局部变量是更节省内存变量

js没有块级作用域，js的作用域：全局作用域 局部作用域，js是在ES6的时候新增的块级作用域

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值。

js预解析

1. js引擎运行js分为两步： 预解析------>代码执行
   (1) 预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面
   (2) 代码执行，按照代码书写的顺序从上往下执行
2. 预解析分为变量预解析和函数预解析
   (1)变量提升就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
   （2）函数提升 就是把所有的函数声明提升到当前作用域最前面 不调用函数

//经典案例
<script>
	f1();
	console.log(a);
	console.log(b);
	console.log(c);
	function f1() {
     
		var a = b = c = 9;
		console.log(c);
		console.log(b);
		console.log(a);
	}
//执行过程相当于以下过程：
//预解析，提升声明变量和函数
	function f1() {
     
		var a;
		a = b = c = 9;
		// 相当于var a = 9; b = 9; c = 9; b和c直接赋值，没有var声明，当全局变量看
		// 集体声明:var a = 9, b = 9, c = 9;
		console.log(a);//9
		console.log(b);//9
		console.log(c);//9
	}
	f1();
	console.log(c);//9
	console.log(b);//9
	console.log(a);//局部变量，报错，变量未被定义
</script>

对象

对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象由属性和方法组成。
属性：事物的特征
方法：事物的行为

<script>
// 声明变量
	var obj = {
     
		uname:'张三',
		age:18,
		sex:'男',
		sayHi:function(){
     
			console.log('hi~');
		}
	}
	// (1)里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
	// (2)多个属性或者方法中间用逗号隔开的
	// (3)方法冒号后面跟的是一个匿名函数
	// 2. 使用对象
	// (1).调用对象的属性 我们采取 对象名.属性名
	console.log(obj.uname);
	// (2).调用属性的另外一种方法 对象名['属性名']
	console.log(obj['age']);
</script>

利用 new object创建对象

<script>
	//利用 new object创建对象
	var obj = new Object();//创建一个空对象
	obj.uname = '张丹',
	obj.age = 18;
	obj.sex = '女';
	obj.sayHi = function(){
     
		console.log('Hi')
	}
	//(1)我们是利用等号赋值的方法 添加对象的属性和方法
	//(2)每个属性和方法之间用分号结束
	console.log(obj.uname);
	console.log(obj['sex']);
	obj.sayHi();
</script>

变量、属性、函数、方法的区别

1. 变量和属性相同点：都是用来存储数据的
   变量：单独声明并赋值 使用的时候直接写变量名 单独存在
   属性：在对象里面的不需要声明的 使用的时候必须是 对象.属性
2. 函数和方法的相同点：都是实现某种功能 做某件事
   函数：单独声明并且调用的 函数名（） 单独存在的
   方法：在对象里面 调用的时候 对象.方法（）

利用构造函数创建对象

• 构造的函数名字首字母要大写
• 构造函数不需要return就可以返回结果
• 调用构造函数必须使用new
• 我们只要new Star() 调用函数就创建一个对象 ldh {}
• 我们的属性和方法前面必须添加this

<script>
	/*创建方法*/
	function 构造函数名() {
     
		this.属性 = 值;
		this.方法 = function() {
     }
	}
	new 构造函数名();
	/*创建方法*/
	// 1.构造函数 泛指的某一大类， 它类似于java里面的class
	function Star(uname, age, sex) {
     
		//相同的属性
		this.name = uname;
		this.age = age;
		this.sex = sex;
		//相同的方法
		this.sing = function(){
     
			console.log(sang);
		}
	}
	// 2.创建对象 特指 是一个具体的事物
	var ldh = new Star('刘德华',18,'男');
	console.log(ldh.name);
	console.log(ldh.age);
	ldh.sing('冰雨');
	var zxy = new Star('张学友',19,'男');
	console.log(zxy.name);
	console.log(zxy.age);
	//3.我们利用构造函数创建对象的过程我们也称为对象的实例化
</script>

new关键字执行过程：

1. new构造函数可以在内存中创建一个空对象
2. this就会指向刚才创建的空对象
3. 执行构造函数里面的代码 给这个空对象添加属性和方法
4. 返回这个对象

<script>
	//遍历对象
	var obj = {
     
		name:'妮妮',
		age:18,
		sex:'女'
	}
	for (var k in obj) {
     
		console.log(k);//k 变量输出 得到的是 属性名
		console.log(obj[k]);// obj[k] 得到是属性值
	}
	// 我们使用 for in 里面的变量 喜欢用 k 或者 key
</script>

小结：

• 对象可以让代码结构更清晰
• 对象复杂数据类型object
• 本质：对象就是一组无序的相关属性和方法的集合
• 构造函数泛指某一大类，比如苹果，不管红色苹果还是绿色苹果，都统称为苹果
• 对象实例特指一个事物，比如这个苹果
• for in 语句用于对对象的属性进行循环操作

DOM和BOM

Web API

浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）
Web APIs:是JS的应用，大量使用JS基础的课程内容做基础，主要是针对浏览器提供的接口，是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

API（应用编程接口）：是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。API是给程序员提供的接口，方便实现功能。

DOM

文档对象模型 DOM：W3C组织推荐的处理可扩展标记语言HTML的标准编程接口，可以改变页面样式，内容和结构
文档：document，一个页面就是一个文档
元素：element（页面中所有标签都是元素）
节点：node（网页中所有内容都是节点）
DOM把以上内容都看作是对象

获取元素

获取元素的方法：

• 根据 ID 获取:document.getElementById('id');
• 根据标签名获取document.getElementsByTagName('标签名');得到是对象的集合，想要操作里面的元素就需要遍历。
• 通过 HTML5 新增的方法获取
  1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象，需要加符号
3. document.querySelectorAll('选择器'); // 根据指定选择器返回，需要加符号
• 特殊元素获取
  1. doucumnet.body // 返回body元素对象
2. document.documentElement // 返回html元素对象

<script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);

        

本文标签： 学习笔记JavaScript