JavaScript学习笔记(1.0)

push()

语法:数组.push(数据)

作用:将数据追加到数组的末尾

返回值:追加数据后数组最新的长度

pop()

语法:数组.pop()

作用:删除数组最后一个数据

返回值:被删除的数据

unshift()

语法:数组.unshift(数据)

作用:将数据添加到数组的最前

返回值:添加数据后数组最新的长度

shift()

语法:数组.shift()

作用:删除数组最前一个数据

返回值:被删除的数据

reverse()

语法:数组.reverse()

作用:将数组反转

返回值:反转后的数组

splice()

语法:数组.splice(开始索引,多少个,要插入的数据)

开始索引:默认是0

多少个:默认是0

要插入的数据:默认是没有

作用:删除数组中若干数据,并选择是否插入新的数据

返回值:以数组的形式返回被删除的数据

sort()

语法:数组.sort()

数组.sort( function(a,b) { return a-b})

数组.sort( function(a,b) {return b-a})

作用:将数组进行排序

返回值:排序好的新数组

join()

语法:数组.join(连接符)

作用:将数组用连接符连接称为一个字符串

返回值:连接好的字符串

concat()

语法:数组.concat(其他数组)

作用:将其他数组合数组拼接在一起

返回值:拼接好的新数组

slice()

语法:数组.slice(开始索引,结束索引)

开始索引:默认是0

结束索引:默认是数组长度

作用:截取数组中的某些数据

返回值:以新数组的形式返回截取出来的数据

indexOf()

语法:数组.indexOf(数据)

作用:查找在数组中的索引位置

返回值:有该数据,返回第一次出现的索引位置。没有该数据,返回-1

 forEach()

语法:数组.forEach( function(item,index,arr) {})

作用:遍历数组

返回值:无

map()

语法:数组.map(function(item,index,arr){})

作用:映射数组

返回值:映射后的新数组

filter()

语法:数组.filter(function(item,index,arr){})

作用:过滤数组

返回值:过滤后的新数组

every()

语法:数组.every(function(item,index,arr){})

作用:判断数组是不是每一项都满足条件

返回值:一个布尔值

some()

语法:数组.some(function(item,index,arr){})

作用:判断数组是不是有某一项满足条件

返回值:一个布尔值

字符串常用方法

字符串也是按照索引进行排序的,也是和数组一样从索引0开始。一个字符就是一个索引位置

charAt()

语法:字符串.charAt(索引)

作用:获取对应索引位置的字符

返回值:对应索引位置的字符

toLowerCase()

语法:字符串.toLowerCase()

作用:将字符串内的字母全部转换成小写

返回值:转换好的字符串

toUpperCase()

语法:字符串.toUpperCase()

作用:将字符串内的字母全部转换成大写

返回值:转换好的字符串

replace()

语法:字符串.replace(换下内容,换上内容)

作用:将字符串内第一个满足换下内容的片段替换成换上内容

返回值:替换好的字符串

trim()

语法:字符串.trim()

作用:去除字符串首尾的空格

返回值:去除空格后的字符串

split()

语法:字符串.split(分隔符)

作用:按照分隔符将字符串切割成为一个数组

返回值:切割后的数组

substr()

语法:字符串.substr(开始索引,多少个)

作用:截取字符串

返回值:截取出来的字符串

substring()

语法:字符串.substring(开始索引,结束索引)

作用:截取字符串

返回值:截取出来的字符串

slice()

语法:字符串.slice(开始索引,结束索引)

作用:截取字符串

返回值:截取出来的字符串

数字常用方法

random()

语法:Math.random()

作用:获取0~1之间的随机小数,包含0,但是不包含1

返回值:0~1之间的随机小数

round()

语法:Math.dound(数字)

作用:对数字进行四舍五入取整

返回值:四舍五入后的整数

ceil()

语法:Math.ceil(数字)

作用:对数字进项向上取整

返回值:向上取整后的整数

floor()

语法:Math.floor(数字)

作用:对数字进行向下取整

返回值:向下取整后的整数

pow()

语法:Math.pow(底数,指数)

作用:对数字进行取幂运算

返回值:取幂后的结果

sqrt()

语法:Math.sqrt(数字)

作用:对数字进行二次方根运算

返回值:二次方根后的结果 

abs()

语法:Math.abs(数字)

作用:对数字进行绝对值运算

返回值:绝对值运算后的结果

max()

语法:Math.max(数字1,数字2,数字3,...)

作用:获取若干数字的最大值

返回值:若干个数字中的最大值

min()

语法:Math.min(数字1,数字2,数字3,...)

作用:获取若干数字的最小值

返回值:若干个数字中的最小值

PI

语法:Math.PI

作用:得到一个近似π的值

### HTML学习笔记 #### 基础结构 HTML(HyperText Markup Language)是用于创建网页的标准标记语言。一个基本的HTML文档结构如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 页面内容 --> </body> </html> ``` - `<!DOCTYPE html>`:声明文档类型为HTML5。 - `<html>`:根标签,包含整个HTML文档。 - `<head>`:包含文档的元数据,如字符编码、页面标题等。 - `<body>`:包含可见的页面内容。 #### 常用标签 - **标题标签**:`<h1>` - `<h6>`,用于定义不同级别的标题,`<h1>` 级别最高,`<h6>` 级别最低。 ```html <h1>这是一级标题</h1> <h2>这是二级标题</h2> ``` - **段落标签**:`<p>`,用于定义段落。 ```html <p>这是一个段落。</p> ``` - **列表标签**:有序列表 `<ol>` 和无序列表 `<ul>`,列表项使用 `<li>` 标签。 ```html <ol> <li>第一项</li> <li>第二项</li> </ol> <ul> <li>无序列表项1</li> <li>无序列表项2</li> </ul> ``` - **链接标签**:`<a>`,用于创建超链接。 ```html <a href="https://www.example.com">访问示例网站</a> ``` - **图像标签**:`<img>`,用于在页面中显示图像。 ```html <img src="image.jpg" alt="图像描述"> ``` ### CSS学习笔记 #### 引入方式 CSS(Cascading Style Sheets)用于为HTML文档添加样式。有三种引入方式: - **内联样式**:直接在HTML标签的 `style` 属性中添加样式。 ```html <p style="color: red;">这是红色文字的段落</p> ``` - **内部样式表**:在 `<head>` 标签中使用 `<style>` 标签定义样式。 ```html <head> <style> p { color: blue; } </style> </head> <body> <p>这是蓝色文字的段落</p> </body> ``` - **外部样式表**:将CSS代码保存为一个独立的 `.css` 文件,然后在HTML文档中使用 `<link>` 标签引入。 ```html <head> <link rel="stylesheet" href="styles.css"> </head> ``` `styles.css` 文件内容: ```css p { color: green; } ``` #### 选择器 - **元素选择器**:通过元素名称选择元素。 ```css p { font-size: 16px; } ``` - **类选择器**:通过元素的 `class` 属性选择元素,类名前加 `.`。 ```html <p class="highlight">这是有高亮样式的段落</p> ``` ```css .highlight { background-color: yellow; } ``` - **ID选择器**:通过元素的 `id` 属性选择元素,ID名前加 `#`。 ```html <p id="special">这是有特殊样式的段落</p> ``` ```css #special { font-weight: bold; } ``` #### 盒模型 每个HTML元素都可以看作一个盒子,由内容区(content)、内边距(padding)、边框(border)和外边距(margin)组成。 ```css div { width: 200px; height: 100px; padding: 10px; border: 1px solid black; margin: 20px; } ``` ### JavaScript学习笔记 #### 引入方式 JavaScript用于为网页添加交互性。有两种引入方式: - **内部脚本**:在HTML文档中使用 `<script>` 标签包含JavaScript代码。 ```html <script> alert('Hello, World!'); </script> ``` - **外部脚本**:将JavaScript代码保存为一个独立的 `.js` 文件,然后在HTML文档中使用 `<script>` 标签引入。 ```html <script src="script.js"></script> ``` `script.js` 文件内容: ```javascript console.log('这是外部脚本中的代码'); ``` #### 变量和数据类型 - **变量声明**:使用 `var`、`let` 或 `const` 声明变量。 ```javascript var name = 'John'; let age = 25; const PI = 3.14; ``` - **数据类型**:包括基本数据类型(如 `number`、`string`、`boolean`、`null`、`undefined`)和引用数据类型(如 `object`、`array`、`function`)。 ```javascript let num = 10; let str = 'Hello'; let isTrue = true; let arr = [1, 2, 3]; ``` #### 函数 函数是一段可重复使用的代码块。 ```javascript function add(a, b) { return a + b; } let result = add(3, 5); console.log(result); ``` #### 事件处理 可以通过JavaScript监听HTML元素的事件,如点击事件。 ```html <button id="myButton">点击我</button> <script> const button = document.getElementById('myButton'); button.addEventListener('click', function() { alert('按钮被点击了!'); }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mez_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值