day16_雷神_前端04
前端day04
链接前端的一些库,一些资源,从bootcdn上搜,有前端所有的库。
前端工作流程:
jquery的DOM文档操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="box" id="name"><p>lalal</p><p>黄金爱家</p></div>
<button>按钮</button>
<!--<p>alex</p>-->
<script src="jquery-3.3.1.js"></script>
<script>$(function () {var imgSrc = './timg.jpg';var alt = '美女';var aHref = 'http://www.baidu.com'// 父.append(子) 子元素 可以是 string js对象 jquery对象$('#name').append('<h2>太白结婚了</h2>');// $('.box').append(` <ul>// <li>// <a href=${aHref}>// <img src=${imgSrc} alt=${alt}>// </a>// </li>// </ul>`);// var oH3 = document.createElement('h3');// oH3.innerText = 'taibai';// console.log( $('.box'));// $('.box').append(oH3);//相当于一个移动操作// $('.box').append($('p'));// 追加到// $(子).appendTo(父)// $('p').click()// var oDiv = document.getElementsByClassName('box')[0];// // $('<h3>哈哈哈哈</h3>').appendTo($('.box'));// // $('<h3>哈哈哈哈</h3>').appendTo('.box');// $('<h3>哈哈哈哈</h3>').appendTo(oDiv).click(function () {// alert(1);// });// 追加到父元素中的第一个元素// $('.box').prepend('哈哈哈')// $('.box').prepend('<h5>哈哈哈2</h5>')// 兄弟之间插入$('p').after('<h3>alex</h3>');$('<h3>女神</h3>').insertAfter('p');$('p').replaceWith('结婚了');$('<h5>哈哈哈</h5>').replaceAll('h3');$('button').click(function () {alert(1);// 删除节点 事件也删除// var aBtn = $('button').remove(); 返回一个jQuery对象。// 删除节点 事件保留// var aBtn = $('button').detach();// console.log(aBtn);//// $('.box').prepend(aBtn);
// 追加的这些元素,可以先删除,再追加$('.box').empty();// 1. 初始化的时候,有初始化 渲染开销 对于 文档 DOM 如果是频繁性的切换 建议使用 display:block|none addClass//2. 少量的切换 建议使用 创建元素 删除元素 性能消耗 创建==》销毁});});
</script>
</body>
</html>
事件对象
凡是有事件,都会有默认的事件对象,是JS的,不是jquery的。a标签,点按钮,能默认跳转,是因为它有默认事件行为。访问百度,form表单提交, action 后的url 加/s 表示search
form 默认有ajax,不然自己不会提交请求到百度;同源策略: 端口号之前有一个不同,就是不同源,,后端用cors模块解决<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<div class="box"><a href="http://www.baidu.com">按钮</a>
</div><form action="http://www.baidu.com/s"><input type="text" name = 'wd' id="wd"><input type="submit" id="submit">
</form>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {$('a').click(function (event) {//a form event.preventDefault();阻止默认事件event.preventDefault();//阻止冒泡event.stopPropagation()console.log('a点击了');// 阻止冒泡// event.stopPropagation()// window.location.href});$('#submit,#wd').click(function () {event.stopPropagation();//同时阻止了默认事件和冒泡// return false;});$('form').submit(function (event) {event.preventDefault();event.stopPropagation()console.log(1111);// ajax请求$.ajax({url:'http://www.baidu.com/s',type:'get',success:function (data) {console.log(data);}});});$('.box').click(function () {console.log('盒子被点击了')})$('body').click(function () {console.log('body被点击了')})$('html').click(function () {console.log('html被点击了')})});</script>
</body>
</html>
换肤
position:fix 以浏览器左上角
absolute 是以页面的左上角<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}.header{width: 100%;height: 40px;background-color: rgba(0,0,0,.3);}.header_box{position: fixed;width: 100%;height: 200px;background-color: #555;left: 0;top: 0;z-index: 888;}</style>
</head>
<body style="height: 2000px">
<div class="header"><a href="javascript:void(0)" id="changeFu">换肤</a><div class="header_box" style="display: none;"><a href="javascript:void(0)" class="hotmen">热门</a><a href="javascript:void(0)" class="slideUp">收起</a></div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {$('#changeFu').click(function (e) {e.stopPropagation();$('.header_box').stop().slideDown(1000);});$('.hotmen').click(function (e) {e.stopPropagation()console.log('点了hotmen');});$('.slideUp').click(function (e) {e.stopPropagation();$('.header_box').stop().slideUp(1000);})$('.header_box,.header').click(function () {return false;})$('body').click(function () {alert(1);$('.header_box').stop().slideUp(1000);})})
</script>
</body>
</html>
> 表单事件select: 输入框里一选中就走了
jQuery的位置信息
offset.top 是相对于页面顶部的距离scrollTop 是页面被卷起的高度<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}.box{background-color: red;padding: 10px;border: 1px solid yellow;/*margin-top: 100px;*//*margin-left: 100px;*/position: relative;top: 50px;}</style>
</head>
<body style="height: 2000px">
<div class="box">alex</div>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {$('.box').width(200).height(300);// innerWidth innerHeight 内部宽和高 不包含border// console.log($('.box').innerWidth());// $('.box').innerWidth(400)// outerHeight outerWidth 外部宽和高 包含border// console.log( $('.box').outerWidth());// console.log( $('.box').offset().top);// $(document).scroll(function () {
// // console.log(22222);
//
// console.log( $(document).scrollTop())
// })})
</script></body>
</html>
滚动固定导航栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}.header{width: 100%;height: 40px;background-color: rgba(0,0,0,.3);}.header_box{position: fixed;width: 100%;height: 200px;background-color: #555;left: 0;top: 0;z-index: 888;}.fix_header{position: fixed;width: 100%;height: 80px;background-color: red;top: 0;left: 0;display: none;}.content{width: 500px;height: 300px;background-color: yellow;position: absolute;left: 50%;margin-left: -250px;top: 300px;}</style>
</head>
<body style="height: 2000px">
<div class="header"><a href="javascript:void(0)" id="changeFu">换肤</a><div class="header_box" style="display: none;"><a href="javascript:void(0)" class="hotmen">热门</a><a href="javascript:void(0)" class="slideUp">收起</a></div>
</div><div class="content"></div>
<div class="fix_header">固定导航栏
</div>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {$('#changeFu').click(function (e) {e.stopPropagation();$('.header_box').stop().slideDown(1000);});$('.hotmen').click(function (e) {e.stopPropagation()console.log('点了hotmen');});$('.slideUp').click(function (e) {e.stopPropagation();$('.header_box').stop().slideUp(1000);})$('.header_box,.header').click(function () {return false;})$('body').click(function () {alert(1);$('.header_box').stop().slideUp(1000);});$(document).scroll(function () {//获取黄色的盒子到顶部的距离var top = $('.content').offset().top;var docScrollTop = $(document).scrollTop()if (docScrollTop > top){$('.fix_header').show();}else {$('.fix_header').hide();}});})
</script>
</body>
</html>
jquery的插件
www.jq22.com
iframe 框架标签,标签去链接别人写好的地址扒一些插件
iconfont 阿里巴巴矢量图标库
扒一些图标
jQuery的事件委托
on方法,绑定的意思,第一个元素是click,你要绑定的事件,第二个是你要绑定的子元素,第三个是对应的function
也是给li标签绑定点击事件,只不过把点击事件交给了父亲ul,未来添加的只要从ul点击就OK
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>alex1</li><li>alex2</li><li>alex3</li><!--li-->
</ul>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {// $('ul li').click(function () {// alert($(this).text());// })//事件委托// $('ul').on('click','li',function () {// alert($(this).text())// })//// //未来追加的元素 不能做点击事件// $('ul').append('<li>太白</li>');// var arr = ['alex','etaibai','nv'];//数组遍历使用forEach// arr.forEach(function (el,index) {// console.log(el,index);// });//jquery伪数组遍历 使用each// $('li').each(function (index,el) {// console.log(el);// console.log(index);// })});
</script>
</body>
</html>
jquery 内部遍历:给两个div绑定事件
$('.box').click(function () {//对值得操作// alert(this.innerText);// alert($(this).text());// alert($(this).html());$(this).text('nvshen');
json使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><img src="./拍照-01.png" alt=""><img src="./购物车满.png" alt=""><img src="./购物车满%20(1).png" alt="">
</head>
<body>
<script>//后端响应回来的数据 json字符串var a={"name":"tom","sex":"男","age":"24"}; //jsonvar b='{"name":"Mike","sex":"女","age":"29"}'; //jsonStr// var jsonStr = '{"name":"张三"}';// console.log(JSON.parse(b).name); console.log(JSON.stringify(a));
// 把一个对象解析成JSON字符串
</script></body>
</html>
bootstrap使用
基础模板(起步里) + 导航条(组件里)
全局CSS样式
生产环境:编译之后的代码
bootstrap 源码: 包含了less,less是CSS的高级语言,有逻辑、有运算、函数等,让CSS活了,但是浏览器只识别CSS,用less编译器转译成CSS,
前端工具:
Bower进行安装,
npm, 服务器语言,node.js的包管理器
下载的包最终要用Grunt,对所有文件处理,html、CSS、js等文件压缩,编译打包上线
grunt目前已经不用了,还有gulp、webpack,目前多的是webpack
bgc的大图会编译成一段js代码,放在某一个js文件,请求资源的时候方便多了
工具的使用都是流水化的使用,配置好,执行命令就好了
一般写项目不会一个目录一个目录的创建,会有模板直接创建目录、文件等。
960.cs 栅格系统
<div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套响应式 </div><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套响应式 </div><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套响应式 </div><div class="col-lg-3 col-md-4 col-sm-6">Bootstrap 提供了一套响应式 </div></div>
</div>
组件的使用
插件: JS功能
组件: html、css、js, 可复用的
php,多线程,没有异步队列,只允许链接一个最大连接数。
面板 ==》 下拉菜单
bootstrap.min.js 必须依靠jQuery
分裂式的下拉菜单
导航条
品牌图标
导航是独立于内容主题的一块区域
路径导航
分页
相对定位,可以微调元素,因为相对原来的位置。
写路由,即url,会往后端请求数据,如果后台资源过多,前端页面会出现白屏现象。
1、单页面操作,现在是锚点值的链接,前端做路由,后端只传数据,点击a标签,切换页面,在某个时机发送请求,获取后端资源,2、解决前后端分离,MVC架构模式,controller就是路由/course,路由一切换,加载页面,以前页面是后台做的,整个放到前端,现在分离,整个View让前端做。
module 就是数据,从前没分那么细,后台渲染view,先读取数据,把数据渲染到后天写的一个模板,通过http协议render到前端页面。后端处理视图。后端通过模板语法直接渲染进去。
后来单独把view摘出来,做DOM操作,django是前后端没分的。
js单线程,nodejs、python都是单线程,
插件
模态框、滚动监听、<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --><title>Bootstrap 101 Template</title><!-- Bootstrap 全局的css--><link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --><!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><style>body {padding-top: 70px;}.ttt {position: relative;top: 0px;}</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">路飞学诚</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li><li><a href="#">学位</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">注册</button><button type="submit" class="btn btn-success">登录</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><div class="container"><div class="row"><div class='col-md-6'><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">下拉菜单</h3></div><div class="panel-body"><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><!--凡是在组件中带有 data-xxx 表示与js有很大关系-->Dropdown<span class="caret"></span><!--三角形--></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div></div><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">按钮式的下拉菜单</h3></div><div class="panel-body"><!-- Split button --><div class="btn-group"><button type="button" class="btn btn-danger">Action</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"aria-haspopup="true" aria-expanded="false"><span class="caret"></span><!--<span class="sr-only">Toggle Dropdown</span> --></button><!--sr-only不显示这个span标签--><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div></div><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">按钮式的下拉菜单</h3></div><div class="panel-body"><ul class="nav nav-tabs"><li role="presentation" class="active"><a href="javascript:void(0)">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages</a></li></ul></div></div></div><div class="col-md-6"><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li class="active"><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="#">6</a></li><li><a href="#">7</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav><ul class="nav nav-pills" role="tablist"><li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages <span class="badge ttt">3</span></a></li></ul><!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" id="modal">Launch demo modal</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" id="close">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div></div></div>
</div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>$(function () {$('#modal').click(function () {$('#myModal').modal('show');});$('#close').click(function () {$('#myModal').modal('hide');});});
</script>
</body>
</html>
补充
echart 前端做图标的
bootstrap 后端ui框架:adminlte
day16_雷神_前端04相关推荐
- day14_雷神_前端02
# 前端day02 1. html标签 1. span标签设置宽高 设置宽高后,字体不会发生变化. 2. 盒模型 padding是border里面的距离: margin 是border边框外头的了属于 ...
- day13_雷神_前端01
#前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...
- day15_雷神_前端03
# 前端 day03 内容回顾 javascript:1.ECMAScript5.0 es6(阮一峰) es7 es8(1)声明变量 var let(2)内置函数 Date Math.random() ...
- JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术 自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识.JavaWeb教程分为四个阶段 前端技术 1.HTML.2.CSS. ...
- ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇(二)JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
- 人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发 今天这部分主要讲小程序前端功能的开发 由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 前端04 /css样式
目录 前端04 /css样式 昨日内容回顾 css样式 1高度宽度 2字体属性 3文本属性 4背景属性 5边框属性 6display属性 7.盒子模型 8.float浮动 9.定位 10.z-inde ...
- 现代软件工程_团队项目_阿尔法阶段_前端知识共享_2017.11.21
现代软件工程_团队项目_阿尔法阶段_前端知识分享 更加舒适浏览格式 http://blog.csdn.net/bowean HTML基础(一) 本文参考了[http://www.w3school.co ...
最新文章
- 【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!...
- HTML系列(七):多媒体
- SpringBoot中oauth2.0学习之服务端配置快速上手
- c语言智能小车项目的感想,智能小车毕业论文(完整版)要点分析.doc
- 集成电路设计专业视频集(一)
- annotation的理解
- python魔法函数(二)之__getitem__、__len__、__iter__
- C++中默认选中预编译头#includestdafx.h作用
- Django安装与开发虚拟环境搭建01
- Python课程第九周笔记及作业+第十周期末测试
- pe备份linux系统教程,将CDlinux整合在U盘PE启动界面
- win10开机推送的壁纸寻找
- modbus模拟器基本使用
- 比较好用的自定义软键盘
- 又一大的技术站点域名被ClientHold了
- 线性代数-MIT 18.06-5(b)
- 机房里的未卜先知!PAKDD2021 第二届阿里云智能运维算法大赛启动
- Google最新VR(sdk的诞生)
- 复杂美区块链技术专利技术之一:交易组解析
- 教师计算机培训心得博客,教师研修心得体会博客
热门文章
- 【数据】2000-2020Landscan Global Population Database(全球人口分布数据集-1km)下载教程
- 多元线性回归之预测房价
- 精美免费ppt模板下载-朴尔PPT
- Laya魅族手动关闭banner广告之后打不开
- Away3d材质实战——旋转的地球
- Checkout和Rest的所有谜题(git reset --files是要改一下)
- 中国石油大学《中国当代散文》共享课程考试
- Pycharm 引入类报错Unresolved reference ‘attempt_load‘
- python调用按键精灵插件_【师兄带你学Python-1】你会涮火锅吗?
- 163邮箱接口post登录战网(一)