...Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件输入框文本域多选和单选框下拉列表静态内容帮助文字校验状态添加额外的图标控件尺寸 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 1 BootStrap基础 1 什么是BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2 BootStrap的版本 BootStrap2 BootStrap3 BootStrap4 3 BootStrap 下载用于生产环境的Bootstrap Bootstrap Less 源码Bootstrap Sass 源码 4 CDN服务 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 目录结构生产环境版 bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2 6 基本模板 <!DOCTYPE html><html lang="zh-CN"><head><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html> 7 浏览器支持手机浏览器 ——- Chrome Firefox Safari Android Supported Supported N/A iOS Supported Supported Supported 桌面浏览器 ——— Chrome Firefox Internet Explorer Opera Safari Mac Supported Supported N/A Supported Supported Windows Supported Supported Supported Supported Not supported 8 浏览器兼容让 IE8 支持H5新标签页面中引入respond.js <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> IE兼容模式页面中添加如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 国产浏览器切换webkit内核页面中添加如下代码 <meta name="renderer" content="webkit"> 2 BootStrap布局 1 概览 1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 1.2 Normalize.css BootStrap内置了Normalize.css 1.3 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container">...</div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid">...</div> 2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 2.1 栅格系统简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-不存在，也影响大屏幕设备。 2.2 栅格参数超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 最大列（column）宽自动 ~62px ~81px ~97px 2.3 栅格系统使用使用单一的一组 .col-md- 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div> 2.4 不同屏幕设置不同宽度 <div class="row"><div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><div class="row"><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div> 2.5 列偏移使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div> 2.6 列位置移动通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。 <div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div> 3 排版 3.1 标题 HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6> 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 <h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6> 3.2 突出显示通过添加 .lead 类可以让段落突出显示。 <p class="lead">...</p> 3.3 对齐 <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p> 3.4 改变大小写 <p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p> 3.5 引用 <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote><blockquote class="blockquote-reverse">...</blockquote> 3.6 列表无样式列表 <ul class="list-unstyled"><li>...</li></ul> 内联列表 <ul class="list-inline"><li>...</li></ul> 水平排列的内联列表 <dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl> 4 代码 4.1 内联代码通过 <code> 标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline. 4.2 用户输入通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 4.3 代码块多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。 <pre><p>Sample text here...</p></pre> 还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。 4.3 变量通过 <var> 标签标记变量。 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 4.4 程序输出通过 <samp> 标签来标记程序输出的内容。 <samp>This text is meant to be treated as sample output from a computer program.</samp> 5 表格 5.1 基本为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 <table class="table">...</table> 5.2 条纹状表格 <table class="table table-striped">...</table> 5.3 带边框的表格 <table class="table table-bordered">...</table> 5.4 鼠标悬停 <table class="table table-hover">...</table> 5.5 紧缩表格 <table class="table table-condensed">...</table> 5.6 状态类通过这些状态类可以为行或单元格设置颜色。 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 5.7 响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 6 表单 6.1 基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 <form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form> 6.2 内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠） 6.3 水平排列的表单通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了 <form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form> 6.4 表单控件输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。文本域支持多行文本的表单控件。可根据需要改变 rows 属性。多选和单选框默认样式 <div class="checkbox"><label><input type="checkbox" value="">Option one is this and that—be sure to include why it's great</label></div><div class="checkbox disabled"><label><input type="checkbox" value="" disabled>Option two is disabled</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that—be sure to include why it's great</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one</label></div><div class="radio disabled"><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label></div> 内联单选和多选框 <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label> 不带文本的Checkbox 和 radio <label><input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></label></div><div class="radio"><label><input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></label></div> 下拉列表 <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> 静态内容如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可 <form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword" placeholder="Password"></div></div></form> 帮助文字 <label class="sr-only" for="inputHelpBlock">Input with help text</label><input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">...<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 校验状态 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 <div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label><input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"><span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label><input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label><input type="text" class="form-control" id="inputError1"></div><div class="has-success"><div class="checkbox"><label><input type="checkbox" id="checkboxSuccess" value="option1">Checkbox with success</label></div></div><div class="has-warning"><div class="checkbox"><label><input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label></div></div><div class="has-error"><div class="checkbox"><label><input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label></div></div> 添加额外的图标你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可 <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label><input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span></div> 控件尺寸通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg- 类似的类可以为控件设置宽度。高度尺寸创建大一些或小一些的表单控件以匹配按钮尺寸 <input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select> 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 <form class="form-horizontal"><div class="form-group form-group-lg"><label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"></div></div><div class="form-group form-group-sm"><label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"></div></div></form> 7 按钮 7.1 可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式 <a class="btn btn-default" href="" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"> 7.2 预定义样式 <button type="button" class="btn btn-default">（默认样式）Default</button><button type="button" class="btn btn-primary">（首选项）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button><button type="button" class="btn btn-danger">（危险）Danger</button><button type="button" class="btn btn-link">（链接）Link</button> 7.3 尺寸需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 7.4 激活状态添加 .active 类 7.5 禁用状态为 <button> 元素添加 disabled 属性，使其表现出禁用状态。为基于 <a> 元素创建的按钮添加 .disabled 类。 8 图片 8.1 响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center <img src="..." class="img-responsive" alt="Responsive image"> 8.2 图片形状 <img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail"> 9 辅助类 9.1 文本颜色 <p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p> 9.2 背景色 <p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p> 9.3 三角符号 <span class="caret"></span> 9.4 浮动 <div class="pull-left">...</div><div class="pull-right">...</div> 9.5 让内容块居中 <div class="center-block">...</div> 9.6 清除浮动通过为父元素添加 .clearfix 类可以很容易地清除浮动（float） <div class="clearfix">...</div> 9.7 显示或隐藏内容 <div class="show">...</div><div class="hidden">...</div> 9.10 图片替换使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。 <h1 class="text-hide">Custom heading</h1> 10 响应式工具 10.1 不同视口下隐藏显示 .visible-xs- .visible-sm- .visible-md- .visible-lg- .hidden-xs .hidden-sm .hidden-md .hidden-lg.visible--block .visible--inline .visible--inline-block 10.2 打印类 .visible-print-block.visible-print-inline.visible-print-inline-block.hidden-print 打印机下隐藏本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_67155975/article/details/123351126。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-18 14:41:25

150

转载

JQuery

jquery改变文本框字体

...地控制HTML文件和CSS样式。JQuery中有一个非常常用的方法，叫做“css”，可以用来更改组件的样式。下面我们通过一个例子来学习如何使用JQuery更改文本框的字体。 // 抓取文本框组件 var txtInput = $("input[type='text']"); // 更改字体大小为18px txtInput.css("font-size", "18px"); // 更改字体色彩为红色 txtInput.css("color", "red"); 以上代码完成更改文本框字体大小和字体色彩的功能。首先需要抓取到文本框组件，可以通过JQuery筛选器抓取，这里我们选择了所有种类为“text”的input组件。然后使用“css”方法设定字体大小和色彩，第一个参数是要更改的样式属性，第二个参数是设定的值。需要注意的是，通过JQuery设定的样式属性会直接作用于组件的style属性，会替代之前通过CSS样式表设定的样式。如果要还原样式，可以直接将样式属性设定为“none”或者将值设定为之前的值。总之，JQuery可以帮助我们方便地更改HTML组件的样式，使用起来也非常简单。希望本文能对大家有所帮助。

2023-12-10 16:36:43

417

程序媛

CSS

css样式表覆盖插件

运用CSS样式表替代插件，可以轻松地对网站上的元素进行外观调整。这种方法可以让网站开发者更自如地设计网页界面，并且可以改变组件的标准样式。下面我们来掌握一下CSS样式表替代插件的具体运用方法。首先，我们需要在HTML文档中导入插件CSS文件地址。例如，比如我们要运用的插件为“plugin.css”，那么我们可以在head标签中插入以下代码： <link rel="stylesheet" type="text/css" href="plugin.css"> 接下来，我们要开始为插件的元素制定个性化样式规则。首先，我们需要识别插件组件标识符。一般可以通过审查元素的方式来查阅插件元素的属性。例如，如果我们要调整插件元素的字号和颜色，可以运用以下代码： <style> .plugin-element { font-size: 14px; color: 333; } </style> 以上代码中，“.plugin-element”为插件元素的类名，“font-size”用于设置字号，“color”用于设置字体颜色。如果想要替代插件元素的默认样式表，我们需要将自定义的样式表放在默认样式表之后，这样我们的样式表才会替代默认样式表。可以运用以下代码来实现： <link rel="stylesheet" type="text/css" href="plugin.css"> <style> .plugin-element { font-size: 14px; color: 333; } </style> 最后，我们还可以运用!important关键字来强制替代其他样式表。例如： .plugin-element { font-size: 14px!important; color: 333!important; } 需要注意的是，运用!important关键字可能会影响到其他样式表的表现，因此应该尽量避免运用。综上所述，运用CSS样式表替代插件可以让我们更自如地定制网站元素的外观。同时，我们需要注意插件组件标识符，以及运用!important关键字的影响。

2023-05-26 10:19:55

459

编程狂人

JQuery插件下载

Air Datepicker|跨浏览器jQuery日期选择器插件

...览器jQuery日期选择器插件。该插件利用了ES5和CSSFlexbox技术，确保在包括但不限于Chrome、Firefox、Safari、Opera、360、搜狗以及最新版本的Edge等主流浏览器中都能流畅运行，实现高效而友好的用户体验。通过集成AirDatepicker到项目中，开发者可以轻松实现美观且功能丰富的日历选择功能，用户能够直观地选取或输入日期信息。此插件具备易于安装与配置的特点，可通过Bower或npm包管理器进行快速添加至项目依赖。使用时，开发人员需确保已引入jQuery核心库，以及AirDatepicker所需的datepicker.min.js和datepicker.min.css文件。AirDatepicker提供了灵活多样的自定义选项，以满足不同场景下的设计需求，如主题样式调整、日期范围限制、语言本地化支持等，是构建现代化Web应用时理想的日期选择组件之一。点我下载文件大小：85.08 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-05-12 20:19:34

105

本站

CSS

css样式表那个最高级

在CSS开发与网页设计领域，随着技术的不断迭代更新，“!important”关键字的作用及其合理使用引起了广泛关注。近期，W3C组织在其CSS工作草案中进一步强调了样式优先级和层叠规则的重要性，并提醒开发者谨慎对待“!important”的运用场景。事实上，在现代前端框架如React、Vue等广泛应用的今天，组件化开发模式下对CSS样式的管理提出了更高的要求。一些最佳实践提倡尽量减少甚至避免使用“!important”，转而利用CSS Modules或CSS-in-JS等方案增强样式作用域隔离，确保样式声明的明确性和可维护性。同时，考虑到响应式设计和无障碍访问的需求，过度依赖“!important”可能会导致在不同设备和用户代理下的样式失效或者冲突。因此，不少开发者倡导通过提升选择器特定性和优化CSS代码结构来控制样式层级，从而达到预期的渲染效果。此外，对于团队协作的项目，良好的CSS编码规范是必不可少的，其中应明确规定“!important”的使用条件和限制，以防止因个人习惯差异导致的全局样式污染问题。总之，在实际开发过程中，理解和掌握“!important”的适用范围和潜在影响，结合最新的前端技术和最佳实践，才能真正做到精细化、高效化的样式管理，打造出既美观又易于维护的网页应用。

2023-04-18 17:52:39

558

逻辑鬼才

HTML

HTML标签与CSS结合实现文本样式个性化控制：内联元素、语义化标签及CSS选择器的运用

...这些被包裹的内容设置CSS样式。它的语法极其简洁： html 这是一段普通的文本，其中这是用标签包裹的部分可以独立设置样式。 3. 使用标签实现样式控制 3.1 基础样式应用要给内的文本添加样式，我们可以配合CSS来进行。例如，让被包裹的文本变成红色并加粗： html 这段话中的红色加粗部分是通过标签和内联CSS定义的样式。 3.2 更复杂的样式控制标签的强大之处在于它可以灵活地与CSS选择器结合，实现更为精细的样式控制。比如，我们可以通过ID或类名选取特定的元素： html 这段话包含两个高亮文本，和一个独特的文本片段。在这个例子中，我们创建了两种不同的样式规则：.highlight 类用于给文本添加黄色背景以突出显示；unique-text ID选择器则将特定文本设置为绿色并加下划线。 4. 对标签使用的深入思考虽然标签在样式控制上具有很大的灵活性，但我们也应该注意到其合理使用的边界。过度依赖可能会导致HTML结构过于复杂且难以维护。因此，在实际项目中，应根据具体需求权衡利弊，尝试结合语义化更强的标签如（强调）、（重要性）等，并充分利用CSS选择器的能力，达到既美观又易于维护的目的。总结来说，HTML的标签就像我们手中的调色盘，赋予我们无限创意去描绘网页文本的万千风情。掌握并灵活运用标签，无疑会使你的网页设计更加得心应手，充满活力。所以，下次当你想要凸显网页上的某些关键信息时，别忘了这位默默无闻却又无比重要的“样式小助手”哦！

2023-09-18 15:40:18

446

星河万里

JQuery

jquery插件都怎么写

... if($this.css('font-weight') == "bold"){ $this.css('font-weight', 'normal'); }else{ $this.css('font-weight', 'bold'); } }); }); //回馈当前的jQuery对象以便连续调用 return this; } 代码中声明了一个名为bold的插件，使用on方法为节点添加了点击事件。点击事件里判断当前的节点是否加粗，然后切换加粗状态。最后，回馈当前的jQuery对象以便连续调用。

2023-12-24 23:53:36

419

程序媛

Material UI

搭建Material UI开发环境：从安装Node.js与npm到创建React项目并引入组件库

...深入了解并尝试的绝佳选择。今天，咱们就一起挽起袖子，从头开始捣鼓Material-UI的开发环境搭建，亲自体验一把这款源自Google Material Design设计宝典的React组件库有多大的魔力！ 2. 理解Material UI 在我们跳入安装和配置之前，先来对Material UI有个大致的理解。Material UI，这个家伙可是个React的好伙伴，人家可是在Material Design设计规范的大旗下干活的。它精心准备了一整套琳琅满目的预设样式组件，像是按钮、表单那些小玩意儿，还有布局组件等等，都是它的拿手好戏。这样一来，开发者们就能轻轻松松地打造出既潮又酷，用户体验一级棒的应用程序啦！ 3. 准备工作安装Node.js与npm （1）首先确保你的计算机上已经安装了Node.js环境，因为Material-UI是基于JavaScript的，我们需要使用npm（Node Package Manager）来进行安装。如果尚未安装，请访问[Node.js官网](https://nodejs.org/)下载并安装适合你操作系统的版本。 bash 在终端检查Node.js和npm是否已安装 node -v npm -v （2）确认Node.js和npm成功安装后，我们就有了构建Material UI开发环境的基础工具。 4. 创建React项目并安装Material UI （1）通过create-react-app工具初始化一个新的React项目： bash npx create-react-app my-material-ui-app cd my-material-ui-app （2）接下来，在新创建的React项目中安装Material UI以及其依赖的类库： bash npm install @material-ui/core @emotion/react @emotion/styled 这里，@material-ui/core包含了所有的Material UI基础组件，而@emotion/react和@emotion/styled则是用于CSS-in-JS的样式处理库。 5. 使用Material UI编写第一个组件（1）现在打开src/App.js文件，我们将替换原有的代码，引入并使用Material UI的Button组件： jsx import React from 'react'; import Button from '@material-ui/core/Button'; function App() { return ( Welcome to Material UI! {/ 使用Material UI的Button组件 /} Click me! ); } export default App; （2）运行项目，查看我们的首个Material UI组件： bash npm start 瞧！一个具有Material Design风格的按钮已经呈现在页面上了，这就是我们在Material UI开发环境中迈出的第一步。 6. 深入探索与实践到此为止，我们已经成功搭建起了Material UI的开发环境，并实现了第一个简单示例。但这只是冰山的一小角，Material UI真正厉害的地方在于它那满满当当、琳琅满目的组件库，让你挑花眼。而且它的高度可定制性也是一大亮点，你可以随心所欲地调整和设计，就像在亲手打造一件独一无二的宝贝。再者，Material UI对Material Design规范的理解和执行那可是相当深入透彻，完全不用担心偏离设计轨道，这才是它真正的硬核实力所在。接下来，你完全可以再接再厉，试试其他的组件宝贝，像是卡片、抽屉还有表格这些家伙，然后把它们和主题、样式等小玩意儿灵活搭配起来，这样就能亲手打造出一个独一无二、个性十足的用户界面啦！总的来说，Material UI不仅降低了构建高质量UI的成本，也极大地提高了开发效率。相信随着你在实践中不断深入，你将越发体会到Material UI带来的乐趣与便捷。所以，不妨从现在开始，尽情挥洒你的创意，让Material UI帮你构建出令人眼前一亮的Web应用吧！

2023-12-19 10:31:30

241

风轻云淡

转载文章

[转载]第八次网页前端培训笔记

...优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili 菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com) 一、获取表单  <form id="myform1" name= "myform1" action=""></form><form id="myform2" name= "myform2" action=""></form><script type="text/javascript">// 1. document.getElementById("id属性值");console.log(document.getElementById("myform1"));// 2. document.表单的name属性值; console.log(document.myform2);console.log("----------------");//获取所有的表单对象console.log(document.forms); // 3. document.forms[下标];console.log(document.forms[0]);// 4. document.forms[表单的name属性值]; console.log(document.forms["myform2"]);</script> 运行效果截图：二、获取表单元素获取表单元素1.获取input元素1. document.getElementById("id属性值"): 通过元素的id属性值获取表单元素对象2.表单对象.表单元素的name属性值;通过表单对象中对应的元素的name属性值获取3. document.getELementsByName("name属性值");通过表单元素的name属性值获取4. document.getELementsByTagName("标签名/元素名");通过标签名获取表单元素对象2.获取单选按钮注:相同的一组单选按钮，需要设置相同的name属性值1. document.getElementByName("name属性值");通过name属性值获取2.判断单选按钮是否选中checked选中状态在JS代码中checked=true表示选中checked=false表示不选中在HTML标签中checked=checked或checked表示选中不设置checked属性表示不选中3.获取单选按钮的值元表.value;3.获取多选按钮与单选按钮相同4.获取下拉选项1.获取下拉框对象var对象 = document.getElementById("id属性值");2.获取下拉框的下拉选项列表var options = 下拉框对象.options;3.获取下拉框被选中项的索引var index = 下拉框对象.selectedIndex;4.获取下拉框被选中项的值var 值 = 下拉框对象.value;5.通过选中项的下标获取下拉框被选中项的值var 值 = 下拉框对象.options[index].value;6.获取下拉框被选中项的文本var文本值一下拉框对象.options[index].text;注:1.获取下拉框选中项的值时: (value)如果option标签设置了value属性值，则获取value属性对应的值;如果option标签未设置value属性值，则获取的是option双标签中的文本值2.下拉框的选中状态:选中状态: selected = selected、 selected、 selected = true未选中状态:不设置selected属性、 selected=false; <form id='myform' name="myform" action="" method="get">姓名:<input type="text" id="uname" name="uname" value="zs"/><br />密码:<input type= "password" id="upwd" name="upwd" value= "1234"/><br /><input type="hidden" id= "uno" name="uno" value="隐藏域"/>个人说明:<textarea name="intro" ></textarea><br><button type="button" onclick="getTxt();" >获取元素内容</button><hr><br><input type="text" name="inputName" class="test" value="aaa" /><input type="radio" name="rad" class="test" value="1" /> 男<input type="radio" name="rad" class="test" value="2" /> 女<button type="button" onclick="getRadio()">获取单选按钮</button><br><hr><br>全选/全不选: <input type="checkbox" id="control" onclick="checkAllOrNot()" /><button type="button" onclick= "checkFan()">反选</button><br><input type="checkbox" name= "hobby" value="sing" />唱歌<input type="checkbox" name= "hobby" value="dance" />跳舞<input type="checkbox" name= "hobby" value="rap" />说唱<button type="button" onclick="getCheckBox()">获取多选按钮</button><br><hr><br>来自:<select id="ufrom" name= "ufrom" ><option value = "" >请选择</option><option value = "Beijing" selected="selected" >北京</option><option value = "Shanghai">上海</option><option value = "Hangzhou">杭州</option></select><button type="button" onclick= "getSelect()" >获取下拉选项</button></form><script type=" text/javascript">function getTxt() {// 1. document.getElementById("id属性值");var uname = document.getElementById("uname").value;console.log(uname);// 2.表单对象.表单元表的name属性值;var pwd = document.getElementById("myform").upwd.value;console.log(pwd);// 3. document.getELementsByName("name属性值");var uno = document.getElementsByName("uno")[0].value;console.log(uno);// 4. document.getELementsByTagName("标签名/元素名");var intro = document.getElementsByTagName("textarea")[0].value;console.log(intro);}function getSelect() {//获取下拉框对象var ufrom = document.getElementById("ufrom");console.log(ufrom);//获取下拉框的下拉选项列表var opts = ufrom.options;console.log(opts);//获取下拉框被选中项的索引var index = ufrom.selectedIndex;console.log("选中项的下标:" + index);//获取下拉框被选中项的值var val = ufrom.value;console.log("被选中项的值：" + val);//通过选中项的下标获取下拉框被选中项的值var val2 = ufrom.options[index].value;console.log("被选中项的值:"+ val2);//获取下拉框被选中项的文本var txt=ufrom.options[index].text; console.log("被选中项的文本:"+ txt);}</script> 运行效果截图：三、提交表单提交表单一、使用普通按钮type="button"1.给按钮绑定click点击事件，绑定函数2.在函数中，进行表单校验(非空校验、合法性校验等)3.如果校验通过，则手动提交表单表单对象.submit();二、使用提交按钮type="submit"1.给按钮绑定click点击事件，绑定函数2.函数需要有返回值，返回true或false (如果return false, 则表单不会提交:如果return true，则提交表单）onclick="return 函数名()"3.在函数中，进行表单校验(非空校验、合法性校验等)4.如果校验通过，返回true;如果校验不通过，则返回false, 则表单不会提交:如果return true，则提交表单）三、使用提交按钮type="submit"1.给表单form元素绑定submit提交事件，绑定函数2.函数需要有返回值，返回true或false (如果return false, 则表单不会提交;如果return trueonsubmit="return函数名()" 3.在函数中，进行表单校验(非空校验、合法性校验等)4.如果校验通过，返回true;如果校验不通过，则返回false <form id= 'myform' name= "myform" action="http://www.baidu.com" method="get" >姓名: <input name= "uname" id="uname"/> <span id = "msg" style="font-s1ze: 12px; color: red;"></span><br /><button type="button" onclick="submitForm1()">提交</button></form><form id= 'myform2' name= "myform2" action="http://www.baidu.com" method="get" >姓名: <input name= "uname2" id="uname2"/> <span id = "msg2" style="font-s1ze: 12px; color: red;"></span><br /><button type="submit" onclick="return submitForm2()">提交</button></form><form id= 'myform3' name= "myform3" action="http://www.baidu.com" method="get" onsubmit="return submitForm3()">姓名: <input name= "uname3" id="uname3"/> <span id = "msg3" style="font-s1ze: 12px; color: red;"></span><br /><button type="submit">提交</button></form><script type="text/javascript">// 表单校验// 提交表单function submitForm1() {//得到文本框的值var uname = document.getElementById("uname").value;//判断是否为空if (isEmpty(uname)) { //为空//设置提示信息(设置span元素的值)document.getElementById("msg").innerHTML="性名不能为空!" ;//阻止表单提交return;}//手动提交表单document.getElementById("myform").submit(); }function submitForm2() {//得到文本框的值var uname2 = document.getElementById("uname2").value;//判断是否为空if (isEmpty(uname2)) { //为空//设置提示信息(设置span元素的值)document.getElementById("msg2").innerHTML="性名不能为空!" ;//阻止表单提交return false;}return true;}function submitForm3() {//得到文本框的值var uname3 = document.getElementById("uname3").value;//判断是否为空if (isEmpty(uname3)) { //为空//设置提示信息(设置span元素的值)document.getElementById("msg3").innerHTML="性名不能为空!" ;//阻止表单提交return false;}return true;}/ 判断字符串是否为空如果为空，返回true如果非空，返回falsetrim() :字符串方法，去除字符串前后空格@param {Object} str/function isEmpty(str) {//判断是否为空if (str == null || str.trim() == "") {return true;}return false;}</script> 运行效果截图：四、原生Ajax实现流程  <script type="text/javascript">// 同步请求function text01() {// 1.得到XMLHttpRequest对象var xhr = new XMLHttpRequest();// 2.打开请求xhr.open("get", "js/date.json", false);// 3.发送请求xhr.send(null);// 4.判断响应状态if (xhr.status == 200) {console.log("响应成功");} else {console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)}console.log("同步请求...");}text01();// 异步请求function text02() {// 1.得到XMLHttpRequest对象var xhr = new XMLHttpRequest();// 2.打开请求xhr.open("get", "js/date.json", true);// 3.发送请求xhr.send(null);// 由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果// 遇过监听readyState的变化来得知后面的处理状态 4=完全处理xhr.onreadystatechange = function(){if(xhr.readyState == 4){// 4.判断响应状态if (xhr.status == 200) {// 得到响应结果 console.log(xhr.responseText);} else {console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText)} }}console.log("异步请求...");}text02();</script> 运行效果截图：本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_61507413/article/details/122895643。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-22 17:32:41

521

转载

转载文章

[转载]秒杀项目之秒杀商品操作

.../js/layui/css/layui.css" media="all"></head><body><div style="padding:15px 0px;"><div class="layui-condition"><form id="fm" name="fm" action="/" method="post" class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;text-align: left;">秒杀活动时间:</label><div class="layui-input-inline" style="width:280px;"><input type="text" class="layui-input" id="dt"></div><div class="layui-input-inline"><button class="layui-btn" id="btn_save" type="button"><i class="fa fa-search fa-right"></i>保存</button></div></div></div></form></div><div class="layui-fluid" style="margin-top:-18px;"><table id="tb_goods" class="layui-table" lay-filter="tb_goods" style="margin-top:-5px;"></table></div></div><script src="/static/asset/js/layui/layui.js"></script><script src="/static/asset/js/project/seckillGoodsOperate.js"></script></body></html> ③、实现增加秒杀商品 seckillGoodsOperate.js: layui.define(()=>{let table=layui.tablelet laydate = layui.laydatelet $=layui.jquerylet layer=layui.layer// 读取普通商品table.render({elem: 'tb_goods',height: 500,url: '/goods/queryAll' //数据接口,page: true //开启分页,parseData(res){ //res 即为原始返回的数据return {"code": res.code===200?0:1, //解析接口状态"msg": res.message, //解析提示文本"count": res.total, //解析数据长度"data": res.data //解析数据列表};},//用于对分页请求的参数：page、limit重新设定名称request: {pageName: 'page' //页码的参数名称，默认：page,limitName: 'rows' //每页数据量的参数名，默认：limit},cols: [[ //表头// 全选按钮{field: '', type:"checkbox"},{field: 'gid', title: '商品编号', width:80},{field: 'goodsName', title: '商品名字'},{field: 'goodsTitle', title: '商品标题'},{field: 'goodsDetail', title: '商品详情'},{field: 'goodsPrice', title: '商品价格', sort: true},{field: 'goodsStock', title: '商品库存', sort: true}]]});// 构建时间选择器//执行一个laydate实例laydate.render({elem: 'dt', //指定元素type: "datetime",range: "~"});$("btn_save").click(()=>{// 获取时间let val=$("dt").val()if(!val){layer.msg("请选择时间")return}// 解析时间2022-2-2 ~2022-5-2let startDate=new Date(val.split("~")[0]).getTime()let endDate=new Date(val.split("~")[1]).getTime()// 获得选中的普通商品,获取选中行的数据let rows= table.checkStatus('tb_goods').data; //idTest 即为基础参数 id 对应的值if(!rows||rows.length===0){layer.msg("请选择数据")return}layer.prompt(function(value, index, elem){// 修改每个商品的数量rows.forEach(e=>{e.goodsStock=value})let data={startDate,endDate,goods:rows}// 访问后台的秒杀商品的接口$.ajax({url: "/seckillGoods/add",contentType:'application/json',data: JSON.stringify(data),datatype:"json",//返回类型type:"post",success(res){parent.seckill_reload()layer.closeAll()parent.layer.closeAll()layer.msg(res.message)} })});})}) ④、展示结果增加成功：三、秒杀商品的操作 1、后端操作秒杀单个商品详情 ①、mapper层 SeckillGoodsMapper： Map<String,Object> querySeckillGoodsById(Long id); mapper.xml文件：SeckillGoodsMapper.xml <select id="querySeckillGoodsById" resultType="map">select sg.id,sg.goods_id,sg.seckill_price,sg.stock_count,sg.start_date,sg.end_date,g.goods_img,g.goods_title,g.goods_detail,g.goods_name,(casewhen current_timestamp < sg.start_date then 0when (current_timestamp between sg.start_date and sg.end_date) then 1when current_timestamp > sg.end_date then 2end) goods_statusfrom t_goods g,t_seckill_goods sgwhere g.gid = sg.goods_idand sg.id = {0}</select> ②、service层 ISeckillGoodsService： Map<String,Object> querySeckillGoodsById(Long id); SeckillGoodsServiceImpl： @Overridepublic Map<String, Object> querySeckillGoodsById(Long id) {return seckillGoodsMapper.querySeckillGoodsById(id);} ③、controller层：SeckillGoodsController package com.example.seckill.controller;import com.example.seckill.service.ISeckillGoodsService;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.vo.SeckillGoodsVo;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.;import org.springframework.web.servlet.ModelAndView;import java.util.List;/ <p> 秒杀商品信息表前端控制器 </p> @author lv @since 2022-03-19/@Controller@RequestMapping("/seckillGoods")public class SeckillGoodsController {@Autowiredprivate ISeckillGoodsService seckillGoodsService;// 返回json@ResponseBody@RequestMapping("/queryAll")public ResponseResult<List<SeckillGoodsVo>> queryAll(){return seckillGoodsService.queryAll();}@ResponseBody@RequestMapping("/add")public ResponseResult<List<SeckillGoodsVo>> add(@RequestBody SeckillGoodsVo seckillGoodsVo){return seckillGoodsService.addGoods(seckillGoodsVo);}// 正常跳转界面@RequestMapping("/query/{id}")public ModelAndView querySeckillGoodsById(@PathVariable("id") Long id) {ModelAndView mv = new ModelAndView("/goods/goodsSeckill");mv.addObject("goods", seckillGoodsService.querySeckillGoodsById(id));return mv;} } 2、前端展示 ①、在goodsList.js增加列的操作 {field: '', title: '操作', width: 140,templet: function (d) {return <div><a class="layui-btn layui-btn-xs layui-btn-danger">删除</a><a href="/seckillGoods/query/${d.id}" class="layui-btn layui-btn-xs layui-btn-normal">秒杀</a></div>;} } ②、添加秒杀详情界面：goodsSkill.ftl <!DOCTYPE html><html lang="en"><head><include "../common/head.ftl"/></head><body><table style="position: absolute;top:-10px;" class="layui-table" border="1" cellpadding="0" cellspacing="0"><tr><td style="width:120px;">商品图片</td><td><img src="${goods['goods_img']}" alt=""></td></tr><tr><td>商品名称</td><td>${goods['goods_name']}</td></tr><tr><td>商品标题</td><td>${goods['goods_title']}</td></tr><tr><td>商品价格</td><td>${goods['seckill_price']}</td></tr><tr><td>开始时间</td><td><div style="position: relative;${(goods['goods_status']==1)?string('top:10px;','')}">${goods['start_date']?string("yyyy-MM-dd HH:mm:ss")}-${goods['end_date']?string("yyyy-MM-dd HH:mm:ss")}<if goods['goods_status']==0>活动未开始<elseif goods['goods_status']==1>活动热卖中<div style="position:relative;top:-10px;float:right;"><input type="hidden" id="goodsId" value="${goods['goods_id']}" name="goodsId"/><button class="layui-btn" id="buy">立即抢购</button></div><else>活动已结束</if></div></td></tr></table><script src="/static/asset/js/project/goodsSeckill.js"></script></body></html> ③、实现：goodsSkill.js let layer, form, $;layui.define(() => {layer = layui.layerform = layui.form$ = layui.jquery$('buy').click(() => {$.ajax({url: '/seckillOrder/addOrder',data: {goodsId: $('goodsId').val()},dataType: 'json',type: 'post',async: false,success: function (rs) {if (rs.code === 200)layer.msg(rs.message)elselayer.msg(rs.message)} })});}) ④、展示效果点击秒杀： 3、后端操作秒杀抢购功能 ①、导入雪花id工具包：SnowFlake package com.example.seckill.util;@SuppressWarnings("all")public class SnowFlake {/ 起始的时间戳/private final static long START_STMP = 1480166465631L;/ 每一部分占用的位数/private final static long SEQUENCE_BIT = 12; //序列号占用的位数private final static long MACHINE_BIT = 5; //机器标识占用的位数private final static long DATACENTER_BIT = 5;//数据中心占用的位数/ 每一部分的最大值/private final static long MAX_DATACENTER_NUM = -1L ^ (-1L << DATACENTER_BIT);private final static long MAX_MACHINE_NUM = -1L ^ (-1L << MACHINE_BIT);private final static long MAX_SEQUENCE = -1L ^ (-1L << SEQUENCE_BIT);/ 每一部分向左的位移/private final static long MACHINE_LEFT = SEQUENCE_BIT;private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT;private final static long TIMESTMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT;private long datacenterId; //数据中心private long machineId; //机器标识private long sequence = 0L; //序列号private long lastStmp = -1L;//上一次时间戳public SnowFlake(long datacenterId, long machineId) {if (datacenterId > MAX_DATACENTER_NUM || datacenterId < 0) {throw new IllegalArgumentException("datacenterId can't be greater than MAX_DATACENTER_NUM or less than 0");}if (machineId > MAX_MACHINE_NUM || machineId < 0) {throw new IllegalArgumentException("machineId can't be greater than MAX_MACHINE_NUM or less than 0");}this.datacenterId = datacenterId;this.machineId = machineId;}public static void main(String[] args) {SnowFlake snowFlake = new SnowFlake(2, 3);long start = System.currentTimeMillis();for (int i = 0; i < 1000000; i++) {System.out.println(snowFlake.nextId());}System.out.println(System.currentTimeMillis() - start);}/ 产生下一个ID @return/public synchronized long nextId() {long currStmp = getNewstmp();if (currStmp < lastStmp) {throw new RuntimeException("Clock moved backwards. Refusing to generate id");}if (currStmp == lastStmp) {//相同毫秒内，序列号自增sequence = (sequence + 1) & MAX_SEQUENCE;//同一毫秒的序列数已经达到最大if (sequence == 0L) {currStmp = getNextMill();} } else {//不同毫秒内，序列号置为0sequence = 0L;}lastStmp = currStmp;return (currStmp - START_STMP) << TIMESTMP_LEFT //时间戳部分| datacenterId << DATACENTER_LEFT //数据中心部分| machineId << MACHINE_LEFT //机器标识部分| sequence; //序列号部分}private long getNextMill() {long mill = getNewstmp();while (mill <= lastStmp) {mill = getNewstmp();}return mill;}private long getNewstmp() {return System.currentTimeMillis();} } ②、service层 ISeckillOrderService ： package com.example.seckill.service;import com.example.seckill.pojo.SeckillOrder;import com.baomidou.mybatisplus.extension.service.IService;import com.example.seckill.pojo.User;import com.example.seckill.util.response.ResponseResult;/ <p> 秒杀订单信息表服务类 </p> @author lv @since 2022-03-19/public interface ISeckillOrderService extends IService<SeckillOrder> {ResponseResult<?> addOrder(Long goodsId, User user);} SeckillOrderServiceImpl ： package com.example.seckill.service.impl;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;import com.example.seckill.exception.BusinessException;import com.example.seckill.mapper.GoodsMapper;import com.example.seckill.mapper.OrderMapper;import com.example.seckill.mapper.SeckillGoodsMapper;import com.example.seckill.pojo.;import com.example.seckill.mapper.SeckillOrderMapper;import com.example.seckill.service.ISeckillOrderService;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.seckill.util.SnowFlake;import com.example.seckill.util.response.ResponseResult;import com.example.seckill.util.response.ResponseResultCode;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;/ <p> 秒杀订单信息表服务实现类 </p> @author lv @since 2022-03-19/@Servicepublic class SeckillOrderServiceImpl extends ServiceImpl<SeckillOrderMapper, SeckillOrder> implements ISeckillOrderService {@Autowiredprivate SeckillGoodsMapper seckillGoodsMapper;@Autowiredprivate GoodsMapper goodsMapper;@Autowiredprivate OrderMapper orderMapper;@Transactional(rollbackFor = Exception.class)@Overridepublic ResponseResult<?> addOrder(Long goodsId, User user) {// 下单前判断库存数SeckillGoods goods = seckillGoodsMapper.selectOne(new QueryWrapper<SeckillGoods>().eq("goods_id", goodsId));if (goods == null) {throw new BusinessException(ResponseResultCode.SECKILL_ORDER_ERROR);}if (goods.getStockCount() < 1) {throw new BusinessException(ResponseResultCode.SECKILL_ORDER_ERROR);}// 限购SeckillOrder one = this.getOne(new QueryWrapper<SeckillOrder>().eq("user_id", user.getId()).eq("goods_id", goodsId));if (one != null) {throw new BusinessException(ResponseResultCode.SECKILL_ORDER_EXISTS_ERROR);}// 库存减一int i = seckillGoodsMapper.update(null, new UpdateWrapper<SeckillGoods>().eq("goods_id", goodsId).setSql("stock_count=stock_count-1"));// 根据商品编号查询对应的商品（拿名字）Goods goodsInfo = goodsMapper.selectOne(new QueryWrapper<Goods>().eq("gid", goodsId));// 生成订单//生成雪花idSnowFlake snowFlake = new SnowFlake(5, 9);long id = snowFlake.nextId();//生成对应的订单Order normalOrder = new Order();normalOrder.setOid(id);normalOrder.setUserId(user.getId());normalOrder.setGoodsId(goodsId);normalOrder.setGoodsName(goodsInfo.getGoodsName());normalOrder.setGoodsCount(1);normalOrder.setGoodsPrice(goods.getSeckillPrice());orderMapper.insert(normalOrder);//生成秒杀订单SeckillOrder seckillOrder = new SeckillOrder();seckillOrder.setUserId(user.getId());seckillOrder.setOrderId(normalOrder.getOid());seckillOrder.setGoodsId(goodsId);this.save(seckillOrder);return ResponseResult.success();} } ③、controller层 SeckillOrderController ： package com.example.seckill.controller;import com.example.seckill.pojo.User;import com.example.seckill.service.ISeckillOrderService;import com.example.seckill.util.response.ResponseResult;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;/ <p> 秒杀订单信息表前端控制器 </p> @author lv @since 2022-03-19/@RestController@RequestMapping("/seckillOrder")public class SeckillOrderController {@Autowiredprivate ISeckillOrderService seckillOrderService;@RequestMapping("/addOrder")public ResponseResult<?> addOrder(Long goodsId, User user){return seckillOrderService.addOrder(goodsId,user);} } ④、呈现结果限购次数：本期内容结束，下期内容更完善！！！！！！！！！！！！！！！！！！！！！1 本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_60389087/article/details/123601288。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-02-25 23:20:34

121

转载

JQuery插件下载

在线生成css3背景渐变代码的jquery颜色选择器插件

...大的jQuery颜色选择器插件专为Web开发人员和设计师打造，它能够在线实时生成符合CSS3规范的背景渐变代码。用户通过直观的界面操作，可以自由调整颜色滑块以选取并过渡多种色彩，从而实现丰富的渐变效果。该插件的核心功能是将用户的视觉设计决策直接转化为可应用于网页元素的高质量样式代码。在实际使用中，只需简单集成到项目中，用户便能轻松交互，随意挑选心仪的颜色组合，并通过查看按钮预览所生成的完整CSS3背景渐变属性。这一特性极大地提升了设计与开发的工作效率，让创建动态、美观的渐变背景变得更加便捷与精准，同时也增强了网站的视觉吸引力和用户体验。点我下载文件大小：185.88 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-05-25 19:21:41

146

本站

JQuery插件下载

仿Facebook切换表情符号的jQuery插件

...并结合jQuery和CSS3过渡效果，使得表情符号的切换过程流畅自然。这款插件非常适合用于提升网站互动体验，例如在文章的评论区或者点赞功能中添加生动的表情符号选择器。用户可以通过点击或触摸来快速选择并插入表情符号，从而增强内容的表现力和趣味性。FaceMocion.js的设计简洁而高效，无需复杂的设置即可轻松集成到现有的项目中。你可以根据自己的需求自定义样式和布局，以匹配网站的整体风格。无论是个人博客还是大型社交媒体平台，FaceMocion.js都能为你提供出色的用户体验。总之，FaceMocion.js是一个强大且易于使用的jQuery插件，它将帮助你在网站上实现专业级的表情符号切换效果，让你的内容更加丰富多彩。点我下载文件大小：63.45 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-13 11:19:05

本站

JQuery插件下载

基于moment.js的jQuery日期选择器插件

...s的jQuery日期选择器插件是一款专为jQuery设计的时间选取工具，它利用了强大的时间处理库moment.js来增强日期和时间的操作能力。这款插件允许用户在网页中实现直观且功能丰富的日期选择体验，支持自定义日期范围、起始日期等多种配置选项。通过集成moment.js，插件能够高效地解析用户输入的日期格式，并进行有效验证与格式化输出，从而确保数据一致性。开发者可以根据项目需求选择使用ES5或ES6版本的插件代码，以适应不同环境下的JavaScript开发标准。在实际应用中，只需简单地在HTML文档中引入jQuery、moment.js以及该日期选择器所需的CSS和JS文件，然后通过调用DatePicker()方法初始化插件，即可轻松创建一个功能完备的日期选择界面，例如设置初始日期为当前日期：$('singleDateRange').DatePicker({startDate:moment()});总之，此插件结合了jQuery的良好DOM操作特性和moment.js的强大日期时间处理能力，提供了一种灵活易用且功能强大的解决方案，广泛适用于各种需要日期选择功能的Web应用程序中。点我下载文件大小：51.51 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-04-21 23:21:13

371

本站

JQuery插件下载

jQuery可选择日期范围的日期选择器插件

...大且高度可定制的日期选择器插件，专为需要在网页中嵌入日期范围选择功能的应用而设计。这款插件不仅能让用户轻松选择一个日期或时间段，还提供了丰富的自定义选项，使得开发者可以根据项目需求调整其外观和行为。通过简单的CSS定制，用户界面可以完美融入任何网站的设计风格。该插件的一大亮点是其出色的兼容性，不仅支持现代浏览器，而且对旧版IE浏览器（如IE6及以上版本）也提供了良好的支持，确保了广泛的用户群体都能无障碍地使用这一功能。无论是用于电子商务网站的商品筛选、日程管理应用的时间安排，还是旅游预订平台的日期选择，jQueryDateRangePicker都能提供流畅且直观的操作体验。此外，这款插件体积小巧，加载速度快，不会拖慢页面性能，非常适合在各类网站和Web应用中集成。它采用模块化设计，易于扩展和维护，方便开发者根据具体需求添加或修改功能。无论是个人项目还是企业级应用，jQueryDateRangePicker都是提升用户体验、简化开发流程的理想选择。点我下载文件大小：70.63 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-12-02 20:40:51

本站

JQuery插件下载

jQuery超酷扁平风格元素3D翻转动画特效

...入框，还是创新的颜色选择器和通知组件，如警告和提示框，TURNBOX都能轻松地赋予它们三维立体感，仿佛这些元素从二维平面中跃然而出。通过其智能化的动画设计，TURNBOX不仅增强了用户界面的趣味性，还提升了用户的操作直观性。用户可以通过简单的API调用来定制翻转速度、触发条件等参数，确保动画既符合品牌形象，又能流畅自然。得益于CSS3和jQuery的强大结合，TURNBOX兼容现代主流浏览器，包括Safari、Chrome和Firefox，为用户提供一致且惊艳的视觉效果。总的来说，TURNBOX是一款实用而富有创意的工具，帮助设计师和开发者在扁平化设计潮流中添加生动的动态元素，提升网站的用户体验和整体设计水平。点我下载文件大小：105.79 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-06-11 20:47:11

377

本站

JQuery插件下载

迷你型jQuery颜色选择器插件

...级的jQuery颜色选择器插件，专为提升网页开发者的用户体验而设计。这款插件以其小巧的体积著称，即使在资源受限的环境中也能高效运行。它的设计简洁直观，易于集成到各种项目中，无论是Bootstrap3.0框架的应用还是独立的jQuery项目，都能无缝对接。对于Bootstrap用户而言，MiniColors不仅与之兼容，还能增强其UI组件的视觉一致性，使颜色选择过程更加直观和一致。开发者无需担心过多的CSS冲突，因为它能优雅地嵌入到现有的代码结构中。使用MiniColors，用户可以选择颜色时享受到平滑的动画效果和清晰的界面，无需复杂的配置即可实现颜色值的实时反馈和应用。此外，由于其基础性，它也适用于那些需要快速添加颜色选择功能，但不想引入庞大库的场景。无论你是前端新手还是经验丰富的开发者，MiniColors都是一个值得考虑的高效工具，它能简化颜色选择的流程，提升网站或应用的交互性和吸引力。通过简单的初始化方法，如$('INPUT.minicolors').minicolors(settings);，就能在几分钟内为你的项目增添色彩功能。点我下载文件大小：122.06 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-04-07 13:19:34

305

本站

JQuery插件下载

Tabulator-基于jQuery UI的实用表格插件

...别的表格。无需额外的CSS样式或图片资源，这意味着集成Tabulator到项目中更为便捷，节省了设计师的工作量。它的灵活性使得它能够适应各种场景，无论是需要动态加载的数据还是静态配置，都能轻松应对。对于开发者而言，Tabulator提供了丰富的配置选项，允许定制列宽、排序、过滤以及交互式功能，从而实现高度可定制化的用户体验。此外，作为jQueryUI的一部分，Tabulator无缝集成到了常见的UI组件库中，提供了良好的交互性和一致性。这使得开发者能够利用jQueryUI的其他功能，如拖放排序或日期选择器，与表格功能相结合，构建出功能完善且美观的应用界面。总结来说，Tabulator是一款强大的工具，帮助开发者快速创建专业级的表格，并以直观的方式管理数据，提升了网站或应用的视觉呈现和功能性。无论你是前端新手还是经验丰富的开发人员，这款插件都能简化你的工作流程并提升项目的整体质量。点我下载文件大小：285.05 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-04-14 08:17:07

314

本站

JQuery插件下载

基于Bootstrap的炫酷jQuery slider插件

...项目中只需引入相应的CSS和JS文件后即可开始调用。值得注意的是，尽管名为jQuery插件，但它同时支持纯JavaScript方式的操作，确保了更广泛的兼容性和灵活性。此bootstrap-slider插件专注于现代浏览器的优化体验，不支持IE9及以下版本，确保在最新及主流浏览器上能够展现出流畅且美观的交互效果。无论是在产品配置界面、数据过滤模块还是多媒体播放器中，这款插件都能为用户提供直观且具有吸引力的滑动交互体验。"总结起来，这款BootstrapjQuery滑块插件是一个功能强大且极具视觉吸引力的选择，旨在帮助开发者快速构建出既实用又符合现代审美的滑动选择器组件。点我下载文件大小：67.11 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-08-17 09:31:34

113

本站

JQuery

jquery按属性获取元素

...域中，jQuery的选择器功能强大且高效，对于根据元素属性定位DOM元素具有重要意义。随着技术的发展，原生JavaScript也在不断提升对DOM操作的便利性。例如，现代浏览器已经实现了querySelectorAll方法，它允许开发者直接通过CSS选择器选取元素，包括基于属性的选择器。近期，Web Components和Shadow DOM的广泛应用也为DOM元素的获取与操作提供了新的思路。Shadow DOM允许开发者封装组件内部结构和样式，通过其提供的shadowRoot接口，可以更精准地定位到组件内部特定属性的元素。另外，在前端框架如React、Vue.js中，它们采用虚拟DOM技术来优化元素操作性能，虽然查询元素的方式与jQuery有所不同，但同样支持属性选择器式的逻辑，比如在React中可以通过refs或context API结合useState、useRef等 hooks 来实现类似功能。同时，无障碍性（Accessibility）的重要性日益凸显，开发者在根据元素属性获取元素时，不仅要考虑技术实现，还要关注是否符合WCAG 2.1等无障碍标准，确保所有用户都能顺畅地与页面交互。总的来说，无论是在jQuery还是原生JavaScript，乃至现代前端框架中，依据元素属性获取元素都是一个核心且常青的话题。随着Web技术的日新月异，我们应当持续关注和学习最新的DOM操作方法，以提升用户体验和开发效率。

2023-07-19 14:26:01

372

编程狂人

CSS

css样式选择器优先级

CSS格式选择器重要性是CSS格式表中一个重要的观念，它确定了当多个格式应用于同一个组件时哪个格式将被应用。当有多个格式同时应用于同一个组件时，这些格式将根据它们的重要性进行排列，重要性高的格式将取代重要性低的格式。重要性的计算规则如下： 1. 使用!important定义的格式重要性最高，无法被取代。 2. 根据选择器的类型、ID特性、类特性和组件名依次计算，每多出一个ID特性或类特性，重要性加100，每多出一个组件名，重要性加10，选择器类型不计算重要性。 3. 当多个选择器重要性相同时，后定义的格式将取代先定义的格式。例如，以下CSS代码中有两个格式应用于同一个组件： p { color: red; font-size: 14px; } content p { color: blue; } 其中第一个格式选择器为p，第二个格式选择器为content p。由于第二个格式选择器中包含了ID特性，因此它的重要性比第一个格式选择器高100，即总重要性为101。因此在应用格式时，组件的文字颜色为蓝色。需要注意的是，CSS格式选择器的重要性只确定了格式的应用顺序，不代表效果的重要性。在编写CSS格式表时，应根据页面需求和设计风格合理使用格式，而不是纠结于重要性的细节。

2023-11-06 08:37:41

535

键盘勇士

CSS

css水平线长度设置

...网页设计与开发领域，CSS对于元素的样式控制至关重要。水平线作为分割内容区块、优化页面布局的重要工具，在实际项目中扮演着提升用户体验的角色。深入理解并灵活运用CSS对hr元素长度设置的各种方法，可以帮助开发者更好地实现响应式设计和自适应布局。近日，随着CSS Grid布局和Flexbox布局的广泛应用，设计师们在处理水平线长度问题时有了更多创新和高效的解决方案。例如，通过Grid布局可以轻松实现复杂且动态的分割效果，而Flexbox则能够帮助我们更精确地控制hr元素在不同屏幕尺寸下的展现形式。此外，W3C规范的不断更新也提供了更多关于hr元素的新特性支持。例如，新增的“:where”伪类选择器以及CSS Logical Properties and Values Level 1规范中的逻辑属性（如inset-inline-start），为hr元素的长度及位置控制带来了更多可能性。因此，作为前端开发者，在关注基础的水平线长度设置技巧的同时，紧跟最新CSS标准和技术趋势，将有助于构建更为优雅、易读且具有优秀适应性的现代网页界面。同时，结合A11Y（无障碍访问）原则进行设计，确保水平线不仅在视觉上美观，也能在功能性和可访问性上满足所有用户的需求。

2023-02-11 22:13:41

497

码农

JQuery

jquery找到以i开头id

...如何使用jQuery选择器定位以特定字符开头的ID元素后，进一步探究现代前端开发中DOM操作和选择器的最新趋势与发展是十分有益的。例如，随着JavaScript语言的持续进化和Web API的丰富，原生JavaScript的选择器性能也在不断提升。目前，querySelectorAll方法在很多情况下可以替代jQuery的选择器功能，它允许开发者根据CSS选择器查找并返回页面上的元素集合。近期，一项由MDN Web Docs发起的研究表明，对于简单的DOM查询与操作，原生JavaScript在速度上已经不逊于甚至超越了许多流行的库（如jQuery），这鼓励更多开发者回归原生API以优化性能。同时，诸如Sizzle等独立的选择器引擎项目，不仅为jQuery提供支持，也能被其他库或框架集成，提高了跨平台和跨项目的兼容性及效率。此外，考虑到现代浏览器对ES6及以上版本特性的广泛支持，如箭头函数、let/const声明以及模板字符串等，使得直接使用JavaScript进行DOM操作更为简洁高效。例如，利用“Node.matches()”方法配合CSS选择器，可以实现与jQuery类似的元素筛选功能，且具备良好的浏览器兼容性。综上所述，尽管jQuery在简化DOM操作方面曾发挥巨大作用，但随着JavaScript生态的发展，理解和掌握原生API及其最佳实践已成为现代前端开发者的重要技能之一。了解和对比不同选择器方案的优缺点，并结合实际应用场景灵活运用，有助于我们构建更为快速、轻量级的Web应用。

2023-06-13 17:39:52

322

软件工程师

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

du -sh * - 在当前目录下查看所有文件和目录的大致大小。