JS

1）js写在<script> </script>标签内，外部引入时用<script src=" "> </script>,注意与 link 区分

2）js 中的变量类型只有 var 一种，

eg：var sum = 2;（sum是整型）

var name = "yiya"；（name是字符型）

console.log(变量名)：在控制台打印变量

数组用中括号，对象或类用大括号键值对之间用 : 隔开 var person = {}；类中的属性名和值之间用 : 隔开

3）Numer : 表示数字类型。JS 中的数字类型不区分整数和小数。

NaN : 代表这不是一个数。 Infinity :表示无限大

1 = ：赋值
2 == ：等于（在 JS 中，即使类型不一样，但只要值一样，它都会判断为 true，注意与 JAVA 中的区分。 eg : 1 和 "1"）不要使用
3 === :绝对等于（类型一样，值一样，才会判断为 true。JS中常用）

NaN 与·所有数值都不相等，包括它自己；只有通过 isNaN（数）来判断这个数是否是NaN

4）

1 ‘use strict’ ; //严格检查模式 ，必须写在第一行；
2  //它可以提醒那些是未定义的变量，预防因其所产生的一些问题
3  //建议在ES6中局部变量用 Let 定义

5）多行字符

1 eg:
2 let df = `45    //其中``在 esc 键下方， tab 键上方，不是单引号
3           sd     //结果显示为三行，如定义的一样
4           fd`;

6）在定义的字符中加 ${字符名} ：拼接字符串

1 sd : 表示一个字符串(dfrgtsf )
2 sd.toUpperCase(）//大小转换
3 sd.toLowerCase() //小写转换
4 
5 sd.indexOf('t')  //表示 t 在字符串中的下标
6 
7 sd.substring(n,m) //表示从第 n 位截取到第 m 位；
8  //若只有一个数，则表示从第 n 位截取到最后一位

7）数组

在 JS 中数组的大小可以后期改变，通过 length 函数。

eg: arr 是一个大小为5的数组，通过 arr.length = 9; 可以将其大小改为 9；

1  indexOf（）：通过元素索引获得下标 
2  slice（）：截取数组的一部分，返回一个新的数组，类似String的substring 
3  push() ：在数组尾部添加数据。    arr.push(4,5);
4  pop() : 删除数组尾部的元素，若括号内不写元素，则默认删除数组最后一个元素
5  unshhift() : 往头部添加元素
6  shift() : 删除头部元素
7  arr.sort() : 元素排序
8  reverse() : 元素翻转
9  arr.concat() : 它只是返回一个新的数组，并不会对之前的数组产生影响

https://www.bilibili.com/video/BV1JJ41177di?p=7

8）

 1         let sd = [4, 5, 8, 3, 'f'];
 2 //forEach循环
 3         sd.forEach(function (value) {
 4             console.log(value);
 5         })
 6 //for...in循环
 7         for (const key in sd) {
 8             if (sd.hasOwnProperty(key)) {
 9                 console.log(sd[key]);
10             }
11         }

9)Map、set https://www.bilibili.com/video/BV1JJ41177di?p=10

10）函数

JS函数定义用 function
定义方式一：

        function sa(x) {
            let m = x;
            return m * x;
        }
方式二：
 var sd = function (x) {
            let m = x;
            return m * x;
        }
两者等价。

...rest : 接收多输入的参数

function fsd(x, y, ...rest) {

console.log(x);

console.log(y);

console.log(rest);

}

11）作用域

        function fsd() {
            for (var i = 0; i < 10; i++) { 
                console.log(i);
            }
            console.log(i + 10);
        }
//此时由 var 定义的 i 可以在这个函数内任何地方被调用；不能在函数之外调用
// 若将 var 换成 let ；则 i 只在 for 循环内有效

12）方法

//方法就是把函数放在对象里面，对象只有两个东西:属性和方法
        var yiya = {
            name: '咿呀',
            birth: 2000,
            age: function () {
                var nowage = new Date().getFullYear();
                return nowage - this.birth;
            }
        }
//调用时 属性： yiya.name
//方法：yiya.age();

13）typeof

typeof 可以判断数据类型
 function sd(x) {
            if (typeof x !== 'string') {
                console.log("not");
            }
        }

typeof 123 //'number'

14)Date

 var now = new Date(); //Wed Oct 06 2021 16:04:47 GMT+0800 (中国标准时间)
        now.getFullYear(); //年
        now.getMonth(); //月  0~11
        now.getDate(); //日
        now.getDay(); //星期几
        now.getHours(); //时
        now.getMinutes(); //分
        now.getSeconds(); //秒
        now.toLocaleString(); //查询本地时间

        now.getTime(); //时间戳，从1970 1.1 0：00:00 到现在的毫秒数 全球统一
        new Date(now.getTime()); //将时间戳转换成时间

15）JSON

JSON.stringify();  //对象转JSON字符串的函数
JSON.parse(); //JSON字符串转对象的函数

class类

   class student {
            constructor(name) {
                this.name = name;
            }
            he() {
                alert('student');
            }
        }
//继承
        class Xstudent extends student {
            constructor(name, sex) {
                super(name);
                this.sex = sex;
            }
            hj() {
                alert('good');
            }
        }
        var xi = new student("zsd");
        var xig = new Xstudent("GTH", "sd");

16)BOM对象

window 代表浏览器窗口，可以 window. 许多方法，其中最常用的是测量窗口的长宽
eg : window.innerHeight    //内部宽度
     window.outHeight       //外部宽度

screen.height //屏幕长
screen.width //屏幕宽

loaction //代表当前URL信息

location.reload() //刷新网页

location.assign('网址') //设置新的地址

navigator ,封装了浏览器的信息，可以用其获取相关信息

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

document.title //获取页面标题

document.title = '咿咿呀呀' //修改网页标题

document.getElementById('') //可以获取具体的文档树节点

document.cookie //或取 cookie ，即用户的信息，包括私密信息，如，登录密码等

https://www.bilibili.com/video/BV1JJ41177di?p=19

17）DOM对象

 var h1 = document.getElementsByTagName('h1'); //通过 标签名 获得节点
 var p1 = document.getElementById('one'); //通过 id  获得节点
 var p2 = document.getElementsByClassName('two'); //通过 类名 获得节点

var chi = 父标签.children; //获取父节点下的所有子节点

可以通过获取的节点操作 HTML 或 CSS



删除节点：先获取父节点，再通过父节点删除自己。
注意：删除多个节点时，children是在时刻变化的



插入：
//把已有标签移到其他父标签中

var js = document.getElementById('js'); //已有标签

var list = document.getElementById('list'); //要插进去的父标签

list.appendChild(js); //在 list 中插入 js

var newp = document.createElement('p'); //创建P标签

newp.id = 'newp';

newp.innerText = 'sdvgs';

18）表单 https://www.bilibili.com/video/BV1JJ41177di?p=25

        var input_name = document.getElementById('name');
//         input_name.value       //查看输入的内容，但它只能获得当前的值
//          input_name.value = 'yyyy'      //修改输入的内容

对于单选框、多选框等固定的值，可以用 类名.checked 查看；选中则返回 true ，反之返回 false ;

注意使用 MD5 加密时，要加入这一句

19）JQuery

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

使用时要先获取 JQuery 并将其导入在项目中
在线引入；如：<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>      （搜索 CDN JQuery 即可）

本地引入：先下载，再引入

提示： 要学会查上面的文档

// $(selextor).action();

// action : 表示事件例如：鼠标事件、键盘事件、点击事件等

// selextor : 表示选择器；选择器为 CSS 中的选择器

// 括号内是一个函数体

$('#one').click(function () { //若是 id 则前面要加 #

alert('ggood');

})

</script>

例如：（可以查看上面的网站）

$('p').click(); //标签选择器

$('#id').click(); // id 选择器

$('.class').click(); //类选择器

等等。。。。

jQuery选择器 jQuery事件 jQuery操作Dom元素

posted @ 2021-10-09 19:20 咿呀鲸落阅读(398) 评论(0) 收藏举报

刷新页面返回顶部