前端知识总汇
HTML
- 超文本标记语言
注释
<!--单行注释--><!--
多行注释
-->
由于 HTML 代码杂乱无章，我们习惯性的用注释来划定区域方便后续的查找
HTML 的文档结构
<!DOCTYPEhtml><htmllang="en"><!-- 定义配置给浏览器 --><head></head><!--网页的主体部分--><body></body></html>
head 内常用标签
<head><metaname="keyword"content="搜索关键字"><!--网页搜索关键字--><metaname="description"content="网页秒数信息"><!--网页秒数信息--><title></title><!--网页标题--><style></style><!--内部编写 css 代码--><linkrel="stylesheet"href="mycss.css"><!--引入外部 css 文件--><scritpt></scritpt><!--内部编写 js 代码--><scriptsrc="myjs.js"></script><!--引入外部 js 文件--></head>
body 内常用标签
基本标签
<h1> 一级标签 </h1><!--标题标签 1~6 标题--><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 World</span><!-- 行内标签 --></div>
<!--
构造页面初期时使用，使用 div 和 span 去占位然后再调整样式
使用 div 分区域，使用 span 放文本
img
图片标签
<imgsrc=""alt="">
<!--
src
1.图片的路径 可以是本地的也可以是网上的
alt="这是我的前女友"
当图片加载不出来的时候 给图片的描述性信息
title="新垣结衣"
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a
链接标签
<ahref=""target="">文本</a>
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
新建页面跳转 _blank
<!-- a 标签的锚点功能
点击 id 为 #d1 的 a标签，自动跳转到 id 为 d1 的 a 标签
--><ahref=""id="d1"></a><br><imgsrc="111.png"alt="this is my wife"height="400px"title="YiFei Liu"><br><ahref=""id="#d1">点此回到图片上</a>
列表标签
无序列表
<ul><li>第一项</li><li>第二项</li><li>第二项</li><li>第二项</li></ul>
有序列表
<oltype="1"start="5"><!-- type 更换类型 start 从哪开始 --><li>111</li><li>222</li><li>333</li></ol>
标题列表
<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容2</dd><dt>标题3</dt><dd>内容3</dd></dl>
表格
<table><!--表头信息--><thead><!--一个tr就表示一行--><tr><th>username</th>
加粗文本
<td>username</td>
正常文本
</tr></thead><!--表单(数据信息)--><tbody><tr><td>jason</td><td>123</td><td>read</td></tr></tbody></table>
<tableborder="1"> 加外边宽
<tdcolspan="2">egon</td> 水平方向占多行
<tdrowspan="2">DBJ</td> 垂直方向占多行
表单标签
- 能够获取前端用户的数据，基于网络发送给后端服务
<formaction="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'
<inputtype="radio"name="gender"checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<inputtype="radio"name="gender"checked>女
checkbox:多选
<inputtype="checkbox"checked>DBJ
file:获取文件 也可以一次性获取多个
<inputtype="file"multiple>
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<selectname=""id=""multiple><optionvalue=""selected>新垣结衣</option><optionvalue=""selected>斯佳丽</option><optionvalue="">明老师</option></select>
textarea标签 获取大段文本
<textareaname=""id=""cols="30"rows="10"></textarea>
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<inputtype="submit"value="注册">
2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<inputtype="radio"name="gender">男
<inputtype="radio"name="gender">女
<inputtype="radio"name="gender">其他
</p>
标签的两个重要属性
id值，类似于身份证号，同一个 HTML 页面上唯一不能重复class值，一个标签可以继承多个 class 值- 标签内可以有默认的属性（键值对），也可以有自自定义的属性
CSS
- 层叠样式表：给 HTML 添加样式
注释
/**/
语法结构
选择器{属性1:值1;属性2:值2;属性3:值3;属性4:值4;}
css 三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
h1{color: burlywood;}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
css 选择器
基本选择器
<style>
/*id选择器*/#d1{/* !*找到id是d1的标签 将文本颜色变成绿黄色*! */color: greenyellow;}/*类选择器*/.c1{/*!*找到class值里面包含c1的标签*!*/color: red;}/*元素(标签)选择器*/span{/*!*找到所有的span标签*!*/color: red;}通用选择器*/
*{/*!*将html页面上所有的标签全部找到*!*/color: green;}
</style>
组合选择器
/*后代选择器*/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
<!-- 行内式 --><buttontype="button"onclick="alert('欢迎!')">点我!</button><!-- 脚本块 --><scripttype="javascript">...</script><!-- 引入式 --><scripttype="javascript"src="myjs.js"></script>
注释和变量
注释
// 单行注释/*
多行注释
*/
注意
- js 和 python 一样，是动态类型的语言，不需要为此定义变量类型
声明变量的两种方式
var 变量名;// 全局变量let 变量名;// 可以区分全局和局部变量
常量
constPI=3.14;// 更改会报错
数值类型
number
- js 不区分数值的整数和小数，一律都是 number 类型
var a =10;typeof(a)// number
类型转换
parseInt()parseFloat()// 将字符串型转换为 numberparseInt('12312312')// 12312312// 将字符串型转换为 number, 并保留小数parseFloat('11.11')// 11.11// 将字符串型转换为 number, 不保留小数parseInt('11.11')// 11// 对于有其他字符的，只保留前面的一部分parseInt('123sdasdajs2312dasd')// 123// 当前面不是字符串时，会返回 NaNparseInt('asdasdad123sdasdajs2312dasd')// NaN// NaN 是 number 类型typeofNaN// 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
truefalse// 空字符串、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 10var res2 =++x;// res2 12// 比较运算符1=='1' # 弱等于 内部自动转换成相同的数据类型比较了
true1==='1' # 强等于 内部不做类型转换
false
流程控制
if 判断
if(条件){
代码块;}elseif(条件){
代码块;}else{
代码块;}
Switch 判断
var num =2;switch(num){case0:
代码块;break;case2:
代码块;break;...default:
代码块
}
for 循环
for(起始位;条件;循环一次后对于起始位的操作){
代码块;}// 打印0~9for(var i =0;i <10;i ++){
console.log(i)}
while 循环
while(条件){
代码块;}
函数
函数的定义和调用
// 定义functionfunction_name([params]){
代码块;[return return_value]}// 调用// 调用函数时，传入参数的多或少都不会报错！// 函数的返回值只能是一个，多个可以使用数组包括！[return_vaule =]function_name([params])
限制调用函数的参数
functionfunc2(a,b){if(arguments.length<2){
console.log('传少了')}elseif(arguments.length>2){
console.log('传多了')}else{
console.log('正常执行')}}
匿名函数
function([params]){
代码块;}
箭头函数
varfunction_name=params=> params;// 上面和下面的等价varfunction_name=function(params){return params
}
对象
自定义对象
"""第一种创建自定义对象的方式"""var d ={'name':'jason','age':18}typeof d // "object"
取值
d['name']// "jason"
d.name // "jason""""第二种创建自定义对象的方式 需要使用关键字 new"""var d2 =newObject() # {}
d2.name ='jason'// {name: "jason"}
d2['age']=18// {name: "jason", age: 18}
Date 日期对象
let date =newDate()// Thu Apr 20 2023 11:29:07 GMT+0800 (中国标准时间)
d3.toLocaleString()// '2023/4/20 11:29:07'// 也支持自己手动输入时间let d4 =newDate('2200/11/11 11:11:11')
d4.toLocaleString()let d5 =newDate(1111,11,11,11,11,11)
d5.toLocaleString() # 月份从0开始0-11月
"1111/12/11 上午11:11:11"
# 时间对象具体方法
let d6 =newDate();
d6.getDate() 获取日
d6.getDay() 获取星期
d6.getMonth()获取月份(0-11)
d6.getFullYear() 获取完整的年份
d6.getHours() 获取小时
d6.getMinutes() 获取分钟
d6.getSeconds() 获取秒
d6.getMilliseconds() 获取毫秒
d6.getTime() 时间戳
JSON 对象
JSON.stringify()// 序列化 类似于 python 中的 dumpsJSON.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 =newRegExp('^[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 ='<a>hello world</a>'// 可以识别 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'
事件
- 达到某个事先设定的条件，自动触发的动作
绑定事件的两种方式
<buttononclick="func1()">点我</button><buttonid="d1">点我</button><script>// 第一种绑定事件的方式functionfunc1(){alert(111)}// 第二种let btnEle = document.getElementById('d1');
btnEle.onclick=function(){alert(222)}</script>
实时展示当前时间
<!--
1 访问页面之后 将访问的时间展示到input框中
2 动态展示当前时间
3 页面上加两个按钮 一个开始 一个结束
--><body><div><inputtype="text"id="d1"style="display: block;height: 50px;width: 200px"><buttonid="d2">开始</button><buttonid="d3">结束</button></div><script>let t =nulllet inputEle = document.getElementById('d1')let startBtnEle = document.getElementById('d2')let endBtnEle = document.getElementById('d3')functiongetTime(){let currentTime =newDate()
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 文件直接导入即可
<scriptsrc="jQuery-3.4.1.js"></script>
也可以使用 cdn 服务
<scriptsrc="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：<inputtype="text"id="username"><spanstyle="color: red"></span></p><p>
password：<inputtype="text"id="password"><spanstyle="color: red"></span></p><buttonid="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><inputtype="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>
阻止后续事件
<input type="submit">点击它有默认事件：提交用户输入的内容和清空用户输入的内容- 通过
return false可以阻止默认事件的发生 return false还可以阻止事件冒泡 - 事件冒泡：就是在父亲和儿子都有点击事件时，点击儿子也会触发父辈的点击事件
<body><form><spanid="d1"></span><inputtype="submit"id="d2"></form><script>$('#d2').on('click',function(){$('#d1').text('hello world')returnfalse})</script></body>
事件委托
<body><button>弹窗显示</button><script>// $('button').click(function () {// alert(123)// })// 上面的点击事件在动态的新建按钮时触发// 在指定范围内 将事件委托给某个标签 无论标签是事先写好的还是后面动态创建的$('body').on('click','button',function(){alert('hello world')})</script></body>
BootStrap
form 表单常用模版
<tableclass="table table-hover table-striped"><thead><tr><th>ID</th></tr></thead><tbody>
{% for book_obj in book_queryset %}
<tr><td>{{ book_obj.pk }}</td><td><ahref=""class="btn-xs btn btn-primary">编辑</a></td></tr>
{% endfor %}
</tbody></table>
标签：
前端
本文转载自: https://blog.csdn.net/weixin_54898062/article/details/132557129
版权归原作者 [听风声] 所有， 如有侵权，请联系我们删除。
版权归原作者 [听风声] 所有， 如有侵权，请联系我们删除。