菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

3-2前端进阶_jq模板字符串

作者：菜鸟追梦旅行 | 2024-02-16 12:12:02

踩

jq模板字符串

jQuery详解

1.jQuery介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

1.1 jQuery能做什么?

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

1.2 jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

1.3 jQuery下载

进入jQuery官网：http://jQuery.com

2 jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突，在页面中使用传统引入js文件的方式引入即可。

2.1 基本的语法介绍

工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致）
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

<body>
    <p>hello</p> 
</body> 
<script src="js/jquery-3.4.1.min.js"></script> 
<script> 
    alert( $("p").text() ); 
</script>
1
2
3
4
5
6
7

2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html(); 
// 等同于 
document.getELementById("title").innerHTML;
1
2
3

想混用，要转换，DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象 
var b = $(a); // b是jQuery对象
1
2

jQuery对象转DOM对象

var a = $("#name"); // a是jQuery对象 
var b = jqObject.get(0); // b是DOM对象
1
2

2.3 选择器

2.3.1 基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

在这里插入图片描述

2.3.2 层次选择器

在这里插入图片描述

2.3.3 属性选择器

在这里插入图片描述

2.3.4 过滤选择器

在这里插入图片描述

2.4 事件

2.4.1 鼠标事件

在这里插入图片描述

2.4.2 键盘事件

在这里插入图片描述

2.4.3 表单事件

在这里插入图片描述

2.4.4 鼠标悬停复合事件

在这里插入图片描述

2.4.5 连续点击复合事件

在这里插入图片描述

2.4.6 事件的动态绑定

在这里插入图片描述

2.5 元素的隐藏和显示

2.5.1 改变元素的宽和高（带动画效果）

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

在这里插入图片描述

2.5.2 改变元素的高（拉伸效果）

在这里插入图片描述

2.5.3 不改变元素的大小（淡入淡出效果）

在这里插入图片描述

2.5.4 链

在这里插入图片描述

2.6 DOM和CSS的操作

2.6.1 属性函数

在这里插入图片描述

2.6.2 样式函数

css( “属性”); 获得该属性值
css( “属性”,“值”); 设置属性的值
css( { json} ); 设置多个属性的值

在这里插入图片描述

width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度

在这里插入图片描述

2.6.3 类样式函数

addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）

在这里插入图片描述

2.6.4 节点操作

创建节点，工厂函数$()用于获取或创建节点
插入节点，插入子节点

在这里插入图片描述

2.7 遍历节点

2.7.1 祖先元素

在这里插入图片描述

2.7.2 同辈元素

在这里插入图片描述

2.7.3 后代元素

children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

在这里插入图片描述

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

在这里插入图片描述

2.7.4 元素的过滤

在这里插入图片描述

ECMAScript6详解

1.ECMAScript6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。
它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

1.1 ECMAScript 和 JavaScript 的关系

1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，
希望这种语言能够成为国际标准
ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语
言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript （宪法）和 JavaScript（律师）的关系是，前者是后者的规格，后者是前者的
一种实现

1.2 ES6 与 ECMAScript 2015 的关系

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指
JavaScript 语言的下一个版本。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了
ES2015、ES2016、ES2017 等等

2.搭建前端环境

2.1 Node 环境

2.1.1 什么是Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度
非常快，性能非常好。

2.2 NPM环境

2.2.1 什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具

2.2.2 NPM工具的安装位置

node的环境在安装的过程中，npm工具就已经安装好了。
Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

3. ES6基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对
象、内建函数等通用语法。

3.1 let声明变量

与我们的JavaScript中var声明变量有什么区别？
1、作用域不同

在这里插入图片描述

3.2 const声明常量

在这里插入图片描述

3.3 解构赋值

解构赋值是对赋值运算符的扩展
它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

3.3.1 数组解构

在这里插入图片描述

3.3.2 对象解构

在这里插入图片描述

3.4 模板字符串

模板字符串相当于加强版的字符串

用反引号 `,除了作为普通字符串，还可以用来定义多行字符串
还可以在字符串中加入变量和表达式。

3.4.1 定义多行字符串

在这里插入图片描述

3.4.2 字符串插入变量和表达式

在这里插入图片描述

3.4.3 字符串中调用函数

在这里插入图片描述

3.5 声明对象简写

在这里插入图片描述

3.6 定义方法简写

在这里插入图片描述

3.7 对象拓展运算符

拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

3.7.1 拷贝对象(深拷贝)

在这里插入图片描述

3.7.2 合并对象

在这里插入图片描述

3.8 函数的默认参数

在这里插入图片描述

3.9 函数的不定参数

在这里插入图片描述

3.10 箭头函数

在这里插入图片描述

Bootstrap详解

1.bootstrap简介

1.1 什么是Bootstrap？

Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。
Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

1.2 为什么使用 Bootstrap？

移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的