jQuery和Bootstrap
jQuery查找标签
基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
组合选择器
$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
层级选择器
$('div p') 查找div里面所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first') 优化 $('li').first()
代码：
<script src="jQuery3.6.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
</head>
<body>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
</ul>
</body>
表单筛选器(常用)
$(':text')
$(':password')
$(':checked') checked与selected都会找到
$(':selected') selected
代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="text">
<input type="password">
<input type="radio">男
<input type="radio" checked>女
<input type="radio">其他
<select name="" id="">
<option value="">111</option>
<option value="" selected>222</option>
<option value="">333</option>
</select>
<input type="submit" value="提交">
<input type="button" value="按钮">
</body>
筛选器方法(常用)
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
<p>div>p
<a href="">div>p>a</a>
</p>
<span>div>span</span>
<p>div>p
<span id="d2">div>p>span</span>
</p>
</div>
<span>span</span>
<span>span</span>
</body>
链式操作的本质
class MyClass(object):
def func1(self):
print('执行了func1')
return self
def func2(self):
print('执行了func2')
return self
obj = MyClass()
obj.func1().func2().func3()
操作标签
1.class操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
2.位置操作
$(window).scrollTop()
3.文本操作
text() innerText
html() innerHTML
val() value
jQuery对象[0].files files[0]
4.创建标签
document.createElement() $('<a>')
5.属性操作
attr()/removeAttr() xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')
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的前面
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
jQuery事件
JS绑定事件
标签对象.on事件名 = function(){}
jQuery事件绑定
方式1:
jQuery对象.事件名(function(){})
方式2:
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
ps:补充
clone属性
clone(true) 默认不克隆事件 加true就可以
代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button >点我</button>
<button >点我</button>
<button >点我</button>
<button >点我</button>
<button >点我</button>
<script>
$('button').click(function () {
alert('嘻嘻嘻')
})
//方式一
// $('#d1').click(function () {
// alert('周三了')
// })
// 方式二,方式一失效使用方式二
// $('#d1').on('click',function () {
// alert('哈哈哈')
// })
// let btnList = document.getElementsByTagName('button'); // []
// for(let i=0;i<btnList.length;i++){
// btnList[i].onclick = function () {
// alert('小样 太简单')
// }
// }
</script>
</body>
//监听事件，在输入框里输入会实时显示输入的内容，适合验证邮箱等是否包含@符号等。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="text">
<script>
$(':text').on('input',function () {
console.log($(this).val())
// console.log(this.value)
})
</script>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button style="border: 1px solid orange">屠龙宝刀,点击就送</button>
<script>
$('button').click(function () {
$('body').append($(this).clone(true)) // 默认不克隆事件 加true就可以
})
</script>
</body>
事件相关补充
1.取消后续事件
事件函数的最后return false即可
2.阻止事件冒泡
事件函数的最后return false即可
3.等待页面加载完毕再执行代码
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
4.事件委托
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行
取消后续事件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<form action="">
<p>username:
<input type="text">
</p>
<input type="submit" id="d1">
</form>
<script>
$('#d1').click(function (e) {
alert(123)
// return false // 推荐使用
e.preventDefault()
})
</script>
</body>
取消事件冒泡
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
$(function () {
})
</script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function () {
alert('我是div')
})
$('p').click(function () {
alert('我是p')
return false
})
$('span').click(function (e) {
alert('我是span')
// return false
e.stopPropagation()
})
</script>
</body>
事件委托
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button>点我</button>
<script>
// $('button').click(function () {
// alert('速度一定要快!!!')
// })
$('body').on('click','button',function () {
alert('哈哈哈')
})
</script>
</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])
Bootstrap页面框架
别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能
版本有很多 使用V3即可，网址：https://v3.bootcss.com/css/
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
CDN
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> //bootstrap依赖js,所以必须先导入
<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自动提示问题,最好本地导入几次
核心部分讲解
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class = "row" 一行均分12份
class = "col-md-8" 划分一行的12份
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
<link rel="stylesheet" href="jQuery3.6.js">
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">在线</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">何关 <span class="sr-only">(current)</span></a></li>
<li><a href="#">真人</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">了解更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Jason</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- <div class="container c1"></div>-->
<!-- <div class="container-fluid c1"></div>-->
<div class="container">
<div class="row">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
<div class="jumbotron">
<h1>球球开业啦!</h1>
<p>XX开始</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">你还在等什么</a></p>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://img0.baidu.com/it/u=479290193,209780376&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://img2.baidu.com/it/u=1546403235,2040147912&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://img1.baidu.com/it/u=1780060513,2434918673&fm=253&fmt=auto&app=138&f=JPEG?w=509&h=500" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://img1.baidu.com/it/u=147341604,3211187238&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670518800&t=ceda322c6d397c52928f002e8b6f2bae" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://img2.baidu.com/it/u=1576264245,1493262872&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670518800&t=c88b034b252a7c6ed4c1a1b55f873905" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://img2.baidu.com/it/u=2629934346,4135707188&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670518800&t=6c075f06cf5aaa88bfa9485417650532" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://img2.baidu.com/it/u=1261323646,1888852257&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670518800&t=963d1bd37f4f1478954870da581a15fb" alt="...">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img0.baidu.com/it/u=4055215679,2837082066&fm=253&fmt=auto&app=138&f=JPEG?w=528&h=500" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img0.baidu.com/it/u=4055215679,2837082066&fm=253&fmt=auto&app=138&f=JPEG?w=528&h=500" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img0.baidu.com/it/u=4055215679,2837082066&fm=253&fmt=auto&app=138&f=JPEG?w=528&h=500" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
<h1 class="text-center">h1. Bootstrap heading <small>Secondary text</small></h1>
<table class="table table-hover table-striped">
<thead>
<tr class="active">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
<tr class="warning">
<td>2</td>
<td>jason</td>
<td>18</td>
</tr>
<tr class="danger">
<td>3</td>
<td>jason</td>
<td>18</td>
</tr>
<tr class="success">
<td>4</td>
<td>jason</td>
<td>18</td>
</tr>
<tr class="info">
<td>5</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
<div class="clearfix">
<div class="col-md-6 col-md-offset-3 clearfix">
<h3 class="text-center">用户注册</h3>
<a href="#" class="btn btn-primary">点我</a>
<a href="#" class="btn btn-success">点我</a>
<a href="#" class="btn btn-info">点我</a>
<a href="#" class="btn btn-warning">点我</a>
<a href="#" class="btn btn-danger">点我</a>
<a href="#" class="btn btn-danger btn-xs">点我</a>
<a href="#" class="btn btn-danger btn-sm">点我</a>
<a href="#" class="btn btn-danger btn-lg">点我</a>
<a href="#" class="btn btn-danger btn-block">点我</a>
<form action="">
<p class="has-error">username:
<input type="text" class="form-control ">
</p>
<p class="has-success">password:
<input type="text" class="form-control ">
</p>
<p class="has-warning">province
<select name="" id="" class="form-control ">
<option value="">222</option>
<option value="">222</option>
<option value="">222</option>
</select>
</p>
<input type="submit" class="btn btn-success btn-block">
</form>
</div>
</div>
<div>
<h2 class="text-center">别睡觉 <span class="glyphicon glyphicon-heart" style="color: yellowgreen"></span> <i class="fa fa-bath" aria-hidden="true"></i> </h2>
</div>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> 首页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> 关于我们</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> 后台应用编辑</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 系统设置</a>
</div>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- <p class="text-center">一定要慢慢的提升听课效率 否则越走越难</p>-->
<!-- <div class="col-md-6 c1 col-xs-2 col-sm-3"></div>-->
<!-- <div class="col-md-6 c1 col-xs-10 col-sm-9"></div>-->
<!-- <div class="col-md-1 c1"></div>-->
<!-- <div class="col-md-10 c1"></div>-->
<!-- <div class="col-md-1 c1"></div>-->
<!-- <div class="col-md-6 c1 col-md-offset-3"></div>-->
<!-- <div class="col-md-6 c1">-->
<!-- <div class="row">-->
<!-- <div class="col-md-1 c1">-->
<!-- <div class="row"></div>-->
<!-- </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>-->
<!-- <div class="col-md-6 c1"></div>-->
</div>
<!-- <div class="row">-->
<!-- <div class="col-md-2 c1"></div>-->
<!-- <div class="col-md-8 c1"></div>-->
<!-- <div class="col-md-2 c1"></div>-->
<!-- <div class="col-md-6 c1"></div>-->
<!-- <div class="col-md-7 c1"></div>-->
<!-- </div>-->
</div>
</body>
</html>
版权声明：本文为winter-yu1989原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。