【JS】深度学习JavaScript

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
💓 博客主页:从零开始的-CodeNinja之路

⏩ 收录文章:【JS】深度学习JavaScript

🎉欢迎大家点赞👍评论📝收藏⭐文章

目录

  • 一:JavaScript
      • 1.1 JavaScript是什么
      • 1.2 JS的引入方式
      • 1.3 JS变量
      • 1.4 数据类型
      • 1.5 数组操作
      • 1.6 函数
        • 1.6.1 函数的语法格式
        • 1.6.2 函数表达式
      • 1.7 对象
  • 二. JQuery
      • 2.1JQuery是什么
      • 2.2 引入依赖
      • 2.3 JQuery语法
      • 2.4. JQuery选择器
      • 2.5 JQuery事件
      • 2.6 操作元素
        • 2.6.1 获取/设置元素内容
        • 2.6.2 获取元素
        • 2.6.3 设置元素
      • 2.7 添加元素
      • 2.8 删除元素
  • 三.项目实现:表白墙

一:JavaScript

1.1 JavaScript是什么

JavaScript(简称JS),是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.虽然它是作为开发Web页面的
脚本语言而出名,但是它也被用到了很多非浏览器环境中,其实Java和JavaScript之间的语法风格相去甚远
JavaScript和HTML和CSS之间的关系
在这里插入图片描述
• HTML:网页的结构(⻣)
• CSS:网页的表现(皮)
• JavaScript:网页的动作(魂)

1.2 JS的引入方式

JS有3种引入方式,语法如下表格所示:

引入方式语法描述
行内样式直接嵌⼊到html元素内部
内部样式定义script标签,写到script标签中
外部样式定义script标签,通过src属性引⼊外部js⽂件

3种引入方式对比:

  1. 内部样式会出现⼤量的代码冗余,不方便后期的维护,所以不常用.
  2. 行内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS.
  3. 外部样式,html和js实现了完全的分离,企业开发常用方式.

1.3 JS变量

创建变量(变量定义/变量声明/变量初始化),JS声明变量有3种⽅式

关键字解释
var早期JS中声明变量的关键字,作⽤域在该语句的函数内
lesES6中新增的声明变量的关键字,作⽤域为该语句所在的代码块内
const声明常量的,声明后不能修改

注意事项:
JavaScript是⼀门动态弱类型语言,变量可以存放不同类型的值(动态),随着程序的运行,变量的类型可能会发⽣改变.(弱类型)

1.4 数据类型

虽然js是弱数据类型的语言,但是js中也存在数据类型,js中的数据类型分为:原始类型和引用类型,具体有如下类型

数据类型描述
number数字.不区分整数和⼩数.
string字符串类型.字符串字⾯值需要使⽤引号引起来,单引号双引号均可.
boolean布尔类型.true真,false假
undefined表⽰变量未初始化.只有唯⼀的值undefined.

使⽤typeof函数可以返回变量的数据类型

<script>
		var a = 10;
		console.log(typeof a);//number
		
		var b = 'hello';
		console.log(typeof b);//string

		var c = true;
		console.log(typeof c);//boolean

		var d;
		console.log(typeof d);//undefined

		var e = null;
		console.log(typeof e);//null
</script>

1.5 数组操作

  1. 读:使用下标的方式访问数组元素(从0开始)
  2. 增:通过下标新增,或者使用push进行追加元素
  3. 改:通过下标修改
  4. 删:使用splice方法删除元素
    代码示例:
<script>
		var arr = [1, 2, 'haha', false];
		//读取数组
		console.log(arr[0]); //1
		//添加数组元素
		arr[4] = "add"
		console.log(arr[4]);//add
		console.log(arr.length);//5, 获取数组的⻓度
		//修改数组元素
		arr[4] = "update"
		console.log(arr[4]);//update
		//删除数组元素
		arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元素个数是 1 个
		console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined
		console.log(arr.length);//4, 获取数组的⻓度
</script>

注意:

  1. 如果下标超出范围读取元素,则结果为undefined
  2. 不要给数组名直接赋值,此时数组中的所有元素都没了.
    相当于本来arr是⼀个数组,重新赋值后变成字符串了.

1.6 函数

1.6.1 函数的语法格式

函数定义并不会执行函数体内容,必须要调用才会执行.调用⼏次就会执行⼏次.

function hello() {
		console.log("hello");
}
// 如果不调⽤函数, 则没有执⾏打印语句
hello();

• 调用函数的时候进⼊函数内部执行,函数结束时回到调用位置继续执行.可以借助调试器来观察.
• 函数的定义和调用的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使用)

	// 调⽤函数
	hello();
	// 定义函数
	function hello() {
		console.log("hello");
	}

实参和形参之间的个数可以不匹配.但是实际开发⼀般要求形参和实参个数要匹配

  1. 如果实参个数比形参个数多,则多出的参数不参与函数运算
 sum(10, 20, 30); // 30
  1. 如果实参个数比形参个数少,则此时多出来的形参值为undefined
 sum(10); // NaN, 相当于 num2 为 undefined.

JS的函数传参比较灵活,这⼀点和其他语言差别较⼤.事实上这种灵活性往往不是好事.

1.6.2 函数表达式

另外⼀种函数的定义方式

var add = function() {
		var sum = 0;
		for (var i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
}
	console.log(add(10, 20)); // 30
	console.log(add(1, 2, 3, 4)); // 10
	console.log(typeof add); // function

此时形如 function() { } 这样的写法定义了⼀个匿名函数,然后将这个匿名函数用⼀个变量来表
示.后面就可以通过这个add变量来调⽤函数了.
JS中函数可以⽤变量保存,也可以作为其他函数的参数或者返回值.

1.7 对象

在JS中,字符串,数值,数组,函数都是对象.
每个对象中包含若⼲的属性和方法.
• 属性:事物的特征.
• 方法:事物的行为.
JavaScript的对象和Java的对象概念上基本⼀致.只是具体的语法表项形式差别较大

  1. 使用字面量创建对象
    使用{}创建对象
var a = {}; // 创建了⼀个空的对象
		var student = {
		name: '夏天',
		height: 175,
		weight: 170,
		sayHello: function() {
			console.log("hello");
		}
};

• 使⽤{}创建对象
• 属性和方法使用键值对的形式来组织.
• 键值对之间使用,分割.最后⼀个属性后⾯的,可有可无
• 键和值之间使用:分割.
• 方法的值是⼀个匿名函数.
使用对象的属性和方法:

	// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
	console.log(student.name);
	
	// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
	console.log(student['height']);
	
	// 3. 调⽤⽅法, 别忘记加上 ()
	student.sayHello();


使用构造函数创建对象

	function 构造函数名(形参) {
			this.属性 =;
			this.⽅法 = function...
	}
	var obj = new 构造函数名(实参);

注意:
• 在构造函数内部使用this关键字来表示当前正在构建的对象.
• 构造函数的函数名首字母⼀般是⼤写的.
• 构造函数的函数名可以是名词.
• 构造函数不需要return
• 创建对象的时候必须使⽤new关键字

二. JQuery

2.1JQuery是什么

W3C标准给我们提供了⼀系列的函数,让我们可以操作:
• 网页内容
• 网页结构
• 网页样式
但是原生的JavaScript提供的API操作DOM元素时,代码比较繁琐,冗⻓.我们学习使用JQuery来操作页面对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常用的功能
代码,提供了简洁⽽强⼤的选择器和DOM操作方法.使⽤JQuery可以轻松地选择和操作HTML元素,从
而减少了开发⼈员编写的代码量,提高了开发效率,它提供的API易于使⽤且兼容众多浏览器,这让诸
如HTML⽂档遍历和操作、事件处理、动画和Ajax操作更加简单.JQuery对于事件的处理也进行了简
化,提供了⼀个简单的API来绑定、触发和处理事件,使开发⼈员能够更⽅便地处理各种交互行为.

2.2 引入依赖

使用 JQuery需要先引入对应的库
在使⽤jQuery CDN时,只需要在HTML文档中加入如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

其中, src 属性指明了JQuery库所在的URL.这个URL是CDN(内容分发网络)服务提供商为jQuery库
提供的⼀个统⼀资源定位符.

2.3 JQuery语法

jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作
基础语法

 $(selector).action()

• $() 是⼀个函数,它是jQuery提供的⼀个全局函数,用于选择和操作HTML元素.
• Selector选择器,用来"查询"和"查找"HTML元素
• action操作,执行对元素的操作
JQuery的代码通常都写在document ready函数中.
document:整个⽂档对象,⼀个页面就是⼀个⽂档对象,使⽤document表⽰.
这是为了防止文档在完全加载(就绪)之前运行jQuery代码,即在文档加载完成后才可以对页面进
行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败

	$(document).ready(function(){
	
		// jQuery functions go here
		
	});

2.4. JQuery选择器

我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作.
JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器.
jQuery中所有选择器都 $ 开头:$().

语法描述
$(“*”)选取所有元素
$(“this”)选取当前HTML元素
$(“p”)所有p元素
$(“p:first”)选取第⼀个p元素
$(“p:last”)最后⼀个p元素
$(“#box”)id="box"的元素
$(“.intro.demo”)所有class="intro"且class="demo"的元素
$(“p.intro”)选取class为intro的p元素
$(“ulli:first”)选取第⼀个ul元素的第⼀个li元素
$(“:input”)所有input元素
$(“:text”)所有type="text"的input元素
$(“:checkbox”)所有type="checkbox"的input元素

2.5 JQuery事件

JS要构建动态页面,就需要感知到用户的行为.
用户对于页面的⼀些操作(点击,选择,修改等)操作都会在浏览器中产⽣⼀个个事件,被JS获取到,从而进⾏更复杂的交互操作.
常见的事件有:

事件代码
⽂档就绪事件(完成加载)$(document).ready(function)
点击事件$(selector).click(function)
双击事件$(selector).dblclick(function)
元素的值发⽣改变$(selector).change(function)
⿏标悬停事件$(selector).mouseover(function)

2.6 操作元素

2.6.1 获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法

JQuery⽅法说明
text()设置或返回所选元素的⽂本内容
html()设置或返回所选元素的内容(包括HTML标签)
val()设置或返回表单字段的值

这三个方法即可以获取元素的内容,可以设置元素的内容.
有参数时,就进行元素的值设置,没有参数时,就进行元素内容的获取
代码示例:

2.6.2 获取元素
<div id="test"><span>你好</span></div>
<input type="text" value="hello">

<script>
		$(document).ready(function () {
		var html = $("#test").html();
		console.log("html内容为:"+html);
		var text = $("#test").text();
		console.log("⽂本内容为:"+text);
		var inputVal = $("input").val();
		console.log(inputVal);
	});
</script>
2.6.3 设置元素
<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">

<script>
		$(document).ready(function () {
		$("#test").html('<h1>设置html</h1>');
		$("#test2").text('<h1>设置text</h1>');
		$("input").val("设置内容");
		});
</script>

2.7 添加元素

添加HTML内容

  1. append():在被选元素的结尾插入内容
  2. prepend():在被选元素的开头插入内容
  3. after():在被选元素之后插入内容
  4. before():在被选元素之前插入内容

代码示例:

<ol>
		<li>List item 1</li>
		<li>List item 2</li>

		<li>List item 3</li>
</ol>
		<img src="pic/rose.jpg">
		<script>
		$(function () {
		$("ol").append("<li>append</li>");
		$("ol").prepend("<li>prepend</li>");
		$("img").before("图⽚前插⼊");
		$("img").after("图⽚后插⼊");
	});
</script>

2.8 删除元素

删除元素和内容,⼀般使用以下两个jQuery方法:

  1. remove():删除被选元素(及其子元素)
  2. empty():删除被选元素的子元素。

代码示例:

<div id="div1">我是⼀个div</div>
		<button>删除 div 元素</button>
<script>
		$(function () {
		$('button').click(function(){
		$('#div1').remove();
		});
	});
</script>

三.项目实现:表白墙

预期效果在这里插入图片描述
需求:按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方.
代码实现

  1. 提前准备如下HTML和CSS代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            padding: 20px 0;
        }

        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }

        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        span {
            width: 100px;
            line-height: 40px;
        }

        .edit {
            width: 200px;
            height: 30px;
        }

        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>表⽩墙</h1>
        <p>输⼊后点击提交, 会将信息显⽰在表格中</p>
        <div class="row">
            <span>: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>说什么: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
</body>

</html>
  1. 实现提交
 $(function () {
            // 给点击按钮注册点击事件
            $(".submit").click(function () {
                // 1. 获取到编辑框内容
                var from = $('.edit:eq(0)').val();
                var to = $('.edit:eq(1)').val();
                var message = $('.edit:eq(2)').val();
                console.log(from + "," + to + "," + message);
                if (from == '' || to == '' || message == '') {
                    return;
                }
                // 2. 构造 html 元素
                var html = '<div class="row">' + from + '对' + to + '说: ' + message +
                    '</div>';
                // 3. 把构造好的元素添加进去
                $('.container').append(html);
                // 4. 同时清理之前输⼊框的内容
                $(":text").val("");
            });
        });

总结:

  1. HTML是⼀种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面
    效果,需要搭配CSS和JavaScript来使用
  2. 学习HTML主要是学习标签,HTML的标签特别多,了解基本语法即可
  3. CSS重点是学习CSS的选择器使用
  4. JavaScript是⼀个脚本语言,和Java没有关系.JQuery是⼀个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/482344.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 热题 100 | 堆(二)

目录 1 什么是优先队列 1.1 优先队列与堆的关系 1.2 如何定义优先队列 1.3 如何使用优先队列 1.4 如何设置排序规则 2 347. 前 K 个高频元素 2.1 第 2 步的具体实现 2.2 举例说明 2.3 完整代码 3 215. 数组中的第 K 个最大元素 - v2 菜鸟做题&#xff0c;语…

【漏洞复现】科立讯通信指挥调度平台editemedia.php sql注入漏洞

漏洞描述 在20240318之前的福建科立讯通信指挥调度平台中发现了一个漏洞。该漏洞被归类为关键级别,影响文件/api/client/editemedia.php的未知部分。通过操纵参数number/enterprise_uuid可导致SQL注入。攻击可能会远程发起。 免责声明 技术文章仅供参考,任何个人和组织使…

2024公认口碑最好的洗地机有哪些?若看重清洁力,这四款最值得买

每当我们要清洁卫生时&#xff0c;是否总是感到腰酸背痛、疲劳不堪&#xff0c;甚至头昏眼花&#xff1f;地板是家中的重要门面&#xff0c;不容忽视的卫生焦点。如今&#xff0c;我们终于多了一位家务打扫的救星——家用洗地地机。一次操作&#xff0c;即可完成扫地除尘、地除…

Git 分布式版本控制系统基本概念和操作命令

目录 Git 基本概念 功能特点 工作流程 操作命令 新建代码库 配置 增删文件 代码提交 分支 标签 查看信息 远程同步 撤销 其他 小结 Git Git 是一个开源的分布式版本控制系统&#xff0c;用于跟踪文件的变更历史。它最初由 Linux Torvalds 设计&#xff0c;用于…

1+x中级题目练习复盘(八)

SQL 语句中进行 group by 分组时&#xff0c;可以不写 where 子句 在使用 select 语句进行查询分组时&#xff0c;如果希望去掉不满足条件的分组&#xff0c;使用 having 子句File 类的 isDirectory() 方法可以判断文件是否为目录 在使用 select 语句进行查询分组时&#xff0…

二.寄存器

1. 2. 例如&#xff1a;h即为high&#xff08;高位&#xff09;&#xff0c;l即为low&#xff08;低位&#xff09; 3.一个字是两个字节 4.在写一条汇编指令或一个寄存器的名称时不区分大小写。 5.al&#xff0c;ah&#xff0c;ax在接受汇编指令时&#xff0c;并不相等&…

33-Java服务定位器模式 (Service Locator Pattern)

Java服务定位器模式 实现范例 服务定位器模式&#xff08;Service Locator Pattern&#xff09;用于想使用 JNDI 查询定位各种服务的时候考虑到为某个服务查找 JNDI 的代价很高&#xff0c;服务定位器模式充分利用了缓存技术在首次请求某个服务时&#xff0c;服务定位器在 JNDI…

十三、MySQL基于GTID的半同步复制

目录 一、MySQL半同步复制 一、三种复制方式比较 1、异步复制 2、同步复制 3、半同步复制 4、半同步复制比较 5、半同步复制的特点 二、搭建半同步复制 1、如果不清楚Plugin的目录&#xff0c;用如下查找&#xff1a; 2、所有数据库服务器&#xff0c;安装半同步插件…

【Go实现】实践GoF的23种设计模式:解释器模式

上一篇&#xff1a;【Go实现】实践GoF的23种设计模式&#xff1a;适配器模式 简单的分布式应用系统&#xff08;示例代码工程&#xff09;&#xff1a;https://github.com/ruanrunxue/Practice-Design-Pattern–Go-Implementation 简介 解释器模式&#xff08;Interpreter Pat…

【STM32嵌入式系统设计与开发】——6矩阵按键应用(4x4)

这里写目录标题 一、任务描述二、任务实施1、SingleKey工程文件夹创建2、函数编辑&#xff08;1&#xff09;主函数编辑&#xff08;2&#xff09;LED IO初始化函数(LED_Init())&#xff08;3&#xff09;开发板矩阵键盘IO初始化&#xff08;ExpKeyBordInit()&#xff09;&…

JVM本地方法

本地方法接口 NAtive Method就是一个java调用非java代码的接口 本地方法栈&#xff08;Native Method Statck&#xff09; Java虚拟机栈用于管理Java方法的调用&#xff0c;而本地方法栈用于管理本地方法的调用。 本地方法栈&#xff0c;也是线程私有的。 允许被实现成固定或…

Matlab|基于分布式ADMM算法的考虑碳排放交易的电力系统优化调度研究

目录 1 主要内容 目标函数 计算步骤 节点系统 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序完全复现文献《A Distributed Dual Consensus ADMM Based on Partition for DC-DOPF with Carbon Emission Trading》&#xff0c;建立了一个考虑碳排放交易的最优模型&am…

【测试开发学习历程】MySQL分组查询与子查询 + MySQL表的联结操作

目录 1 MySQL分组查询与子查询 1.1 数据分组查询 1.2 过滤分组 1.3 分组结果排序 1.4 select语句中子句的执行顺序 1.5 子查询 2 MySQL表的联结操作 2.1 关系表 2.2 表联结 2.3 笛卡尔积 2.4 内部联结 2.5 外联结 2.6 自联结 2.7 组合查询 1 MySQL分组查询与子查询…

Java学习路线一条龙

说在前面 讲真&#xff0c;虽然我是正规计算机专业出身&#xff0c;但十多年来&#xff0c;Java这语言和它那一大堆配套的工具、框架&#xff0c;变化得太快了。 我也是一边学新的&#xff0c;一边扔旧的&#xff0c;忙得不可开交。 现在回想起来&#xff0c;走过的弯路、浪费…

2024年【危险化学品经营单位安全管理人员】新版试题及危险化学品经营单位安全管理人员模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位安全管理人员新版试题考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品经营单位安全管理人员模拟考试题题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品经营单位安…

C++默认构造函数(二)

目录 构造函数补充 构造函数初始化列表的使用 赋值运算符重载函数 运算符重载函数介绍 运算符重载函数的使用 赋值运算符重载函数 赋值运算符重载函数的使用 拷贝构造函数和赋值运算符重载函数 重载前置和后置 前置 后置 重载流插入<<与流提取>> 流插…

ngrok实现内网穿透

在使用jenkins进行自动化部署时&#xff0c;需要设置github的webhook钩子来触发构建&#xff0c;由于jenkins运行在自己的电脑上&#xff0c;因此需要通过内网穿透来接受http请求。 Install ngrok via Homebrew with the following command: brew install ngrok/ngrok/ngrokP…

微信小程序开发学习笔记——4.2showModal和showLoading界面交互操作

>>跟着b站up主“咸虾米_”学习微信小程序开发中&#xff0c;把学习记录存到这方便后续查找。 课程连接&#xff1a;https://www.bilibili.com/video/BV19G4y1K74d?p27&vd_source9b149469177ab5fdc47515e14cf3cf74 一、showModal 显示模态对话框 1、属性 https:/…

电商爬虫系统|电商数据采集|电商API商品数据采集

1、基本的说明 当初为了在几个电商网站抓取商品信息数据搭建的系统。该系统主要用来抓取电商网站上面的一百个左右品类的商品的价格信息、商品信息和折扣信息等。抓取的电商网站主要是某宝和某东。其他的电商网站抓取信息的方式无外乎这两种。跟其他的示例代码不同&#xff0c…

【redis】服务器架构演进

架构演进 单机架构应用数据分离架构应⽤服务集群架构读写分离 / 主从分离架构冷热分离架构垂直分库微服务架构 单机架构 所有的应用服务、业务所需的数据、业务处理等都在一台服务器上。 在初期&#xff0c;用户访问量很少&#xff0c;对服务器的的性能和安全没有很高的要求&am…