JavaScript

最新推荐文章于 2021-09-15 16:33:56 发布

lll919397

最新推荐文章于 2021-09-15 16:33:56 发布

阅读量293

点赞数

分类专栏：学习文章标签： javascript

本文链接：https://blog.csdn.net/lll919397/article/details/113821349

版权

学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JavaScript

1 JS概述

# 什么是JavaScript
世界上最流行的一门脚本语言
# 作用
可以使静态网页具备动态的效果，虽然css最新版拥有动画的功能，可是实现过程和样式远没有js简单且多样

设置idea的js语言版本为es6

2 导入js的两种方式

2.1 内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js导入方式</title>

    <!--内部标签 -->
    <script>
        // 弹窗
        alert("Hello World!");
        
        // 打印信息到控制台
        console.log(1);
    </script>
</head>
<body>

</body>
</html>

2.2 外部导入

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js导入方式</title>

    <!--外部引入 -->
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>

</body>
</html>

js代码

// 弹窗
alert("Hello World!");

3 变量

3.1 降低全局变量绑定window

// 唯一全局变量
var YTC = {};

// 定义全局变量
YTC.name = "ytc";
YTC.add = function(a,b){
    return a+b;
}

3.2 常量

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

4 数据类型

4.1 Number

123  // 整数123
123.1  // 浮点数123.1
1.123e3  // 科学计数法
-99  // 负数
NaN  // not a number
Infinity  // 表示无限大

4.2 字符串

'abc'
"abc"

4.3 布尔值

true
false

4.4 null和undefined

null 定义未初始化
undefined 未定义

4.5 数组

// 建议使用[]定义
var arr = [0,3,2,null,true];
arr = new Array(1,3,4,null);

4.6 对象

/ 对象
var person = {
    name: "ytc",
    age: 22,
    tags: [1,3,null]
}

4.7 精度丢失

Math.abs(1/3-(1-2/3))<0.00000001

5 数据类型详解

5.1 字符串

字符串可被单引号或双引号包裹
特殊字符需转义

\' 
\" 
\n
\r
\t
\u4e2d  // Unicode编码
\x41  // AscII编码

模板字符串（es6新特性）

'use strict';

let name = "ytc";
// 下面这个不是单引号，是反引号，在tab键上面
let msg = `name,${name}`;
console.log(msg);

常用方法（和java一样）

let str = "ytc";
// 字符串长度（JAVA需加小括号）
str.length;

// 转大小写
str.toUpperCase();
str.toLowerCase();

// 根据下标获取指定字符
str.charAt(0);

// 根据指定字符或字符串获取对应下标
str.indexOf('y');

// 字符串剪切
str.substring(0,3);

5.2 数组

let arr = [1,2,3,4,"1","2"];

// 长度可直接改变（JAVA需调扩容方法）
arr.length = 8;

// 通过指定元素获取对应下标
arr.indexOf("1");

// 数组的截取
arr.slice(0,3);

// 数组尾部的压入和弹出
arr.push("a","b");
arr.pop();

// 数组头部的压入和弹出
arr.unshift("a","b");
arr.shift();

// 排序（JAVA中通过类名调用，这里直接变量名调用）
arr.sort();

// 反转
arr.reverse();

// 拼接（返回一个新数组，原数组不改变）
arr.concat([1,2,3]);

// 打印拼接成字符串，原数组不改变
arr.join("-");

5.3 对象

// 声明一个对象，有三个属性
let person = {
    name: "ytc",
    age: 22,
    score: 0
}

// 属性获取
person.name;
person["age"];

// 动态删除属性
delete person.name;

// 动态添加属性
person.haha = "haha";

// 判断属性是否在对象中
"toString" in person;

// 判断属性是否是这个对象自身拥有的，而不是Object的
person.hasOwnProperty("age");

6 严格检查语法

/*
 *  'use strict' - 严格检查模式，建议每次加在第一行(IDEA必须设置es6)
 *  let - 局部变量的声明，以后由它取代var
 * */
'use strict';
let i = 3;

7 运算符

7.1 逻辑运算符

&&
||
!

7.2 比较运算符

=
==  // 等于，类型不一样，值一样，判断为true
===  // 绝对等于，只有类型和值都一样才会判断为true
isNaN(NaN)  // NaN只能如此比较

8 流程控制

8.1 if

let age = 3;
if(age > 2){
    console.log(`age:${age}`);
}

8.2 while

let age = 3;
while(age < 100){
    age = age + 1;
    console.log(`age:${age}`);
}

8.3 do-while

let age = 3;
do{
    age = age + 1;
    console.log(`age:${age}`);
}while(age < 100);

8.4 for

let arr = [1,3,2];
for(var i=0;i<arr.length;i++){
    console.log(`${i}:${arr[i]}`)
}

// for...in
for(let num in arr){
    console.log(`${num}:${arr[num]}`);
}

// for...of(es6新特性)
for(let num of arr){
    console.log(`${num}`);
}

8.5 forEach

let arr = [1,3,2];
arr.forEach(function (value) {
    console.log(value);
});

9 函数

9.1 函数的声明

方式一

// 符合JAVA的调用模式
function abs(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

console.log(abs(-10));

方式二

// 值对象，将一个匿名函数赋值给一个变量
var abs = function(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

9.2 异常的抛出

'use strict';

function abs(x){
    // 不传参
    if(typeof x !== 'number'){
        throw 'not a number';
    }

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

console.log(abs(-10));

9.3 多余参数的处理

原方式

'use strict';

function abs(a,b){
    if(arguments.length > 2){
        for(let i=2;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
}

abs(12,34,78,21);

es6新方式

'use strict';

function abs(a,b,...rest){
    console.log(rest);
}

abs(12,34,78,21);

10 Map和Set集合（es6新特性）

10.1 Map集合

'use strict';

let map = new Map([["tom",80],["jack",90],["sala",70]]);
// map集合追加元素，key值一样会覆盖
map.set("sala",60);
// map集合根据key值获取value值
console.log(map.get("jack"));
// 根据key值删除该元素
map.delete("sala");

10.2 Set集合

'use strict';

let set = new Set([1,3,5,1]);
// set集合追加元素
set.add(6);
// set删除元素
set.delete(5);
// set集合是否包含某元素
console.log(set.has(3));

11 内部对象

11.1 Date

'use strict';

// 当前时间
let date = new Date();

// 年
date.getFullYear();
// 月 0-11
date.getMonth();
// 日
date.getDate();
// 星期
date.getDay();
// 时
date.getHours();
// 分
date.getMinutes();
// 秒
date.getSeconds();

// 时间戳
date.getTime();
// 时间戳转时间
let date2 = new Date(date.getTime());

// 时间格式转换
date.toLocaleString();
date.toGMTString();

11.2 Json

# 什么是json?
一种轻量级的数据交换格式

'use strict';

var user = {
    name: "ytc",
    age: 23,
    sex: "man"
}

// 将对象转换成json
var json = JSON.stringify(user);
// 将json转化成字符串
var obj = JSON.parse('{"name":"ytc","age":23,"sex":"man"}');

12 面向对象编程

12.1 面向对象原型编程

'use strict';

var Student = {
    name: 'student',
    age: 3,
    run: function(){
        console.log(this.name+'在跑...');
    }
}

var xiaoming = {
    name: 'xiaoming'
}

// 把xiaoming原型指向Student
xiaoming.__proto__ = Student;

12.2 面向对象class编程（es6新特性）

'use strict';

class Person{
    constructor(name) {
        this.name = name;
    }

    sayHi(){
        console.log(`${this.name}说Hi...`);
    }
}

class Student extends Person{
    constructor(name,gride) {
        super(name);
        this.gride = gride;
    }

    myGride(){
        console.log(`${this.name}=${this.gride}`);
    }
}

var xiaoming = new Person("xiaoming");
var xiaohong = new Student("xiaohong",34);

13 操作BOM对象

13.1 window 浏览器窗口

window.alert(1)
window.console.log(1)
1
window.innerHeight
722
window.innerWidth
483
window.outerHeight
824
window.outerWidth
1536

13.2 navigator 浏览器信息

// 浏览器名称
navigator.appName
"Netscape"
// 浏览器版本
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
// 用户信息
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
// 系统
navigator.platform
"Win32"

13.3 screen 计算机屏幕信息

screen.height
864
screen.width
1536

13.4 location 当前页面的url信息

// 主机
host: "www.baidu.com"
// 地址
href: "https://www.baidu.com/"
// 协议版本号
protocol: "https:"
// 刷新页面
reload()
// 加载其他地址
assign(https:www.baidu.com)

13.5 document 当前页面文档树

document.title
"百度一下，你就知道"
document.cookie
"BIDUPSID=8243ED3EBC085623B4C66CF515638326; PSTM=1610281591; BAIDUID=8243ED3EBC085623A43A1803065E0EB7:FG=1; BD_UPN=12314753; ispeed_lsm=2; BAIDUID_BFESS=45EE1FABAE46D4F8CD63204810CF8269:FG=1; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1611395736,1611553964,1611555756,1613125235; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; COOKIE_SESSION=202139_6_6_8_8_24_0_0_6_4_0_6_612806_202107_9_3_1613232367_1613232361_1613232358%7C9%23202139_76_1613232358%7C9; BD_HOME=1; H_PS_PSSID=33425_33441_33344_31253_33600_33318_33268; BDRCVFR[feWj1Vr5u3D]=I67x6TjHwwYf0; delPer=0; BD_CK_SAM=1; PSINO=6; BA_HECTOR=2k8ha4a58ha485819u1g2idja0q"

获取文档树节点

<dl id="java">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>

<script>
    'use strict';
	let java = document.getElementById('java');
</script>

13.6 history 历史记录

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

14 操作DOM对象

14.1 获取dom节点

'use strict';
        
// 根据标签名获取节点
var h1 = document.getElementsByTagName('h1');
// 根据id获取节点
var p1 = document.getElementById('p1');
// 根据class获取节点
var p2 = document.getElementsByClassName('p2');

var father = document.getElementById('father');
// 根据父节点获取所有子节点
var children = father.children;
// 根据父节点获取第一个孩子
var firstChild = father.firstChild;
// 根据父节点获取最后一个孩子
var lastChild = father.lastChild;

14.2 更新dom节点

'use strict';

var div = document.getElementById('d');
// 修改内部内容
div.innerText = 'ytc';
// 修改内部标签
div.innerHTML = '<b>abc</b>';

// 修改内部样式
div.style.background = 'skyblue';
div.style.width = '100px';
div.style.height = '50px';
div.style.fontSize = '16px';
div.style.color = 'pink';
div.style.textAlign = 'center';
div.style.lineHeight = '50px';

14.3 删除节点

<div>
    <p id="self">p1</p>
</div>

<script>
        'use strict';

// 根据父节点删除自己
var self = document.getElementById('self')
var father = self.parentElement;
father.removeChild(self);
</script>

14.4 插入节点

<p id="js">js</p>
<div id="father">
    <p id="java">java</p>
    <p id="html">html</p>
</div>

<script>
    // 在父节点中追加已存在节点
    var js = document.getElementById('js');
    var father = document.getElementById('father');
    father.appendChild(js);

    // 在父节点中追加新节点
    var css = document.createElement('css');
    css.setAttribute('id','css');
    css.innerText = 'css';
    father.appendChild(css);

    // 节点插入
    father.insertBefore(css,document.getElementById('html'));
</script>

15 操作表单

15.1 获取和设置表单的值

<form action="#" method="post">
    <span>用户名：</span><input type="text" name="username"><br/>
    <input type="radio" name="sex" value="boy"><span>男</span>
    <input type="radio" name="sex" value="girl"><span>女</span>
</form>

<script>
    'use strict';

    // 操作表单数据
    var username = document.getElementsByTagName('input')[0];
    username.setAttribute('value','ytc');

    var girl = document.getElementsByTagName('input')[2];
    girl.setAttribute('checked','checked');
</script>

15.2 表单密码验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>

    <script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <form action="https://www.baidu.com" method="post" onsubmit="return checkUp()">
        <span>用户名：</span><input type="text" name="username"><br/>
        <span>密码：</span><input type="password" name="pwd"><br/>
        <input type="hidden" name="md5Pwd">
        <input type="submit">
    </form>

    <script>
        'use strict';

        function checkUp(){
            var pwd = document.getElementsByTagName('input')[1];
            var md5Pwd = document.getElementsByTagName('input')[2];
            md5Pwd.value = md5(pwd.getAttribute('value'));
            pwd.value = '******';

            return true;
        }
    </script>
</body>
</html>

16 jQuery

16.1 jQuery导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!--
        jQuery 导入
        1 https://www.jQuery.com
            下载开发版（未压缩）和生产版（压缩）
        2 引入官方文件
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		3 文档工具 http://jquery.cuishifeng.cn/
     -->

    <script src="lib/jquery-3.4.1.min.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我试试</a>

    <script>
        /*$(selector).action(); */
        $('#test-jquery').click(function () {
            alert('试试就试试');
        });
    </script>
</body>
</html>

16.2 jQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>

    <script src="lib/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

    <script>
        // 标签名选择器
        $('h1').text('标题二');
        // id选择器
        $('#p1').text('myp1');
        // 类选择器
        $('.p2').text('myp2');
        // 层级选择器
        $('body h1').text('标题三');
        // 结构伪类选择器
        $('p:nth-of-type(1)').text('mymyp1');
        // 属性选择器
        $('p[class=p2]').text('mymyp2');
    </script>
</body>
</html>

16.3 jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <script src="lib/jquery-3.4.1.min.js"></script>

    <style>
        body{
            font-size: 16px;
        }

        #div{
            width: 200px;
            height: 200px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
    <span id="span">mouse: x 0px y 0px</span>
    <div id="div"></div>

    <script>
        // 页面加载完成时执行复杂代码
        // $(document).ready(function(){});
        // 页面加载完成时执行
        $(function () {
            // 鼠标移动，其他绑定事件可查文档工具
            $('#div').mousemove(function (e) {
                $('#span').text(`mouse: x ${e.pageX}px y ${e.pageY}px`);
            });
        });
    </script>
</body>
</html>

16.4 jQuery操作dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作dom节点</title>
    <script src="lib/jquery-3.4.1.min.js"></script>
</head>
<body>
    <span id="span">jQuery</span>

    <script>
        // 文本
        $('#span').text('jquery');
        // html
        $('#span').html('<b>jquery</b>');
        // css
        $('#span').css('color','red');
        $('#span').css({'color': 'lightgray', 'font-size': '16px'});
        // 隐藏显示
        $('#span').hide();
        $('#span').show();
    </script>
</body>
</html>

lll919397

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript1 JS概述# 什么是JavaScript世界上最流行的一门脚本语言# 作用可以使静态网页具备动态的效果，虽然css最新版拥有动画的功能，可是实现过程和样式远没有js简单且多样设置idea的js语言版本为es62 导入js的两种方式2.1 内部标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>j
复制链接

扫一扫