JavaScript基础

最新推荐文章于 2024-09-09 09:35:48 发布

pmc0_0

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量89

点赞数

分类专栏：前端语言基础文章标签： javascript js

本文链接：https://blog.csdn.net/pmc0_0/article/details/117552273

版权

前端语言基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在

javaScript输出

使用 window.alert() 弹出警告框。

<script>
	window.alert(5 + 6);
</script>

在这里插入图片描述

使用 document.write() 方法将内容写到 HTML 文档中。

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
	document.write(Date());
</script>

在这里插入图片描述

使用 console.log() 写入到浏览器的控制台。

<script>
	a = 5;
	b = 6;
	c = a + b;
	console.log(c);
</script>

在这里插入图片描述

JavaScript语法

JavaScript 字面量

数字

<script>
	document.getElementById("demo").innerHTML = 123e5;
</script>

字符串

<script>
	document.getElementById("demo").innerHTML = 'John Doe';
</script>

数组

[40, 100, 1, 5, 25, 10]

对象

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数

function myFunction(a, b) { return a * b;}

JavaScript 变量

var x, length // 声明
x = 5 // 赋值
length = 6 // 赋值

JavaScript 注释

var length = 16;  // Number 通过数字字面量赋值 ，单行注释

/*
多行注释
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";

JavaScript操作符

== 操作符

“等同”操作符，简单判断2个变量值是否相等，变量类型不一致时，会做类型转换，即忽略变量的类型进行比较

=== 操作符

“恒等”操作符，先比较2个变量类型是否一致，不一致返回false，一致时，再比较2个变量的值是否相等

JavaScript数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

数组

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

对象

var person={firstname:"John", lastname:"Doe", id:5566};

声明变量类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript函数

JavaScript函数语法

1.使用关键字 function 定义函数

function functionname(var1,var2) //不需要像java一样赋值，直接形参名
{
    // 执行代码
    retrue;// 返回值
}

函数声明后不会立即执行，会在我们需要的时候调用到。在使用 return 语句时，函数会停止执行，并返回指定的值。

2.通过一个表达式定义

var x = function (a, b) {return a * b};
var z = x(4, 3);

函数表达式可以存储在变量中，在函数表达式存储在变量后，变量也可作为一个函数使用，以上函数实际上是一个匿名函数 (函数没有名称)。函数存储在变量中，不需要函数名称，通常通过变量名来调用。上述函数以分号结尾，因为它是一个执行语句。

3.自调用函数

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

如果表达式后面紧跟 () ，则会自动调用。以上函数实际上是一个匿名自我调用的函数 (没有函数名)。

变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

变量生命周期

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除

JavaScript流程控制

循环

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

在这里插入图片描述

条件

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

if (time<20)
{
    x="Good day";
}

if (time<20)
{
    x="Good day";
}
else if (time==30)
{
    当条件 2 为 true 时执行的代码
}
else
{
    x="Good evening";
}

内部对象

JSON

<script>
    var user = {
        name: "pangjian",
        age: 22,
        sex: "男"
    }
    // js对象转化为json字符串：{"name":"pangjian","age":22,"sex":"男"}
    var jsonUser = JSON.stringify(user)

    // json字符串解析为js对象
    var obj = JSON.parse('{"name":"pangjian","age":22,"sex":"男"}')
</script>

JSON和JS对象区别：一个对象，一个字符串

var obj = {name:"pangjian",age:22,sex:"男"};
var json = '{"name":"pangjian","age":22,"sex":"男"}';

JQuery

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

jQuery库引入

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>

jQuery库公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
</head>
<body>
    <!--
        公式： $(选择器).action()
        $:就代表JQuery
        选择器:css选择器
        action:事件
    -->

    <a href="" id="a">点击</a>
    
    <script>
        $('#a').click(function (){
            alert('hello JQuery')
        })
    </script>
</body>
</html>

操作Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <ul id="a">
        <li>Python</li>
        <li>Java</li>
    </ul>
    <input type="button" value="点击变颜色" id="b">

    <script>
        // 当网页元素加载完毕之后，响应事件，不然没加载完成元素操作不了
        $(document).ready(function (){
            // 选定按钮并给按钮添加事件
            $('#b').click(function (){
                // 选定第一个li让它变颜色
                $('#a>li:first').css("color","red");
                // 让第二个消失
                $('#a>li:last').hide();
            });
        });
    </script>
</body>
</html>