Ⅰ jQuery引入

【一】什么是jQuery

【1】概述

• jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
• jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

【2】小结

• jQuery内部封装了原生的js代码
  • 核心代码也就几十KB 加载速度快 极大的提升编写效率
• 能够通过书写更少的代码，完成js操作，类似于Python中的模块
• 前端叫 “类库”
• 兼容多个浏览器
  • IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
• 宗旨
  • "Write less, do more."
• Ajax交互
  • 异步提交 局部刷新(django部分再学)

【二】导入模块

【1】Python当中导入模块发生了哪些事？

• 导入模块其实需要消耗资源
• 在Python中，导入模块可以分为两个阶段：编译阶段和运行阶段。

（1）编译阶段

• 在编译阶段，Python解释器会扫描并分析源代码，将导入语句转换为相应的字节码指令。
• 这些指令会被存储在编译后的.pyc文件中，以便在之后的运行阶段使用。

（2）运行阶段

• 在运行阶段，当执行到导入模块的语句时，Python会按照以下步骤进行模块的导入：
  • 搜索模块
    • 解释器首先会搜索模块是否已经加载到内存中。
    • 如果是内置模块，则直接使用；如果是标准库或第三方库，会按照一定的搜索路径进行查找。
  • 编译模块
    • 如果模块没有被加载到内存中，则解释器会在硬盘上找到对应的.py文件，并将其编译成字节码文件（.pyc）。
    • 编译后的字节码文件包含了模块的定义、函数、类等信息。
  • 创建模块命名空间
    • 解释器创建一个新的命名空间来存放模块中的变量、函数和类等。
    • 模块中的全局变量会成为该命名空间的属性。
  • 执行模块代码
    • 解释器开始执行模块的字节码指令，逐行解释并执行模块中的代码。
    • 这会导入模块中定义的函数、类和全局变量等。
  • 返回模块对象
    • 当模块中的代码执行完毕后，解释器返回一个表示该模块的模块对象。
    • 可以通过该对象访问模块中定义的内容。

（3）总结

• 总结起来，导入模块时，Python解释器会搜索、编译、执行模块的代码，并创建一个命名空间来存放模块中的变量和函数。
• 这样，我们就可以在当前代码中使用模块中定义的功能了。

【2】jQuery中导入类库发生了哪些事？

• 它的文件非常小（几十kb），基本不影响网络速度
• 在jQuery中导入类库（也称为插件）可以通过以下步骤完成

（1）获取类库文件

• 首先需要获取所需的类库文件（通常是一个 JavaScript 文件），可以从官方网站或其他来源下载得到。

（2）导入类库文件

• 将类库文件保存在项目目录中，并在 HTML 文件中使用< script>标签来导入类库文件。
• 在< script>标签中，使用src属性指定类库文件的路径，让浏览器能够加载并执行该文件

<script src="path/to/jquery.js"></script>
<script src="path/to/plugin.js"></script>

这样，当浏览器解析到这两个< script>标签时，就会下载并执行对应的类库文件。

（3）使用类库功能

• 一旦类库文件被加载和执行，就可以使用其中提供的功能了。
• 通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。

$(document).ready(function() {
  // 在文档加载完成后执行一些代码
  // 使用类库提供的函数或方法
});

• 上述代码示例中，$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。

【三】jQuery的优势

【1】详细

（1）简化DOM操作：

• jQuery提供了强大且简洁的API，使得对DOM元素的选择、遍历和操作变得更加容易。
• 通过使用jQuery，可以通过简洁的语法实现复杂的DOM操作，减少编写冗长代码的工作量。

（2）跨浏览器兼容性

• jQuery解决了不同浏览器之间的兼容性问题。
• 它封装了一致的API，使得开发人员能够编写跨浏览器兼容的代码，无需关注各种细节和差异。

（3）丰富的插件生态系统：

• jQuery拥有庞大的插件生态系统，涵盖了各种功能和特性，如动画效果、表单验证、图像轮播等。
• 这些插件可以大幅度提高开发效率，让开发人员能够快速实现复杂的功能。

（4）AJAX支持

• jQuery对AJAX进行了封装，使得在Web应用中进行异步请求变得更加简单。
• 通过使用jQuery的AJAX API，可以轻松地发送AJAX请求、处理响应和更新页面内容，实现更好的用户体验。

（5）动画效果

• jQuery提供了丰富的动画效果和过渡效果，可以轻松地实现元素的淡入淡出、滑动、展开收起等动画效果，给网页增添了交互和生动性。

（6）扩展性与可定制性

• jQuery允许开发人员根据自己的需求进行定制和扩展。
• 开发人员可以自定义插件，编写自己的jQuery代码，并且可以根据项目需求选择只导入所需的模块，减小文件体积。

【2】小结

（1）一款轻量级的JS框架。

• jQuery核心js文件才几十kb，不会影响页面加载速度。

（2）丰富的DOM选择器

• jQuery的选择器用起来很方便
• 比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

（3）链式表达式

• jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

（4）事件、样式、动画支持

• jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

（5）Ajax操作支持

• jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

（6）跨浏览器兼容

• jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

（7）插件扩展开发

• jQuery有着丰富的第三方的插件
  • 例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

【四】jQuery学习内容

【1】概述

• 选择器
• 筛选器
• 样式操作
• 文本操作
• 属性操作
• 文档处理
• 事件
• 动画效果
• 插件
• each、data、Ajax

【2】下载链接

• jQuery官网

【3】中文文档

• jQuery AP中文文档

【五】jQuery的版本

【1】1.x

• 兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。
• 因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

【2】2.x：

• 不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。
• 如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

【3】3.x：

• 不兼容IE678，只支持最新的浏览器。
• 需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

【六】jQuery配置

【1】settings设置模板

• 文件下载到本地
  • 借助于pycharm自带的模板功能
• settings
  • Editor
  • File and Code Templates

【2】基于网络分发(CDN)

（1）官网

• 直接引入jQuery提供的CDN服务(基于网络请求加载)

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

（2）压缩

• 如果 URL 结尾含有 min、compressed、gz 或 .gzipped 等词汇及其对应后缀，如 .min.js、.gz.css 等，则可能是指向已压缩的文件。
• 后缀名区分是否已压缩

没有经过压缩的源代码 ---> 体积比较大

• 未压缩：https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js

经过压缩后的文件 ---> 体积比较小

• 已压缩：https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js

• 缺点

• 必须联网

本地环境建议使用 本地文件 而不是基于网络的CDN连接

【七】引入方式

【1】方式一

// 打开 bootcdn ---> jQuery ---> 复制 script 标签 -->   https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js
// 将 script 标签添加到 head 标签内部
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

【2】方式二

直接浏览器访问  https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js
会看到很多的代码
ctrl + a 全选选中所有代码 ctrl + c
打开本地的一个 js 文件 ctrl + v 复制进去
在head 标签中引入 script 标签引入外部 js 文件
<script src="jquery.js"></script>

【八】 前端基础jQuery之引入

【1】jQuery基本语法

（1）基本语法

jQuery(选择器).action()

（2）简写

• 秉承jQuery宗旨，jQuery 简写成 $

jQuery(选择器) ---->  $(选择器)

【2】jQuery与原生JS代码比较

• 将P标签内部的文本颜色改成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>

<p id="d1">桃花坞里桃花庵</p>
<p id="d2">桃花庵下桃花仙</p>

<script>

    // 原生js代码
    // let d1Ele = document.getElementById("d1");
    // let d2Ele = document.getElementById("d2");
    //
    // d1Ele.style.color = "red"
    // d2Ele.style.color = "green"

    // jQuery
    $('#d1').css('color','red').next().css('color','green')



</script>


</body>
</html>

Ⅱ 基本选择器和关系选择器

【一】基本选择器

• jQuery是一个流行的JavaScript库，它提供了便捷的方法来选择和操作HTML元素。

【1】元素选择器（Element Selector）

• 使用元素名称作为选择器，选取所有匹配该元素名称的元素。
• 示例：选择所有段落元素

$('p');

【2】ID选择器（ID Selector）

• 使用ID属性值作为选择器，选取具有相同ID的唯一元素。
• 示例：选择具有 "myElement" ID的元素

$('#myElement');

【3】类选择器（Class Selector）

• 使用类名作为选择器，选取具有相同类名的元素。
• 示例：选择所有具有 "myClass" 类的元素

$('.myClass');

【4】属性选择器（Attribute Selector）

• 使用元素的属性和属性值进行选择。
• 示例：选择所有具有 "target" 属性的元素

$('[target]');

• 示例：选择具有 "href" 属性值以 "https://" 开头的所有链接

$('a[href^="https://"]');

【5】代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>-->
    <!-- 在加载 head 标签的时候就要提前将 jQuery 文件引入   -->
    <script src="jquery.js"></script>
</head>
<body>
<button class="button_class" id="button_id">按钮</button>
<button class="button_class" id="button_id_one">按钮</button>
<script>
    // 写 js 代码
    // 【一】class 选择器
    // 【1】DOM操作
    let buttonEleClassDom = document.getElementsByClassName("button_class")[0]
    // 【2】jq操作
    let buttonEleClassJq = $(".button_class")
    // 【二】ID选择器
    // 【1】DOM操作
    let buttonEleIdDom = document.getElementById("button_id")
    // 【2】jq操作
    let buttonEleIdJq = $("#button_id")
    // 【三】标签选择器
    // 【1】DOM操作
    let buttonEleTagNameDom = document.getElementsByTagName("button")
    // 【2】jq操作
    let buttonEleTagNameJq = $("button")
    // 【四】属性选择器
    // 【1】DOM操作 没有
    // 【2】jq操作
    let buttonEleTypeJq = $("[id]")
    let buttonEleTypeOneJq = $("[id='button_id']")
    let buttonEleTypeTwoJq = $("button[id='button_id']")
    // 【五】组合选择器 --- 和css语法一致 ,
    // 【六】关系选择器 --- 和css语法一致 空格 + > ~
</script>
</body>
</html>

【二】关系选择器

【1】选择器组合（Multiple Selectors）

• 通过逗号分隔多个选择器，同时选择多个元素。
• 示例：选择所有段落元素和具有 "myClass" 类的元素

$('p, .myClass');

【2】后代选择器（Descendant Selector）

• 选择某个元素的后代元素。
• 示例：选择所有 "myElement" 元素内的段落元素

$('#myElement p');

【3】子元素选择器（Child Selector）

• 选择某个元素的直接子元素。
• 示例：选择所有 "myElement" 元素的直接子元素中的段落元素

$('#myElement > p');

【4】下一个兄弟元素选择器（Next Adjacent Selector）

• 选择紧接在指定元素后的下一个兄弟元素。
• 示例：选择紧接在 "myElement" 元素后的下一个兄弟元素

$('#myElement + div');

【5】后续所有兄弟元素选择器（Following Siblings Selector）

• 选择指定元素之后的所有兄弟元素。
• 示例：选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素

$('#myElement ~ .myClass');

【6】代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>

<span>span1</span>
<span>span2</span>

<div id="d1">div
    <span>
        div>span1
    </span>
    <p id="d2">div>p
        <span>
            div>p>span
        </span>
    </p>
    <span>
        div>span2
    </span>
</div>

<span>span-1</span>
<span>span-2</span>

<script>
    // 取 div 标签
    $("div")
    // S.fn.init(2) [div#d1, div.d2, prevObject: S.fn.init(1)]

    // 取 id为d1的div标签
    $('div#d1')
    // S.fn.init [div#d1, prevObject: S.fn.init(1)]

    // 选择 id 为d1 的标签 + class 为 p1 的标签 以及 p标签
    $('#d1, .p1 , p')
    $('#d1, .p1 ')
    // S.fn.init(2) [div#d1, p#p1, prevObject: S.fn.init(1)]

    // 获取到 div 标签下的所有span标签
    $('div span')
    // S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]

    // 之获取 div 标前下的儿子标签
    $('div > span')
    // S.fn.init(2) [span, span, prevObject: S.fn.init(1)]

    // div 标签同级下的 后面的 第一个标签
    $('div+span')
    // S.fn.init [span, prevObject: S.fn.init(1)]

    // div 标签同级下的 后面的 所有span标签
    $('div~span')
    // S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
</script>
</body>
</html>

Ⅲ 组合选择器，分组与嵌套

【一】 组合选择器

• 在jQuery中，"组合选择器"是一种使用多个选择器来选择元素的方法。通过组合不同的选择器，可以更精确地选取需要的元素。

【1】并集选择器（Union Selector）

• 使用逗号分隔，可以同时选择多个选择器所匹配的所有元素。
• 例如：$("selector1, selector2")

【2】后代选择器（Descendant Selector）

• 选择某个元素的后代元素。
• 例如：$("parent descendant")

【3】子元素选择器（Child Selector）

• 选择某个元素的直接子元素。
• 例如：$("parent > child")

【4】相邻兄弟选择器（Adjacent Sibling Selector）

• 选择某个元素的下一个相邻兄弟元素。
• 例如：$("element + sibling")

【5】兄弟选择器（General Sibling Selector）

• 选择某个元素之后的所有兄弟元素。
• 例如：$("element ~ siblings")

【6】过滤选择器（Filter Selector）

• 根据特定的条件过滤选取元素。
• 例如：$("selector").filter(condition)

【二】分组与嵌套

在jQuery中，"分组"和"嵌套"也是常见的用法，用于选择和操作DOM元素。

【1】分组（Grouping）

• 使用逗号将多个选择器组合在一起，可以同时选择匹配这些选择器的所有元素。
• 例如：

$('.selector1, .selector2').doSomething();

• 通过分组选择器，可以在一个操作中同时对多个元素进行相同的操作。

【2】嵌套（Nesting）

• 在一个选择器内部嵌套另一个选择器，用于表示某个选择器的子元素或特定关系的元素。
• 例如：

$('parent').find('.child').doSomething();

• 通过嵌套选择器，可以在指定的父元素下选择特定的子元素进行操作。
• 嵌套选择器在jQuery中非常有用，可以通过链式调用来实现更复杂的选择和操作。
• 例如：

$('parent')
  .find('.child')
  .filter('.special')
  .doSomething();

• 上述代码首先选择父元素
• 然后在父元素下找到特定的子元素
• 并进一步筛选出特定的具有".special"类名的元素
• 最后对这些元素执行相应的操作。

Ⅳ 基本筛选器

• jQuery提供了许多基本筛选器，其中包括十三个常用的基本筛选器。
• 下面是这些基本筛选器的详细介绍：

【一】:first

• 选择第一个匹配元素。

【二】:last

• 选择最后一个匹配元素。

【三】:even

• 选择索引为偶数的匹配元素（索引从开始）。

【四】:odd

• 选择索引为奇数的匹配元素（索引从开始）。

【五】:eq(index)

• 选择索引为指定值index的元素（索引从开始）。

【六】:gt(index)

• 选择索引大于指定值index的元素（索引从开始）。

【七】:lt(index)

• 选择索引小于指定值index的元素（索引从开始）。

【八】:header

• 选择所有标题元素（例如h1、h2等）。

【九】:animated

• 选择当前正在执行动画的元素。

【十】:focus

• 选择当前获得焦点的元素。

【十一】:contains(text)

• 选择包含指定文本text的元素。

【十二】:empty

• 选择没有子元素或文本的空元素。

【十三】:parent

• 选择有子元素或文本的元素。

可以使用:even筛选器选择表格中的偶数行，并使用:contains筛选器选择包含特定文本的元素。

【十四】代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>

<span>span1</span>
<span>span2</span>

<div id="d1">div
    <span>
        div>span1
    </span>
    <p id="d2">div>p
        <span>
            div>p>span
        </span>
    </p>
    <span>
        div>span2
    </span>
</div>

<span>span-1</span>
<span>span-2</span>

<script>
    // 【一】 :first 匹配第一个元素
    $("span")
    $("span:first")

    // 【二】:last 匹配最后一个元素
    $("span:last")

    // 【3】:even
    // ● 选择索引为偶数的匹配元素（索引从开始）。
     $("span:even")

    // 【4】:odd
    // ● 选择索引为奇数的匹配元素（索引从开始）。
    $("span:odd")

    // 【5】:eq(index)
    // ● 选择索引为指定值index的元素（索引从开始）。
    $("span:eq(5)")

    // 【6】:gt(index)
    // ● 选择索引大于指定值index的元素（索引从开始）。
    $("span:gt(5)")

    // 【7】:lt(index)
    // ● 选择索引小于指定值index的元素（索引从开始）。
    $("span:lt(5)")

    // 【8】:header
    // ● 选择所有标题元素（例如h1、h2等）。

    // 【9】:animated
    // ● 选择当前正在执行动画的元素。

    // 【10】:focus
    // ● 选择当前获得焦点的元素。

    // 【11】:contains(text)
    // ● 选择包含指定文本text的元素。

    // 【12】:empty
    // ● 选择没有子元素或文本的空元素。

    // 【13】:parent
    // ● 选择有子元素或文本的元素。
    // 可以使用:even筛选器选择表格中的偶数行，并使用:contains筛选器选择包含特定文本的元素。
</script>
</body>
</html>

Ⅴ 属性选择器

【一】选择具有特定属性的元素：$("[attribute]")

• 例如，选择所有具有"src"属性的图片元素：$("img[src]")

【二】选择具有特定属性值的元素：$("[attribute=value]")

• 例如，选择所有"href"属性值为"https://example.com"的链接元素：$("a[href='https://example.com']")

【三】选择具有包含特定属性值的元素：$("[attribute*=value]")

• 例如，选择所有"src"属性值包含"image"的图片元素：$("img[src*='image']")

【四】选择具有以特定属性值开头的元素：$("[attribute^=value]")

• 例如，选择所有"href"属性值以"https://"开头的链接元素：$("a[href^='https://']")

【五】选择具有以特定属性值结尾的元素：$("[attribute$=value]")

• 例如，选择所有"src"属性值以".jpg"结尾的图片元素：$("img[src$='.jpg']")

【六】选择具有以特定属性值开头且以特定字符串结尾的元素：$("[attribute^=value][attribute$=value]")

• 例如，选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素：$("img[src^='images/'][src$='.jpg']")

【七】代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<input type="text" username="dream">
<input type="text" username="chimeng">
<p username="dream"></p>
<a href="https://www.baidu.com">https</a>
<a href="http://www.baidu.com">http</a>

<script>
    // 属性选择器语法
    // 选择具有特定属性的元素：$("[attribute]")
    // ● 例如，选择所有具有"src"属性的图片元素：$("img[src]")
    $("[username]")

    // 选择具有特定属性值的元素：$("[attribute=value]")
    // ● 例如，选择所有"href"属性值为"https://example.com"的链接元素：$("a[href='https://example.com']")
    $("[username='chimeng']")

    // 选择具有包含特定属性值的元素：$("[attribute*=value]")
    $("[username*='chimeng']")

    // 选择具有以特定属性值开头的元素：$("[attribute^=value]")
    // 例如，选择所有"href"属性值以"https://"开头的链接元素：$("a[href^='https://']")
    $("a[href^='https://']")

    // 选择具有以特定属性值结尾的元素：$("[attribute$=value]")
    // ● 例如，选择所有"src"属性值以".jpg"结尾的图片元素：$("img[src$='.jpg']")

    // 选择具有以特定属性值开头且以特定字符串结尾的元素：$("[attribute^=value][attribute$=value]")
    // ● 例如，选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素：$("img[src^='images/'][src$='.jpg']")

</script>

</body>
</html>

Ⅵ 前端基础jQuery之进阶

【一】操作标签

【1】JS版本操作类

（1）classList.add() 方法

• 用于向元素添加一个或多个类名。
  • 如果指定的类名已存在，则不会添加。

element.classList.add("class1", "class2");

（2）classList.remove() 方法

• 用于从元素移除一个或多个类名。
  • 如果指定的类名不存在，则不会发生任何操作。

element.classList.remove("class1", "class2");

（3）classList.contains() 方法

● 用于检查元素是否包含指定的类名，返回一个布尔值。

if (element.classList.contains("class1")) {
    // 包含 class1 类名的处理逻辑
} else {
    // 不包含 class1 类名的处理逻辑
}

（4）classList.toggle() 方法

• 用于在元素的类名中切换指定的类名。
  • 如果类名不存在，则添加类名；
  • 如果类名已存在，则移除类名。

element.classList.toggle("class");

【2】jQuery版本操作类

（1）addClass() 方法

• 用于向元素添加一个或多个类名。
  • 如果指定的类名已存在，则不会添加。

$(element).addClass("class1 class2");

（2）removeClass() 方法

• 用于从元素移除一个或多个类名。
  • 如果指定的类名不存在，则不会发生任何操作。

$(element).removeClass("class1 class2");

（3）hasClass() 方法

● 用于检查元素是否包含指定的类名，返回一个布尔值。

if ($(element).hasClass("class1")) {
    // 包含 class1 类名的处理逻辑
} else {
    // 不包含 class1 类名的处理逻辑
}

（4）toggleClass() 方法

• 用于在元素的类名中切换指定的类名。
  • 如果类名不存在，则添加类名；
  • 如果类名已存在，则移除类名。

$(element).toggleClass("class");

【3】代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color {
            color: red;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
<div class="d1 d2 d3 color" id="d4">
    111
</div>

<script>
    // js 代码
    // 【一】获取标签的 class属性
    // 【1】DOM操作
    let divEle = document.getElementById("d4")
    let divEleClassList = divEle.classList

    // 【二】获取标签的属性值
    divEle.getAttribute("class")

    // 【三】添加属性值
    // divEleClassList.add("color")
    let divEleJq = $("#d4").addClass("color")

    // 【四】删除
    $("#d4").removeClass("color")

    // 【五】toggleClass 有则删除 无责添加
    $("#d4").toggleClass("color")

</script>
</body>
</html>

【4】CSS

• jQuery的链式操作，使用jQuery可以做到一行代码操作很多标签

<p>1111</p>
<p>2222</p>

• 一行代码将第一个标签变成红色，第二个标签变成绿色

$('p').first().css('color','red').next().css('color','green')

jQuery对象调用jQuery方法，返回的是jQuery对象，可以继续调用

【二】jQuery操作CSS

【1】添加 CSS 类名

• 您可以使用 addClass() 方法来添加一个或多个 CSS 类到元素中。

$("#myElement").addClass("myClass");

// 将在具有 id 为 "myElement" 的元素上添加 "myClass" 类。

【2】移除 CSS 类名

• 您可以使用 removeClass() 方法来从元素中移除一个或多个 CSS 类。

$("#myElement").removeClass("myClass");

// 将从具有 id 为 "myElement" 的元素中移除 "myClass" 类。

【3】切换 CSS 类名

• 您可以使用 toggleClass() 方法来在元素上切换一个或多个 CSS 类。
• 如果元素已经具有该类，则该方法会将其移除；否则，它会添加该类。

$("#myElement").toggleClass("myClass");

// 将在具有 id 为 "myElement" 的元素上切换 "myClass" 类。

【4】设置 CSS 属性

• 您可以使用 css() 方法来设置元素的 CSS 属性。
• 该方法接受两个参数，第一个参数是要设置的 CSS 属性名称，第二个参数是属性的值。

$("#myElement").css("color", "red");

// 将将具有 id 为 "myElement" 的元素的颜色设置为红色。

【5】获取 CSS 属性

• 您可以使用 css() 方法来获取元素的 CSS 属性值。
• 该方法接受一个参数，即要获取的 CSS 属性名称。

var color = $("#myElement").css("color");

// 将返回具有 id 为 "myElement" 的元素的颜色值。

【三】jQuery链式操作

【1】Python代码解释链式操作本质

class MyClass(object):
    def func1(self):
        print('func1')
        return self
    
    def func2(self):
        print('func2')
        return self
    
obj = MyClass()
obj.func1().func2()

• 这段代码是一个 Python 类的示例，其中定义了一个名为 MyClass 的类。
  • 该类中包含两个方法 func1 和 func2，这两个方法都打印出一些信息，并返回 self，即当前对象的引用。
• 然后创建了一个 MyClass 的实例 obj。
  • 接着使用链式操作方式调用了 func1 方法和 func2 方法，并将它们打印出来。
• 执行以上代码的结果将会是：

func1
func2

• 通过链式操作的方式，可以连续调用对象的多个方法，而无需在每次调用方法后重新引用对象。
  • 在这个示例中，func1 方法被调用后返回了 self，即当前对象的引用，然后就可以直接在返回的对象上调用 func2 方法。

【2】jQuery链式操作

• jQuery链式操作是指在使用jQuery库进行 DOM 操作时，可以通过将多个方法调用以点号符号"." 连接起来，形成一个链式的方法调用序列。
• 这种方式可以简化代码，提高代码的可读性和可维护性。
• 链式操作的基本原理是每个方法都返回当前对象的引用，这样就可以直接在返回对象上继续调用其他方法。
• 以下是链式操作的示例：

$(".myClass")  // 选择所有 class 为 myClass 的元素
    .css("color", "red")  // 设置选中元素的字体颜色为红色
    .addClass("highlight")  // 添加一个名为 highlight 的 CSS 类
    .fadeIn(100);  // 渐显选中元素，动画效果持续1秒

• 在上面的代码中，首先通过 $ 符号选择了所有类名为 myClass 的元素。
  • 然后连续调用了 css、addClass 和 fadeIn 方法，每个方法都在前一个方法的返回对象（即选中的元素集合）上执行操作。

【四】jQuery位置操作

• jQuery提供了一系列常用的位置操作方法，可以用来获取或设置元素的位置信息。

【1】.offset()

相对于浏览器窗口

• 用于获取或设置元素相对于文档的偏移值。
  • 如果不传递任何参数，则返回一个包含 left 和 top 属性的对象，表示元素相对于文档左上角的位置。
  • 如果传递参数，可以设置元素的偏移值。

【2】.position()

相对于父标签

• 用于获取元素相对于其最近的具有定位（positioned）祖先元素的偏移值。
  • 返回一个包含 left 和 top 属性的对象，表示元素相对于定位祖先的位置。

【3】.scrollTop() 和 .scrollLeft()

不加参数就是获取，加参数就是设置值

• 用于获取或设置元素的滚动条的垂直或水平偏移值。
  • .scrollTop() 返回或设置元素垂直方向的滚动条偏移值
  • .scrollLeft() 返回或设置元素水平方向的滚动条偏移值。

// 位置操作
//  获取左侧滚动条距离顶端的位移量
$(window).scrollTop()

// 实时监测距离
$(window).scroll(function () {
      if($(window).scrollTop() > 600){
          alert('超过600了 架不住了')
      }
  })

【4】.offsetParent()

• 用于获取元素的最近的具有定位（positioned）祖先元素。
  • 定位祖先是指设置了位置属性（position）为 relative、absolute 或 fixed 的祖先元素。

【5】.height() 和 .width()

• 用于获取或设置元素的高度和宽度。
  • .height() 返回或设置元素的内容区域的高度
  • .width() 返回或设置元素的内容区域的宽度。

【6】代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div style="width: auto;height: 1000px" id="d1">


</div>

<div style="border:1px solid black;width:200px;height:200px;overflow:auto" id="text">
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>

<button class="btn1">把 scroll top offset 设置为 100px</button>
<br/>
<button class="btn2">获得 scroll top offset</button>

<script>
    $(".btn1").click(function () {
        $("#text").scrollTop(100)
    })


    // $(window).scrollTop() : 获取到当前浏览器所在的位置的像素点

    // $(window).width() ： 获取当前窗口的 宽度
    // $(window).height() ： 获取当前窗口的 高度

    //

</script>
</body>
</html>

【五】jQuery尺寸操作

【1】.height() 和 .width()

• 这两个方法用于获取或设置元素的高度和宽度。
  • 如果不传递参数，它们分别返回元素的内容区域的高度和宽度。
  • 如果传递一个数字作为参数，可以设置元素的高度和宽度。

【2】.innerHeight() 和 .innerWidth()

• 这两个方法用于获取元素的内部高度和宽度，包括内容区域和内边距（padding）。
  • 它们返回的值不包括边框和外边距。

【3】.outerHeight() 和 .outerWidth()

• 这两个方法用于获取元素的外部高度和宽度，包括内容区域、内边距和边框，但不包括外边距。
  • 可以通过传递一个布尔值参数来指定是否包括边框，默认为false。

【4】.outerHeight(true) 和 .outerWidth(true)

● 这两个方法用于获取元素的完整的外部高度和宽度，包括内容区域、内边距、边框和外边距。

【六】jQuery文本操作

【1】JS版本

（1） innerText

• innerText属性用于获取或设置指定元素及其所有后代元素的文本内容，会自动忽略HTML标签。

var element = document.getElementById("my-element");
var text = element.innerText;
console.log(text);  // 输出元素的文本内容

element.innerText = "New text content";  // 设置元素的文本内容

（2）innerHTML

• innerHTML属性用于获取或设置指定元素的HTML内容，包括HTML标签。

var element = document.getElementById("my-element");
var html = element.innerHTML;
console.log(html);  // 输出元素的HTML内容

element.innerHTML = "<p>New HTML content</p>";  // 设置元素的HTML内容

需要注意的是，使用innerHTML属性时需要小心防止XSS（跨站脚本攻击），确保插入的HTML代码是可信的。

【2】jQuery版本

（1）.text()

• 获取文本内容：

var text = $(".my-element").text();
console.log(text);

• 设置文本内容：

$(".my-element").text("New text content");

（2）.html()

• 获取HTML内容：

var html = $(".my-element").html();
console.log(html);

• 设置HTML内容：

$(".my-element").html("<p>New HTML content</p>");

（3）.val()

• 获取表单元素的值：

var value = $("#my-input").val();
console.log(value);

// 获取input标签内的文件
// 先获取标签对象，再用标签对象去取文件
$("#my-input")[0].files[0];

• 设置表单元素的值：

$("#my-input").val("New value");

（4） .append()

• 在每个匹配元素内部末尾插入内容：

$(".my-element").append("<span>Appended content</span>");

（5） .prepend()

• 在每个匹配元素内部开头插入内容：

$(".my-element").prepend("<span>Prepended content</span>");

（6）.after()

• 在每个匹配元素之后插入内容：

$(".my-element").after("<div>Content after</div>");

（7） .before()

• 在每个匹配元素之前插入内容：

$(".my-element").before("<div>Content before</div>");

【3】代码

// 获取标签的文本
let divEle = document.getElementById("d1")

divEle.innerText
divEle.innerHTML

let divEleJq = $("#d1")

// divEle.innerText 等价于 只能获取标签中间的文本内容
divEleJq.text()
// 设置标签内部的文本内容  会覆盖掉原本的内容
divEleJq.text("你真帅")

// divEle.innerHTML 等价于 可以获取标签内部的标签内容
divEleJq.html()


// 获取input 标签文本内容
let inputEle = document.getElementById("username")
inputEle.value

$("#username").val()


// 在指定标签后面插入标签
$("#d1").append("<span>Appended content</span>")

// 在每个匹配元素内部开头插入内容：
$("#d1").prepend("<span>Prepended content</span>");

// 在每个匹配元素之后插入内容：
$("#d1").after("<span>Prepended content</span>");

// 在每个匹配元素之前插入内容：
$("#d1").before("<span>Prepended content</span>");

【七】jQuery属性操作

• 在用变量存储对象的时候
• JS中推荐使用
  • xxxEle
    • 标签对象
• jQuery中推荐使用
  • $xxxEle
    • jQuery对象

【1】JavaScript版本

（1）setAttribute(attributeName, attributeValue)

• 通过该方法可以设置元素的属性值。
  • 将属性名称和属性值作为参数传递给该方法，即可设置指定元素的属性值。

// 设置元素的属性值
element.setAttribute('attribute', 'value');

（2）getAttribute(attributeName)

• 通过该方法可以获取元素的属性值。
  • 传入属性名称作为参数，即可获取指定元素的属性值。

// 获取元素的属性值
var value = element.getAttribute('attribute');

（3）removeAttribute(attributeName)

• 通过该方法可以移除元素的属性。
  • 传入属性名称作为参数，即可移除指定元素的属性。

// 移除元素的属性
element.removeAttribute('attribute');

【2】jQuery版本

（1）attr(name, value):

• 使用该方法可以设置元素的属性值。
  • 将属性名称和属性值作为参数传递给该方法，即可设置指定元素的属性值。

// 设置元素的属性值
$('.my-element').attr('attribute', 'value');

（2）attr(name)

• 使用该方法可以获取元素的属性值。
  • 传入属性名称作为参数，即可获取指定元素的属性值。

// 获取元素的属性值
var value = $('.my-element').attr('attribute');

（3）removeAttr(name)

• 使用该方法可以移除元素的属性。
  • 传入属性名称作为参数，即可移除指定元素的属性。

// 移除元素的属性
$('.my-element').removeAttr('attribute');

【3】代码

document.getElementById("d1").getAttribute("id")
document.getElementById("d1").setAttribute("class", "666")
document.getElementById("d1").removeAttribute("class")

$("#d1").attr("id")
$("#d1").attr("class", "999")
$("#d1").removeAttr("class")

【八】针对checked的特殊方法prop

• 对于标签上有的能看到的属性和自定义属性用attr
• 对于返回布尔值，比如checkbox、radio、option是否被选中用prop
• .prop() 方法是 jQuery 库中用于获取或设置元素属性值的一种方法。

// 获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
prop('checked')		  	 结果是布尔值
prop('checked',false)  动态设置

【1】获取属性值

（1）语法

$(selector).prop(propertyName)

（2）功能

• 该方法用于获取指定元素的属性值。
  • selector 是一个选择器，用于选取目标元素；
  • propertyName 是要获取的属性名。

（3）示例

// 获取单选框的选中状态
var isChecked = $('input[type="radio"]').prop("checked");
console.log(isChecked);  // 返回 true 或 false

// 获取复选框的选中状态
var isChecked = $('input[type="checkbox"]').prop("checked");
console.log(isChecked);  // 返回 true 或 false

【2】设置属性值

（1）语法

$(selector).prop(propertyName, value)

（2）功能

• 该方法用于设置指定元素的属性值。
  • selector 是一个选择器，用于选取目标元素；
  • propertyName 是要设置的属性名；
  • value 是要设置的属性值。

（3）示例

// 设置单选框为选中状态
$('input[type="radio"]').prop("checked", true);

// 设置复选框为未选中状态
$('input[type="checkbox"]').prop("checked", false);

【3】小结

• 需要注意的是，在实际使用时，
  • selector 应该根据具体情况指定合适的选择器来选取目标元素。
  • 例如，可以使用类名、ID、标签名或其他属性等作为选择器来选取所需的元素。
• 总结起来
  • .prop() 方法可以帮助您获取或设置目标元素的属性值，无论是获取复选框或单选框的选中状态还是设置它们的状态。
  • 记得根据具体需求使用合适的选择器选取目标元素，然后调用 .prop() 方法来操作属性值。

【九】jQuery文档处理

【1】JavaScript

（1）createElement(tagName)

• 创建一个指定标签名的元素节点，并返回该节点对象。
  • 可以用来动态创建新的元素。

var newDiv = document.createElement('div');

（2）appendChild(node)

• 将一个节点添加为另一个节点的子节点。
  • 可以用来将新创建的元素添加到文档中的某个元素内部。

var parentElement = document.getElementById('parent');
parentElement.appendChild(newDiv);

【2】jQuery

（1）$(selector)

• 使用选择器来选取匹配的元素，并返回一个jQuery对象。
  • 可以通过该对象执行各种操作。

var elements = $('p'); // 选取页面上所有的 <p> 元素

（2）$(selector).prepend(content)

内部头部追加

• 用于在目标元素的内部开头位置插入内容。

1. 语法

$(selector).prepend(content);

• selector：选择器，表示要选中的目标元素。
• content：要插入的内容，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象。

2. 示例一：插入单个内容

$('div').prepend('<p>This is a new paragraph.</p>');

• 上述示例会在页面上的所有 < div> 元素内部的开头位置插入一个新的 < p> 元素。
• 该方法将给定内容（content）插入到每个匹配元素的子元素列表的开头位置，使其成为子元素列表中的第一个元素。

3. 示例二：插入多个内容

• 如果要插入多个内容，可以通过链式调用来连续进行 prepend 操作。

$('div').prepend('<p>Paragraph 1</p>').prepend('<p>Paragraph 2</p>');

• 上述示例会先在每个 < div> 元素内部的开头位置插入 "Paragraph 1"，然后再在开头位置插入 "Paragraph 2"。

（3）$(selector).append(content)

内部尾部追加

• 将指定的内容追加到每个匹配元素的末尾。
  • 可以用来向元素中插入新的内容。

$('div').append('<p>This is a new paragraph.</p>');

（4）$(selector).appendTo()

• 目标元素内部尾部追加
  • 用于将当前元素插入到目标元素内部末尾的方法。

1. 语法

$(currentElement).appendTo(targetElement);

• currentElement：
  • 要插入的当前元素，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象。
• targetElement：
  • 目标元素，表示要将当前元素插入到该元素内部的末尾位置。

$('<p>This is a new paragraph.</p>').appendTo('div');

• 上述示例将一个新创建的 < p> 元素插入到页面上所有的 < div> 元素内部的末尾。
• 该方法的作用相当于 targetElement.append(currentElement)，只是调换了插入顺序，使得使用链式方法时可以更加流畅地构建操作。

（5）$(selector).insertAfter(target)

将目标元素插入到指定目标元素的后面。

• 用于将目标元素插入到指定目标元素的后面。

1. 语法

$(selector).insertAfter(target);

• selector：选择器，表示要选中的目标元素。
• target：目标元素，可以是选择器、DOM 元素或者 jQuery 对象，表示要将目标元素插入到它后面。

2. 示例一：插入单个元素

$('<p>This is a new paragraph.</p>').insertAfter('div');

• 上述示例会在页面上的所有 < div> 元素后面插入一个新的 < p> 元素。
• 该方法将目标元素插入到指定目标元素的后面，使其成为同级的下一个元素。

3. 示例二：插入多个元素

• 如果要插入多个目标元素，可以通过链式调用来连续进行 insertAfter 操作。

$('<p>Paragraph 1</p>').insertAfter('div').insertAfter('span');

• 上述示例会先在每个 < div> 元素后面插入 "Paragraph 1"，然后再在每个 < span> 元素后面插入 "Paragraph 1"。

（6）$(selector).insertBefore(content)

• 用于将选中的元素插入到目标元素的前面。

1. 语法

$(content).insertBefore(selector);

• selector：选择器，表示目标元素。
• content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象。

2. 示例一：所有元素前插入相同的元素

$('<p>Insert this paragraph</p>').insertBefore('div');

• 上述示例会将一个新的 < p> 元素插入到页面上的所有 < div> 元素之前。
• 该方法会将选中的元素插入到目标元素之前，成为同级的上一个元素。
  • 插入的内容可以是文本、HTML 元素或者其他 DOM 元素。

3. 示例二：多个目标元素前插入相同的元素

如果要在多个目标元素前插入相同的元素，可以通过链式调用来连续进行插入操作

$('<p>Paragraph 1</p>').insertBefore('div').insertBefore('span');

• 上述示例会先将 "Paragraph 1" 插入每个 < div> 元素之前，然后再将 "Paragraph 1" 插入每个 < span> 元素之前。

（7）$(selector).before(content)

• 用于在目标元素前面插入内容。

1. 语法

$(selector).before(content);

• selector：选择器，表示要选中的目标元素。
• content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象。

2. 示例一：所有元素前插入相同的元素

$('<p>This is a new paragraph.</p>').before('div');

• 上述示例会在页面上的所有 < div> 元素之前插入一个新的 < p> 元素。
• 该方法将内容插入到目标元素的前面，成为同级的上一个元素。
  • 插入的内容可以是文本、HTML 元素或者其他 DOM 元素。

3. 示例二：多个目标元素前插入相同的元素

• 如果要在多个目标元素前插入相同的内容，可以通过链式调用来连续进行插入操作

$('<p>Paragraph 1</p>').before('div').before('span');

• 上述示例会先在每个 < div> 元素前插入 "Paragraph 1"
  • 然后再在每个 < span> 元素前插入 "Paragraph 1"。

（8）$(selector).after(content)

用于将选中的元素插入到目标元素的后面。

1. 语法

$(content).insertAfter(selector);

• selector：选择器，表示目标元素。
• content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象。

（9）$(selector).remove(content)

• 用于删除选中的元素以及其子元素。

$(selector).remove(content);

• selector：选择器，表示目标元素。
• content：可选参数，表示要过滤的内容，只有与指定内容匹配的元素会被删除。可以是一个选择器、字符串或者 DOM 元素。

（10）$(selector).empty(content)

• 用于清空选中元素的所有子元素。

$(selector).empty(content);

【补充】

【1】.html()

（1）语法

• $(selector).html()

（2）功能

• 获取或设置元素的 HTML 内容。如果不提供参数，则返回第一个匹配元素的 HTML 内容；
• 如果提供参数，则将指定的 HTML 内容设置给所有匹配元素。

（3）示例

// 获取元素的 HTML 内容
var htmlContent = $('h1').html();

// 设置元素的 HTML 内容
$('div').html('<p>This is a paragraph.</p>');

【2】.text()

（1）语法

• $(selector).text()

（2）功能

• 获取或设置元素的文本内容。如果不提供参数，则返回第一个匹配元素的文本内容；
• 如果提供参数，则将指定的文本内容设置给所有匹配元素。

（3）示例

// 获取元素的文本内容
var textContent = $('p').text();

// 设置元素的文本内容
$('div').text('This is some text.');

【3】.val()

（1）语法

• $(selector).val()

（2）功能

• 获取或设置表单元素的值。
• 如果不提供参数，则返回第一个匹配元素的值；
• 如果提供参数，则将指定的值设置给所有匹配元素。

（3）示例

// 获取输入框的值
var inputValue = $('input[type="text"]').val();

// 设置输入框的值
$('input[type="text"]').val('New Value');

Ⅶ jQuery事件

【一】jQuery绑定事件的两种方式

【1】使用.on()方法

• 使用.on()方法可以绑定一个或多个事件处理程序到选择器匹配的元素上。
• 该方法可以为动态添加的元素提供事件绑定。

（1）语法

$(selector).on(eventName, eventHandler);

（2）示例

$('#myButton').on('click', function() {
    // 处理点击事件的代码
});

• 上述示例将为具有 id 为 myButton 的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。
• 可以使用.on()方法绑定多个事件处理程序，或者为多个事件同时绑定同一个处理程序。例如：

$('#myElement').on({
    click: function() {
        // 处理点击事件的代码
    },
    mouseenter: function() {
        // 处理鼠标进入事件的代码
    }
});

function login(){
    window.alert(111)
}
// 方式一 ： jq 获取到标签 后 .事件类型
$("#login").click(login)


function login(){
    window.alert(111)
}
// 方式二 ： jq 获取到标签 后 .on(事件类型,触发事件的函数)
$("#login").on("click",login)

【2】使用快捷事件方法

• jQuery 提供了一系列的快捷事件方法，用于常见的事件类型，例如点击、鼠标移入、键盘按下等。
• 这些方法具有对应事件类型的简洁命名，可以更方便地进行事件绑定。

（1）语法

$(selector).eventName(eventHandler);

（2）示例

$('#myButton').click(function() {
    // 处理点击事件的代码
});

• 上述示例使用.click()方法为具有 id 为 myButton 的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。
• 快捷事件方法的命名通常与对应的事件类型相同
  • 例如：.click()、.mouseenter()、.keydown() 等。

【3】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<button id="b1">吻我</button>
<button id="b2">抱我</button>

<script>
    // 绑定事件的两种方式

    // （1）第一种
    // jQuery
    $('#b1').click(function () {
        alert('别说话 吻我!')
    })

    // JavaScript
    // document.getElementById('b2').onclick(function () {})

    // （2）第二种 - 功能更加强大：支持事件委托
    $("#b2").on('click', function () {
        alert('抱紧我!')
    })

</script>
</body>
</html>

【二】克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .normal {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
<button id="d1" class="normal">
    点我触发影分身
</button>

<script>
    // 点击按钮触发复制
    $("#d1").click(
        function () {
            // clone 克隆
            // this 代表自己本身
            $(this).clone(true).insertAfter($("body"))

        }
    )
</script>
</body>
</html>

【三】自定义模态框

本质就是给标签添加或移除 hidden 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128, 128, 128, 0.4);
            z-index: 99;
        }

        .modal {
            position: fixed;
            height: 400px;
            width: 400px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 100;

        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div>我是最下面的</div>

<button id="d1">点我登陆</button>

<div class="cover hide"></div>
<div class="modal hide">
    <p>username:<input type="text"></p>
    <p>password:<input type="password"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>

<script>
    let $coverEle = $(".cover");
    let $modalEle = $(".modal");

    // 去除hide属性
    $("#d1").click(function () {
        // 将两个div标签的hide属性移除
        $coverEle.removeClass("hide");
        $modalEle.removeClass("hide");
    })

    // 绑定 hide属性
    $('#d2').on('click', function () {
        $coverEle.addClass("hide");
        $modalEle.addClass("hide");
    })

</script>

</body>
</html>

【四】左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        .left {
            float: left;
            background-color: deeppink;
            width: 20%;
            height: auto;
            position: fixed;
        }

        .title {
            font-size: 24px;
            color: white;
            text-align: center;
        }

        .item {
            border: 4px solid black;
        }

        .hide {
            display: none;
        }


    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">一级菜单1
            <div class="item">二级菜单1</div>
            <div class="item">二级菜单2</div>
            <div class="item">二级菜单3</div>
        </div>
        <div class="title">一级菜单2
            <div class="item">二级菜单1</div>
            <div class="item">二级菜单2</div>
            <div class="item">二级菜单3</div>
        </div>
        <div class="title">一级菜单3
            <div class="item">二级菜单1</div>
            <div class="item">二级菜单2</div>
            <div class="item">二级菜单3</div>
        </div>
    </div>
</div>

<script>
    $(".title").click(function () {
        // 给所有子标签加上隐藏属性
        $(".item").addClass("hide")

        // 解除当前父标签下的子标签的 hide 属性
        $(this).children().removeClass("hide")
    })
</script>
</body>
</html>

【五】返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position : fixed;
            background-color: blue;

            right: 20px;
            bottom:20px;
            height:50px;
            width:50px;
        }

    </style>
</head>
<body>

<a href="" id="d1"></a>

<div style="height: 500px;background-color: red;"></div>
<div style="height: 500px;background-color: green;"></div>
<div style="height: 500px;background-color: orange;"></div>

<a href="#d1" class="hide">回到顶部</a>

<script>
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100){
            $('#d1').removeClass('hide');
        }else{
            $('#d1').addClass('hide');
        }
    })
</script>
</body>
</html>

【六】自定义登录校验

• 在获取用户名和密码的时候，如果用户没有输入用户名和密码，自动提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<!-- placeholder : 给你的 input 标签内增加提示内容的 -->
<p>username <input type="text" name="username" id="username" placeholder="username"></p>
<p>password <input type="text" name="password" id="password" placeholder="password"></p>
<p class="" id="error"></p>
<p>
    <button id="button_login">登陆</button>
</p>

<script>
    let errorEle = $("#error")
    $("#button_login").click(function () {
        let username = $("#username").val();
        let password = $("#password").val();
        if (username.length < 6) {
            errorEle.text("用户名长度不能小于6位")
            errorEle.css("color", "red")
            return
        }
        if (password !== username) {
            errorEle.text("用户密码错误")
            errorEle.css("color", "green")
        }

    })
</script>
</body>
</html>

【七】input框实时监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<input type="text" id="d1">

<script>
    $('#d1').on('input', function () {
        console.log(this.value);
    })
</script>

</body>
</html>

【八】hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>

<p id="d1">花前月下酒香封</p>

<script>

  $("#d1").hover( function(){ // 鼠标悬浮
    alert(" enter")
  },function(){
    alert(" leave") // 鼠标离开
  })

</script>

</body>
</html>

【九】键盘按键监控事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>


<script>
  $(window).keydown(function(event) {
    console.log(event.keyCode)
    if (event.keyCode === 16){
      alert("shift key 触发")
    }
  })

</script>

</body>
</html>

【十】阻止标签后续执行

// 方式1(推荐使用)
$('#d1').click(function () {
   alert(123)
   return false  //  取消当前标签对象后续事件的执行
  })


// 【2】方式二
// 方式2(自带关键字)
$('#d1').click(function (e) {
          alert(123)
          e.preventDefault()
  })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>

<form action="">
    <span id="d1"></span>
    <input type="submit" id="d2">
</form>

<script>
    /*
    $("#d2").click(function () {
        $("#d1").text("你真是太帅了!").css("color", "red")
        // 方式一：直接return false 终止后续执行
        return false
    })
    * */

    $("#d2").click(function (event) {
        $("#d1").text("你真是太帅了!").css("color", "red")
        // 方式二：借助内置的 event 对象触发操作
        event.preventDefault()
    })
</script>

</body>
</html>

【十一】阻止事件冒泡

• 在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象

方式1
	return false
方式2
	e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>

<div id="d1">
    div 1
    <p id="p2">
        p2
        <br>
        <span id="s3">
            span3
        </span>
    </p>
</div>

<script>
    /*
        // return false v终止后续执行
        $("#d1").click(function () {
            alert("div")
        })

        $("#p2").click(function () {
            alert("div>p")
            return false
        })

        $("#s3").click(function () {
            alert("div>p>span")
            return false
        })
    * */

    // return false v终止后续执行
    $("#d1").click(function () {
        alert("div")
    })

    $("#p2").click(function (event) {
        alert("div>p")
        // 停止传播
        event.stopPropagation()
    })

    $("#s3").click(function (event) {
        alert("div>p>span")
       event.stopPropagation()
    })

</script>

</body>
</html>

【十二】事件委托

// 针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})

// 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<button> 点我1 有你好看!</button>
<button> 点我2 有你好看!</button>

<script>
    $(document).ready(
        function () {
            let buttonEle = $("<button>")
            buttonEle.text("你快滚吧!有我在没意外!")

            let bodyEle = $("body")
            bodyEle.append(buttonEle)

            $("button").click(function () {
                alert("button")
            })
            bodyEle.on("click", "button", function () {
                alert("1111")
            })
        }
    )


</script>
</body>
</html>

【十三】页面加载

• jQuery中等待页面加载
• 在jQuery中，可以使用$(document).ready()方法等待页面加载完成。

【1】$(document).ready()

• $(document).ready()是一个事件处理函数，会在DOM（文档对象模型）树完全构建好后执行。
  • 它确保了JavaScript代码只有在页面完全加载后才开始执行，从而避免了由于DOM元素尚未准备好而导致的错误。
• 下面是一个示例代码：

$(document).ready(function() {
  // 在这里编写需要在页面加载完成后执行的代码
  // 例如操作DOM元素、绑定事件等
});

• 你可以将你的JavaScript代码放在$(document).ready()方法内部，
  • 这样就能够确保代码在页面加载完成后执行。

【2】$(function() { ... })

• (function()document).ready()方法的一种简写形式。
• 以下是一个等价的示例代码：

$(function() {
  // 在这里编写需要在页面加载完成后执行的代码
});

• 使用$(document).ready()方法或其简化形式，可以保证你的JavaScript代码在页面加载完成后执行，从而避免因为DOM元素未准备好而导致的问题。

【3】最暴力的方法

• 直接写在 body 标签 内部 ！

【十四】jQuery中的动画效果

• 在jQuery中，你可以使用动画效果来为网页元素添加交互和视觉效果。jQuery提供了一系列内置的方法，用于实现常见的动画效果，如淡入淡出、滑动、缩放等。

下面是一些常用的jQuery动画效果方法：

【1】fadeIn()和fadeOut()

• 这两个方法可以实现元素的淡入淡出效果。
  • fadeIn()将元素逐渐显示出来，
  • fadeOut()则使元素逐渐消失。

// 淡入效果
$(element).fadeIn();

// 淡出效果
$(element).fadeOut();

【2】slideUp()和slideDown()

• 这两个方法可以实现元素的上滑和下滑效果。
  • slideUp()将元素向上滑动隐藏，
  • slideDown()则使元素从上方下滑显示出来。

// 上滑效果
$(element).slideUp();

// 下滑效果
$(element).slideDown();

【3】toggle()

• 这个方法可以在淡入和淡出之间进行切换。

// 切换淡入淡出效果
$(element).toggle();

【4】animate()

• 该方法允许你自定义元素的动画效果，可以控制元素的样式属性（如宽度、高度、透明度等）在一定时间内进行平滑的过渡。

// 自定义动画效果
$(element).animate({
  property1: value1,
  property2: value2,
  // ...
}, duration);

• 在以上示例代码中，element是HTML元素的选择器
  • 例如.class或#id。你可以根据具体的需求选择需要添加动画效果的元素，并使用相应的方法调用来实现动画效果。

【5】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        #d1 {
            height: 1000px;
            width: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

• 5s后隐藏起来

$('#d1').hide(5000);
// S.fn.init [div#d1]

• 5s后展示出来

$('#d1').show(5000);
// S.fn.init [div#d1]

• 5s后向上卷起

$('#d1').slideUp(5000);
// S.fn.init [div#d1]

• 5s后向下展开

$('#d1').slideDown(5000);
// S.fn.init [div#d1]

• 颜色逐渐变浅直到消失

$('#d1').fadeOut(5000);
// S.fn.init [div#d1]

• 颜色逐渐加深直到完全展示

$('#d1').fadeIn(5000);
// S.fn.init [div#d1]

• 渐变到某一个程度就不会再渐变了

$('#d1').fadeTo(5000,0.4);
// S.fn.init [div#d1]

【补充】

【1】each()方法

• 是jQuery库中的一个函数，用于遍历集合中的每个元素，并对其执行指定的操作。
  • 该方法接受一个回调函数作为参数，在每个元素上执行此回调函数。
  • 回调函数提供两个参数：
    • 第一个参数是当前处理的元素
    • 第二个参数是该元素在集合中的索引位置。
  • 通过在回调函数中对每个元素进行操作，可以实现批量处理元素的目的。
• 例如
  • 以下代码展示了如何使用each()方法遍历一个列表中的每个li元素，并为每个元素添加一个样式类：

$("li").each(function(index, element){
  $(element).addClass("highlight");
});

• 上述代码将会为列表中的每个li元素添加高亮样式类（highlight）。

【2】data()方法

• 也是jQuery库中的一个函数，用于在元素上存储和获取数据。
  • 它为每个元素维护一个与之关联的数据对象，可以通过该对象来存储和检索与元素相关的数据。
  • data()方法可以接受一个或两个参数。
• 当只有一个参数时，该参数可以是一个字符串或一个对象。
• 如果传递一个字符串作为参数，则表示要获取与元素关联的特定数据项的值。
• 如果传递一个对象，则表示要设置与元素关联的多个数据项。
• 例如，以下代码演示了如何使用data()方法存储和获取数据：

// 设置关联数据
$("div").data("key", "value");

// 获取关联数据
var value = $("div").data("key");

• 上述代码将会在div元素上存储一个名为"key"的数据项，并将其值设置为"value"。
  • 然后通过调用data("key")方法，可以获取该数据项的值。
• 值得注意的是，data()方法不仅可以用于存储简单的数据类型（如字符串、数字），还可以用于存储复杂的对象和数组等数据结构。
• 同时，它也提供了一些其他功能，例如通过传递一个函数作为参数来进行数据处理，或者通过传递一个布尔值来控制数据缓存行为等。

【3】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></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>
<div>10</div>
</body>
</html>

（1）each方法

• 该方法接受一个回调函数作为参数，在每个元素上执行此回调函数。
• 回调函数提供两个参数：
  • 第一个参数是当前处理的元素
  • 第二个参数是该元素在集合中的索引位置。
• 通过在回调函数中对每个元素进行操作，可以实现批量处理元素的目的
• 一个参数

$("div")
// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$("div").each(function (params) {console.log(params)  
})
/* VM271:1 0
VM271:1 1
VM271:1 2
VM271:1 3
VM271:1 4
VM271:1 5
VM271:1 6
VM271:1 7
VM271:1 8
VM271:1 9
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */

• 两个参数

$("div").each(function (params,obg) {console.log(params,obg)    
})
/* VM302:1 0 <div>1</div>
VM302:1 1 <div>2</div>
VM302:1 2 <div>3</div>
VM302:1 3 <div>4</div>
VM302:1 4 <div>5</div>
VM302:1 5 <div>6</div>
VM302:1 6 <div>7</div>
VM302:1 7 <div>8</div>
VM302:1 8 <div>9</div>
VM302:1 9 <div>10</div>
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */

• 数组作为参数

$.each([11,22,33,44,55,66],function (params,obg) {console.log(params,obg)})

/* VM368:1 0 11
VM368:1 1 22
VM368:1 2 33
VM368:1 3 44
VM368:1 4 55
VM368:1 5 66
(6) [11, 22, 33, 44, 55, 66] */

each 可以 帮我们 省略 for 循环

（2）data方法

能让我们的标签帮我们存储数据，但是标签看不见

• 给标签 div 添加了一个 属性是 info 值是 信息

$('div').data('info','这是一条秘密信息!')

// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]

• 在标签本身的代码中看不到，但是可以通过以下方法进行取值

$('div').first().data()
// {info: '这是一条秘密信息!'}
$('div').last().data()
// {info: '这是一条秘密信息!'}

• 删除 某个标签 data 中 对应的数据

$('div').first().removeData('info')
// S.fn.init [div, prevObject: S.fn.init(10)]
$('div').first().data()
// {}

Ⅷ 前端框架Bootstrap

【一】引入

• 该框架已经帮我们写好了很多页面样式，如果需要使用，只需要下载对应文件
• 直接CV拷贝即可
• 在使用Bootstrap的时候，所有的页面样式只需要通过修改class属性来调节即可

【二】什么是Bootstrap

• Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。
  • 它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。
• Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程。
  • 它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。
• 使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局。
  • 它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸。
  • 此外，Bootstrap还提供了丰富的UI组件（如导航栏、按钮、表单、模态框等），使开发人员能够轻松地在项目中使用这些现成的组件。
• 总而言之，Bootstrap是一个强大的开发工具，可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

【三】Bootstrap引入

中文文档查询：https://www.bootcss.com/

【1】CDN加速链接

twitter-bootstrap (v5.2.3) - Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

• 压缩文档链接引入

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js

【2】注意

• 网络连接引入在本地不会提示相关的补充
• 下载本地文档较为友好

Bootstrap的js代码是基于jQuery的

在使用bootstrap做动态效果时一定要引入jQuery!!!

【四】布局容器

• 布局容器是指用于组织和排列其他元素的容器或容器类。
• 在前端开发中，常用的布局容器有以下三种

【1】块级布局容器（Block-Level Layout Container）

• 块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。
• 常见的HTML元素如、

  、

  等都是块级布局容器。
• 块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。

【2】行内布局容器（Inline Layout Container）

• 行内布局容器会生成一个行内框，它可以使用display属性设置为"inline"或者"inline-block"。
• 常见的HTML元素如、、等都是行内布局容器。
• 行内容器会水平地从左到右排列，直到行的边缘，然后自动换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

   <style>
      .c1 {
         height: 1000px;
         width: 1000px;
         background-color: red;
      }
      
      .c2 {
         height: 1000px;
         width: 1000px;
         background-color: red;
      }
   </style>

</head>
<body>
<div class="container c1"></div> /*左右两侧有留白*/
<div class="container-fluid c2"></div> /*左右两侧没有留白*/
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  本地 链接 引入方法  -->
    <!--  Websource 文件夹 拷贝到当前文件夹下即可使用  -->
    <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
    <script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
    <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
    <!--  CDN 链接 引入方法  -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>

    <style>
        .c1 {
            height: 100px;
            background-color: red;
            border: 5px solid black;

        }

        .c2 {
            height: 100px;
            background-color: green;
        }
    </style>


</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 c1"></div>
        <div class="col-md-6 c1"></div>

        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
    </div>

</div>

</body>
</html>

<div class="row">

<div class="col-md-6"></div>

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-condensed">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">9</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

<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>

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

<script>
.c {color:red;}
</script>