jQuery使用 前端框架Bootstrap

目录

• jQuery查找标签
  • 1.基本选择器
  • 2.组合选择器
  • 3.后代选择器
  • 4.属性选择器
  • 5.基本筛选器
  • 7.筛选器方法
• 链式操作的本质
• 操作标签
  • 1.class操作
  • 2.位置操作
  • 3.文本操作
  • 4.创建标签
  • 5.属性操作
  • 6.添加标签
  • 7.清空标签
• jQuery事件
  • 事件绑定的两种方法
  • 实时监听事件
  • 克隆事件 clone
• 事件相关补充
  • 1.取消后续事件
    • 方式1
    • 方式2
  • 2.阻止事件冒泡
  • 3.等待页面加载完毕再执行代码
  • 4.事件委托(重要)
• jquery动画效果（了解）
• Bootstrap页面框架
  • pycharm自动提示问题
  • bootstrap目录结构
• 核心部分讲解
  • 布局容器
  • 栅格系统（重要）
  • 屏幕参数 响应式布局
  • 栅格偏移
  • 证明一个row是12份
• 重要样式
  • 1.表格样式
  • 2.表单标签
  • 3.按钮组
• 组件
  • 1.图标
  • 2.导航条
  • 3.其他
• Bootstrap JS插件
  • 模态框
  • 轮播图

jQuery查找标签

jQuery对象支持各种选择器、各种方法。

1.基本选择器

一次性获取符合条件的所有标签。

$('#d1')	id选择器
$('.c1')	class选择器
$('div')	标签选择器

2.组合选择器

嵌套：返回满足多个限制条件的标签

分组：多个条件之间独立，互不影响，一并查找。

$('div#d1')			查找id是d1的div标签
$('span.c1') 		 查找含有c1样式类的span标签
$('div,span,p')		 查找div或者span或者p标签
$('#d1,.c1,span')	 查找id是d1的或者class含有c1的或者span标签

3.后代选择器

返回满足条件的所有后代标签

$('div p')			查找div里面所有的后代p标签
$('div>p')			查找div里面的儿子p标签
$('div+p')			查找div同级别下面紧挨着的p标签（第一个弟标签，可能查找不到）
$('div~p')			查找div同级别下面所有的p标签（所有弟标签）

4.属性选择器

根据属性名、属性值、标签名查找标签。

$('[username]')			查找含有username属性名的标签
$('[username="jason"]')	查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

5.基本筛选器

相当于对jQuery列表中的对象做二次筛选。

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first')	优化   $('li').first()

为什么要使用筛选器？为什么不用索引取值？

其实不行，索引出来的值是标签对象！



jQuery列表也支持索引：



使用not进行二次筛选，拿出不属于c1样式类的标签：



找某个id=#d1的ul标签:

6.表单筛选器

仅限于在表单标签中使用。

通过表单标签的某些属性值查找表单。（type selected checked）

$(':text')
$(':password')

$(':checked')		:checked会把表单中的包含selected的标签也一并找到 这是一个小bug
$(':selected')		只会找到包含selected的表单标签

7.筛选器方法

 $("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
 $("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

next() 找基准节点同级别下面的节点 until表示找到什么标签就停止：



prev()找基准节点同级别上面的节点

找父标签、爷爷标签：



找前辈：



找所有儿子、找所有兄弟（同级别上下的标签：

）

链式操作的本质

为什么可以不断用点的方式调用jQuery？

用python代码演示：



正常情况下调用对象中的方法后，是不能继续调用的。

链式操作的实质：调用之后返回当前对象

操作标签

1.class操作

获取标签的样式类列表

jQuery	JS
addClass()	classList.add()
removeClass()	classList.remove()
hasClass()	classList.contains()
toggleClass()	classList.toggle()

2.位置操作

 $(window).scrollTop()

获取滚动条偏移量 还可以修改偏移量

3.文本操作

jQuery	JS
text()	innerText
html()	innerHTML
val()	value
jQuery对象[0].files	files[0]

文档操作建议不要用jQuery。而是通过索引取出标签对象。

4.创建标签

document.createElement()  $('<a>')

标签不在页面上，在内存里，需要你动态添加到页面中：

5.属性操作

attr()/removeAttr()					 xxxAttribute()
attr针对动态变化的属性获取会失真
	prop('checked') prop('selected')

attr针对动态获取的属性会失真，比如修改单选框，无法及时正确反馈，用户是否已经勾选上了单选框。



prop可以判断动态变化的属性：

6.添加标签

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

7.清空标签

remove()// 从DOM中删除所有匹配的元素。
 empty()// 删除匹配的元素集合中所有的子节点。

一个是连你也清掉 一个是你留着：

jQuery事件

事件绑定的两种方法

JS绑定事件
	标签对象.on事件名 = function(){}

jQuery事件绑定
	方式1:
		jQuery对象.事件名(function(){})
 	方式2:
    	jQuery对象.on('事件名称',function(){})
    // ps:默认就用方式1 不行了再用方式2

/* ps:补充
    clone属性
    	clone(true)  默认不克隆事件 加true就可以 */

对于js的数组无法一键绑定事件：



jQuery可以数组批量挨个绑定事件：

查找button标签，得到一个列表，给列表所有的jQuery对象绑定click事件:

实时监听事件

示例：github登录文本框，没有点提交按钮，但是每次输入都会提示你的输入是否满足要求。

相当于：每次修改文本框内容都会发送请求。（跟针对HTML下拉框的文本域变化事件onchange有点像）

代码示例：



用表单筛选器:text查找到文本框，给input这个输入事件绑定一个函数。

哪个标签触发事件，this就是哪个标签对象，因为是标签对象，所以需要包一包$(this)（这个很容易忘）。

也可以用js代码实现：



注意:this是标签对象还是jq对象!

克隆事件 clone

示例：



每次点击按钮，在body中添加一个被克隆的button标签

请注意：clone是jq对象的方法 clone的对象都是假的（只有样子） 只有原先写button的具有click事件

如果想真正的克隆（具有事件）：

在clone里面添加true。

事件相关补充

1.取消后续事件

方式1

事件函数的最后return false即可'

有些标签本身含有功能，比如：

button submit 按下按钮会刷新页面

这时候再给这个标签绑定事件，谁会优先执行？



先执行click添加的事件 再执行按钮自己的提交事件

然而我们通常希望，只执行我们添加的事件，原来的事件被覆盖，不再执行,这就需要再时间绑定的匿名函数里加return false



可以取消后续事件 后续及时有自己绑定的更多事件也不执行了

方式2

事件函数都自带一个形参e:

preventdefault 取消默认（事件）

2.阻止事件冒泡

事件函数的最后return false即可

什么叫事件冒泡？以点击事件举例：



div > p > span 嵌套关系 这三个标签都绑定了点击事件。

思考一件事：

点了span是不是相当于点了p也点了div

标签会一层一层往上汇报（父标签有相同事件的情况下，会执行事件绑定的函数



）

取消冒泡只需要在每个事件的匿名函数中加：return false。即可以取消冒泡，有可以取消事件绑定，一箭双雕。

3.等待页面加载完毕再执行代码

jQuery可以支持你在head写js代码:

$(function(){})				   缩略写法
$(document).ready(function(){})  完整写法

4.事件委托(重要)

主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执

js\jQ动态加载的标签 默认是没有事件的 比如这个按钮：



所有需要事件委托，使用第二种JQ绑定事件的方法on(事件类型，选择器，匿名函数)：

将body里所有的点击事件委托给button（选择器）按钮



这样body内原生按钮、动态加载的按钮都会绑定事件

jquery动画效果（了解）

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

卷轴效果：3000是时间单位毫秒



淡入淡出：0.4是透明度



点赞的动态效果：

Bootstrap页面框架

Bootstrap V3中文: https://v3.bootcss.com/

bootcdn: https://www.bootcdn.cn/twitter-bootstrap/

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多 使用V3即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery

CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题

使用cdn，pycharm不进行代码补全：



先下载一个本地Bootstrap的导入pycharm，加载一下，让pycharm熟悉一下。

bootstrap目录结构

下载的话文件目录有三个文件夹：

1. css:只有这两个有用 其余用不到可以删掉
   
   
2. fonts:字体文件不要修改
3. js: npms可删
   
   查看js代码文件可得知：
   
   
   
   Bootstrap的js代码是基于jQuery的！

核心部分讲解

1. 如果只想用bootstrap静态效果 只用导css
2. 想用动态效果 需要导入jq和bootstrap-js代码文件
3. bootstrap提前写好了很多样式 只要你写好了样式类名就可以直接用

使用bootstrap其实只需要操作标签的样式类即可

布局容器

网页的左右两侧通常会进行留白处理，使网页看起来不太突兀。

class = "container"				有留白
class = "container-fluid"		 没有留白

留白和不留白的区别：

栅格系统（重要）

class = "row"					一行均分12份
	class = "col-md-8"			 划分一行的12份

留白之后还是可以调整网页布局

将布局容器继续精准划分区域 给div添加样式类row



这个div会均分成12份 （border 3px）

，

在row里面在嵌套div，这些div可以通过样式类申明自己要用的'份数'，如上图两个div都要6份，对应下图的左右两个红色区域。



再要一行row（同级再创建一个div标签 使用样式类row）：



row里面写超过了12份会自动换行：



另外一种情况（多写了一份导致被迫换行）：

ps：col-md-13不存在 因为没写这样的样式类

屏幕参数 响应式布局

在电脑上设定好的布局，在手机显示很容发生变形，导致有内容无法显示出来。

是电脑的时候采取6:6布局 是手机的时候 采取红框中的2:10布局：



通过这种方式来适配 手机 电脑 平板 ，而适配都需要添加样式类的参数。

参数：col-md-6 col-xs-2 col-sm-3 col-lg-3

栅格偏移

有些时候我们只想用一部分栅格，并且需要调整栅格的位置

col-md-offset-3

只想用6份：



将这6份右移3份栅格的距离：

证明一个row是12份

在6份栅格里套一个row:



会基于这六份栅格，再进行12等分：

重要样式

1.表格样式

 table基本样式  table-hover悬浮样式  table-striped table-border表格边框样式
 disabled禁用
<table class="table table-hover table-striped table-border">
'text-center' 居中
颜色
 <tr class="success">

2.表单标签

添加表单样式forn-control
class = "form-control"

不能加form-control的标签：



修改颜色：

3.按钮组

btn-block按钮填充满整个区域
class = "btn btn-primary btn-block"

各种样式：



调大小：

组件

1.图标

bootstrap是给span标签加样式 变成图标 可以根据文本调色

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

更多图标的网站：https://fontawesome.com.cn/

这个网站的图标样式 不会与bootstrap冲突

2.导航条

写在最上面 且不要写在div c容器里面

class="navbar navbar-inverse" navbar-inverse反色导航条

想扩展导航条的功能 就找到相应的代码 多写一点

导航条固定 添加fixed定位！！

3.其他

1. 分页
   
   
2. 巨幕
   
   搭建网站首页
   
   
3. 页头
   
   在巨幕上面加
4. 缩略图
   
   
   
   展示效果：
   
   
   
   5.进度条
   
   动态效果的进度条
   
   堆叠效果的进度条
   
   后期可以通过js代码修改进度条的style属性以控制：
   
   

Bootstrap JS插件

官方网站：https://v3.bootcss.com/javascript/

模态框

模态框是动态效果需要bootstrap 和jquery

轮播图

调整轮播图速度：应该在js代码里

添加图片只需添加标签：