一、jQuery补充
说在最前面，如果想把JQ对象赋值给一个变量名，起名字依旧要讲究，建议名字前加$，这样别人一看就知道是JQ对象
1.筛选器
// 1.属性选择器
$('username') // 查找含有username属性名的标签
$('[username="haha"]') // 查找含有username属性的并且值等于jason
$('div[username="haha"]')
// 2.同级之下
$("#id").next() //找同级下一个
$("#id").nextall() //找 同级下所有
$("#id").nextUntill("#d2") //找同级下至d2 标签
// 3.同级之上
$("#id").next() //找同级上一个
$("#id").nextAll() // 找同级上所有
$("#id").nextUntill("#d2") //找同级上所有 至d2标签为止
// 4.父级标签
$("#id").parent() //父标签
$("#id").parents() //所有 祖宗
$("#id").parentsUntil("#d1") //拿到 父标签 至d1为止
// 5.子级标签和兄弟标签
$("#id").children() //儿子们
$("#id").siblings();// 兄弟们
// 6.批量筛选之后操作——基于手里的是一个JQ对象数组
如果是索引拿了JQ对象数组内的某个标签对象出来，就不能用JQ对象的方法，也可以在括号外面点方法，效果一样
$('xxx:first') = $('xxx').first //第一个
$(':last') //最后一个
$(':eq(index)') //通过索引 取值
$(':even') //匹配所有索引值为偶数的元素 从0开始计数
$(':odd') // 匹配所欲索引值为计数得元素，从0 开始
$(':gt(index)') //匹配所有大于给定索引值得元素
$(':lt(index)') //匹配所有小于给定索引值得元素
$(':not(元素选择器)') //筛选掉所欲满足not条件得标签
$(':has(元素选择器)') //选取所有包含一个或多个标签在其内得标签（指得是从后代元素找）
// 7.表单筛选器
可以看成是按照标签的属性来找，优化了属性头，按值直接找
$(':checked') // 找到属性值是checked或selected的标签
$('input:checked') // 找到属性值是checked并且类型是input的标签
// checked有Bug 会连带把selected也给找了
//最后说一点，筛选器可以进行链式操作 是因为对象调用一个方法后返回一个对象本身，类似面向对象中的每个函数都return self 所以可以连续点方法
2.如何操作标签
-
class操作
| jQuery操作 | 功能 | js操作 |
|---|---|---|
| addClass() | 添加 类名 | classList.add() |
| removeCla() | 移除指定的类名 | classList.remove() |
| hasClass() | 判断 类名存不存在 | classList.contains() |
| toggleClass() | 切换css类名，如果有就移除，如果没有就添加 | classList.toggle() |
-
位置偏移
$(window).scrollTop() // 获取匹配元素相对滚动条顶部的偏移 // 括号内可以自己写比如0，就是移动滚动条到顶部 -
文本操作
| jQuery操作 | 功能 | js操作 |
|---|---|---|
| .text() | 获取内部文本 | .innerText() |
| .html | 获取标签内所有信息 | innerHTML |
| .val() | 获取标签内value值 | Value |
| [0].files | 获取文件标签 文件对象（jquery也用js方法） | .file |
-
创建标签
$('<a>') = document.createElement('a') -
属性操作
| jQuery操作 | 功能 | js操作 |
|---|---|---|
| attr | 设置属性和获取属性值（动态变化的无法判断） | setAttribute/getAttribute |
| prop() | 获取动态属性判断和修改,尤其是checked |
-
文档处理
| jQuery操作 | 功能 |
|---|---|
| append() | 尾部追加 |
| prepend() | 添加到开头 |
| after() | 添加到同级后面 |
| before() | 添加到同级前面 |
-
移除指点元素
//移除标签 remove() //清空标签 repty()，但是标签还在
二、jQuery事件
1.绑定样式
// 方式一
JQ对象.事件名 = function(){} // 这种有自动提示
// 方式二
JQ对象.on('事件名称'，function(){}) // 需要打完整单词，一般用于第一种不行的情况下
// 举例 ,其实主要是锁定标签对比JS快捷很多
<!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>
</head>
<body>
<button id="d1">点我点我快点我！</button>
<script>
$('#d1').click(function (){
alert('冲！')
})
</script>
<div></div>
</body>
</html>
JQ很智能，如果你匹配的是一个数组的JQ对象，想给这些标签都绑上某个事件，直接绑就行，JQ会自动给每一个都绑上
<!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>
</head>
<body>
<button >点我点我快点我！</button>
<button >点我点我快点我！</button>
<button >点我点我快点我！</button>
<button >点我点我快点我！</button>
<button >点我点我快点我！</button>
<button >点我点我快点我！</button>
<script>
$('button').click(function (){
alert('冲！')
})
</script>
<div></div>
</body>
</html>
2.监听事件——前端实时拿数据找后端校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="text" id="i1">
<script>
$("#i1").on("input", function () {
console.log($(this).val())
})
</script>
</body>
</html>
克隆事件
clone()
clone(true) //完完全全的克隆
3.后续事件取消
如果我们去给已经有事件的标签绑定事件 会先执行绑定的 再去执行的默认的，我们也可以让标签之前的事件不执行
$(':submit').click(function (e){
alert('123')
//方式一
return false
//方式二
e.preventDefault()
})
4.事件冒泡
当多个标签处于嵌套关系时，并且有相同的事件绑定，执行某个子标签的事件时，父标签也会执行这个相同的事件，这个不是很合理，所以得想办法取消事件冒泡
上述两个都可以用return false来搞
5.事件委托
就是动态生成某个标签时，事件参考其他的某标签
比如说在已经有一个点击事件按钮的网页临时创建一个点击标签，button
// 先创建，同时最好拿个变量名储存下
let $btnEle = $('<button>')
// 给这个JQ对象调用JQ调用添加text方法
$btnEle.text('点我快点我！！！')
// 把这个搞好的标签弄到网址上,先锁定要丢到哪个标签上去然后调方法添加
$('body').append($btnEle)
// 把body大标签内的所有点击事件都委托给button标签执行
$('body').on('click','button',function(){alert('点的好！')})
三、bootstrap框架
这就是大佬已经写好了一堆CSS和JS的代码，我们只需要导入，然后赋值类属性即可调用
1.如何使用
一样分下载，和导入链接两种方法
如果自己下载，建议先复制一下文件到目前工作的pycharm项目文件夹下，这样pycharm就能自动提示btsp的关键字
// 如果选择导入链接直接去官网拿
// CSS是核心，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>
然后去官网，看官网文档非常详细的说明各个功能如何用
2.部分常用的方法
// 1.留白
class = container
class = container-fluid // 不留白
//————————————————————————————————————————
// 2.栅格系统
class = 'row' //默认开设一行平均分12份
class = 'col-md-n' //指定需要几份 n为份数
class = 'col-xs-n' // 提前写好手机上的布局，做到自适应
// 利用 两边 空行 居中
前提是一行就写了一个占六份的div，这样就还剩下6份
col-md-offset-3 // 这就意味着，两边各间隔3份，所以就居中了
//————————————————————————————————————————
// 3.表格样式
// 表格样式
class="table table-hover table-striped table-bordered"
// 单元格颜色
class="active" // 官方提供的就这几个颜色，都是做了淡化处理的
class="success"
class="warning"
class="danger"
class="info"
// eg：
<body>
<div class="container c1">
<div class="row">
<h1 class="text-center">用户信息</h1>
<table class="table table-striped table-hover ">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>tony</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>king</td>
<td>28</td>
</tr>
<tr class="danger">
<td>3</td>
<td>rose</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
//————————————————————————————————————————
// 4.表单样式
class="form-control" //radio 别加，太丑了
//eg:
<h3 class="text-center">用户注册</h3>
<form action="">
<p class="has-success">用户名: // has-xxx 框框颜色
<input type="text" class="form-control ">
</p>
<p class="has-warning">密码 :
<input type="password" class="form-control ">
</p>
<input type="submit" class="form-control btn-success">
// btn-xxx 按钮颜色
</form>
今日单词
checked 默认选中
bootstarp 一个前端鼻祖框架
container 有留白
container-fauid