使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 在项目根目录中运行
① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单。在网页中也可以来创建出不同的表格。在HTML中，使用table标签来创建一个表格，在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格。如果表格中的单元格比较多，那么可以设置隔行变色的效果，就能让表格显得清晰和一目了然。设置隔行变色的方法十分简单:可以给偶数(或奇数)行的tr标记都设置上背景色的效果就可以了。
同时修改index页面中script的src属性为<script src="bundle.js"></script>
我们直接使用系统的一个模板GettingStarted.cpt，首先我们来感受一下这个模板。
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式, 一、Style属性 文档中的每一个元素都是一个对象,每个对象又有着各式各样的属性。有一些元素告诉我们元素在节点树上的位置信息。比如说,parentNode、nextSibling、previousSibling、childNodes、 firstChild、lastChild这些属性,就告诉了我们文档中各节
需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如：
分享一篇最近学习总结的前端表格制作教程，先看下方截图，具体演示的功能虽然简单，不过很有实际意义，主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能，其中也涉及一些样式的调整，比如隔行变色，此类文章网上很多很多，我也看过不少，但是网上文章都存着一个问题：很多文章代码写的很笼统，跳跃性比较大，你可能哪怕有一个地方看不懂，不知道怎么修改，程序就运行不起来，得不到想要的表格效果和功能，而此篇文章，我会尽可能详细介绍我做的功能的每一步是怎么得来的，并且本文源码也完全开源分享，运行中如果有任何问题，也欢迎留言提一些建议
我们都知道：1+2+3+ ... + 49 = 1225 现在要求你把其中两个不相邻的加号变成乘号，使得结果为2015
GridView 样式美化及应用摘要：ASP.NET 4.0中GridView控件主要用于显示数据库的查询结果。文中对GridView控件的样式美化进行了研究，探讨了GridView控件在应用过程中的自动排序及动态添加列等功能，并给出了其实现方法。经过系统的应用与实践验证，基本实现了预期的效果。
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性性能优化等强大的功能。
0到59的有2人，占29%；80-89的有1人，占14%；90-100的有4人，占57%
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
document.createElement() 用来生成网页元素节点，参数为元素的标签名；
class=”table-responsive 浏览器宽度小于768px时，表格出现边框。（注意：这个样式定义在表格的父元素上）
<script type="text/javascript"> $(".demo").click(function(){ alert() }) </script>
官方网站： http://bootstrap-table.wenzhixin.net.cn/ 参考文档：http://issues.wenzhixin.net.cn/bootstrap-table/index.html 中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table 在开
1.通过table标签的属性来设置，border=”1″ 边框设置为1，cellspacing=”0″ 单元格间距设置为0.
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
对于 first-child 或者 last-child 等,还算比较常用.但是 nth-child 一般也就用隔行变色.一直不认为其有多强大的功能,甚至认为其比较鸡肋.
table-striped配合 “:nth-child”选择器使用，来改变默认的颜色效果，也称之为隔行变色或斑马线，起到两种不同颜色变化的效果，条纹状态的表格
1、this指事件的调用者 2、input.value 表单更换内容 3、innerHTML更换盒子里的内容，文字、标签都能换。 4、isNaN("12")如果里面的不是个数字，返回true
大家是否觉得上面这个图形需要用到的代码会很复杂？其实不然，我们利用简单的css即可达到此种效果。
2.安装到项目依赖 有时候我们的项目要依赖webpack，可以运行npm i webpack --save-dev
安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)
<meta http-equiv="x-ua-compatible" content="IE=edge">
这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。 然后其他内容全部写在这个div标签中即可！ 例如:
就比如这个轮播图,当我们选择了特定的元素时样式才会改变,而其他的不变,返回原来的状态
1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠
预解析：js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的最前面
最近在搭建完善自己的博客，需要用到一些页面样式之类的，就特意问了一下女朋友一个问题，关于Web前端开发，jQuery现在过时了嘛？她毅然决然告诉我，那是我们前端现在的鄙视链。是的，不可否认，现在框架盛行，jQuery早已被GitHub所遗弃。我依稀记得，两年前，我学前端知识，觉得这个框架真的很好，以后有时间，一定要好好学一下它。也就这么点时间，它早已淡出了前端开发者的视线。不过呢，我身为后端开发，也就是一个新人于前端来说，所以我还是很喜欢jQuery的思想，因为让我直接理解Vue/React的话，还是需要大量时间的，所以认为jQuery是一个不错的过渡选择，也可以学习下前端编程思想，我看中了它的人性化以及可读性很强，对于我们来说也很简单，所以本文带大家一起回忆那些jQuery的点点滴滴，也为我们前端知识打个牢固的技术基础。
字符串是数据结构中比较简单的一种，但又是我们最常用的数据结构之一。对于字符串对象，最重要的操作之一便是字符串匹配（查找），本篇文章便向大家介绍一个典型的匹配算法—BF算法
HTML5 原生的 Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过
对于之前的案例----隔行变色，如果我们要自定义一些css样式怎么办，传统的方法是在外部定义css,在html中引入，这种方式又会引发二次请求如果css文件较多，我们就要不停引入，在学了webpack之后我们知道weback可以帮助我们打包各种资源，利用webpack打包即可解决我们的问题，但是webpack本身是不支持css,jpg等文件的，只所以能够打包各种资源是因为loader的介入 loader译为装载器，加载器。 接下来介绍几个常用的loader
<meta name="viewport" content="width=device=width,initial-scale=1,user-scalable=0">
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、 标准化。最终落实到细节上，就是实现前端的“4 个现代化”： 模块化、组件化、规范化、自动化
之前介绍过[ ]里可以定义属性或属性值，之后的标签中只要含有该定义的属性或属性值就会拥有该样式。所以继续介绍剩下的几种声明方式。
表格隔行变色效果 案例分析 用到鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout 核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉背景颜色 注意：第一行（thead里面的行）不需要变换颜色，因为我们获取的是tbody里面的行 //1.注册元素 var trs = document.querySelector('tbody').querySelectorAll('tr'); //2.绑定事件 for (var
HTML5的Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag
Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制，了解了它是怎么运行怎么使用，才能够更加高效的布局页面
① 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
HTML5的Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag and Drop生成图片的Base64的字符串信息。 使用Base64方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处，当然弊端也不少例如不能有效利用浏览器图片缓存机制等。使用HT for Web的朋友会发现HT的例子
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul … 特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度 功能：主要用来搭建网站架构、页面布局、承载内容
Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制，了解了它是怎么运行怎么使用，才能够更加高效的布局页面。 附上中文网站，了解了怎么玩之后就在上面找自己需要的，然后玩起来！！ http://www.bootcss.com
这个写法对应的也就是点击事件，但是这样写的话有点复杂，所以就将其简化成@click了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
