JavaScript 学习笔记

一、初识 JavaScript

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、基础语法

2.1、引入 JavaScript

内部标签
```
<script>alert(/xss/)</script>
```
外部引入
```
<script src="js/a.js"></script>
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript程序</title>

    <!-- script 标签中写 JavaScript 代码 -->
    <script> alert("helloworld");</script>

    <!--  外部引入  -->
    <script src="js/qj.js"></script>

      
</head>
<body>

</body>
</html>

2.2 基本语法

<!-- JavaScript 严格区分大小写-->
<script>
// 1. 定义变量
var num = 1;
var name = "xiaoming";
// alert(num);

// 2. 条件控制
var score = 71;
if (score > 60 && score < 70){
  alert("60~70");
}else if(score >70 && score < 80) {
  alert("70~80")
}else {
  alert("other")
}
// console.log(score) 在浏览器控制台打印变量
/*
 * 多行注释
* */

2.3 数据类型

变量

var 变量名 = 值

JS 不区分小数和整数

number

整数：123
浮点数：123.1
负数：-1
not a number ：NaN
表示无限大：Infinity

字符串

'abc'，'helloworld'

布尔值

true
false

逻辑运算

与：&&
或：||
非：!

比较运算符

赋值符号：=
等于：==		// 类型不一样，值一样，也会判断为 true
绝对等于：===	// 类型一样，值一样

NaN 与所有数值都不相等，包括自己，只能通过 isNaN(NaN) 来判断

null 和 undefined
- null 空
- undefined 未定义
数组

var arr = [1,2,3,4,"hello",null,true]

取数组下标，如果越界，就会报错 undefined

对象

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

<script>
  var person = {
    name:"xiaoming",
    age:10,
    tags:['js','python','java']
  }
</script>

取对象的值

person.name

2.4 严格检查模式

strict

严格检查模式，预防 JavaScript 的随意性产生的一些问题

局部变量建议使用 let 定义

let i = 1;

三、数据类型

3.1 字符串

正常字符串使用单引号或者双引号包裹
注意转义字符 \

\'
\n
\t
\u4e2d

多行字符串编写

let msg = `hello
world
JavaScript
`
console.log(msg)

模板化字符串 ${内容}

let name = "xiaoming";
let age = 18;
console.log(`你好,我是 ${name}，今年 ${age} 岁了`)

字符串长度 str.length

let hello="hellowold";
console.log(hello.length)

字符串不可变
大小写转换

转换大写：str.toUpperCase()
转换小写：str.toLowerCase()

获取字符下标

获取字符第一个出现的下标：str.indexOf("str")
获取字符最后出现的下标：str.lastIndexOf("str")

截取字符串

str.subString(范围)  包含前面不包含后面
hello.substring(0,5)

3.2 数组类型

Array 可以包含任意的数据类型

let arr = [1,2,3,4,5]
arr[0]
arr[0] = 1

数组长度

arr.length

数组长度是可变的，给 arr.length 赋值，数组大小就会发生变化

获取下标索引

arr.indexOf(2)

截取 Array 的一部分，返回新的数组

arr.slice(0,5)

尾部的添加/删除

push：添加到尾部
pop：删除尾部

arr.push("a")
arr.pop()

头部的添加/删除

unshift：添加到头部

shift：删除头部

arr.unshift("abc")
arr.shift()

数组排序

arr.sort()

元素反转

arr.reverse()

join()

打印拼接数据，使用特定的字符串连接

console.log(arr.join('-'))
5-4-3-2-2-1-1

多维数组

let arrs = [[1,2],[3,4],[5,6]];

3.3 对象类型

若干个键值对

var person = {
		属性名 : 属性值
}

定义一个 person 对象，有三个属性

var person = {
  name : "小明",
  age : 18,
  score : 60
}

对象赋值

person.name = "小刚"

动态删减属性

delete person.name

动态添加

person.haha = "hahaha"

判断属性值是否在这个对象中

"age" in person
person.hasOwnProperty("haha")

3.4 流程控制

if 判断

var age = 3;
if (age > 3){
  alert("大于三岁")
}else if(age < 3){
  alert("小于三岁")
}else {
  alert(age)
}

while 循环，避免死循环

while(age <100){
  age = age+1;
  console.log(age)
}

for 循环

for (let i = 0;i<100;i++){
  console.log(i)
}

foreach 循环

var nuns = [1,2,3,4,5,6,"xiaoming"];
nuns.forEach(function (value){
  console.log(value)
})

3.5 Map 和 Set

定义 Map

var map = new Map([['tom',100],['jack',90],['haha',70]]);

map.get

//通过 Key 获取 Value
var name =  map.get('tom');
console.log(name)

map.set

// 新增或修改
map.set('admin',123456);

map.delete

//删除
map.delete('tom');

Set : 无序不重合的集合

定义 Set : new Set()

var set = new Set([3,2,1,1,1,1]);

set.has(value)

// 判断是否拥有一个元素
set.has(3);

set.add()

// 添加
set.add(1)

set.delete()

set.delete(2)

3.6 iterator

遍历数组

var arr = [3,4,5,6]

for (let x of arr){
  console.log(x)
}

遍历Map

var map = new Map([['tom',100],['jack',90],['haha',60]]);

for (let x of map){
  console.log(x)
}

遍历 Set

var set = new Set([7,8,9,10])

for(let x of set){
  console.log(x)
}

四、函数及面向对象

4.1 函数定义

定义方式一

function abs(x){
  if(x >=0){
    return x;
  }else {
    return -x;
  }
}

定义方式二

var abs = function (x){
  if(x >=0){
    return x;
  }else {
    return -x;
  }
}

调用函数

abs(10)

假如参数不存在，手动抛出异常

var abs = function (x){
  // 手动抛出异常
  if(typeof x !== 'number'){
    throw 'Not a Number!';
  }
  if(x >=0){
    return x;
  }else {
    return -x;
  }
}

arguments

arguments 是一个 JavaSctipt免费赠送的关键字

代表传进的所有参数是一个数组

var abs = function (x){
  console.log("X=>" + x)
  // 遍历 arguments 数组
  for(var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
  if(x >=0){
    return x;
  }else {
    return -x;
  }
}

console.log(abs(10,123,123))

rest

ES6 新特性，获取除了已经定义的参数之外的所有参数

function abc(a,b,...rest){
  console.log("a => " + a)
  console.log("b => " + b)
  console.log(rest)
}
abc(1,2,3,4,5,6)

4.2 变量作用域

var 定义的变量是有作用域的

在函数中声明，函数外部是不可以使用

function test(){
  var x = 1;
  x = x+1;
}
x = x+2;  // Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，是不冲突

function test(){
  var x = 1;
  x = x+1;
}
function test2(){
  var x = 1;
  x = x+1;
}

内部函数可以调用外部函数变量，反之则不可以

function test(){
  var x = 1;
  // 内部函数可以调用外部函数变量，反之则不可以
  function test2(){
    var y = x+1;
  }
  var z = y+1;
}

函数查找变量从自身函数开始，由内向外

function test(){
  var x = 1;
  // 内部函数可以调用外部函数变量，反之则不可以
  function test2(){
    var x = "A";
    console.log("inner:" + x) 	// inner:A
  }
  test2()
  console.log("outer:" + x) 	// outer:1
}
test()

全局变量

// 全局变量
var x = 1;
function test(){
  x = x+1;
  console.log(x)
}
test()
console.log("outer:" + x)

全局对象

var x = "xxtest";
// alert() 本身也是一个Window 变量
alert(x);
// 默认所有的全局变量，都会自动绑定在 Window对象上
alert(window.x);

window.alert("helloworld")

JavaScript 只有一个作用域，任何变量(函数)，如果在函数作用范围内没有找到，就会向外查找。

局部作用域 let

function a(){
  for (let i = 0; i < 100; i++) {
    console.log(i)
  }
  // ReferenceError: i is not defined
  console.log(i+1); 
}
a()

常量 const

const PI = '3.14';
console.log(PI);

// TypeError: Assignment to constant variable.
PI = "123";
console.log(PI);

4.3 方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var person = {
  name : 'xiaoming',
  birth : 2020,
  age : function (){
    var now = new Date().getFullYear();
    return now - this.birth;
  }
}
// 属性
person.name
// 方法()
console.log(person.age())

this 指向使用它的人

apply

可以控制 this 的指向

// this 指向了 person,方法为空
getAge.apply(person,[]);

五、常用对象

5.1 Date

基本使用

var now = new Date()

// 年
var year = now.getFullYear();
// 月
var month = now.getMonth();
// 日
var day = now.getDate();
// 时
var hour = now.getHours();
// 分
var minute = now.getMinutes();
// 秒
var second = now.getSeconds();
//时间戳
var time = now.getTime();

console.log("年" + year);
console.log("月" + month)
console.log("日" + day)
console.log("时" + hour)
console.log("分" + minute)
console.log("秒" + second)
console.log("时间戳" + time)

console.log("时间戳 -> 时间 " + new Date(time))

5.2 Json

JSON 是一种轻量级的数据交换格式 ; 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JavaScript 中一些皆为对象，任何 js 支持的类型都可以使用 json 来表示

格式：

对象 {}
数组 [ ]
所有的键值对：key:value

Json 与 js 对象之间的转换

var user = {
  name:"xiaoming",
  age:18,
  sex:"男"
}

console.log(typeof user)

// 将对象转换成 json 字符串  {"name":"xiaoming","age":18,"sex":"男"}
var jsonuser = JSON.stringify(user)

console.log(user)
console.log(jsonuser)
console.log("------------------------------")
// 将 json 字符串转换为对象
var user_01 = JSON.parse(jsonuser)
console.log(user_01)

六、面向对象编程

6.1 什么是面向对象

类：模板
对象：具体的实例

var Student = {
  name : "xianghong",
  age : 18,
  run :function (){
    console.log(this.name + "runing.......")
  }
}

var xiaoming = {
  name :"xiaoming"
}

// __proto__ 原型指向
// 小明的原型是 Student
xiaoming.__proto__ = Student;

xiaoming.run();

6.2 class 继承

class 关键字是 ES6 引入的

定义一个类，属性，方法

// 定义一个学生的类
class Student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert("hello")
  }
}

var xiaoming = new Student("xiaoming");
xiaoming.hello()

继承

class XiaoStudent extends Student{
  constructor(name,grade) {
    super(name);
    this.grade = grade;
  }
  myGrade(){
    alert("我是一名小学生")
  }
}

var xiaohong = new XiaoStudent("小红",90)
xiaohong.myGrade()

七、操作BOM对象

BOM：浏览器对象模型

IE 6~11
Chrome
Safari
Firefox

7.1 window 对象

window 代表浏览器窗口

// 获取浏览器内部长度、宽度
console.log(window.innerHeight)
console.log(window.innerWidth)
// 获取浏览器外部长度、高度
console.log(window.outerHeight)
console.log(window.outerWidth)

Navigator

Navigator 封装了浏览器的信息

// 获取浏览器名字
console.log(navigator.appName)
// 获取浏览器版本
console.log(navigator.appVersion)
// 获取UserAgent
console.log(navigator.userAgent)

screen

screen 代表屏幕的尺寸

// 获取屏幕长度、宽度
console.log(screen.height)
console.log(screen.width)

location

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: //刷新网页
// 设置新网址
location.assign("http://www.qq.com")

document

document 代表当前页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title = "nihao"
"nihao" 

//获取Cookie信息
document.cookie

history

history 代表浏览器浏览记录

history.back() // 后退
history.forward() // 前进

八、操作DOM

DOM：文档对象模型

核心

整个浏览器就是一个 Dom 树形结构
更新
遍历 dom 节点
删除节点
添加一个新的节点

获取 DOM 节点

// 对应 Css 选择器
var h1 = document.getElementsByTagName('h1')
var p1 = document.getElementById("p1")
var p2 = document.getElementsByClassName("p2")

var father = document.getElementById("father")

console.log(h1)
console.log(p1)
console.log(p2)

console.log(father)
// children ：获取父节点下面的子节点
console.log(father.children)
// father.firstChild
// father.lastChild

更新 DOM 节点

innerText : 修改文本的值
innerHTML : 解析HTML文本标签

// 获取 dom 节点
var id1 = document.getElementById("id1");
// 添加文本
id1.innerText = 'abc';
// id1.innerHTML = '<strong>hello</strong>'
// 设置样式
id1.style.color = 'red';
id1.style.fontSize = '200px';

删除 DOM 节点

先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
		var self = document.getElementById("p1")
    var father = p1.parentElement
    father.removeChild(self)
</script>

插入 DOM 节点

获得某个 DOM 节点，假设这个 DOM 节点为空，可以通过 innerHTML 增加一个元素；但是 DOM 节点不为空，就不可以 innerHTML 添加元素了，会产生覆盖

追加：appendChild

<p id="title">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var title = document.getElementById("title")
    var list = document.getElementById("list")
    // 追加
    list.appendChild(title)
</script>

创建一个新的标签,实现插入

// 通过 js 创建一个新的节点
var newP = document.createElement("p")
// 添加 id 选择器
newP.id = "newP";
// 设置文本
newP.innerText = "Hello";
// 追加到 list 中
list.appendChild(newP)

// 创建一个标签节点
var myscript = document.createElement('script');
myscript.setAttribute("type","text/javascript")
list.appendChild(myscript)

九、操作表单

文本框 : text
下拉框 : < select >
单选框 : radio
多选框 : checkbox
隐藏域 : hidden
密码框 : password

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>

    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>


</form>


<script>
    var input_text = document.getElementById("username")
    var boy_radio = document.getElementById("boy")
    var girl_radio = document.getElementById("girl")
    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = "123admin"

    // 对于单选框固定的值，只能取到当前的值
    console.log(boy_radio.value)
    console.log(girl_radio.value)
    // 查看是否被选中，true、false
    console.log(boy_radio.checked)
    console.log(girl_radio.checked)
</script>

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定事件 onsubmit="aaa()"
-->
<form action="#" method="post" onsubmit="aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>

    <p>
        <span>密 码：</span><input type="password" id="passwd" name="passwd">
    </p>

    <!--绑定事件 onclick="aaa()" -->
    <button type="submit">提交</button>
</form>


<script>
    function aaa(){
        var uname = document.getElementById("username");
        var passwd = document.getElementById("passwd");
        console.log(uname.value)
        passwd.value = md5(passwd.value)
        console.log(passwd.value)
    }

</script>
</body>
</html>

十、JQuery

JQuery库里面存在大量的JavaScript函数

获取JQuery

官网 https://jquery.cuishifeng.cn/

导入 JQuery

CDN 导入

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

本地导入

<script src="lib/jquery-3.6.0.js"></script>

<!--
公式 ： $(selector).action()
-->

<a href="" id="test-jquery">点我</a>

<script>

    $('#test-jquery').click(function (){
        alert("HellJQuery")
    })
    
</script>

10.1 JQuery选择器

//标签
document.getElementsByTagName()
//id
document.getElementById()
//类
document.getElementsByClassName()

// JQuery
$('p').click() //标签选择器
$('#id').click() // id选择器
$('.class').click() // 类选择器

10.2 JQuery 事件

鼠标事件
键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery事件</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid wheat;
        }
    </style>
</head>
<body>

<!--获取鼠标当前的坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>


<script>

    // 当网页元素加载完毕之后，响应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x: ' + e.pageX + ' y: ' + e.pageY)
        })
    })
    
</script>

</body>
</html>

10.3 操作DOM元素

节点文本操作

$('#test-ul li[name=py]').text() //获取值
$('#test-ul li[name=py]').text('值') // 设置值

$('#test-ul').html() //获取值
$('#test-ul').html('值') // 设置值

css 的操作

$('#test-ul li[name=py]').css("color","red")

元素的显示和隐藏

// display:none
$('#test-ul li[name=py]').hide()
// 显示
$('#test-ul li[name=py]').show()

posted @ 2022-05-12 19:30 ZunSir 阅读(20) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ZunSir

JavaScript 学习笔记

JavaScript 学习笔记

一、初识 JavaScript

二、基础语法

2.1、引入 JavaScript

2.2 基本语法

2.3 数据类型

2.4 严格检查模式

三、数据类型

3.1 字符串

3.2 数组类型

3.3 对象类型

3.4 流程控制

3.5 Map 和 Set

3.6 iterator

四、函数及面向对象

4.1 函数定义

4.2 变量作用域

4.3 方法

五、常用对象

5.1 Date

5.2 Json

六、面向对象编程

6.1 什么是面向对象

6.2 class 继承

七、操作BOM对象

7.1 window 对象

八、操作DOM

九、操作表单

十、JQuery

10.1 JQuery选择器

10.2 JQuery 事件

10.3 操作DOM元素

公告