JavaScript基础

最新推荐文章于 2024-11-08 14:35:14 发布

Tournesol-xwx

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量319

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_56127990/article/details/127512465

版权

1.JavaScript位置

head部分：用于声明变量，函数，类型，为事件绑定处理函数
body部分：调用脚本执行
外部脚本：用于定义函数，类型
- 将代码封装到一个扩展名为js的文件当中，然后在需要的地方引用，完成一次定义，多处引用的效果，简化了代码的维护
- 在文件中不需要写标签
执行顺序 : head > body > 外部脚本

2.基本语法

大小写敏感
弱类型语言
分号结尾
注释(单行，多行，方法)
字符串既可以使用单引号，也可以使用双引号

2.1数据类型

因为JavaScript为弱类型语言，故声明变量只需要使用 var 关键字即可申明任何类型
虽然"var"关键字即可申明任何类型，但是JavaScript仍有数据类型
- boolean 布尔类型
- number 数字
- string 字符串
- undefined 未定义
- nulll 空对象
- object 对象类型
- undefind和null类型都是只有一个值的数据类型，值分别为undefined和null
查看变量类型可以使用 typeof方法

2.2集合

数组： [..........]
```
var array = [1,2,3,4,5];
```

键值对：{键：值，......}

var keyValues = {"key1":"value1","key2":"value2","key3":"value3"}

对象数组：[{属性：值，.....}，{}，{}]

var keyValues = [
{"key1":"value1","key2":"value2","key3":"value3"},
{"key1":"value1","key2":"value2","key3":"value3"},
{"key1":"value1","key2":"value2","key3":"value3"}
];

Array对象属性
- length设置火返回数组中元素的数目
Array对象方法
- concat() : 连接两个或更多的数组，并返回结果
- join() : 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分离
- push() : 想数组的末尾添加一个元素或者更多的元素，并返回新的长度
- reverse() : 颠倒数组中元素的顺序
- sort() : 对数组的元素进行排序
- splice() : 删除元素，并且向数组添加新元素

类型转换

//测试字符串变量的类型
var strValue = "9876";
var numValue = parseInt(StrValue);
console.log(typeof(numValue));//输出：“number”

2.3方法使用

使用关键字function定义方法
方法名可以使用驼峰命名法

方法可以设置参数和返回值

function myFunction(param1,param2){
    return param1+parma2;
}

由于js是弱类型语言，不需要通过指定类型声明变量，故方法参数前不需要指定变量类型
方法返回值关键字return后如果不跟返回的内容，则可简单理解为中断方法的执行
js中不存在方法重载，”重载“的方法会覆盖之前的方法
从方法中获取参数还可以使用arguments关键字，他是一个数组

2.4匿名方法

匿名方法可以简单理解为不需要写方法名称的方法
匿名方法一般有两种写法
- 方法一：
```
function(params){
............
}
```
- 方法二:
```
(function(param1,param2)
{
 ............
})(1,2);
```
- 这种方法可以在定义匿名方法的时同时传参及调用

3.闭包

可以简单理解为子方法可以使用父方法的变量（不建议使用闭包，变量不易释放）

4.DOM

DOM即为document object model
DOM用于操作html文档，准确来说是操作html标签中的内容
JavaScript中将每一个标签作为对象处理
在HTML中，每个标签都拥有自己的属性，比如style,id,class等，也有触发事件，方法。同样在js中最为对象处理的标签也拥有属性，事件，方法等成员
操作DOM对象，一般使用document关键字调用

4.1js获取元素的方法

document.getElementById(id); 根据id获取元素节点
document.getElementByClassName(classname); 根据class的值获取一组元素节点
document.getElementByName(name); 根据那么获取一组元素节点
document.getElementByTagName(tag);根据标签名获取一组元素节点

4.2 注册事件

事件注册常用的方式有很多种。两种最常用的方法是一种为直接在元素上注册事件，一种为在获取的对象上注册触发事件

元素注册法

<input id='txt1' class='txt' type = 'txt' value='' onclick="clickName()">

对象注册法(此方法实现了html和js的分离，更符合现在的编程思想)

<input id='txt1' class='txt' type = 'txt' value=''>
<script>
    document.getElementById("txt1").onclick = function(){
        ..............
    };
</script>

4.3动态操作元素

document.createElement(); 创建元素
```
document.createElement("input");
```

document.appendChild(); 添加元素

<div id='dv1'></div>
<script>
    var dv1 = document.getElementById("dv1");
    var appendNode = document.createElement("input");
    dv1.appendChild(appendNode);
</script>

document.insertBefore(newEl,orgEl); 在某元素前添加元素

<div id='dv1'></div>
<script>
    var dv1 = document.getElementById("dv1");
    var appendNode = document.createElement("input");
    document.body.insertBefore(appendNode,dv1);
</script>

document.firstChild; 获取第一个子元素
document.childNodes; 获取所有子节点元素

document.removeChild();移除所有子节点元素

<ul id='uList'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<scrpit>
    var list = document.getElement.getElementById("uList");
        list.removeChild(list.childNode[0]);
        list.removeChild(list.firstChild);
        list.removeChild(list.lastChild);
</scrpit>

4.4 获取元素内容

innerHTML

innerHTML用于获取与赋值拥有开闭标签的元素中完整的内容

获取内容

<div id="div1">
    <span>HELLO</span>
    <span>WORLD</span>
</div>
<script>
    var content = document.getElementById("dv1").innerHTML;
    console.log(content);
</script>

[^] 可以获取到指定开闭标签内的全部内容

赋值内容

<div id="div1">
    <span>HELLO</span>
    <span>WORLD</span>
</div>
<script>
    document.getElementById("dv1").innerHTML = "<b>Hello China</b>"
    var content = document.getElementById("dv1").innerHTML;
    console.log(content);
</script>

[^] 赋值可以识别并添加HTML标签

innerText

innerText用于获取与赋值拥有开闭标签的元素中文字部分的内容
获取部分

<div id="div1">
    <span>HELLO</span>
    <span>WORLD</span>
</div>
<script>
    var content = document.getElementById("dv1").innerText;
    console.log(content);
</script>

[^] 可以获取到指定开闭标签内的全部内容赋值内容

赋值内容

<div id="div1">
    <span>HELLO</span>
    <span>WORLD</span>
</div>
<script>
    document.getElementById("dv1").innerHTML = "<b>Hello China</b>"
    var content = document.getElementById("dv1").innerText;
    console.log(content);
</script>

4.5操作样式

操作style属性

style属性设置或返回样式

style设置css特征值时，需要把特征值的短横线命名法改成驼峰命名法后使用

<p id='p1'>Hello World!</P>
<p id='p2'>Hello World!</P>
<script>
    document.getElementById('p2').style.color = "blue";
    document.getElementById('p2').style.fontFamily = 'Arial';
    document.getElementById('p2').style.fontSize = 'larger';
    
    var backColor = document.getElementById('p2').style.color;
    console.log(backColor);
</script>

[^] float是js的保留字，故在给元素设置float属性时，需要写作：HTMLElemntObject.style.cssFloat

操作className属性
- class属性设置或返回元素的class属性
  - 获取属性值：HTMLElementObject.className
  - 设置属性值: HTMLElementObjetc.className=className

5.BOM

BOM即为browser object model
BOM用于操作浏览器行为
操作BOM对象，一般使用window关键字使用

5.1常用方法

alert(): 弹出提示对话框
confirm(): 弹出确认对话框，返回boot类型
prompt(): 弹出用户输入对话框，返回输出的内容，如果取消则返回null
setInterval(code,milliseconds);
- 计时器方法可以按照指定的周期(以毫秒计)来调用函数或计算表达式。
  - code 需要执行的代码
  - millseconds执行代码的周期
  - 方法会不停的调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的计时器ID值可以用作clearInterval()方法的参数
setTimeout(code,milliseconds);
- 一次性计时器方法用于在指定的毫秒数后调用函数或计算表达式
  - code 需要执行的代码
  - millseconds执行代码的周期
  - clearInterval()方法来阻止函数的执行，由setTimeout()返回的计时器ID值作为clearInterval()方法的参数
location 浏览器地址栏对象
- hash 返回一个URL的锚部分
- host 返回一个URL的主机名和端口
- hostname 返回URL的主机名
- *href 返回完整的URL
- pathname 返回URL路径名
- *port 返回一个URL服务器使用的端口号
- protocol返回一个URL协议
- search 返回一个URL的查询部分
onload 页面加载完成后调用