JavaScript、JQuery-笔记(数据类型/函数/BOM,DOM对象/表单)

JavaScript

JavaScript是一种脚本语言

1-快速入门

1.1-引入JavaScript

<!--1 内部标签-->
    <script>
        alert("????");//弹窗
    </script>
<!--2 外部引入-->
    <script src="js/first.js"></script>
<!--    type默认是JavaScript-->
    <script type="text/javascript"></script>

1.2-基本语法

<!--    内部标签-->
    <script>
        //严格区分大小写
        //1.定义变量 变量类型 变量名 = 变量值;
        var num = 1;
        //2. 条件控制
        if (num==1){
            alert(num);
        }
        //console.log(num) 浏览器控制台打印变量
    </script>

浏览器调试F12

1.3-数据类型

数值, 文本, 图形, 音频, 视频…

• 变量 var name = xxx

• number : js不区分整数小数

  123 //整数
  1.23 // 浮点数
  1.23e3 //科学计数法
  -123 //负数
  NaN  //不是一个数字
  Infinity //表示无限大
  

• 字符串 ‘abc’ “abc”

• 布尔值 true, false

• 逻辑运算 && || !与或非

• 比较运算符 !!!

  • = :赋值
  • == 等于(类型不一样值一样, 也会判断为true)
  • === 绝对等于 (类型一样, 值一样为true)
  • NaN===NaN (false) 任何数和NaN比较都不相等, 只能通过isNaN(NaN)来判断

• 浮点数

  • console.log( (1/3) === (1-2/3) ) : false 尽量避免十三浮点数进行运算, 存在精度问题
  • Math.abs( 1/3-(1-2/3) )<0.000000001 : true 可以使用这种方式

• null 和 undefined

  • null 空
  • undefined 未定义

• 数组 java中需使用相同类型, js不需要

  • var arr = [1,2,3,4,'a',null,true] 尽量使用[] , 提高可读性
  • new Array(1,2,3,4,'a',null,true);
  • 取值 arr[0], 如果取值下标越界 arr[8] 报 undefined

• 对象 大括号{}

  • 每个属性使用逗号隔开

  • //Person person = new Person(); 
    var person = {
        name : "xiaoming",
        age  : 17,
        tags : [1,2,3,4]
    }
    //取值
    person.name
    

1.4-严格检查模式

• 前提: IDEA 需要设置ES6语法
• 在js中第一行添加 'use strict';
• 局部变量建议使用 let定义

<script>
    'use strict';
    let i = 1;
</script>

2-数据类型

2.1-字符串

• 1使用""或’’ let a = '中'
• 2转义字符 \

\' 单引号
\n 换行
\t 空格
\u4e2d \u**** Unicode字符
\x41  :A  Ascll字符 

• 3多行字符串编写

//使用波浪键符号 ``
let msg = `123123
1231111111111111松松`;

• 4模板字符串

let name = "xm";
let age  = 18;
let msg  = `你好: ${name},${age} 岁`

• 5字符串长度 name.length
• 6 字符串不可变
• 7 大小写转换 : 大写 name.toUpperCase() 小写 name.toLowerCase()
• 8 获取字符的下标 name.indexOf('x')
• 9 截取字符串 substring()

let name = 'student';
name.substring(1);  //tudent, 从坐标1最后一个字符
name.substring(1,3);//tu    , 取坐标1-2 ,不含3

2.2-数组

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

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

1, 长度

arr.length
arr.length = 10; //数组长度赋值大于原长度, 长度变大, 多出来的值是空的, 取出来显示undefined
arr.length = 2;  //数组长度赋值小于原长度, 长度变小, 元素会丢失

2, indexOf, 通过元素获得下标索引

arr.indexof(6); //5

3, slice() 截取数组元素, 返回一个新数组, 类似于substring

arr.slice(1,3); //23

4, push() , pop() 在尾部添加元素或去掉元素

push('a','b');//在尾部添加两个元素
pop('a');    //尾部去掉一个

5, unshift() , shift() 在头部添加元素或去掉元素

unshift('a','b');//在头部添加两个元素
shift('a');    //头部去掉一个

6, 排序 sort()

(3) ["B","C","A"]
arr.sort()
(3) ["A","B","C"]

7, 元素反转 reverse()

(3) ["A","B","C"]
arr.reverse();
(3) ["C","B","A"]

8, 拼接数组 concat() , 拼接后返回一个新数组

(3) ["c", "B", "A"]
arr.concat ([1,2, 37)
(6) ["c", "B", "A", 1, 2, 3]
arr
(3) ["c", "в", "А"] //原数组没有改变

9, 连接符 join

打印数组, 使用输入的连接符连接

(3) ["C", "B", "A"]
arr. join('-')
"C-B-A"

10, 多维数组

arr = [[1,2] , [3,4], ["5","6"]];
arr[1][1]
4

2.3-对象

var 对象名={
    属性名: 属性值,
    属性名:屈性值
    属性名: 居性值
}
//定义了一个person对象,它有四个属性!
var person ={
    name: "kuangshen",
    age: 3,
    email: "24736743@qq. com"
    score: 0
}

• 取值: person.name
• 赋值: person.name = "zs"

1, 动态添加删除属性

delete person.name  //删除name
person.haha = "haha" // 添加haha

2,判断属性值是否在对象中 'age'in person

3,判断一个属性是否在这个对象中 hasOwnProperty()

person.hasownProperty('tostring')
false
person.hasownProperty('age')
true

2.4-流程控制 if

if判断

if (num==1){
    alert(num);
}else if(){
    alert(1)
}else{
    alert(2)
}

while循环

//while循环
while(age<100){
    age = age+1;
    console.log(age);
}
//do while 先执行一遍
do{
    age = age+1;
    console.log(age);
}while(age<100)

for循环

//for循环
for(let i = 0; i<100; i++){
    cousole.log(i);
}
//forEach
var age = [12,3,12,3, 12,3, 12,31,23, 123];
//函数
age.forEach (function (value) {
	console.1og(value)
})
//for in
//for(var index in object) {}
for (var num in age){
    if (age. hasownProperty(num)){
        console.1og("存在")
        console. 1og (age[num])
    }
}

2.5, Map和Set -ES6新特性

Map

//ES6 Maр
//学生的成绩,学生的名字
// var names = ["tom", "jack","haha"];
// var scores =[100,90,80];
var map = new Map ([['tom ', 100] , ['jack ',90] , ['haha ' ,80]]);
var name =map.get('tom'); //通过key获得value
map.set('admin' , 123456); //新增或修改
map.delete("tom"); //删除

Set: 无序不重复

var set = new Set([3,1,1,1,1,1]); //自动去重 [3,1]
set.add (2); //添加!
set.delete (1); //删除!
console.1og(set. has(3)); //是否包含某个元素!

2.6 ,iterator迭代器

let map = new Map();
map.set("zs",100);
map.set("ls",80);
let iterator = map[Symbol.iterator]();
for (let item of iterator){
    console.log(item)
}

2.7-for of遍历 ES6

for in 取下标, for of 取值

var map = new Map([["zs",15],["ls",18],["xm",16]]);
for (let x of map){
    console.log(x)
}

3-函数

3.1-定义函数

定义方式一

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

执行到return函数结束, 返回结果; 如果没执行return, 也会返回结果 undefined

定义方式二

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

3.2-调用函数

abs(10);
abs(10,11,23,1231,23);

js可以传递任意个参数， 是一个数组

3.3-参数

抛出异常

如果不存在参数， 可以手动抛出异常

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

arguments

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

var abs =function(x){
    console. 1og("x=>"+x);
    for (var i = 0; i<arguments.length; i++){
   	 	console.log (arguments [i]);
    }
    if(x>=0){
    	return x;
    }else{
    	return -x;
    }
}

reset ES6

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

function aaa(a,b,...rest) {
    console.1og("a=>"+a);
    console.1og ("b=>"+b);
    console.log(rest);
}

3.4-变量的作用域

1,js中var定义变量实际是有作用域的

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

• 假设在函数体中声明, 则函数外不可以使用 (想实现需了解闭包)

2,如果两个函数使用了相同的变量名, 只要在函数内部, 不会冲突

function a() {
    var x= 1;
    x = x + 1;
}
function b() {
    var x = 'A';
    x = x + 1;
}

3,内部函数可以访问外部函数的成员, 反之则不行

function a() {
	var x=1;
    
    //内部函数可以访问外部函数的成员,反之则不行
    function b() {
    	var y = x + 1 ; //2
    }
    var z = y +1; // uncaught ReferenceError: y is not defined
}

4,内部, 外部函数变量名一致时

函数查找变量从自身所在的函数开, 有"内" (本函数中) 向 “外” 查找

加入内部外部变量重名, 会屏蔽外部函数变量

function a() {
    var x = 1;
    function b() {
    	var x = 'A';
    	console.1og('inner'+x); //innerA
    }
    console.log ('outer'+x); //outerl 
    b()
}
b()

5,规范:提升作用域

规范: 所有变量的定义放在函数的头部, 便于维护;

function a(){
	var x = 1,
        y = x + 1,
        a,b,c;
}

6,全局变量

定义在函数外部的变量, 函数内部外部都可以使用

x = 1; //全局变量
function a(){
    console.log(x);//1
}
console.log(x);//1

7,全局对象 window *

默认所有的全局变量, 都自动绑定在window对象下, alert函数也是一个window变量

var x = 'abc';
console.log(x);//abc
console.log(window.x);//abc

window.alert(x); //abc
var old_alert = window.alert;
old_alert(x); //abc

winodw.alert = function(){};//相当于重写alert函数
window.alert(123); //无法弹出, alert变成上面的空函数

window.alert = old_alert; //恢复原来的alert函数
window.alert(x); //abc

8,规范:全局变量定义

可以把所有变量定义到同一个全局变量中

//唯一全局变量
var Global = {} ;
//定义全局变量
Global.name = 'xm';
Global.sum = function (a,b){
    return a+b;
}

9,局部作用域let-ES6 *

function aaa(){
    for (var i = 0; i<100; i++){
        console.log(i);
	}
    console.log(i+1);//这里还能使用i
}

ES6 let关键字, 解决局部作用于冲突

function aaa(){
    for (let i = 0; i<100; i++){ //使用let
        console.log(i);
	}
    console.log(i+1);//报错:uncaught ReferenceError: i is not defined
}

10, 常量const-ES6 *

const PI = '3.14'; //只读变量
console.log(PI);//3.14
PI = '123'; //报错:TypeError: Assignment to constant variable. 不可修改

3.5-方法

对象里面就是方法，面向过程没有对象就是函数

var zs = {
    name: 'zs',
    birth: 2000,
    //方法
    age: function (){
        return new Date().getFullYear()-this.birth;
    }
}
//属性
zs.name
//方法, 要带括号
zs.age()

• this代表调用他的对象

function getAge (){
        return new Date().getFullYear()-this.birth;
    }
var zs = {
    name: 'zs',
    birth: 2000,
    //方法
    age: getAge //只需写名字
}
zs.age();//ok 
getAge(); //NaN , window里没有birth这个属性

1,apply: 控制this指向

每个函数都有apply

function getAge (){
        return new Date().getFullYear()-this.birth;
    }
var zs = {
    name: 'zs',
    birth: 2000,
    //方法
    age: getAge
}
getAge.apply(zs,[]);//this指向了zs, 参数为空

4-内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
'number
typeof []
"object"
typeof {}
"object"
typeof Math . abs
"function
typeof undefined
"undefined"

4.1-Date

1, 基本使用

var now = new Date; //获取当前日期
now.getFullYear(); //年
now.getMonth();   //月 0-11 月
now.getDate();   //日
now.getDay();   //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getTime();  //时间戳 
new Date(1123123123111);时间戳转时间

2, 时间戳转换

now = new Date(1642397974290);
Mon Jan 17 2022 13:39:34 GMT+0800 (中国标准时间)
now.toLocaleString();
'2022/1/17 下午1:39:34'
now.toGMTString();
'Mon, 17 Jan 2022 05:39:34 GMT'

4.2-JSON

JSON间接

早期使用XML文件传输数据

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

JS一切皆为对象, 任何JS支持的类型都可以用JSON来表示; number,string等等

格式:

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

1,JSON字符串-JS对象转换

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

//对象转JSON字符串  
var json_user = JSON.stringify(user);

//JSON字符串转对象
var obj = JSON.parse('{"name":"zs","age",18,"sex":"男"}');

JSON和JS对象区别

var user = {name:'zs',age:3,sex:'男'}
var json = '{"name":"zs","age",18,"sex":"男"}'

5-面向对象编程

5.1-原型对象

类:模板

对象:具体的实例

在JavaScript中

原型: 对象.__proto__ = 被继承对象

1:class继承 ES6

定义一个类, 属性, 方法

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

//使用
var xm = new Student("xm");
xm.hello();

继承

class SmStudent extends Student{
    constructor(name,grade){
        super(name);//需完成父类的name
        this.grade = grade;
    }
    my(){
        alert('小学生');
    }
}
var zs = new SmStudent("zs",1);

原型链

6-操作BOM对象 *

操作浏览器对象

window对象(*)

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight //内部高度
258
window.innerwidth
I
919
window.outerHeight//外部高度
994
window.outerwidth
919

Navigator 不建议使用

navigator,封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 Edg/95.0.1020.44'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 Edg/95.0.1020.44'
navigator.platform
'Win32'

• 大多时候, navigator不会被人为修改

screen

screen 屏幕分辨率

screen.width
screen.height

location(*)

location 当前页面的URL

host: "localhost:63342"
href: "http://localhost:63342"
protocol: "http:"
reload: ƒ reload()//刷新页面
location.assign('www.baidu.com')//设置新的地址

document

代表当前页面,HTML. DOM文件树

document.title
"必读"
document.title='百度'
"百度"

获取具体的文档树节点

<div id="app">
	<p>js</p>    
</div>

<script>
    var app = document.getElementById('app');
</script>

获取cookie

document.cookie

服务器端可以设置cookie: httpOnly

history

浏览器历史记录

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

7-操作DOM对象 *

浏览器网页–DOM树形结构

• 更新: 更新DOM节点
• 遍历DOM节点: 获得
• 删除
• 添加

1,获得DOM节点

<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document . getElementsByTagName('h1' );
var p1 = document . getElementById('p1');
var p2 = document. getElementsByClassName('p2');
var father = document . getElementById(' father');
var childrens = father . children; // 获取父书点下的所有子节点
// father. firstChild
// father. LastChild

2,更新节点

操作文本

• 修改文本的值id.innerText = 'adc' 会覆盖原来的元素
• 解析HTML文本标签:id.innerHTML = '<h1>123</h1>'

操作js

id.style.color = 'red'; 
id.style.fontSize = '100px'; // - 变成驼峰命名

3,删除节点

步骤:

1. 先获取父节点
2. 通过父节点删除

father.removeChild(p1);
//通过要删除的节点获取父元素
p1.parentElement;
//通过下标删除
father.removeChild(father.children[0]);

注意: 删除多个节点的时是动态的, 下标会更新, 可以从后往前删

4,插入节点

append追加:相当于移动元素

<p id="js">js</p>
<div id="list">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
    <script>
        let js = document.getElementById('js'),
            list = document.getElementById('list');
    </script>
//控制台操作
list.append(js);

createElement, 创建新标签,实现插入

<body>
<p id="js">js</p>
<div id="list">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
    <script>
        let js = document.getElementById('js'),
            list = document.getElementById('list');
        //通过JS创建一个新节点
        var newP = document.createElement("p");//创建一个p标签
        //newP.id = 'new_p';//添加ID
        newP.setAttribute('id','new_p')
        newP.innerText = 'Hello';//添加文字
    </script>
</body>

创建一个style标签

//创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body {background-color: aqua;}';
document.getElementsByTagName('head')[0].appendChild(myStyle);

8-操作表单(验证)

表单是什么, form, DOM数里的一个节点

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

1,表单的目的提交信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <span>用户名:</span> <input type="text" id="username">
<!--    多选框-->
    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="man", id="man"> 男
        <input type="radio" name="sex" value="girl", id="girl"> 女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var man = document.getElementById('man');
    var girl = document.getElementById('girl');
    //获取输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value = '123';

    //单选框取值需判断选中状态
    man.checked;//选中为true
    man.checked = true;//选中男
</script>
</body>
</html>

2,提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    表单绑定事件
    onsubmit="return aaa()" true通过, false不通过
-->
<form action="post" onsubmit="return aaa()">
    <span>用户名:</span> <input type="text" id="username" name="username">
    <span>密码:</span> <input type="password" id="password">
    <input type="hidden" id="md5-pwd" name="password">
<!--    绑定时间 onclick:被点击-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        var uname = document.getElementById('username'),
            pwd = document.getElementById('password'),
            md5_pwd = document.getElementById('md5-pwd');
        md5_pwd.value = md5(pwd.value);
        //判断表单内容, true通过, false不通过
        return true;
    }
</script>
</body>
</html>

9-jQuery

jQuery库, 里面有大量的JS函数

公式$(selector).action()

1,获取jQuery

官网: jquery.com

• 导入项目 <script src="lib/jquery-3.6.0.js"></script>
• 使用cdn导入: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2,选择器

<script>
    //js选择器
    document.getElementById();//ID选择器
    document.getElementsByTagName();//标签选择器
    document.getElementsByClassName();//类选择器
    //jQuery css选择器都能使用
    $('p').click();//标签选择器
    $('$id').click();//id选择器
    $('.class').click();//类选择器
</script>

jQuery文档地址

3,事件

• 鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #div_m{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse: <span id="mouse_m"></span>
<div id="div_m">
    移动鼠标
</div>
<script>
    //网页元素加载完成后 响应事件
    //$(document).ready(function (){ });
    //简化后
    $(function (){
        $('#div_m').mousemove(function (e){
            $('#mouse_m').text('x:'+e.pageX+'y:'+e.pageY);
        })
    });
</script>
</body>
</html>

4,操作DOM

方法写参数就是设置值

不填参数就是获取值

文本操作

<ul id="cc_ul">
    <li id="cc_js">JS</li>
    <li id="cc_css">CSS</li>
</ul>
<script>
    $('#cc_js').text();//JS 获取值
    $('#cc_js').text('123');//设置值
</script>

css操作

$('#cc_js').css('color','red');

显示/隐藏元素

$('#cc_js').show();
$('#cc_js').hide();
$('#cc_js').toggle();

5,小技巧

• 1, 看JQuery源码, 看游戏源码
• 2, 巩固HTML. CSS(扒网页, 对应修改)
  • 删除对应JS, 找到核心JS, 下载下来学习, 对应修改