1 jQuery函数库简介
- 学习手册:http://jquery.cuishifeng.cn/
- jQuery是一个JavaScript函数库
2 jQuery函数库基本使用
-
jquery-2.0以上版本不再支持IE 6/7/8
-
使用前需要先下载其源码:http://www.jq22.com/jquery-info122,然后在页面中,通过script标签的src属性引入外部js库来进行使用
-
也可以直接引入互联网上的js库进行使用
-
一般情况下单位px可以省略
-
中间带有横杠的样式(font-size、padding-left)可以变为驼峰写法
-
jQuery函数库支持我们曾经学习过标签选择器、ID选择器、class选择器等来获取标签对象
-
代码
<!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>Document</title> <!--1. 引入外部的一个javascript函数库,也称为引包--> <script src="./jquery-3.5.1.min.js"></script> </head> <body> <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul> <div id="box"> 我爱你祖国 </div> <p class="cur"> 我是祖国的花骨朵 </p> </body> </html> <script> //1. 当html中引入jQuery的包后,就可以使用$(也可以写作jQuery)函数 //2. 通过$函数可以获得节点树上的标签对象,并操作他们的样式。注意该对象和javascript中通过getElementById获取的对象不同 //1. 获得标签对象 //a. 标签选择器 console.log($("li")); //b. id选择器 console.log($("#box")); console.log(document.getElementById("box")); //c. 类选择器 console.log($(".cur")); console.log(jQuery(".cur")); //2. 可以连续.css,多次设置样式 $("p").css({ "color": "red", //驼峰写法 "fontSize": 30, "background": "cyan", "textAlign": "center" }) </script>
3 jQuery函数库中独有选择器
-
这些选择器只能在引入了jQuery函数库的地方使用,因为它们是jQuery函数库中独有的
-
代码
<!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>Document</title> <!-- 引包 --> <script src="./jquery-3.5.1.min.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </body> </html> <script> //下面这些都是JQ函数库独有选择器 //1. :first:获取匹配标签的第一个元素 $("div:first").css({ "background": "red" }); //2. :last:获取匹配标签的最后一个元素 $("div:last").css({ 'background': "cyan" }); //3. :even:偶数选择器 $("div:even").css({ 'background': "skyblue" }); //4. :odd:奇数选择器 $("div:odd").css({ 'background': "pink" }) //5. :gt(index):大于选择器 $("div:gt(6)").css({ 'background': "red" }); //6. :lt(index):小于选择器 $("div:lt(6)").css({ 'color': "yellow" }) </script>
4 操作标签文本
-
表单元素:也就是input标签,通过val方法操作文本
-
非表单元素:需要通过html方法操作文本
-
代码
<!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>Document</title> <script src="./js/jQuery.min.js"></script> </head> <body> <p> <input type="text" value="我是一个输入文本地方"> </p> <div>我是一个粉霜将,粉霜本领强</div> </body> </html> <script> //1. 操作表单元素文本:利用val方法 //a. 获取表单元素文本 console.log($("input").val()); //b. 重新设置表单元素文本 $("input").val("我修改了表单元素文本"); //2. 操作非表单元素文本:利用的html方法 console.log($("div").html()); $("div").html("修改非表单元素文本啦么么打~~~~") </script>
5 事件
-
代码
<!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>Document</title> <script src="./jquery-3.5.1.min.js"></script> </head> <body> <div>我是中国人我很自豪</div> </body> </html> <script> var f = 16; //1. 使用js原生的函数时,是用onclick,jQ中使用click $("div").click(function () { f++; //2. 修改div的字号大小,因为事件函数中,this代表该事件发生所在的标签,所以就是div标签自身 $(this).css({ "fontSize": f }) }); </script>
6 特效函数
-
jQuery函数提供一些特效函数,可以给匹配元素添加一些动画效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./jquery-3.5.1.min.js"></script> <style> div { width: 400px; height: 200px; background-color: red; } </style> </head> <body> <button id="box1">slideUp</button> <button id="box2">slideDown</button> <button id="box3">fadeOut</button> <button id="box4">fadeIn</button> <div></div> </body> </html> <script> $("#box1").click(function () { //1. slideUp:可以让元素向上卷起,2000代表动画时间(ms),其实就是动态改变了div的高度,造成了向上卷起的效果 $("div").slideUp(2000); }); $("#box2").click(function () { //2. slideDown:让元素向下展开 $("div").slideDown(2000); }); $("#box3").click(function () { //fadeOut:可以让元素淡出,其实就是改透明度 $("div").fadeOut(2000); }); $("#box4").click(function () { //fadeIn:可以让元素淡入 $("div").fadeIn(2000); }); </script>
7 jQueryUI插件使用
- 学习手册:https://jqueryui.com/
- jQueryUI是jQuery函数库的一个插件,其使用必须依赖jQuery,所谓插件其实就是在jQuery已有的功能基础之上,在添加其他新功能
- 下载:新建文件夹执行
npm install jqueryui
- 复制官网提供的案例:官网–Interactions–选中其中一个后view source–此时可以看见官网对该功能的实现代码,复制即可
7.1 拖拽
-
代码
<!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>Document</title> <!-- 1. 必须先引入jQuery --> <script src="./jquery-3.5.1.min.js"></script> <!-- 2. 引入jQuery-UI插件 --> <script src="./jquery-ui.min.js"></script> </head> <body> <div> <p>我是你的孩子~~~要拖拽</p> </div> <ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> <li>么么打</li> </ul> </body> </html> <script> //拖拽 $("div").draggable(); //排序拖拽 $("ul").sortable(); </script>
7.2 日历
-
代码
<!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>Document</title> <script src="./jquery-3.5.1.min.js"></script> <script src="./jquery-ui.min.js"></script> <!--引入jQuery-ui中提供的外部样式--> <link rel="stylesheet" href="./jquery-ui.min.css"> </head> <body> <p> <input type="text"> </p> </body> </html> <script> $("input").datepicker(); </script>
8 节点关系函数
- jQ中可以通过$函数获取到某个节点,我们可以通过该节点的节点关系函数,来获取与当前节点具有父、兄、子关系的其他节点
8.1 parent
-
代码
<!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>Document</title> <script src="./jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } div { width: 500px; height: 100px; border: 1px solid black; margin: 100px auto; } p { float: left; width: 100px; height: 100px; background-color: pink; margin-right: 10px; } </style> </head> <body> <div> <p></p> <p></p> <p></p> <p></p> </div> </body> </html> <script> //1. 给p标签绑定单击事件,单击时,其父元素div背景颜色为青色 $("p").click(function () { $("p").parent().css({ "background": "cyan" }) }) </script>
8.2 this
-
this不是节点关系函数,是javascript自带的,事件函数中,this表示触发该事件的标签
-
代码
//给全部P标签绑定单击事件 $("p").click(function () { //单击p标签,当前被单击的这个p标签背景颜色为天蓝色 $(this).css({ "background": "skyblue" }) });
8.3 siblings
-
代码
//siblings:获取兄弟元素 //单击p标签,让他的背景颜色为黄色,他的其余兄弟元素们为绿色 $("p").click(function () { //链式语法 $(this).css({"background": "yellow"}).siblings().css({"background": "green"}) });
8.4 children
-
代码
//将div下4个p标签背景颜色为黑色 $("div").children().css({ "background": "black" }); //等同于如下写法 $("p").css({ "background": "black" });
8.5 折叠卡片特效
-
代码
<!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>Document</title> <!-- 引包 --> <script src="./jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } ul { width: 600px; border: 1px solid black; margin: 0px auto; list-style: none; } li { border-bottom: 1px dashed black; text-align: center; cursor: pointer; } p { background-color: cyan; color: red; /*p标签默认不显示*/ display: none; } .open { /*第一个p标签下的内容,默认是显示的*/ display: block; } </style> </head> <body> <ul> <li> <h4>标题1</h4> <p class="open">内容1</p> </li> <li> <h4>标题2</h4> <p>内容2</p> </li> <li> <h4>标题3</h4> <p>内容3</p> </li> <li> <h4>标题4</h4> <p>内容4</p> </li> </ul> </body> </html> <script> $("h4").click(function () { $(this).siblings().slideDown(100).parent().siblings().children("p").slideUp(100); }) </script>
9 animate函数
-
animate是jQuery函数库提供一个动画函数,可以为元素添加一些2D动画效果
-
代码
<!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>Document</title> <!-- 引包 --> <script src="./jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } div { position: relative; width: 100px; height: 100px; background-color: pink; border: 1px solid black; } </style> </head> <body> <div>中国</div> </body> </html> <script> $("div").animate({ //1. left、top是定位元素才拥有的属性,如果元素没有定位修改left和top不生效 //2. 参数一:是animate动画过后,最后的样式,从开始到最后,会以动画的方式呈现 //3. 参数二:从初始样式到最后的样式,整个动画共用时5000ms,但注意animate动画无法修改颜色 //4. 参数三:动画结束后的回调函数 "left": 1000, "top": 100, "width": 150, "height": 50, "background": "cyan", "color": "white", "border": "20px solid red" }, 5000, function () { //让div遍椭圆 $(this).css({ "borderRadius": "50%", "textAlign": "center" }) }); </script>
10 动画积累问题
-
例如单击事件触发一个动画,当鼠标已经不继续单击了,但动画没完事,还在不断的执行动画
-
可以调用标签的
stop
方法,将之前的动画清除,样式保留在当前状态 -
代码
<!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>Document</title> <script src="./js/jQuery.min.js"></script> <style> * { margin: 0; padding: 0; } div { position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: red; } </style> </head> <body> <button class="btn1">去北京</button> <button class="btn2">去东京</button> <div></div> </body> </html> <script> $(".btn1").click(function () { //stop(“true”)表示将之前该元素上积累的动画全部清除,只执行stop true后面的动画 $("div").stop(true).animate({ "left": 1000 }, 2000); }); $(".btn2").click(function () { $("div").stop(true).animate({ "left": 0 }, 2000) }) </script>
11 jQuery实战
11.1 三位轮播图
-
前端工程师经常将轮播图叫做三位轮播或传统轮播,因为涉及三个位置的变化
-
swiper:轮播图插件,一行代码就可以搞定轮播图
-
需求
-
自动轮播:每隔一段时间换一张图
-
鼠标放上时轮播自动停止,鼠标移出后自动轮播自动开始
-
单击左右按钮切换图片
-
单击不同的分页器,显示不同图片
-
-
html代码
<!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>Document</title> <link rel="stylesheet" href="./default.css"> <script src="./jquery-3.5.1.min.js"></script> </head> <body> <div> <ul> <li class="current"><img src="./1.jpeg" alt=""></li> <li><img src="./2.jpeg" alt=""></li> <li><img src="./3.jpeg" alt=""></li> <li><img src="./4.jpeg" alt=""></li> <li><img src="./5.png" alt=""></li> </ul> <button class="lbtn"><</button> <button class="rbtn">></button> <ol> <li class="cur">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html> <script> //右侧按钮单击事件 //idx:控制某一个li运动 var idx = 0; //右侧按钮的代码进行封装 function rhandle() { //当前显示这张图片从left为0位置运动到left为-600 //eq方法用于确定是ul下的第几个li $("ul li").eq(idx).css({ "left": 0 }).stop(true).animate({ "left": -600 }, 500); //全局变量累加1【下一张图要进入容器里面】 idx++; idx = idx > 4 ? 0 : idx; //下一张图进入 $("ul li").eq(idx).css({ "left": 600 }).stop(true).animate({ "left": 0 }, 500); //底下分页器也跟着变化,通过移除和加上class,来添加或删除样式 $("ol li").eq(idx).addClass("cur").siblings().removeClass(); //addClass代表给标签添加class属性,removeClass代表给标签移除class属性 } $(".rbtn").click(rhandle); //开启定时器让轮播图自动轮播 var timer = setInterval(rhandle, 1500); //鼠标放在上面时的事件,鼠标进入对应的元素中时,就发生的事件 $("div").mouseenter(function () { //清除定时器 clearInterval(timer); }); //鼠标离开事件 $("div").mouseleave(function () { timer = setInterval(rhandle, 1500); }); //左侧按钮的单击事件 $(".lbtn").click(function () { //当前显示图片运动的动画 $("ul li").eq(idx).css({ "left": 0 }).stop(true).animate({ "left": 600 }, 500); //全局变量需要累减 idx--; idx = idx < 0 ? 4 : idx; //下一张图片动画 $("ul li").eq(idx).css({ "left": -600 }).animate({ "left": 0 }, 500); //底下分页器也跟着变化 $("ol li").eq(idx).addClass("cur").siblings().removeClass(); }); //下方分页器功能 $("ol li").click(function () { //获取单击的那个分页器li索引值 var index = $(this).index(); //分两种情况讨论 if (index > idx) { //当前显示这张图片动画 $("ul li").eq(idx).css({ "left": 0 }).stop(true).animate({ "left": -600 }, 500); //单击那个分页器对应的图片动画 $("ul li").eq(index).css({ "left": 600 }).stop(true).animate({ "left": 0 }, 500); //全局变量idx重新赋值 idx = index; //底下分页器也跟着变化 $("ol li").eq(idx).addClass("cur").siblings().removeClass(); //addClass代表给标签添加类名、removeClass代表给标签移出类名 } else { //没看懂这个位置,为啥要整else,直接一个逻辑下来应该就可以,应该确实没用,老师的意思就是可以分类讨论方案此处可以省略 //当前显示这张图片动画 $("ul li").eq(idx).css({ "left": 0 }).stop(true).animate({ "left": -600 }, 500); //单击那个分页器对应的图片动画 $("ul li").eq(index).css({ "left": 600 }).stop(true).animate({ "left": 0 }, 500); //全局变量idx从新赋值 idx = index; //底下分页器也跟着变化 $("ol li").eq(idx).addClass("cur").siblings().removeClass(); //addClass代表给标签添加类名、removeClass代表给标签移出类名 } }) </script>
-
css代码
*{ margin:0; padding:0; } div{ position:relative; width: 600px; height: 400px; border: 1px solid black; margin:50px auto; overflow: hidden; } ul{ position: absolute; width: 600px; height: 400px; list-style: none; } img{ width:600px; height: 400px; } ul li{ position: absolute; width: 600px; height: 400px; left: 600px; } .current{ left: 0px; } .lbtn{ position: absolute; width: 35px; height: 35px; left:0px; top:40%; } .rbtn{ position: absolute; width: 35px; height: 35px; right:0px; top:40%; } ol{ position: absolute; width: 150px; height: 25px; left:38%; bottom:5px; list-style: none; } ol li{ float:left; width: 25px; height: 25px; border-radius: 50%; background:black; color:white; text-align: center; line-height: 25px; margin-right: 3px; } .cur{ background-color: green; transform:scale(1.2); }
11.2 新闻导航
-
代码
<!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>Document</title> <script src="./jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } div { position: relative; width: 100%; height: 40px; background-color: #01204f; } ul { position: absolute; width: 100%; height: 40px; list-style: none; } ul li { float: left; /*每个li宽度应该不同,就为每个li都加上padding,这样就能很简单的保证每个li不同*/ padding: 10px; color: white; } /*设置红色的滑块的样式*/ div.slider { position: absolute; width: 52px; height: 41px; background: red; opacity: .8; } </style> </head> <body> <div> <!--div要在li上面,不然div组件会将li完全覆盖住--> <div class="slider"></div> <ul> <li>首页</li> <li>国内</li> <li>国际</li> <li>军事</li> <li>财经</li> <li>娱乐</li> <li>体遇</li> <li>互联网</li> <li>科技</li> <li>科技</li> <li>游戏</li> <li>女人</li> <li>汽车</li> </ul> </div> </body> </html> <script> //全部li添加鼠标移上事件 $("li").mouseenter(function () { //1. prevAll:获取某一个元素前面全部兄弟元素 var sum = 0; //2. each:可以遍历每一个节点 $(this).prevAll().each(function () { //获取每一个兄弟元素宽度 sum += $(this).innerWidth(); }); //让红色滑块运动起来 $(".slider").stop(true).animate({ "left": sum, //3. innerWidth:获取某个标签宽度(包含内边距) //因为有些li上面是3个字,所以红色滑块的宽度也要变化来匹配li的宽度 "width": $(this).innerWidth() }, 500); }); //鼠标移出,红色滑块归还原始位置 $("div").mouseleave(function () { $(".slider").stop(true).animate({ "left": 0, "width": $("ul li").eq(0).innerWidth() }, 500); }) </script>
12 AJAX
- AJAX一门前端技术(不是一门语言),可以在页面没有重新加载情况下实现页面局部更新
- 传统的网页(不使用 AJAX)如果需要更新内容,必须重新加载整个页面
- JavaScript中AJAX技术是由内置构造函数XMLHttpRequest实现的,但在实际工作中一般都使用jQuery中的实现,因为jQuery对原生AJAX技术进行封装,用起来更方便
12.1 使用流程
-
创建springboot上的web项目
-
HelloController
package com.mashibing.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @Controller public class HelloController { @RequestMapping("/hello") public String hello() { return "aaa.html"; } }
-
aaa.html(resources/static)
<!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>Document</title> <!-- 使用JQ务必引包 --> <script src="./js/jQuery.min.js"></script> </head> <body> <h1>今天课程重点就是AJAX技术</h1> <button>单击我向服务器端----悄悄发起上行请求(GET)</button> </body> </html> <script> $("button").click(function () { //发送GET请求 //参数一:请求路径 //参数二:传递参数 //参数三:服务器响应成功后的回调函数,data为响应数据 //最终发送请求格式为:"http://localhost:8080/data.txt?name=小明&ps=123",前面部分实际上是当前aaa.html在服务器上的路径"http://localhost:8080/aaa.html",所以其实能看出来AJAX只能请求aaa.html所在服务器上的内容,无法请求其他服务器上的内容 $.get("./data.txt", { "name": "小明", 'ps': 123 }, function (data) { //data:就是服务器端响应数据 //修改H1标题 $("h1").html(data); }); }); // $("button:eq(1)").click(function () { // //发送post请求 // $.post("./data.txt", function (data) { // $("h1").html(data); // }); // }); // $("button:eq(2)").click(function () { // //发送GET或POST请求,请求参数必是一个JSON数据格式 // $.ajax({ //。 //请求路径 // "url": "./data.txt", // //请求方式:GET、POST // "type": "post", // //传递参数 // "data": { // "a": 1 // }, // //服务器响应后回调函数 // "success": function (data) { // $("h1").html(data); // } // }); // }); </script>
-
jquery-3.5.1.min.js(resources/static)
-
data.txt(resources/static)
这是新的内容
-
启动AjaxtestApplication
-
访问http://localhost:8080/hello,点击按钮后,第一行标题文字变为data.txt中文字
13 原生AJAX
-
代码
<!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>Document</title> </head> <body> <h1>我是默认文本</h1> <button>单击我悄悄发起上行请求----GET</button> </body> </html> <script> //获取标签 var h1 = document.querySelector("h1"); var btn = document.querySelector("button"); //单击按钮发起上行请求 btn.onclick = function () { //悄悄发起上行请求 if (window.XMLHttpRequest) { //高级浏览器写法 var xhr = new XMLHttpRequest(); } else { //IE低版本写法 var xhr = new ActiveXObject("msxml2.0xmlhttp"); } //设置请求方式 xhr.open("get", "./data.txt", true); //发送请求 xhr.send(); //监听就绪状态 xhr.onreadystatechange = function () { if (xhr.status == 200 && xhr.readyState == 4) { //在页面没有重新加载情况下实现页面局部跟新 h1.innerHTML = xhr.responseText; } } } </script>
14 JSONP跨域
-
跨域:用户在服务器A提供的页面中,向服务器B发送请求就称为跨域
-
AJAX技术遵守"同源策略",因此不支持跨域请求数据
<!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>Document</title> <!-- 引包 --> <script src="./jquery-3.5.1.min.js"></script> </head> <body> <h1>我是来源于127.0.0.1服务器页面</h1> <button>拉去127.0.0.2服务器上面数据</button> </body> </html> <script> //AJAX技术不能跨域请求数据 $("button").click(function () { //请求第二个服务器上面数据,单击按钮后,控制台会显示报错 $.get("http://127.0.0.1:8081/data.txt", function () { }) }); </script>
-
跨域原理
- 拥src属性的标签都拥有跨域的能力,例如通过script标签的src引入互联网上的js文件时,客户端会执行js文件中的所有代码,这其实就完成了跨域
- 因此可以在远程服务器上设法把数据装进js格式的文件里,这样客户端就可以通过src属性获取到这些数据
- js原生支持jason格式的处理,因此可以考虑以jason格式封装这些数据
-
JSONP:是一种非正式传输协议,允许客户端传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了
-
代码
<!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>Document</title> </head> <body> <select></select> </body> </html> <script> //获取下拉框 var select = document.querySelector("select"); //声明一个同名函数 function jQuery4494404(arr) { //遍历数组 for (var i = 0; i < arr.length; i++) { //创建节点 var op = document.createElement("option"); op.innerHTML = arr[i].name; select.appendChild(op); } } </script> <!-- 将京东服务器调用部分引入 --> <script src="https://fts.jd.com/area/get?fid=72&callback=jQuery4494404&_=1578732186910"></script>
15 bootstrap
-
是一个前端框架,可以用来方便地布局,写样式
-
教程:https://www.runoob.com/bootstrap/bootstrap-tutorial.html
-
代码
<!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>Document</title> <link rel="stylesheet" href="./bootstrap.min.css"> </head> <body> <!--1. class必须叫container--> <div class="container"> <!--2. class为row表示一行,col表示一列--> <div class="row"> <!--3. xs表示水平排列,两个都是6,表示占用6份,因为都是6,所以表示一人占一半--> <div class="col-xs-6">么么哒</div> <div class="col-xs-6">哈哈哈</div> </div> <div class="row"> <div class="col-xs-2">小明</div> <div class="col-xs-10">小123131</div> </div> <!--4. 想引用图标时,直接将class属性指定为官网中class值,即可使用该图标--> <span class="glyphicon glyphicon-fullscreen"></span> <!--5. 可以在w3c教程中直接copy过来,此处为分页图标--> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </body> </html>
16 node平台
- 官网:http://nodejs.cn/
- node是一款软件,并不是一门语言,JS在node软件上运行
- node软件诞生初期是为了方便服务器端开发,但现在前端工程师使用node软件目的不是为了开发服务器,我们下载node只为了使用其内置的npm工具,该工具类似springboot+maven的功能,可以作为前端开发当中"脚手架"
- node软件支持JS全部核心语法(ES6、7、8、9、10)
- node平台没有DOM、BOM概念,执行
console.log(document)
、console.log(window)
会报错 - mac上可以通过Homebrew安装node,安装成功后,
node -v
可以显示版本号
16.1 node基本使用
-
执行js文件:
node js文件路径
-
代码
//node平台支持JS全部核心语法 //变量 var a = 100; var b = 200; console.log(a + b); //运算符[数学运算符、比较运算符、逻辑运算符]都支持 console.log(3 > 8 ? 6 : 9); //流程控制语句 for (var i = 1; i <= 100; i++) { if (i % 2 == 0) console.log(i); } //函数 function sum(a, b) { return a + b; } console.log(sum(11, 11)); //数组 var arr = ["吃饭", "睡觉", "打豆豆"]; console.log(arr.reverse()); //构造函数 function People(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } //原型对象方法 People.prototype.eat = function() { console.log("我可以吃八斤米饭"); }; //创建小明 var xiaoming = new People("小明", 18, "男"); xiaoming.eat();
16.2 node内置模块使用
- node提供了一些内置模块,扩展了传统JS的功能
16.2.1 fs模块
-
可以操作文件
-
代码
//1. require:node提供的内置函数,可以引入指定模块 //2. fs:该模块可以操作文件 var fs = require("fs"); //3. writeFile:写入数据,参数一:写入的文件路径,参数二:回调函数 fs.writeFile("./jch.txt", "老师是祖国的老花骨朵把", function () { console.log("数据写入......"); }); //4. readFile:读取数据 fs.readFile("./jch.txt", function (err, data) { //toString将字节码转为字符 console.log(data.toString()); })
16.2.2 queryString模块
-
queryString指url中,形为
a=1&b=2
的字符串 -
代码
//queryString模块:可以将JSON数据格式转换为queryString字符串 var querystring = require("querystring"); //stringify:将JSON转换为queryString字符串 console.log(querystring.stringify({ "a": 1, "b": 2 })); //http模块:用于创建一个服务器 var http = require("http"); //创建服务器对象 var app = http.createServer(function (req, res) { res.setHeader('Content-Type', 'text/html;charset=utf-8'); //设置返回的状态码 res.statusCode = 500; //当有请求进入时,服务器响应数据 res.end("老师自己开发的服务器"); }); //端口号设置 app.listen(3000);
16.3 NPM工具使用
- npm社区网站:https://www.npmjs.com/
- 可以利用npm工具下载社区网站中其他人开发的模块(Vue、React)
- 使用流程
- 到社区网站搜索需要引入的模块
- 在命令行中通过
npm install 自定义模块名
下载模块到./node_modules/自定义模块名
路径下 - 通过require引入新下载的模块并使用
16.3.1 colors模块
-
可以在控制台打印彩色文字
-
下载:
npm install colors
-
代码
//引入社区自定义模块colors //可以改变文字颜色 var colors = require("colors"); console.log("我非常喜欢贾成豪,因为贾成豪只是深渊".green); console.log("我很喜欢小明".rainbow);
16.3.2 solarlunar模块
-
可以实现公历、农历转换
-
下载:
npm install solarlunar
-
代码
//引入社区自定义模块solarLunar var solarLunar = require("solarLunar"); var solar2lunarData = solarLunar.solar2lunar(1996, 3, 8); console.log(solar2lunarData); console.log(solar2lunarData.animal);