JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap
文章目录
- 四、jQuery基础
-
- 1.jQuery介绍
- 1.1 jQuery能做什么?
- 1.2 jQuery的优势
- 2. jQuery的使用
-
- 2.1 基本的语法介绍
- 2.2 jQuery对象与DOM对象
- 2.3 选择器
-
- 2.3.1 基本选择器
- 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 改变元素的宽和高（带动画效果）
- 2.5.2 改变元素的高（拉伸效果）
- 2.5.3 不改变元素的大小（淡入淡出效果）
- 2.5.4 链
- 2.6 DOM和CSS的操作
-
- 2.6.1 属性函数
- 2.6.2 样式函数
- 2.6.3 类样式函数
- 2.6.4 节点操作
- 2.7 遍历节点
-
- 2.7.1 祖先元素
- 2.7.2 同辈元素
- 2.7.3 后代元素
- 2.7.4 元素的过滤
- 3.案例
-
- 3.1 手风琴特效
- 3.2 购物车结算
- 1.ECMAScript6 简介
-
- 1.1 ECMAScript 和 JavaScript 的关系
- 1.2 ES6 与 ECMAScript 2015 的关系
- 2.搭建前端环境
-
- 2.1 Node 环境
-
- 2.1.1 什么是Node.js
- 2.1.2 Node.js有什么用
- 2.1.3 安装
-
- 2.1.3.1 下载
- 2.1.3.2 查看版本
- 2.1.4.1 创建文件夹
- 2.1.4 服务器端应用开发（了解）
- 2.2 NPM环境
-
- 2.2.1 什么是NPM
- 2.2.2 NPM工具的安装位置
- 2.2.3 使用npm管理项目
-
- 2.2.3.1 项目初始化
- 2.2.4 修改npm镜像 和 存储地址
- 2.2.5 npm install命令的使用
- 3. ES6基本语法
-
- 3.1 let声明变量
- 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 箭头函数
- 3.11 Promise（了解）
- 3.12 模块化
-
- 3.12.1 传统的模块化
- 3.12.2 ES6的模块化
- 3.13 babel环境
-
- 3.13.1 安装babel客户端环境
- 3.13.2 安装转码器
- 3.14 ES6模块化的另一种写法
-
- 3.14.1 as的用法
- 3.14.2 默认导出
- 3.14.3 重命名export和import
- 六、Bootstrap基础
-
- 1.bootstrap简介
-
- 1.1 什么是Bootstrap？
- 1.2 为什么使用 Bootstrap？
- 1.3 下载与使用
- 2.Bootstrap的使用
-
- 2.1 表格
-
- 2.1.1 丰富的标签
- 2.1.2 好看的类样式
- 2.1.3 情景色类样式
- 2.1.4 响应式表格
- 2.2 表单
-
- 2.2.1 表单布局
- 2.2.1.2 内联布局
- 2.2.2 表单控件
-
- 2.2.2.1 输入框
- 2.2.2.2 文本框
- 2.2.2.3 复选框
- 2.2.2.4 复选按钮
- 2.2.2.5 单选框
- 2.2.2.6 单选按钮
- 2.3 按钮
- 2.4 图片
- 2.5 下拉菜单组件
- 2.6 分页组件
- 2.7 栅格系统
- 2.8 缩略图组件
- 2.9 模态框组件
- 3.案例
-
- 3.1 首页轮播大图
- 3.2 响应式导航条
四、jQuery基础
1.jQuery介绍
jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码
$("tr:even").css("background-color","#ccc");
1.1 jQuery能做什么?
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文高度压缩，而jQuery也是对JavaScript的高度压缩库
1.2 jQuery的优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
2. jQuery的使用
jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。
<script src="js/jquery-3.4.1.min.js"></script>
2.1 基本的语法介绍
<script>
$(selector).action();
</script>
说明：
工厂函数 ( ) ： 将 D O M 对 象 转 化 为 j Q u e r y 对 象 选 择 器 s e l e c t o r ： 获 取 需 要 操 作 的 D O M 元 素 （ 没 错 ， 用 法 基 本 上 和 c s s 一 致 ） 方 法 a c t i o n ( ) ： j Q u e r y 中 提 供 的 方 法 ， 其 中 包 括 绑 定 事 件 处 理 的 方 法 “ () ：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致 ） 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“ ()：将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>
2.2 jQuery对象与DOM对象
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
$("#title").html();
// 等同于
document.getELementById("title").innerHTML;
想混用，要转换
DOM对象转jQuery对象
var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象
jQuery对象转DOM对象
var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象
2.3 选择器
2.3.1 基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 标签 选择 器 | element | 根据给定的标签名 匹配元素 | $(“h2” )选取所有h2元素 |
| 类选 择器 | .class | 根据给定的 配元素 class匹 | $(" .title 为title的元素 ")选取所有class |
| ID选 择器 | #id | 根据给定的 元素 id匹配 | $(" #title 元素 ")选取id为title的 |
| 并集 选择 器 | selector1,selector2,…,selectorN | 将每一个选择器匹 配的元素合并后一 起返回 | $(“div,p,.title” )选取所有 div、p和拥有class为title 的元素 |
| 交集 选择 器 | element.class或element#id | 匹配指定class或id 的某元素或元素集 合 | $(“h2.title”)选取所有拥有 class为title的h2元素 |
<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("p").css("color","red"); // 标签选择器，获得所有的p
//$(".jy").css("color","red"); //类选择器
//$("#wan").css("color","red"); //ID选择器,更具备唯一性
//$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
$("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
</script>
2.3.2 层次选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 后代选 择器 | ancestor descendant | 选取ancestor元素里的所有 descendant（后代）元素 | $("#menu span" )选取 #menu下的元素 |
| 子选择 器 | parent>child | 选取 元素parent元素下的child（子） | $(" #menu>span #menu的子元素 " )选取 |
| 相邻元 素选择 器 | prev+next | 选取紧邻prev元素之后的next元 素 | $(" h2+dl " )选取紧邻 元素之后的同 辈元素 |
| 同辈元 素选择 器 | prev~sibings | 选取prev元素之后的所有siblings 元素 | $(" h2~dl " )选取 元素之后所有 的同辈元素 |
<h3>000</h3>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h3>
<h3>333</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("#x p").css("color","red"); // 后代选择器，忽略层级
//$("#x>p").css("color","red"); // 子代选择器，只负责子级
//$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
$("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
</script>
2.3.3 属性选择器
<a href="www.baidu.com">百度网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("[href]").css("color","red"); // 选取拥有href属性的元素
//$("[href='x']").css("color","red"); // 选取拥有href=x的元素
//$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
//$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
//$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
//$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
$("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素
</script>
2.3.4 过滤选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| :first | 选取第一个元素 | $(" li:first" )选取所有 元素中的第一个 元素 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有 元素中的最后一个 元素 |
| :even | 选取索引是偶数的所有元素（index从0开 始） | $(" li:even" )选取索引是偶数的所 有 元素 |
| :odd | 选取索引是奇数的所有元素（index从0开 始） | $(" li:odd" )选取索引是奇数的所 有 元素 |
| :eq(index) | 选取索引等于index的元素（index从0开 始） | $(“li:eq(1)” )选取索引等于1的 元素 |
| :gt(index) | 选取索引大于index的元素（index从0开 始） | $(" li:gt(1)" )选取索引大于1的 元素（注：大于1，不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开 始） | $(“li:lt(1)” )选取索引小于1的 元素（注：小于1，不包括1） |
<h2 id="h2#x">修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//$("li:first").css("color","red"); // 第一个li
//$("li:last").css("color","red"); // 最后一个li
//$("li:even").css("color","red"); // 偶数行的li
//$("li:odd").css("color","red"); // 奇数行的li
//$("li:eq(2)").css("color","red"); // 下标为2的li
//$("li:gt(1)").css("color","red"); // 下标大于1的li
//$("li:lt(2)").css("color","red"); // 下标小于2的li
$("#h2\\#x").css("color","red"); // 使用转义符
</script>
2.4 事件
2.4.1 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
| 方法 | 描述 | 执行时机 |
|---|---|---|
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").click( function(){
//点击一下，换照片
$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
} );
$("img").mouseover( function(){
//移动到元素上
$(this).css( "border","2px solid red" );
} );
$("img").mouseout( function(){
//离开元素
$(this).css( "border","2px solid white" );
} );
</script>
2.4.2 键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：
| 方法 | 描述 | 执行时机 |
|---|---|---|
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
<input>
<h3></h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("input").keyup( function(){
var str = $(this).val(); // 获取框中的值
$("h3").text( str ); // 将h3元素中的文本内容更改为str
} );
</script>
2.4.3 表单事件
当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：
| 方法 | 描述 | 执行时机 |
|---|---|---|
| focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
| blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
<form action="">
<p>帐号: <input id="a" value="请输入帐号..."> </p>
<p>电话: <input id="b"> </p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//获得焦点（激活/点击一下）
$("#a").focus(function(){
$(this).val("");
});
//失去焦点（未激活/未点击）
$("#a").blur(function(){
$(this).val("请输入帐号...");
});
</script>
2.4.4 鼠标悬停复合事件
hover()方法相当于mouseover与mouseout事件的组合
<img src="img/3.jpg" width="400">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").hover(
function(){
$(this).css("border","5px solid red");
},
function(){
$(this).css("border","5px solid white");
}
);
</script>
2.4.5 连续点击复合事件
toggle()除了可以模拟鼠标的连续单击事件
<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("h2").click(function(){
$("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
});
</script>
2.4.6 事件的动态绑定
对dom元素绑定事件的另一种写法
绑定一个事件
$(".del").on('click', function() {
alert('hello');
})
绑定多个事件
$(".del").on('click mouseover', function() {
alert('hello');
})
2.5 元素的隐藏和显示
2.5.1 改变元素的宽和高（带动画效果）
show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
style>
<body>
<button id="btn1">显示button>
<button id="btn2">隐藏button>
<button id="btn3">切换button>
<div>div>
<script src="js/jquery-3.4.1.min.js">script>
<script>
$("#btn2").click(function(){
//fast:快速的
//slow:缓慢的
//毫秒：自定义
$("div").hide(2000);
});
$("#btn1").click(function(){
$("div").show('slow');
});
$("#btn3").click(function(){
$("div").toggle(1000);
});
script>
body>
2.5.2 改变元素的高（拉伸效果）
slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
<script>
$("#btn2").click(function(){
$("div").slideUp(1000); //向上收缩
});
$("#btn1").click(function(){
$("div").slideDown(1000); //向下伸展
});
$("#btn3").click(function(){
$("div").slideToggle(1000); //切换
});
script>
2.5.3 不改变元素的大小（淡入淡出效果）
fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
<script>
$("#btn2").click(function(){
$("div").fadeOut(1000); // 隐藏：淡出我的视线
});
$("#btn1").click(function(){
$("div").fadeIn(1000); // 显示：映入眼帘
});
$("#btn3").click(function(){
$("div").fadeToggle(1000); // 切换
});
$("#btn4").click(function(){
$("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
});
script>
2.5.4 链
链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；
例如：点击一次按钮，让div完成4个指定动作
\1. 背景变粉
\2. 字体变绿
\3. 收缩
\4. 拉伸
<style>
div{
width: 200px;
height: 200px;