![[听风声]](/views/front/img/head.png){kind=avatar}
前端知识总汇
前端知识总汇
HTML
- 超文本标记语言
注释
由于 HTML 代码杂乱无章，我们习惯性的用注释来划定区域方便后续的查找
HTML 的文档结构
DOCTYPE html>
<html lang="en">
<head>
head>
<body>
body>
html>
head 内常用标签
<head>
<meta name="keyword" content="搜索关键字">
<meta name="description" content="网页秒数信息">
<title>title>
<style>style>
<link rel="stylesheet" href="mycss.css">
<scritpt>scritpt>
<script src="myjs.js">script>
head>
body 内常用标签
基本标签
<h1> 一级标签 h1>
<b>加粗b>
<i>斜体i>
<u>下划线u>
<s>删除线s>
<br>
<hr>
标签的分类
- 块级标签
- 独占一行
- 可以修改长宽
- 块级标签内部可以嵌套任意的块级标签和行内标签
- 例外： p 标签只能嵌套行内标签
常见的块级标签
<h1>h1>
<div>div>
<p>p>
- 行内标签
- 自身文本多大就占多大
- 只能嵌套行内标签
<i>斜体i>
<u>下划线u>
<s>删除线s>
<br>
<hr>
特殊符号
<p> p>
<p>> <p>
<p>&p>
<p>¥p>
<p>©p>
<p>®p>
常用标签
<div>
<span>Hello Worldspan>
div>
<a href="" id="d1">a><br>
<img src="111.png" alt="this is my wife" height="400px" title="YiFei Liu"><br>
<a href=""id="#d1">点此回到图片上a>
列表标签
无序列表
<ul>
<li>第一项li>
<li>第二项li>
<li>第二项li>
<li>第二项li>
ul>
有序列表
<ol type="1" start="5">
<li>111li>
<li>222li>
<li>333li>
ol>
标题列表
<dl>
<dt>标题1dt>
<dd>内容1dd>
<dt>标题2dt>
<dd>内容2dd>
<dt>标题3dt>
<dd>内容3dd>
dl>
表格
<table>
<thead>
<tr>
<th>usernameth>
加粗文本
<td>usernametd>
正常文本
tr>
thead>
<tbody>
<tr>
<td>jasontd>
<td>123td>
<td>readtd>
tr>
tbody>
table>
<table border="1"> 加外边宽
<td colspan="2">egontd> 水平方向占多行
<td rowspan="2">DBJtd> 垂直方向占多行
表单标签
- 能够获取前端用户的数据，基于网络发送给后端服务
<form action="http://127.0.0.1:5000/index/"
method="post"
enctype="multipart/form-data">
<input>
form>
input标签 就类似于前端的变形金刚 通过type属性变形
text:普通文本
password:密文
date:日期
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容
radio:单选
默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选
<input type="checkbox" checked>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<select name="" id="" multiple>
<option value="" selected>新垣结衣option>
<option value="" selected>斯佳丽option>
<option value="">明老师option>
select>
textarea标签 获取大段文本
<textarea name="" id="" cols="30" rows="10">textarea>
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<input type="submit" value="注册">
2、<button>点我button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
p>
标签的两个重要属性
id值，类似于身份证号，同一个 HTML 页面上唯一不能重复class值，一个标签可以继承多个 class 值- 标签内可以有默认的属性（键值对），也可以有自自定义的属性
CSS
- 层叠样式表：给 HTML 添加样式
注释
/**/
语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
css 三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
2.link标签引入外部css文件(最正规的方式 解耦合)
"stylesheet" href="mycss.css">
3.行内式(一般不用)
"color: green">老板好 要上课吗?
css 选择器
基本选择器
组合选择器
/*后代选择器*/
div span {
color: red;
}
/*儿子选择器*/
div>span {
color: red;
}
/*毗邻选择器*/
div+span { /*!*同级别紧挨着的下面的第一个*!*/
color: aqua;
}
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
属性选择器
""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
属性选择器是以[]作为标志的
[username] { /*!*将所有含有属性名是username的标签背景色改为红色*!*/
background-color: red;
}*/
[username='jason'] { /*!*找到所有属性名是username并且属性值是jason的标签*!*/
background-color: orange;
}
input[username='jason'] { /*!*找到所有属性名是username并且属性值是jason的input标签*!*/
background-color: wheat;
}
选择器优先级
- 选择器相同 书写顺序不同
- 就近原则:谁离标签更近就听谁的
- 选择器不同 …
- 行内 > id选择器 > 类选择器 > 标签选择器
- 精确度越高越有效
css 属性
- 行内标签无法设置长宽，就算写了也无法生效
字体属性
font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
font-size: 24px; /*字体大小*/
font-weight: inherit; /*bolder lighter 100~900 inherit继承父元素的粗细值*/
color: red; /*直接写颜色英文*/
color: #ee762e; /*颜色编号*!*/
color: rgb(128,23,45); /*三基色 数字 范围0-255*!*/
color: rgba(23, 128, 91, 0.9); /*第四个参数是颜色的透明度 范围是0-1*!*/
文字属性
text-align: center; /*居中*/*/
text-align: right;
text-align: left;
text-align: justify; /*两端对齐*/
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
/*在html中 有很多标签渲染出来的样式效果是一样的*/
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
边框
p {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
/*左边框的宽度 颜色 样式*/
border-left-width: 5px;
border-left-color: red;
border-left-style: dotted;
/*右边框的宽度 颜色 样式*/
border-right-width: 10px;
border-right-color: greenyellow;
border-right-style: solid;
/*上边框的宽度 颜色 样式*/
border-top-width: 15px;
border-top-color: deeppink;
border-top-style: dashed;
/*下边框的宽度 颜色 样式*/
border-bottom-width: 10px;
border-bottom-color: tomato;
border-bottom-style: solid;
/*border: 3px solid red; !*三者位置可以随意写*!*/
}
/*画圆*/
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
display 属性
display: none; /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
display: inline; /*将标签设置为行内标签的特点*/
display: block; /*将标签设置成块儿级标签的特点*/
display: inline-block; /*标签即可以在一行显示又可以设置长宽*!*/
溢出属性
overflow: visible; /*默认就是可见 溢出还是展示*/
overflow: hidden; /*溢出部分直接隐藏*/
overflow: scroll; /*设置成上下滚动条的形式*/
overflow: auto;
盒子模型
- 标签和标签之间的距离
margin外边距 - 标签的边框
border - 内容到边框的距离
padding内边距 - 注意：浏览器会自带 8px 的 margin，可以去掉
body {margin: 0;}
margin: 0; /*上下左右全是0
margin: 10px 20px; /* 第一个上下 第二个左右*/
margin: 10px 20px 30px; /*第一个上 第二个左右 第三个下*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
/*水平居中*/
margin: 0 auto; /*只能做到标签的水平居中*/
/*padding 和 margin 语法一样*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的*/
}
定位
-
静态
所有的标签默认都是静态的static，无法改变位置
-
相对定位(了解)
相对于标签原来的位置做移动relative
-
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
position: static; /*默认是static无法修改位置*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
position: absolute; /*绝对定位*/
position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/
文档流(原来的位置是否还保留)
- 不脱离文档流：相对定位
- 脱离文档流：浮动、绝对定位、固定定位
JavaScript
- 现在最多用的是 5.9 和 6.0 版本的 js
HTML 插入 JS
<button type="button" onclick="alert('欢迎!')">点我!button>
<script type="javascript">
...
script>
<script type="javascript" src="myjs.js">script>
注释和变量
注释
// 单行注释
/*
多行注释
*/
注意
- js 和 python 一样，是动态类型的语言，不需要为此定义变量类型
声明变量的两种方式
var 变量名; // 全局变量
let 变量名; // 可以区分全局和局部变量
常量
const PI = 3.14; // 更改会报错
数值类型number
- js 不区分数值的整数和小数，一律都是 number 类型
var a = 10;
typeof(a) // number
类型转换
parseInt()
parseFloat()
// 将字符串型转换为 number
parseInt('12312312') // 12312312
// 将字符串型转换为 number, 并保留小数
parseFloat('11.11') // 11.11
// 将字符串型转换为 number, 不保留小数
parseInt('11.11') // 11
// 对于有其他字符的，只保留前面的一部分
parseInt('123sdasdajs2312dasd') // 123
// 当前面不是字符串时，会返回 NaN
parseInt('asdasdad123sdasdajs2312dasd') // NaN
// NaN 是 number 类型
typeof NaN // number
字符串类型string
var name = 'codeFun' // 单引号声明
var name = "codeFun" // 双引号声明
// 不支持三引号声明
模板字符串
name = 'codeFun';
age = 18;
str = `
my name is ${name}, age is ${age}
` // '\n\tmy name is codeFun, age is 18\n'
常用的字符串方法
//返回长度
.length
// 去除空白
.trim() // 移除空白
.trimLeft() // 移除左边的空白
.trimRight() // 移除右边的空白
// 字符切片
.charAt(n) // 返回第n个字符
.indexOf(substring, start) // 子序列位置
.substring(from, to) // 根据索引获取子序列
.slice(start, end) // 切片
.split(delimiter, limit) // 分割
// 转换大小写
.toLowerCase() // 小写
.toUpperCase() // 大写
布尔值Boolean
true
false // 空字符串、0、null、undefined、NaN
null 和 undefined
- null 是将赋值完的变量名给空值，undefined 是未赋值
数组
// 类似于 python 中的列表
var l = [11,22,33,44,55]
常用方法
.length // 获取长度
.push(element) // 向最后追加增加元素
.pop() // 弹出最后一个元素并返回
.unshift(element) // 在 0 索引添加元素
.shift() // 弹出 0 号索引的元素并返回
.reverse() // 反转
.join(连接符) // 使用连接符将列表连接起来并返回
.concat(list_name) // 连接两个数组返回新的数组
.sort() // 进行排序
.splice(index,delete_num) // 从 index 的位置，删除 delete_num 个元素
// 从 index 的位置，删除 delete_num 个元素,添加指定元素 element
.splice(index,delete_num,element)
遍历数组
l.forEach(function(value){console.log(value)}, l) // 遍历打印元素
// 遍历打印元素 和 索引
l.forEach(function(value, index){console.log(value,index)}, l)
// 遍历打印元素 索引 元素的数据来源
l.forEach(function(value,index,arr){console.log(value,index,arr)}, l)
// map 和 foreach 的用法差不多
var ll = [11,22,33,44,55,66]
ll.map(function (value) {
return value * 2
},ll)
// [22, 44, 66, 88, 110, 132]
运算符
// 算术运算符
// 加号在前先加后赋值 加号在后先赋值后加
var x = 10;
var res1 = x++; // res1 10
var res2 = ++x; // res2 12
// 比较运算符
1 == '1' # 弱等于 内部自动转换成相同的数据类型比较了
true
1 === '1' # 强等于 内部不做类型转换
false
流程控制
if 判断
if(条件){
代码块;
}else if(条件){
代码块;
}else{
代码块;
}
Switch 判断
var num = 2;
switch (num){
case 0:
代码块;
break;
case 2:
代码块;
break;
...
default:
代码块
}
for 循环
for(起始位;条件;循环一次后对于起始位的操作){
代码块;
}
// 打印0~9
for(var i = 0;i < 10;i ++){
console.log(i)
}
while 循环
while(条件){
代码块;
}
函数
函数的定义和调用
// 定义
function function_name([params]){
代码块;
[return return_value]
}
// 调用
// 调用函数时，传入参数的多或少都不会报错！
// 函数的返回值只能是一个，多个可以使用数组包括！
[return_vaule =] function_name([params])
限制调用函数的参数
function func2(a,b){
if(arguments.length<2){
console.log('传少了')
}else if (arguments.length>2){
console.log('传多了')
}else{
console.log('正常执行')
}
}
匿名函数
function([params]){
代码块;
}
箭头函数
var function_name = params => params;
// 上面和下面的等价
var function_name = function(params){
return params
}
对象
自定义对象
"""第一种创建自定义对象的方式"""
var d = {'name':'jason','age':18}
typeof d // "object"
取值
d['name'] // "jason"
d.name // "jason"
"""第二种创建自定义对象的方式 需要使用关键字 new"""
var d2 = new Object() # {}
d2.name = 'jason' // {name: "jason"}
d2['age'] = 18 // {name: "jason", age: 18}
Date 日期对象
let date = new Date() // Thu Apr 20 2023 11:29:07 GMT+0800 (中国标准时间)
d3.toLocaleString() // '2023/4/20 11:29:07'
// 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString() # 月份从0开始0-11月
"1111/12/11 上午11:11:11"
# 时间对象具体方法
let d6 = new Date();
d6.getDate() 获取日
d6.getDay() 获取星期
d6.getMonth() 获取月份(0-11)
d6.getFullYear() 获取完整的年份
d6.getHours() 获取小时
d6.getMinutes() 获取分钟
d6.getSeconds() 获取秒
d6.getMilliseconds() 获取毫秒
d6.getTime() 时间戳
JSON 对象
JSON.stringify() // 序列化 类似于 python 中的 dumps
JSON.parse() // 反序列化 类似于 python 中的 loads
// 实例：
var dict = {'name': 'codeFun', age: 18};
dict_json = JSON.stringify(dict) // '{"name":"codeFun","age":18}'
JSON.parse(dict_json) // {name: 'codeFun', age: 18}
RegExp 对象
// 创建对象
var reg_obj01 = new RegExp('^[a-zA-Z]{1,5}$'); // 匹配 1-5 个由大小写字母组成的字串
var reg_obj02 = /^[a-zA-Z]{1,5}$/; // 匹配 1-5 个由大小写字母组成的字串
// 匹配内容
reg_obj01.test(); // 什么不写，匹配 undefined
reg_objo1.test('codeFun'); // 返回 false
// 字符串匹配
var str01 = 'hello world';
var result_list = str01.match(/o/);
console.log(result_list) // ['o', index: 4, input: 'hello world', groups: undefined] 只能找到一个
var result = str01.match(/o/g) // 全局查找，能够找到两个
"""
全局匹配有一个 lastIndex 属性，匹配一次后指针就到最后了，下一次再匹配就是 false
"""
BOM 和 DOM
- BOM（Browser Object Model）浏览器操作对象
- 使用 js 代码操作浏览器
- DOM（Document Object Model）文档对象模型
- 使用 js 代码操作标签
BOM 操作
window 对象
- window 对象指代的就是浏览器窗口
window.innerHeight // 浏览器窗口的高度 910
window.innerWidth // 浏览器窗口的宽度 1589
// 新建窗口打开页面，第二个参数空着，第三个参数是新建窗口的大小和位置
window.open('https://www.baidu.com/','','height=500px,width=500px,top=400px,left=400px');
window.close() // 关闭当前页面
window 子对象 navigator
// 判断当前是否是浏览器 -- 爬虫和反爬能够用的上
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48'
// 获取操作系统
window.navigator.platform // 'Win32'
window 子对象 history
window.history.back() // 回退到上一页
window.history.forward() // 前进到下一页
window 子对象 location
window.location.href // 获取当前页面的 url
window.location.href = url // 跳转到指定页面
widow.location.reload() // 刷新当前页
各种框
// 警告框
alert('hello world') // 没有返回值，有确认按钮
// 确认框
confirm('你确定吗？') // 当点“确认”时，返回 true；反之点取消返回 false
// 提示框
prompt('提示标题','提示内容') // 当点击确认时，返回“提示内容”，点取消返回 null
计时器
一次性计时器
let t = setTimeout(function_name,3000) // 3 秒之后自动执行 function_name 函数
clearTimeout(t) // 取消定时任务
循环计时器
t = setInterval(function_name,3000) // 每隔 3 秒执行一次
clearInterval(t) // 清除定时器
DOM 操作
- DOM 树
- 所有标签都可以称为节点
- JavaScript 可以通过 DOM 创建动态的 HTML：
- 能够改变页面中所有的 HTML 元素和属性
- 能够改变页面中所有的 css 样式
- 能够对页面中所有事件做出反应
查找标签
// 直接查找
document.getElementById("d1") // 根据 id 查找标签，返回标签
document.getElementsByClassName('c1') // 根据类名查找标签，返回列表
document.getElementsByTagName('div') // 根据标签名查找标签，返回列表
节点操作
/*
在页面指定位置添加图片
*/
// 创建标签
let imgEle = document.createElement('img')
// 给标签添加默认属性
imgEle.src = '111.png'
// 给标签添加自定义属性
imgEle.setAttribute('username','codeFun')
// 获取父标签元素
let divEle = document.getElementById('d2')
// 在父标签内添加 imgEle
divEle.appendChild(imgEle)
// 给 a 标签设置文本
aEle.innerText = 'hello world'
divEle.innerHTML = 'hello world' // 可以识别 html 语言
// 额外补充
.appendChild()
.removeChild()
.replaceChild()
.setAttribute() 设置属性
.getAttribute() 获取属性
.removeAttribute() 移除属性
获取值操作
// 获取用户数据标签内部的数据
let inputEle = document.getElementById('d1')
inputEle.value
// 获取用户上传的文件数据
fileEle.files // 获取一个有关文件的列表
fileEle.files[0] // 获取文件数据
class css 操作
let divEle = document.getElementById('d1')
divEle.classList // 获取标签所有的类属性
divEle.classList.remove('bg_red') // 移除某个类属性
divEle.classList.add('bg_red') // 添加类属性
divEle.classList.contains('c1') // 验证是否包含某个类属性 true
divEle.classList.toggle('bg_red') // 有则删除无则添加
// DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
pEle.style.backgroundColor = 'yellow'
pEle.style.border = '3px solid red'
事件
- 达到某个事先设定的条件，自动触发的动作
绑定事件的两种方式
<button onclick="func1()">点我button>
<button id="d1">点我button>
<script>
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222)
}
script>
实时展示当前时间
<body>
<div>
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始button>
<button id="d3">结束button>
div>
<script>
let t = null
let inputEle = document.getElementById('d1')
let startBtnEle = document.getElementById('d2')
let endBtnEle = document.getElementById('d3')
function getTime(){
let currentTime = new Date()
inputEle.value = currentTime.toLocaleTimeString()
}
startBtnEle.onclick = function (){
if (!t){
t = setInterval(getTime,1000)
}
}
endBtnEle.onclick = function (){
clearInterval(t)
t = null
}
script>
body>
jQuery
- JQuery 内部封装了原生的 js 代码，还额外添加了很多功能
- 能够让我们通过书写更少的代码完成 js 操作
- JQuery 兼容多种浏览器，不需要考虑浏览器兼容问题（IE除外）
- 我们现在使用的是 3.x 版本，不兼容 IE
HTML 导入 jQuery
将 jQuery 文件直接导入即可
<script src="jQuery-3.4.1.js">script>
也可以使用 cdn 服务
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
jQuery 的基本语法
JQuery('选择器').操作()
JQuery 还可以简写为 $
即 JQuery('选择器').操作() === $('选择器').操作()
// 例如将 div 标签中的颜色变红
$('div').css('color','red')
jQuery对象转换成标签对象
// jQuery对象如何变成标签对象
$('#d1')[0]
// 标签对象如何转jQuery对象
document.getElementById('d1')
$(document.getElementById('d1'))
选择器和筛选器
基本选择器
// id选择器
$('#d1')
// class选择器
$('.c1')
// 标签选择器
$('span')
组合选择器
$('div.c1') // 查找 div 中 class = c1 的
$('div#d1') // 查找 div 中 id = d1 的
$('*') // 查找全部
分组与嵌套
$('#d1,.c1,p') # 并列+混用
$('div span') // 后代
$('div>span') // 儿子
$('div+span') // 毗邻
$('div~span') // 弟弟
基本筛选器
$('ul li')
$('ul li:first') // 大儿子
$('ul li:last') // 小儿子
$('ul li:eq(2)') // 放索引
$('ul li:even') // 偶数索引 0包含在内
$('ul li:odd') // 奇数索引
$('ul li:gt(2)') // 大于索引
$('ul li:lt(2)') // 小于索引
$('ul li:not("#d1")') // 移除满足条件的标签
$('div')
$('div:has("p")') // 选取出包含一个或多个标签在内的标签
属性选择器
$('[username]') // 选择有 username 的标签
$('[username="jason"]') // 选择有 username = jason 的标签
$('p[username="egon"]') // 选择有 username 的 p 标签
表单筛选器
$('input[type="text"]')
$('input[type="password"]')
// 将上面的进行简写
$(':text') // 等价于上面第一个
$(':password') // 等价于上面第二个
// 下面的都可以简写：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected
// 特例
$(':checked') // 它会将checked和selected都拿到
$(':selected') // 它不会 只拿selected
$('input:checked') // 添加一个限制条件
筛选器方法
$('#d1').next() // 同级别下一个
$('#d1').nextAll() // 同级别下面的所有
$('#d1').nextUntil('.c1') // 直到 class = c1 为止，不包括 c1
$('.c1').prev() // 同级别上一个
$('.c1').prevAll()
$('.c1').prevUntil('#d2')
$('#d2').siblings() // 同级别上下所有
$('#d3').parent() // 第一级父标签
$('#d3').parent().parent() // 父亲的父亲
$('#d3').parents() // 找到祖宗 HTML
$('#d3').parentsUntil('body')
$('#d2').children() // 儿子
$('div p')
// 上面等价于下面
$('div').find('p') // find从某个区域内筛选出想要的标签
// 下面的两两等价
$('div span:first')
$('div span').first()
$('div span:last')
$('div span').last()
$('div span:not("#d3")')
$('div span').not('#d3')
操作标签
操作类
/*
js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
*/
css 操作
// 将第一个 p 标签的颜色变成红色，将它的下一个变成绿色
$('p').first().css('color','red').next().css('color','green')
// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
位置操作
.offset() // 相对于浏览器窗口
.position() // 相对于父标签
.scrollTop()
$(window).scrollTop() // // 目前浏览的长度
$(window).scrollTop(0) # 加了参数就是设置
尺寸
$('p').height() // 文本的高度
$('p').width() // 文本的宽度
$('p').innerHeight() // 文本+padding
$('p').innerWidth()
$('p').outerHeight() // 文本+padding+border
$('p').outerWidth()
文本操作
/*
操作标签内部文本
js jQuery
innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()
*/
$('div').text()
$('div').html()
获取值操作
/*
js jQuery
.valu .val()
*/
$('#d1').val()
$('#d1').val('520快乐') # 括号内不加参数就是获取加了就是设置
// 获取文件
$('#d2')[0].files[0] //记两个对象之间的转换
属性操作
/*
js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象
*/
let $pEle = $('p')
$pEle.attr('id')
$pEle.attr('class','c1')
$pEle.removeAttr('password')
/*
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
*/
$('#d2').prop('checked')
$('#d3').prop('checked',true)
两个方法
each
// 打印出所有的索引
$('div').each(function(index){console.log(index)})
// 打印所有的索引和对象
$('div').each(function(index,obj){console.log(index,obj)})
// 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
data
- 能够让标签帮我们存储数据 并且用户肉眼看不见
// 添加 info = hello world 的键值对
$('div').data('info','hello world')
// 根据键获取信息
$('div').data('info')
// 根据键删除信息
$('div').removeData('info')
小案例
按钮克隆
/*
js 函数内的 this 指代函数本身。
*/
<button id="d1">点击，复制我</button>
<script>
$('#d1').on('click',function () {
$(this).clone().insertAfter($('body'))
})
</script>
自定义登录校验
<body>
<p>
username：<input type="text" id="username">
<span style="color: red">span>
p>
<p>
password：<input type="text" id="password">
<span style="color: red">span>
p>
<button id="d1">提交button>
<script>
let $username = $('#username')
let $password = $('#password')
// 点击提交时会判断输入框内是否为空，如果为空则提示用户不能为空
$('#d1').on('click',function (){
let userName = $username.val()
let passWord = $password.val()
if (!userName){
$username.next().text('用户名不能为空')
}
if (!passWord){
$password.next().text('密码不能为空')
}
})
// 聚焦事件，将鼠标放到收入框内触发
$('input').focus(function () {
// 将红色提示字清空
$(this).next().text('')
})
script>
body>
input 框实时监控
<body>
<input type="text">
<script>
$('input').on('input',function () {
console.log($(this).val())
})
script>
body>
hover 事件
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
script>
阻止后续事件
点击它有默认事件：提交用户输入的内容和清空用户输入的内容- 通过
return false可以阻止默认事件的发生 return false还可以阻止事件冒泡- 事件冒泡：就是在父亲和儿子都有点击事件时，点击儿子也会触发父辈的点击事件
<body>
<form>
<span id="d1">span>
<input type="submit" id="d2">
form>
<script>
$('#d2').on('click',function () {
$('#d1').text('hello world')
return false
})
script>
body>
事件委托
<body>
<button>弹窗显示button>
<script>
// $('button').click(function () {
// alert(123)
// })
// 上面的点击事件在动态的新建按钮时触发
// 在指定范围内 将事件委托给某个标签 无论标签是事先写好的还是后面动态创建的
$('body').on('click','button',function () {
alert('hello world')
})
script>
body>
BootStrap
form 表单常用模版
<table class="table table-hover table-striped">
<thead>
<tr>
<th>IDth>
tr>
thead>
<tbody>
{% for book_obj in book_queryset %}
<tr>
<td>{{ book_obj.pk }}td>
<td>
<a href="" class="btn-xs btn btn-primary">编辑a>
td>
tr>
{% endfor %}
tbody>
table>