jquery foreach循环—jquery的循环 收藏 0

day58：bootstrap框架

当给一个本身就带有事件的标签绑定事件时，需要先阻止那个标签的原生事件，不然会容易产生BUG。

阻止后续事件执行

事件冒泡是指在DOM中，当一个特定元素上发生某个事件时，如果该元素有父元素，那么父元素也会接收到相同的事件。接着，如果父元素上也有相同类型的事件监听器，那么它也会被触发。这个过程会一直向上传播，直到到达DOM树的根节点。

举个例子，假设有一个按钮元素嵌套在一个具有点击事件监听器的父元素中。当点击按钮时，按钮会触发点击事件，并且父元素也会接收到相同的点击事件。这种事件向上传播的过程就称为事件冒泡。

在jQuery中，`event.stopPropagation()`和`return false`在阻止事件冒泡上的表现是相似的。它们都阻止了事件进一步冒泡到其父元素和祖先元素。但是，`return false`做得更多一些。

– `event.stopPropagation()`: 这个方法阻止事件向上冒泡到父元素，防止任何父事件处理器被执行。

– `return false`：在jQuery中，返回`false`会做两件事情——调用`event.stopPropagation()`和`event.preventDefault()`。这意味着它不仅阻止了事件冒泡，而且还阻止了事件的默认行为。

这就是它们的主要区别。如果你只想阻止事件冒泡，而不想阻止默认行为，那么你应该使用`event.stopPropagation()`。如果你想同时做这两件事，那么可以返回`false`。

例如，对于一个链接元素，你可能只想阻止点击事件冒泡，而不想阻止链接的默认行为（导航到另一个页面）。在这种情况下，你应该使用`event.stopPropagation()`而不是`return false`。

事件委托（Event delegation）是一种常见的JavaScript编程模式，用于处理动态添加或删除的元素上的事件。

传统的事件绑定方式是直接在目标元素上绑定事件处理器，例如：

但是，如果在页面上有大量的元素需要绑定事件，或者在运行时动态添加/删除元素，这种方式会变得非常繁琐和低效。

事件委托通过将事件处理器绑定到它们共同的父级元素上，利用事件冒泡的特性，来处理它们的事件。这样，无论添加或删除了多少个子元素，只需要一个事件处理器就能处理它们的事件。

在这个例子中，我们将事件处理器绑定到.parent-element上，并通过检查event.target来判断是否点击了.button元素。这样，无论.button元素是在何时何处添加或删除，都可以正确处理它们的点击事件。

on方法也可以监听事件

addEventListener 和 on 都是用于添加事件监听器的方法，但它们有一些区别。

1. 语法：addEventListener 使用传统的方法调用语法，而 on 是以属性的形式使用。
2. 多个监听器：使用 addEventListener 可以为同一个元素的同一个事件类型添加多个监听器，而使用 on 只能添加一个监听器。如果使用 on 添加多个监听器，后面添加的会覆盖前面的监听器。
3. 移除监听器：使用 addEventListener 添加的监听器可以使用 removeEventListener 方法进行移除，而使用 on 添加的监听器无法直接移除，需要将事件属性设置为 null 或通过其他方式解除绑定。
4. 兼容性：addEventListener 是标准的 DOM Level 2 事件模型方法，具有更好的兼容性，而 on 是旧版的事件处理方式，在部分场景中可能存在兼容性问题。

jQuery中的几种动画效果

在jQuery中，each()方法用于迭代集合中的元素。它类似于JavaScript中的forEach()方法，但可以直接应用于jQuery对象。

以下是使用each()方法的示例：

在上述示例中，each()方法接受两个参数：回调函数和可选的上下文对象。回调函数接受两个参数：索引（或键）和元素（或值）。通过使用$(element)将DOM元素转换为jQuery对象，可以方便地访问元素的属性和方法。

一个参数是索引，如果再加一个的话会显示标签对象

data能够让标签临时帮我们存储数据 并且用户肉眼看不见

在前端开发中，data()方法是jQuery库提供的一个函数，用于在HTML元素上存储和检索数据。它允许开发者将自定义数据附加到特定的HTML元素上，并在需要时轻松地访问这些数据。

使用data()方法的一般语法如下：

• selector：表示要应用data()方法的HTML元素的选择器。
• key：表示要存储的数据的键名。
• value：表示要存储的数据的值。

以下是使用data()方法的几种常见方式：

1. 存储和检索数据：

1. 存储和检索对象数据：

1. 使用对象存储多个数据：

通过使用data()方法，您可以轻松地将自定义数据附加到HTML元素上，并在需要时检索和使用它们。这对于存储临时状态、配置选项等非常有用。

Bootstrap是一个流行的开源前端框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的CSS和JavaScript组件。

使用Bootstrap可以快速搭建现代化和美观的用户界面，无需从头开始编写大量的CSS和JavaScript代码。它提供了许多经过测试和常用的组件，如导航栏、按钮、表单、模态框等，可以通过简单的HTML和CSS类来使用和定制。

以下是使用Bootstrap的一般步骤：

1. 引入Bootstrap文件：在HTML文档中，使用<link>标签引入Bootstrap的CSS文件和<script>标签引入Bootstrap的JavaScript文件。可以选择使用CDN链接或从本地文件引入。

1. 使用Bootstrap的组件：通过在HTML中添加相应的CSS类来使用Bootstrap的各种组件。例如，使用<button>元素和btn类创建一个按钮：

1. 根据需要进行自定义：Bootstrap还提供了许多自定义选项，可以使用这些选项来定制组件的外观和行为。具体的自定义方法可以在Bootstrap的官方文档中找到。

注意：bootstrap的js代码是依赖于jquery的，也就意味着你在使用bootstrap的动态效果时一定要导入jQuery

在使用bootstrap时，可以使用\”.container\”和\”container-fluid\”，来为页面布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

媒体查询（Media Queries）是CSS3中引入的一种功能，用于根据设备的属性和特征来应用不同的样式规则。通过媒体查询，我们可以根据设备的屏幕宽度、高度、分辨率、方向等属性，为不同的设备提供不同的样式。

媒体查询可以帮助我们创建响应式的网站和应用程序，使其能够在不同的设备上正确显示和适应布局。通过使用媒体查询，我们可以根据设备的特征选择性地加载或应用不同的CSS规则，从而为用户提供最佳的用户体验。

以下是一个使用媒体查询的示例：

在上面的示例中，我们使用@media关键字定义了三个媒体查询，分别根据屏幕宽度应用不同的背景颜色样式。当屏幕宽度小于等于600px时，背景颜色为黄色；当屏幕宽度在601px到1200px之间时，背景颜色为绿色；当屏幕宽度大于1200px时，背景颜色为蓝色。

在bootstrap中可以使用栅格参数来实现响应式布局：

直接在类中添加这些类前缀即可

针对不同的显示器，bootstrap会自动选择相应的参数，如果想兼容所有，那么直接把所有类都添加进去即可。

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类会将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

bootstrap会自动把html的原生标签设置成肉眼可以接受的样子。

只需要会操作类就可以了。需要用时，可以到官网去抄。

为任意 <table> 标签添加 .table 类既可以为其赋予基本的样式。

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

通过这些状态类可以为行或单元格设置颜色。

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

在 Bootstrap 中，class=\”btn btn-default\” 是用于创建一个默认的按钮样式。

具体来说，class=\”btn\” 是 Bootstrap 中的按钮样式类，用于定义按钮的基本样式。而 class=\”btn-default\” 是按钮的变体类，用于定义默认的按钮样式。

使用 class=\”btn btn-default\” 可以将一个元素渲染为带有默认样式的按钮，具有与 Bootstrap 中预定义的按钮样式相匹配的外观和交互效果。

效果：可以添加图标

使用方法：用span标签，字多大，图标就多大，而且可以按照文本的方式操作，比如改颜色类的。

有很多样式的标签，需要的话可以去官网找。如果不够用的话可以去fontawesome.com.cn去找。使用的话要下载然后导入。

使用的时候直接找到相应的图标然后复制粘贴就可以了。

GoQuery – Go语言的jQuery

习惯了使用 jQuery 的 $(…) 语法来查询和操作 DOM 元素，那换种语言，用 Go 语言该怎么实现呢？来看看 goquery 吧！

HTML网页DOM树

goquery，是 github 上 PuerkitoBio 开源的 Go 语言库，代码仓库在 https://github.com/PuerkitoBio/goquery。goquery 是一个用于查询和操作 DOM 元素的库，并采用了尽可能与 jQuery 相似的语法，以降低学习难度和使用门槛。

Go语言

goquery 需要 Go 1.1 以上版本，使用 go get 直接安装：

目前的版本为 v1.5.1，依赖包括 net/html 和 CSS 选择器 cascadia。

goquery 主要使用了两个结构体 Document (文档) 和 Selection (选择)。Document 代表了一个解析之后的 HTML 文档，而 Selection 则代表了进行查询后得到的 DOM 结点集合。Document 的定义中嵌入了 Selection，故而 Document 可使用 Selection 的方法。

下面给出一个 goquery 的使用例子：

该例子对一个新闻类网站进行了解析，并获取每一条新闻的标题等文本信息。

我们首先使用 net/http 进行 HTTP 请求，得到目标网站的响应。然后，使用了goquery 的 NewDocumentFromReader 来从响应读取并解析得到一个 HTML 文档。NewDocumentFromReader 是这样定义的：

然后，使用 Selection 的 Find 方法进行查找，返回查询结果，对应 jQuery 中的 find 函数：

对于结果集合，使用 Selection 的 Each 方法进行遍历，对应 jQuery 中的 each 函数：

对于遍历的每一项，再次使用 Find 查找子元素，并利用 Text 方法获得元素的文本，对应 jQuery 的 text 函数：

goquery 使用 Go 语言实现了与 jQuery 尽可能相似的查询和操作语法，包括 CSS 选择语法和绝大部分的操作函数，方便熟悉 jQuery 的 Go 语言开发人员快速完成 HTML 文档的解析和查询操作。

goquery库方便了 Go 语言进行网页抓取和解析的工作，使得Go语言在该领域有了门槛较低、使用方便的工具。

goquery库目前已经历了数年的开发，代码质量较高，注释丰富，值得研究学习。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com