目录
- 周总结-10week
- 前端简介
- 超文本传输协议前戏
- HTTP超文本传输协议
- HTML简介
- head内常见标签
- body内基本标签
- 块儿级标签与行内标签
- body内基本符号
- body内布局标签
- body内常见标签
- 标签两大重要属性
- 列表标签
- 表格标签
- 表单标签
- 表单知识
- CSS层叠样式表
- CSS基本选择器
- CSS组合选择器
- CSS属性选择器
- CSS选择器之分组与嵌套
- CSS选择器之伪类选择器
- CSS选择器之伪元素选择器
- CSS选择器优先级
- 字体样式
- 背景属性
- 边框属性
- display属性
- 盒子模型
- 浮动布局
- 溢出属性
- 定位
- z-index
- JavaScript简介
- JS变量与常量
- JS数据类型之数值类型
- JS数据类型之字符串类型
- JS数据类型之布尔值
- JS数据类型之对象
- JS数据类型之自定义对象
- 运算符
- 流程控制
- 函数
- JS内置对象
- BOM与DOM操作
- JS获取用户输入值
- JS类属性操作
- JS样式操作
- 事件
- JS事件案例
- jQuery类库
- jQuery基本使用
- 基本筛选器
- 表单筛选器
周总结-10week
前端简介
1.前端就是直接与用户打交道的操作界面
2.前端核心基础
HTML 网页的骨架
CSS 网页的样式
JS 网页的动态
超文本传输协议前戏
1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端的响应数据 为了实现无障碍沟通交流 有了一些协议: HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题 因为别人早就封装好了
问题只会出现在我们自己写的服务端的响应数据格式
import socket
server = socket.socket() # 创建socket对象
server.bind(('127.0.0.1', 8080)) # 服务端绑定地址
server.listen(5) # 半连接池
sock, addr = server.accept()
data = sock.recv(1024)
print(data)
sock.send(b'hello curry'
HTTP超文本传输协议
1.四大特性
1.基于请求进行响应
2.基于TCP/IP之上作用于应用层的协议
3.无状态
4.无/短连接
2.数据格式
请求数据格式
1.请求首行(请求方式:能有很多种 协议名称及版本)
2.请求头(一些K:V键值对)
3.换行
4.请求体(携带一些敏感的数据 不是所有的请求都有请求体)
响应数据格式
1.响应首行(响应体状态码)
2.响应头(一些K:V键值对)
3.换行
4.响应体(一般情况下就是浏览器需要展示给用户看的数据)
3.响应状态码
利用数字来表示一些复杂的情况(类似于暗号)
1XX:服务端已经接收到你的请求正在处理 你可以继续提交或者等待
2XX: 200 OK服务端给出了响应
3XX: 重定向
4XX: 403请求不符合条件 404请求资源不在
5XX: 服务端内部错误
在公司更多的状态一般在10000开始
HTML简介
超文本标记语言
是所有浏览器展示的页面必备的！！！
浏览器展示的页面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
HTML没有任何的逻辑 所见及所得
HTML注释语法
<!--注释内容-->
HTML文件结构
<html> 所有的代码逗比学写在html标签内部
<head><head> head内的数据一般都不是给用户看的
<body><body> body内的数据就是浏览器展示给用户看的
</html>
HTML标签的分类
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>
head内常见标签
title 控制标签页小标题
style 内部支持编写CSS
link 引入外部CSS文件
script 内部支持编写JS代码 还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
body内基本标签
h1~h6 标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下划线
i 斜体
s 删除线
b 加粗
注意:有很多样式 可能存在多种标签可以实现
块儿级标签与行内标签
1.块儿级标签 h1~h6 p hr br
一个标签独占一行
2.行内标签 u i s b
内部文本多大自身就占多大
body内基本符号
空格
> 大于号
< 小于号
& &
¥ ￥
® 注册
© 版权
body内布局标签
div
块儿级标签
span
行内标签
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以进行嵌套
块儿级可以嵌套任何类型的标签
p标签虽然是块儿级标签 但是不能嵌套
行内标签只能嵌套行内标签
body内常见标签
1.a标签
链接标签
href 可以填写网址 点击自动跳转 还可以填写其他标签的id值 实现铺点功能
target 可以控制是否新建页面跳转
_self
_blank
2.img标签
图片标签
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
上述两个 调整一个另外一个等比例缩放
标签两大重要属性
下面的两个属性都是用来快速定位需要操作的标签
1.id标签(一对一管理)
类似于身份证号 在同一个html页面上 id值不能重复
2.class属性(批量管理)
类似于分组 多个标签可以拥有相同的class值
列表标签
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是相当于在当前的页面进行提交
method属性
用于控制请求的方式(get/post)
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birthday:<input type="date"></p>
<p>email:<input type="email"></p>
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>GF:
<select name="" id="" multiple>
<option value="">小明</option>
<option value="">小波</option>
<option value="">小冲</option>
<option value="">小黄</option>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>
表单知识
1.获取用户输入的标签两个重要属性
name属性
类似于字典的键
value属性
类似于字典的值
form表单在朝后端发送数据的时候 标签必须有name 否则不会发送该标签的值
2.获取用户输入的input标签理论上需要有label配合使用
3.获取用户输入的input标签也可以添加背景提示
4.获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value
5.针对radio和checkbox可以默认选中
checked="checked" 如果属性名和属性值相等 那么可以简写 checked
6.针对option标签也可以默认选中
selected="selected"简写为selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>啦啦啦</title>
</head>
<body>
<form action="">
<p>
<label for="d1"> username:</label>
<input type="text" name="username" id="d1">
</p>
<p>password:
<input type="text" name="password" placeholder="密码">
</p>
<p><input type="radio" name="gender" value="male">男
<p><input type="radio" name="gender" value="female">女
<p><input type="radio" name="gender" value="others" checked="checked">外星人
</p>
<p>
<input type="checkbox" name="hobby" value="basketball">篮球
</p>
<P>
<select name="province" id="">
<option value="NMG">内蒙古</option>
<option value="BJ">北京</option>
<option value="SH">上海</option>
</select>
</P>
</form>
</body>
</html>
CSS层叠样式表
1.调整标签样式
2.语法结构
选择器{
属性名1:属性值1;
属性名2：属性值2;
}
3.注释语法
/*注释内容*/
4.三种编写CSS的方式
1.head中style标签内部直接表写(学习阶段使用 方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)
CSS基本选择器
/*1.标签选择器:直接编写标签名来查找标签*/
div {
color: green; /*查找所有的div标签 并将内部的文本颜色变为绿色*/
}
/*2.类选择器:通过编写class的值来查找标签*/
.c1 {
color:red; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}
/*3.id选择器:通过编写id的值来精准查找标签*/
#d1 {
color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}
/*4.通用选择器:查找所有的标签*/
* {
color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}
CSS组合选择器
"""
预备知识:标签之间的关系
<p></p>
<div>
<p>
<span></span>
</p>
</div>
<p></p>
"""
/*查找div标签内部所有的span(后代)*/
/*1.后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/
/*#d1 span {*/
/* color: blue;*/
/*}*/
/*查找div标签内部所有的儿子span*/
/*2.儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/
/*#d1>span {*/
/* color: orange;*/
/*}*/
/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
/*3.毗邻选择器*/
/*#d1+span {*/
/* color: red;*/
/*}*/
/*查找div标签同级别下面所有的span标签(弟弟们)*/
/*4.弟弟选择器*/
#d1~span {
color: blue;
}
CSS属性选择器
"""
所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
默认属性 id class
自定义属性 x=1 y=2
"""
/*1.查找属性名含有name的标签*/
/*[name] {*/
/* background-color: red;*/
/*}*/
/*2.查找属性名含有name并且值是username的标签*/
/*[name='username'] {*/
/* background-color: orange;*/
/*}*/
/*3.查找input标签并且 属性名含有name值是username的*/
/*input[name='username'] {*/
/* background-color: aqua;*/
/*}*/
/*前面的选择器可以是任意类型的 标签、id、class*/
CSS选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式 那么可以合并
div,p,span {
color: red;
}
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span {
color: red;
}
还可以在选择器基础之上添加额外的选择使得查找更精确
span.c1
div#d1
CSS选择器之伪类选择器
"""
补充知识
a标签默认的颜色有两种 紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过
"""
a:hover {
color: blue;
}
鼠标悬浮上去之后样式改变 适用于所有含有文本的标签
CSS选择器之伪元素选择器
通过CSS代码来操作标签的文本内容
p:first-letter {
font-size: 48px;
color: red;
}
p:before {
content:"来一口";
color:red;
}
p:after {
content:"再来一口";
color:blue;
}
伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬
CSS选择器优先级
"""
当多个选择器查找到相同的标签修改不同的样式 那么标签该如何选择
"""
1.选择器相同 引入位置不同
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
字体样式
width属性可以为元素设置宽度
height属性可以为元素设置高度
块儿级标签才能设置宽度 行内标签的宽度有内容来决定
body {
font-family: "微软雅黑";
}
p {
font-size: 16px;
}
p {
font-weight:lighter;
}
p {
color:red;
color:rgb();
color:#3e3e3e;
color:rgba(1,1,1,0.5)
}
p {
text-align:center;
}
a {
text-decoration: none;
}
p {
text-indent: 32px;
}
背景属性
关键字：background
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
边框属性
border
i1 {
border: 2px solid red;
}
border-raduis
用这个属性能实现圆角边框的效果 将border-radius设置为长或高的一半即可得到一个圆形
display属性
display
用于控制HTML元素的显示效果
盒子模型
所有的标签都可以看成是一个快递盒
1.所有快递盒之间的距离 标签之间的距离 外边距(margin)
2.快递盒的厚度 标签的边框 边框(border)
3.盒子内物体距离盒子内壁 内部文本与边框的距离 内边距(padding)
4.物体自身的大小 标签内部的内容 内容(content)
需要掌握的操作
margin-top
margin-left
margin-right
margin-bottom
body标签自带8px的外边距
margin:0; 简写形式 作用于上下左右
margin: 10px 20; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin：10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
margin:100px auto 仅限于水平方向
padding使用方式与margin一致
浮动布局
float: left/right 页面布局必不可少的操作
浮动会造成父标签塌陷
解决浮动造成的父标签塌陷
.clearfix:after{
content:'';
display:block;
clear:both;
}
提前写好上述的css操作 遇到标签塌陷就给标签加上clearfix类值即可
"""
浏览器针对文本是有限展示的(浮动的元素如果遮挡会想办法展示)
"""
溢出属性
visible 默认值 内容不会被修剪会呈现在元素框之外
hidden 内容会被修剪 并且其余内容是不可见的
scroll 内容会被修剪 但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
div {
hight: 50px;
width: 50px;
border: 5px solid gold;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
static(静态)
所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
z-index
设置对象的层叠顺序。
1.z-index 值表示谁压着谁数值大的压盖住数值小的
2.只有定位了的元素才能有z-index 不管相对定位 绝对定位 固定定位 都可以使用z-index 而浮动元素不能使用z-index
3.z-index值没有单位就是一个正整数 默认的z-index值为0如果大家都没有z-index值 或者z-index值一样 那么谁写在HTML后面 谁在上面压着别人 定位了元素 永远压住没有定位的元素
JavaScript简介
1.跟java没有关系 蹭热度
2.JavaScript与ECMAscript区别
3.版本迭代
4.JavaScript是一门编程语言(NodeJs)
5.html页面两种引入js的方式
6.两种注释语法
//
/**/
7.建议的结束符号是分号
JS变量与常量
"""
支持编写JS代码的地方
pycharm
浏览器
"""
在js中声明变量和常量都需要使用关键字
var:全局有效
let：如果在局部名称空间中使用 那么仅在局部名称空间有效
const：定义常量
JS也是动态类型:变量名绑定的数据值类型不固定
var name = 'curry'
name = 123
name = [1,2,3,4]
JS数据类型之数值类型
"""
在js中查看数据类型可以使用typeof
"""
在js中类型浮点型统称为数值类型number
parseInt()
parseFloat()
NaN: Not A Number 不是一个数字
JS数据类型之字符串类型
字符串string
var name = 'jason'
var name = "jason"
var name = `jason` 模板字符串
内置方法
1.js中涉及到字符串拼接 推荐使用+
JS数据类型之布尔值
回顾一波
python 布尔值一般存在于if判断语句、while循环、for循环中，用于判断条件真或假
bool
True
False: 0 None '' [] {}...
JS
boolean
true
false:(空字符串)、0、null、undefined、NaN
null与undefined的区别
null可以理解为曾经拥有过 现在暂时空了
undefined可以理解为从未拥有过
JS数据类型之对象
在python中一切皆可对象 在JS中也是一切皆可对象
1.对象之数组
使用单独的变量名来存储一系列的值 类似于python中的列表
let l1 = [1, 2, 3, 4]
JS数据类型之自定义对象
1.自定义对象(相当于python中的字典)
定义方式1:
let di = {'name':'curry','pwd':666}
定义方式2:
let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符即可
运算符
var x=10;
var res1=x++; 先赋值后自增
var res2=++= 先自增后赋值
== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)
&& 等价于python中的and
|| 等价于python中的or
！ 等价于python中的not
流程控制
1.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if...elif...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
"""
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
"""
2.循环结构
for(let i=1;i<101;i++){
console.log(i)
}
课堂小练习
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
while(条件){
循环体代码
}
函数
function hanshuming(形参){
函数体代码
return 返回值
}
function func(a, b){
console.log(a,b)
}
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a,b){
if(arguments.length===2){
console.log(a,b)
}else{
console.log('你倒是把参数给我啊')
}
}
匿名函数
funvtion(a,b){
return a + b;
}
箭头函数
var f = function(v){
return v;
}
var f = v => v;
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1,num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
JS内置对象
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名（）：
1.Date星期对象
2.json序列化对象
回顾python序列化
import json
json.dumps()
json.loads()
JS中的序列化
JSON.stringify()
JSON.parse()
3.RegExp正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
'''默认undefined 符合条件'''
BOM与DOM操作
BOM:浏览器对象模型
指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
DOM:文档对象模型
指文档对象模型，通过它，可以访问HTML文档的所有元素
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window.open() 打开新窗口
window.close() 关闭当前窗口
window.navigator.userAgent() 客户端绝大部分信息
window.history.forward() 前进一页
window.history.back() 后退一页
window.location.href 获取URL
window.location.href = 新网址 跳转到指定页面
window.location.reload() 重新加载页面
alter() 警告框
confirm() 确认框
prompt() 提示框
定时器相关操作(敲黑板)
function func1(){
alert('快跑呀')
}
let t = setTimeout(func1,3000) // 3秒中之后自动执行func1函数
clearTimeout(t) // 取消上面的定时任务
var s1 = null
function showMsg() {
function func1(){
alert('快跑呀')
}
s1 = setInterval(func1, 3000)
}
function clearMission(){
clearInterval(s1)
}
setTimeout(clearMission, 9000)
showMsg()
DOM操作
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
document.getElementById()
根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
根据class值查找标签 结果是数组类型
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
"""
let divEle = document.getElementById('d1')
"""
节点操作
let XXXEle = document.createElement('标签名')
XXXEle.id = 'id值'
XXXEle.innerText = '内部文本'
divEle.append(XXXEle)
ps:动态创建 临时有效 非永久
属性操作
XXXEle.属性 只能是默认属性
XXXEle.setAttribute() 默认属性、自定义属性
文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>curry</h1>'
'<h1>curry/h1>'
divEle.innerText = '<h1>curry</h1>'
'<h1>curry</h1>'
JS获取用户输入值
普通数据(输入、选择)
标签对象.value
文件数据(上传)
标签对象.files
标签对象.files[0]
JS类属性操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true 否则返回false
classList.toggie(cls) 存在就删除 否则添加
JS样式操作
通过JS来操作标签样式 并不常见(了解项)
obj.style.backgroudColoe='blue'
JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可 例
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可 例
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作(action),比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,这些属性可插入HTML标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点我看看" ondblclick="func1()">
<button id="d1">按我试试</button>
<script>
// 绑定事件的方式1:提前写好函数 标签内部指定
function func1() {
alert('弹弹弹')
console.log(this)
}
// 绑定事件的方式2:先查找标签 然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert('铛铛铛')
console.log(this)
}
</script>
</body>
</html>
JS事件案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<input type="text" id="username">
<span class="errors" style="color: red"></span>
</p>
<p>
<input type="text" id="password">
<span class="errors" style="color: red"></span>
</p>
<button id="bin">提交</button>
<script>
// 1.查看按钮标签
let btnRle = documen.getElementById('bin')
// 2.绑定单击事件
btnEle.onclick = function (){
// 3.获取用户输入的用户名和密码
let userNameVal = document.getElementById('username').valueOf();
let passWordVal = document.getElementById('password').valueOf();
// 4.判断用户名和密码是否合理
if (userNameVal === 'curry'){
// 5.查找获取用户的input框里面的span标签 注：span标签不调用时候不占内存
let span1Ele = document.getElementsByClassName('errors')[0];
// 6.给span标签内添加文本
span1Ele.innerText = '用户名不能为curry'
}
// 7.判断密码是否为空
if (passWordVal.length === 0){
// 8.朝招获取用户名的input框下的span标签
let span1Ele = document.getElementsByClassName('errors');
// 9.给span标签添加内部文本
span1Ele.innerText = '小呆呆 你是不知道密码为空吗？'
}
}
</script>
</body>
</html>
1.校验用户输入
点击事件 onclick
2.省市联动
文本域变化事件 onchange
jQuery类库
jQuery是一个轻量级的、兼容多浏览器的JavaScript库
极大地简化JavaScript编程 它的宗旨就是:write less，do more(写更少 做的更多)
jQuery的优势
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
注意: 使用jQuery必须是先导入(这一步很容易忘)！！！
本地导入
提前下载文件并导入
网络CDN服务
只要计算机能够联网就可以直接导入
bootcdn网址
建议下载一份 网址留一份 双重保险
jQuery基本使用
"""
jQuery() >>> $() 简便写法
"""
1.JS与jQuery语法对比
2.选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
组合选择器：
$("#id, .className, tagName")
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3.jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
1.如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用$()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
$('p')[0].css('color','red')
VM1235:1 Uncaught TypeError: $(...)[0].css is not a function
at <anonymous>:1:11
(anonymous) @ VM1235:1
$('p')[0].style.color = 'red'
'red'
$('p').first().css('color','red')
jQuery.fn.init [p, prevObject: jQuery.fn.init(2)]
$('p').first().style.color = 'green'
VM1626:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color')
at <anonymous>:1:28
(anonymous) @ VM1626:1
$($('p')[0]).css('color','orange')
jQuery.fn.init [p]
基本筛选器
:first 第一个
:last 最后一个
:eq(index) 索引等于index的那个元素
:even 匹配所有索引值为偶数的元素 从0开始计数
:odd 匹配所有索引值为奇数的元素 从0开始计数
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素中查找)
表单筛选器
可以看成是属性选择器优化而来
注意:$(':checked')
$('input:checked')
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected