JavaScript基础概述

苏格兰的花贩

已于 2022-05-27 21:16:39 修改

阅读量63

点赞数

文章标签： javascript 前端 html

于 2022-05-25 21:13:58 首次发布

本文链接：https://blog.csdn.net/mming9527/article/details/124954134

版权

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

文档对象模型DOM，提供了一系列操作文档的方法

·1.元素绑定事件

常用事件onclick(单击事件)

2.文档内嵌。使用标签书写JS代码

<script type="text/javascript">
alert("网页警告框");
</script>

3.外部链接

<script src="index.js"></script>

创建外部JS文件的XX.js,在HTML文档中引入使用

建议每写完一句加一个";" JS严格区分大小

变量

var a;变量声明

a=100;变量赋值

var b=200;声明并赋值

命名规范

变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
禁止与关键字冲突(var const function if else for while do break case switch return class)
变量名严格区分大小写
变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"

常量：声明完之后只能用不能修改

var userrname='laowang'等同于(声明不一定是全局变量)

username='laowang'(声明全局变量)

带小数点和不带小数点数值相同的话直接会省略

>3.0

反引号``相当于格式化字符串

var age=18;

console.log(`老王今年${age}岁`)

JS的书写方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS书写方式</title>
  <style>
    /* css代码 */
  </style>

  <!-- <script>
    console.log('页面最上方的JS代码');
  </script> -->

  <!-- script 引通过src属性引用外部js代码后就不能在标签中再输入其它的js代码 否则标签中书写的js代码会被外部js代码覆盖 -->
  <script src="demo.js">
    console.log('页面最上方的JS代码');
  </script>
</head>
<body>
  <!-- 元素绑定事件 -->
  <button onclick="alert('hello world')">
    点击打印hello world
  </button>
  <script>
    console.log('页面最下方的JS代码');
  </script>
 
</body>
</html>

数据类型转换

不同类型的数据参与运算时，需要转换类型

1.强制类型转换

(1）转换字符串类型 toString()返回转换后的字符串

var a=100;

a=a.toString(); -->"100"

(2) 转换number类型

Number(param)

参数为要进⾏数据类型转换的变量或值，返回转换后的结果:
如果转换成功,返回number值
如果转换失败,返回NaN,(Not a Number)，只要数据中存在⾮number字符,⼀律转换失
败，返回 NaN

Number("abc")
type of NaN
Number(undefined)
Number(null)

parseInt(param) 提取一开始的整数部分

parseFloat(param)提取number值，包含整数和小数部分

关系运算符/比较运算符

===(全等) !==(不全等)

三目运算

语法：表达式1?表达式2:表达式3;

if语句

简单if结构

if(条件表达式){

表达式成立时执行的代码段}

注意：除零值以外，其他值都为真，以下条件为假false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

if-else结构

if(条件表达式){
    条件成立时执行
}else{
    条件不成立时执行
}

多重分支结构

if(条件1){   
}else if(条件2)}{
}else{
}

switch语句

switch(value){
    case 值1:
        break;
    case 值2:
        break;
}

while循环

while(循环条件){}

do-while循环

do{
    循环体;
    更新循环变量
}while(循环条件);

函数

语法格式：

function functionName()
{
    代码块
}

1.作用封装一段执行的代码

2.语法

function 函数名(参数列表){
    函数体
    return 返回值;
}
函数名(参数列表);

匿名函数

(function (形参){
})(实参);

定义变量接收匿名函数

var fn=function(){};
fn();

DOM节点操作

DOM全称为“Document Object Model”，文档对象模型，提供操作HTML文档的方法。

h1.id = "d1"; //set ⽅法
console.log(h1.id); //get ⽅法
h1.id = null; //remove ⽅法

注意：属性值以字符串表示。

class属性需要更名为className，避免与关键字冲突

获取多个DOM元素和控制属性

var elems=document.getElementsByTagName("");

根据class属性值获取元素节点列表

var elems=document.getElementsByClassName("");

元素节点对象提供了以下属性来操作元素内容

innerHTML:读取或设置元素文本内容，可识别标签语法
innerText:设置元素文本内容，不能识别标签语法
value:读取或设置表单控件的值

操作DOM树中的属性值：

elem.getAttribute("attrname");
elem.setAttribute("attrname","value");
elem.removeAttribute("attrname");

为元素添加id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象

p.style="width:300px;"
p.style.color="while";
p.style.fontSize="20px";

jQuery

引入

先引入jquery文件，才能使用jQuery语法

方法一:根据下表元素，取出即为原生对象

var div=$("div")[0];

方法二：使用jQuery的get(index)取原生对象

var div2=$("div").get(0);

苏格兰的花贩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础概述

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。文档对象模型DOM，提供了一系列操作文档的方法·1.元素绑定事件常用事件onclick(单击事件)<button onclick="console.log('Hello World');">点击</button>建议每写完一句加一个";" JS严格区分大小变量var a;变量声明a=100;变量赋值var b=200;
复制链接

扫一扫