菜单 搜索
首页 前端知识 JavaScript

JavaScript

2024-04-15 21:04:11 前端知识 前端哥 56 590 我要收藏

一、什么是 JavaScritp

JavaScript是一门世界上最流行的脚本语言

JavaScript 控制了网页的行为

二、快速入门

1.内部标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部标签引入e</title>
    
    <!--script标签中，写JavaScript代码-->
    <script>
        alert("hello,world!!!");
    </script>
    
</head>
<body>

</body>
</html>

2.外部文件引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部文件引入</title>
    
    <script src="js/qj.js"></script>
    
</head>
<body>

</body>
</html>

js/qj.js

alert("hello，world！！！");

3.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--JavaScript严格区分大小写-->
    <script>
        //1.定义变量
        var num = 1;
        var name = "lfq";
        //2.条件控制
        if (2>1) {
            if (3 > 2) {
                alert("true");
            } else {
                alert("false");
            }
        }
    </script>

</head>
<body>
</body>
</html>

4.数据类型

数值，文本，图形，音频·，视频。。。

变量

var $a
var _q
var qqq

Number

js不区分小数和整数

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

字符串

‘abc’ ，"abc"

布尔值

true，false

逻辑运算

&&与

||或

！非

比较运算符

= 赋值

==等于（类型不一样，值一样，也会判断为true）   //有缺陷，最好不要用

===绝对等于（类型一样，值一样，结果为true）

须知：

  • NaN与所有的数值都不相等，包括自己

  • 只能通过 isNaN(NaN)来判断这个数是否是NaN

null和undefined

null空

undefined未定义

数组

数组中的类型可以不相同

var arr = [1,2,3,4,5,"abc",'bcd']

对象

每个属性之间使用逗号隔开，最后一个不需要添加

var person = {
    name:"lfq",
    age:3,
    tags:['js','java','css']
}
alert(person.age)

5. JavaScript的输出

5.1 页面输出

<script>
    document.write("Hello,World!");
</script>

5.2 控制台输出

<script>
    console.log("输出一条日志");//最常用
</script>

5.3 弹出窗口输出

<script>
    alert("Hello,World!");
</script>

三、数据类型

1.字符串

1.正规字符串我们使用单引号或者双引号包裹

2.注意转义字符\

\'
\n
\t
\u4e2d  \u#### Unicode字符
\x41           Asclll字符

3.多行字符串编写

var msg = `
hello
worle
你好
呀
`

4.模板字符串

let name = 'lfq';
let msg = `你好呀，${name}`
console.log(msg)

5.字符串长度

str.length

6.字符串的是不可变的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9z27RiHJ-1680686395089)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404181710291.png)]

7.大小写转换

student.toUpperCase()
student.toLowerCase()

2.数组

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

var arr = [1,2,3,4,5,"abc",'bcd']

1.长度

arr.length

3.对象

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

1.赋值

person.name = "lfq"
person.age = "123"

2.使用一个不存在的对象属性,不会报错!

person.halha
undefined

3.动态的删减属性

delete person.name    //删除了person对象的name属性

4.动态的添加属性,直接给新的属性添加值即可

person.halha = "haha"
"haha"
person

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

'age' in person
true

4.流程控制

if判断

 if (2>1) {
            if (3 > 2) {
                alert("true");
            } else {
                alert("false");
            }
        }

if-else if

var age = 18;
if (age < 18) {
    console.log("小于18岁了");
} else if (age == 18) {
    console.log("已经18岁了");
} else {
    console.log("大于18岁了")
}

while循环

var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

do while循环

var i = 1;
do {
    console.log(i);
    i++;
} while (i <= 10);

for循环

for (var i = 1; i <= 10; i++) {
    console.log(i);
}

5. Map和Set

Map：键值对集合，Key-Value形式。Map中不能包含重复的键。

var map = new Map([['tom',100],['jock',99],['haha',88]]);
console.log(map.get('tom'))

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]);
console.log(set.add(2));

6. Iterable

使用迭代器可以输出数组，集合

var arr = [3,4,5]
for(var x in arr){
    console.log(x)
}

四、函数及面向对象

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;
    }
}

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

调用函数

abs(10)//10
abs(-10)//-10

参数问题：JavaScript可以传任意个参数，也可以不传参数

假如不存在参数，如何避免？

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

2.变量作用域

函数体中声明，则在函数体外不可以使用

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

3.方法

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

var lfq = {
    name: 'lfq',
    bith: 2001,
    age: function () {
        var now = new Date().getFullYear();
        return now-this.bith;
    }
}

//属性
lfq.name
//方法，一定要带()
lfq.age()

this代表了什么？拆开上面的代码试试~

function getAge () {
    var now = new Date().getFullYear();
    return now-this.bith;
}

var lfq = {
    name: 'lfq',
    bith: 2001,
    age: getAge()
}

五、内部对象

标准对象

number，string，boolean，object，‘function’，undefined

1. Date

var date = new Date();
date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getDay();//星期几
date.getHours();//时
date.getMinutes();//分
date.getSeconds();//秒

date.getTime();//时间戳 全世界统一
console.log(new Date(1578106175991));//时间戳转换为时间

2. JSON

JSON是什么

早期，所有数据传输习惯地使用XML文件

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

在JavaScript一切皆为对象，任何js支持的类型都可以通过JSON来表示

格式

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

JSON字符串和js对象的转换

//对象转换为JSON字符串
var jsonUser = Json.stringify(user);

//json字符串转换为对象
var obj = JSON.parse('{"name":"lfq","age":3,"sex":"男"}')

六、面向对象编程

原型对象

​ 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

​ 如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过_proto__（隐式原型）来访问该属性。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

class继承

1.定义一个类，属性，方法

class Student{
    
 constructor(name) {
     this.name = name;
 }
    
 hello(){
     alert('hello')
 }
}

var student1 = new Student();
console.log(student1.hello())

2.继承

class xiaoStudent extends Student{
    constructor(name,grade) {
        super();
    }
}

七、操作BOM对象

1.概述

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

  • Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象

  • Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

  • Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

  • Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

  • Document：代表当前页面

  • History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效

  • 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

2.window

window代表 浏览器窗口

window.alert(1)
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
//获取浏览器窗口高度宽度

3.Navigator

Navigator，封装了浏览器的信息

navigator.appName
'Netscape'

navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62'

navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62'

navigator.platform
'Win32'

大多数时候，我们不会使用navigator对象，因为会被人修改

不建议使用这些属性来判断和编写代码

4.screen

screen代表屏幕尺寸

screen.width
2048
screen.heigth
1152

5.location

location代表当前页面的URL信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XpbKbtQR-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405141727820.png)]

location.assign('http://baidu.com/')  //设置一个新的地址
reload:f reload()  //刷新网页

6.document

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

document.title
'百度一下，你就知道'

获取具体的文档树节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
    
    <script>
        var dl = document.getElementById('app');
    </script>
</dl>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-umHeVTKo-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405142756810.png)]

获取cookie

document.cookie

7.history

history代表浏览器的历史记录

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

八、操作DOM对象

DOM：文档对象模型

浏览器网页就是一个Dom树形结构

  • 更新：更新Dom节点
  • 遍历dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个Dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

1.获取dom节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>

<script>
    document.getElementsByTagName('h1')
    document.getElementById('p1')
    document.getElementsByClassName('p2')
</script>
</body>
</html>

2.更新Dom节点：

操作文本：

<p id="p1">p1</p>
<script>
    var p1 = document.getElementById('p1')
    p1.innerText = 'ppp'     //修改文本的值
</script>

操作JS：

p1.style.color = 'yellow'
p1.style.fontSize = '20px'
p1.style.padding = '2em'

3.删除节点

删除节点的步骤，先获取父节点，再通过父节点删除子节点

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

father.removeChild(p1)
father.removeChile(father.child[0])

4.插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，那我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，那就会产生覆盖

追加：

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

<script>
    var js = document.getElementById('js')
    var list = document.getElementById('list')
    list.append(js)    //追加
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCffyKlw-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405151104350.png)]

创建一个新的标签：

<script>
    var js = document.getElementById('js')
    var list = document.getElementById('list')

    var newP = document.createElement('p')
    newP.id = 'newP'
    newP.innerText = 'hello'
</script>

九、操作表单(验证)

表单：form

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

操作表单：

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

<script>
    var input = document.getElementById('username')    //得到文本框的值
    input.value = '123'    //修改文本框的值
    
</script>

提交表单：

<form>
    <p>
    <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
    </p>
    <p>
        <button type="submit" onclick="aa()">提交</button>
    </p>
</form>

<script>
    function aa(){
        var username = document.getElementById('username')
        var password = document.getElementById('password')
        console.log(username.value)
        console.log(password.value)
    }
</script>

十、jQuery

jQuery库，里面存在大量的JavaScript函数

1.引入

本地引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.7.2.js"></script>
</head>
<body>
</body>
</html>

CDN引入：

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

2.快速使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function () {
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });
</script>
</body>
</html>

3.选择器

标签选择器：

$('div')

id选择器：

$('#btn')

class选择器:

$('.red')

4.方法

attr()

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

<p id="content" title="我是段落标题">我是段落</p>

$('#content').attr('title', '我是attr修改后的段落标题');

prop()

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

<input type="checkbox">复选框

$(':checkbox').prop('checked', 'true');

val()

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

<input type="text">

$(':text').val('123456');

css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

<div>我是div</div>

$('div').css({
    'background': 'red',
    'color': 'white'
});
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4983.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

vue3绘制内容自动无缝滚动表格

2024-04-25 16:04:07

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue里使用样式color: var(--Editor-text)，已经定义了--Editor-text，但是却显示变量--Editor-text未定义，为啥

2024-04-25 08:04:19

wangEditor设置初始文字颜色

2024-04-23 15:04:38

Golang 使用 Gin 框架接收 HTTP Post 请求体中的 JSON 数据

2024-04-23 22:04:53

Python读写Json文件

2024-04-23 22:04:19

【头歌】——数据分析与实践-python-网络爬虫-Scrapy爬虫基础-网页数据解析-requests 爬虫-JSON基础

2024-04-23 22:04:19

ObjectMapper转化对象常用方法(转LIst、Map，以及Type、JavaType、constructType的学习)

2024-04-23 22:04:02

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
10

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！