1.HTML
1.Hyper Text Markup Language
2.标签
<1.是由<>包裹起来的对象
<2.双标签：
<div> Rose </div> 整个称为元素，这里的是div元素
<3.单标签： 换行标签
<4.标签的属性：
写在开始标签中，标签名之后，常以属性名="属性值"的形式出现，作用是为标签增加附加信息，
注意：标签名和属性名之间要有空格，属性名和属性名也要有空格
Rose
<5.标签的关系：
<html> ---是根元素标签，所有的标签都在该标签内部
<head>--是文档的头部，内容不会显示在网页 </head>
<body> </body>
</html>
<6.h标签 ：
标题标签，1-6级标题
<7.<p>标签：
段落标签
<8.加粗标签：
<b>:只是样式上的加粗效果 <strong>：在语义上的强调
<9.斜体标签：
<i> (italic)样式上的倾斜 em--语义上的强调
<10.删除标签：<s> ------<del>
<11.下划线标签：
<u>---------<ins>
<12.上标签和下标签：
<sup> ---<sub>
<13.超链接
---herf 设置超链接的资源地址
---target设置跳转的方式
---_blank 在新窗口打开页面
---_self在原窗口打开页面
---_parent在父页面打开
---iframe指定打开页面
代码
<body>
</body>
<14.表格标签
table 定义一个表格
tr(table row)表格的一行
td(table data cell) 表格一行中的单元格
rowspan列合并
colspan行合并
代码
编号 | 姓名 | 性别 | 联系方式 | 住址 |
1 | Rose | man | 123 | 重庆 |
<15.表单标签
表单--form标签
--属性
action 设置提交路径
用来指定接受处理表单数据的服务器url地址
name 设置表单的名字，用于同义区域多个表单
method 设置提交方式
get
post
表单元素
--输入框 input
--按钮 button
<16.iframe标签
设置内联框架，在一个页面中嵌入另一个页面
属性 -src 默认显示的页面
frameborder 设置内联框架的边框
<17.span标签
是行内元素，常用于包裹文本，方便设置样式
<18.div标签
是块级元素，大盒子，用于页面布局
<19.选择器
1.类选择器
为对应的标签设置class属性，在style中使用.类名进行属性设置
2.id选择器
为对应的标签设置id，一个页面中id不能重复，使用#id进行属性设置
2.CSS
1.简介和规范
网页的web标准：
-结构 (HTML)
-样式 (CSS)
-行为 (JavaScript)
CSS
- 层叠样式表 Cascading Style Sheets
- 用来设置网页元素的外观样式，比如颜色，背景，间距等等
代码规范
- 语法
选择器 {
//样式声明，一个或多个属性
属性名: 属性值;
属性名: 属性值;
}
- 代码风格
选择器，属性可以是全小写或者全大写，但是推荐小写
选择器和括号直接有一个空格
冒号和属性值之间有一个空格
2.使用方式
1.行内样式 (内嵌、内联样式)
-位置
在元素标签里定义一个style属性，它的属性值就是样式属性键值对
- 特点
只能对当前的一个元素起作用，多个元素需要一个个设置，不方便修改
行内样式优先级最高，基本不能通过其他两种方式修改
开发时尽量少用
2.内部样式
- 位置
在页面head标签中的style标签里定义
- 特点
可以同时为多个标签定义相同的样式，修改方便
只对当前页面起作用，不能跨页面使用
3.外部样式
- 位置
定义一个独立的.css文件，通过link引入到需要设置样式的HTML文件中
<link rel="stylesheet" href="css文件的地址">
- 特点
可以跨页面使用
3.标签选择器
选择器的作用
1.用来匹配页面中符合条件的元素
2.为这些元素设置样式
标签选择器
- 语法
标签名 {} 标签名：h1，p，span...
- 特点
找到body下所有同名的标签
当页面有多个同名标签时，没有办法为某个标签单独设置样式
4.类选择器
类选择器
- 使用方法
1.为对应的标签设置class属性，属性值称为类名
2.在css中通过.类名 匹配这些标签
- 和id选择器的区别
- 类名可以在一个页面中重复使用，只要需要设置的样式相同，就可以使用
- class属性可以有多个属性值，类名与类名之间用空格隔开
- 开发时通常用类选择器
5.后代选择器
后代选择器
- 语法：
祖先选择器a 后代选择器b {}
两个选择器直接有一个空格，这两个选择器可以是标签名，类名，id选择器
- 特点
选中a下面的所有的b，b可以是a的儿子，孙子，曾孙...
6.伪类选择器
伪类
- 用于处于特定状态的元素的类（伪的，不是真的写在class里的类）
特定状态：比如某个元素的第一个子元素，鼠标移上去时的元素
-语法
标签名:伪类 {}
p:first-child
- 找到作为第一个子元素的p元素
这个元素必须是父元素的第一个元素样式才会生效
- 不区分子元素的类型，在所有子元素中绝对第一
p:first-of-type
-找到同类子元素中的第一个
- 区分类型，在所有p中相对第一
7.属性选择器
属性选择器
[标签的属性名] 选中带有这个属性名的标签
[属性名='属性值'] 选中带有这个属性名且属性值也相等的标签
3.JS
1.JS的简介
Javascript简称JS 是由网景(netScape) 推出的脚本语言
是一门轻量级 弱类型 面向对象的解释型脚本语言
弱类型 没有数据类型限制
声明变量时不需要指定数据类型
解释型 不需要预先编译 边解释边运行 浏览器是一个解释器
脚本(Script) 一系列的指令
JS的作用
HTML 用于定义页面中的内容
CSS 用于设置内容的样式
JS 用来控制HTML元素的行为
在页面中动态嵌入HTML元素
可操作浏览器
可以和用户数据交互
JS的组成
1.ECMAScript 语法
简称ES 是JS 的语法规范
比如数据类型 流程控制语句等
2.DOM (Document Object Model) 文档对象模型
这里的文档指HTML页面
可以通过DOM控制页面中的元素
3.BOM(Browser Object Moder) 浏览器对象模型
可以通过它控制浏览器的行为
2.JS的编写位置
1.写在标签的事件中
比如鼠标点击事件onclick
2.写在 <script>标签中
这个scipt 标签可以放在head标签里
也可以放在body标签前
3.写在独立的js文件中 然后通过script标签引入
src属性中设置js文件的地址
3.JS的输入输出语句
<script>
//弹出警告框
alert("hello js")
//在控制台打印输出
console.info("hello console")
//在HTML页面显示输出
document.write("hello js")
//弹出输入框
prompt("请输入你的名字:")
</script>
4.JS代码规范
<script>
/*
多行注释,不可以嵌套
*/
// 单行注释 ctrl + /
//JS严格区分大小写
// Document.wirte("123")//报错
//有时候 一行一条语句时 分号可以省略
</script>
5.变量
变量
值可以进行改变的量 是一个存储数据的容器
里面存放的数据可以发生改变
变量的声明和赋值
声明
var 变量名;
let 变量名;
赋值
变量名 = 值;
声明的同时赋值
var 变量名=值;
同时给多个变量声明并且赋值
var 变量名1 = 值,变量名2 = 值;
修改变量的值
变量名 = 值;
注意
只声明不赋值 默认输出undefined
var 可以重复声明同一个变量 let不可以
6.常量
常量
-不可以被改变的量
-声明常量
const 变量名 = 值;
注意
常量只能赋值一次,重复赋值会报错
7.标识符的命名规则
标识符
在JS 中可以由我们自主命名的内容
比如 变量名 函数名 类名...
命名规则
1.标识符只能包含字母 数字 下划线和$
并且不能已数字开头
2.不能是JS中的关键字和保留字 比如 var let
3.不建议使用内置函数或者类名作为变量名 会覆盖函数或者类名 导致无效
4.命名规范
通常使用驼峰命名
首字母小写 之后的每个单词开头大写
minlength -> minLength
类名使用大驼峰
每个首字母都好写
MIN_LENGTH
8. 数据类型
数据类型
是计算机中数据的一种属性 这个属性定义了数据的含义 允许对数据执行的操作
该类型数据的存储方式和大小
JS中数据类型为原始值(基本类型)和对象(复杂类型)
原始值
1.Number 数值
2.BigInt 大整数
3.String 字符串
4.Boolean 布尔值
5.Null 空值
6.Undefined 未定义
7.Symbol 符号
对象
Object 对象
9.Number
Number 数值
-整数 小数
-特殊值
NaN 非法数 (Not a Number)
Infinity 无限大的数字 无穷
判断变量的数据类型
typeof 变量名
10.String
String 字符串
-JS 中用"" 或者 '' 表示字符串
-如果要嵌套使用引号,外双内单 或者外单内双
-转义字符 \
\" 转义了一个双引号
\' 转义了一个单引号
\\ 转义了一个单斜杠
模板字符串
- 用`` 表示
-特性
-支持换行
-支持嵌入变量
`${变量名}`
11.Boolean
Boolean 条件判断
-true false
12.Null
Null 空类型 空值
含义:对象类型的空引用(空指针)
Undefined 未定义类型
变量声明但未赋值 则这个变量的值就是undefined
13.类型转换
boolean 转换为其他类型
转换为数值
Number() true 转换为1 false 转换为0
转换为字符串
String()
非字符 + "" 可以隐式转换为字符串
Number 转换为其他类型
-转换为布尔
Boolean(变量)
0 -> false 非0 数值 -> true
-转换成字符串
String()
String 转换成其他类型
-转换为布尔类型
Boolean()
空字符串'' -> false 其他的为true
-转换为数值
Number()
"111"->111
不是数值类型的 -》NaN
在数字类型的字符串前面添加正号(+) 可以隐式的将这个字符串转换成数字类型
+"数字"
14. 算术运算符
算术运算符(双目)
+ - * / %
+加法运算
1.加法运算
2.字符串拼接
当+俩侧 至少一个为字符串时 做字符串拼接
- 减法运算
/ 除法运算
正常显示结果 可以显示小数
%取余运算
取它的余数
注意
字符串参与算术运算时 如果是数字类型的 会当当作数值参与计算
先将字符串隐式转换成数值再参与运算
不是数字类型 就是Nan
15.关系运算符
> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于
只是判断值是否相等 不会检查类型
=== 全等
判断值以及它的数据类型 是否完全相等
!= 不等于
16. 逻辑运算符
1.&&
-表达式1 && 表达式2
-俩个表达式都为true 与的结果为true
只要有1个为false 结果为false
-只要前面这个表达式1 为false 后面的表达式2将不会被执行
2.||
- 表达式1 || 表达式2
- 俩个表达式只要有一个为true 或的结果为true
- 都为flase 或的结果为false
- 短路或
只要前面这个表达式1为true
3.! 非
-!表达式
-取反
17.赋值运算符
赋值运算符
=
将等号右侧的值赋给左侧的变量
运算顺序 从右向左
+=
-=
*=
/=
%=
18.自增自减
自增自减
a++
a = a + 1
先使用后加1
++a
a = a + 1
先加1后使用
++a
a--
--a
19. 条件运算符
条件运算符
条件?表达式1:表达式2
-如果条件为true 返回表达式1的值
-如果条件为false 返回表达式2的值
20.运算符的优先级
1.()
2.单目运算符 ！++ --
3.双目运算符 * / % > + -
4.关系运算符 > < >= <= == !== ===
5.逻辑运算符 && ||
21.条件语句
if 语句
if(条件表达式){
代码块
}
当条件表达式为true时 执行里面的代码块
如果代码块只有一句语句 可以省略{}
if-else语句
if(条件表达式){
代码块
}else{
代码块
}
if-else 语句是二选一 一定有一个代码块执行
if-else if语句
if(表达式1){
//代码块
}else if(表达式2){
//代码块
}else if(表达式3){
//代码块
}else{
//代码块
}
执行流程
自上向下 依次对if后的条件表达式进行求值判断
如果某一个的结果为true 就执行它里面的代码块的语句 执行完毕就结束
如果结果为false 就继续向下判断 知道找到true 为止
如果都为false 才执行else
switch
switch(key){
case value:
break;
default:
语句
}
执行流程
会依次将key和case后的value进行全等比较
如果比较结果为true就从当前case开始执行代码
如果为false 则进行比较后面的其他case 直到找到true
如果为false 还不找不到case 就找到default
22.循环语句
循环语句
作用 通过循环语句可以是指定的代码有规律地重复执行
循环三要数
1.循环变量的初始化表达式(定义循环变量并初始化)
2.循环条件表达式(设置循环条件 当条件不满足时循环结束)
3.变量更新表达式(修改循环变量,递增或者递减,使得循环能结束)
23.while和do...while循环
while 语句
while(条件）{
循环体
}
do while 语句
初始化表达式
do{
循环体
其他操作
更新表达式
}while(条件);
执行流程
先执行一次循环体
然后判断条件表达式是否true
如果为true 就执行循环体 直到条件表达式为false停止循环
do while 和 while 的区别
do while 能保证循环体至少执行一次
25.for 循环
for 循环
for(初始化表达式;循环条件表达式;变量更新表达式){
循环体
}
执行流程：
1.执行初始化表达式 初始化循环变量
2.执行循环条件表达式 判断循环是否执行(true 执行 false 不执行)
3.如果为true 执行循环体
4.执行变量更新表达式 对循环变量进行更新
5.重复执行循环条件表达式 直到判断为false为止
注意：
初始化表达式在整个循环周期中只执行一次
for循环中 三个表达式都可以省略
在for循环中用let声明的变量只能在for循环内部访问 在for循环外面访问没有定义
在for循环中用var 声明的变量 在for循环内部和外部都能访问
26.循环的嵌套
循环的嵌套
外层循环执行一次 内层循环执行一周
外层循环控制图形的高 内层循环控制宽
27.数组基础
数组
是一种复合数据类型 在数组种可以存储多个不同类型的数组
创建数组的方式
1.通new 关键字
var 数组名 = new Array (数组大小)
这里的数组大小作用不大 赋值时超出索引 会自动扩容
赋值:
数组名[索引] = 值; 索引从0开始
注意:
数组中为赋值的元素是空的 默认输出undefined
2.通过[]创建
var 数组名 = []//创建空数组
注意:
赋值的时候 最好是连续赋值 否则浪费空间
3.声明的同时赋值
var list2 = new Array(元素1,元素2)
var list3 = [元素1,元素2]
获取数组的长度
数组名.length
注意
这个属性是可以被更改的 如果外面给他赋值 数组长度会发生改变
判断是否为数组
Array.isArray(a)
数组的遍历
for循环
for(let i = 0; i < list3.length;i++){
console.log(list3[i]);
}
for-in
for(index in list2){
console.log(list2[index]);
}
28.Math
<script>
/*
Math 是JS的一个内置对象 它拥有一些数学中的常数属性合数学函数方法 比如pai 三角函数
这些属性和方法直接通过Math这个对象调用
适用于Number 类型
*/
let list = [123,23,342];
console.log(Math.PI);
console.log(Math.E);
console.log(Math.pow(2,3));
console.log(Math.abs(-5));
console.log(Math.sqrt(4));
console.log(Math.max(3,4));
console.log(Math.ceil(4.3));//5
console.log(Math.floor(3.4));//3
console.log(Math.round(3.5));//四舍五入
console.log(Math.cbrt(64));//4的平方
console.log(Math.random());
console.log(Math.random()*100);
console.log(Math.random()*7+3);
</script>
29.对象以及创建
对象
js 用属性和行为来描述某个物体而产生的一种数据类型
它相对于一个容器 在对象中存储各种不同类型的数据
数组 函数 也一种特殊的对象
创建方式
1.使用{}大括号创建
let 对象名 = {
属性名:属性值;
方法名(){
//代码块
}
}
属性和方法的调用
对象名.属性名
对象名.方法名()
在方法中可以通过this关键字 访问当前对象的属性
this 指向的是调用方法的对象
2.使用 new Object 创建
添加属性
对象名.属性名 = 属性值
属性的其他写法
1.带有特殊字符或者空格的属性名 要用["属性名"]设置和读取
30. 函数以及创建
函数
函数是对一段程序的封装
作用
用于包装可以重复使用的代码(代码复用)
创建方式
1.函数声明方式
function 函数名(参数列表) {
函数体
}
调用函数
函数名(实参列表);
返回值：
函数返回的结果 成为返回值 函数默认返回值是underfined
可以return 自己定义函数的返回值
return 还会终止函数的执行
31.参数的值传递和引用传递
形式参数（形参）
就是定义在函数（方法）的小括号中的变量
实际参数（实参）
调用函数(方法)时，写在小括号中的变量/常量/值
形参和实参的关系
在调用函数时，会将实参传递给形参，将实参赋值给形参使用
值类型传参
将x变量中的值 直接赋值给函数类的形参
所以函数的执行完成后 x 本身的值不变
number boolean string是值传递
引用类型传值
将y中的引用地址赋值给函数内的形参
所以通过函数内形参对y中的对象所作的操作 对于y来说也有引用
Object function是引用传递
32. 变量的作用域
变量的作用域
作用域 作用范围 范围内可以访问变量 超出了范围就无法访问
作用域
全局作用域 Global
块作用域 block
函数作用域 Function
全局作用域 Global
-在网页运行时创建 关闭网页时就销毁
-直接在script标签中编写的代码都位于全局变量中
-全局作用域中变量就是全局变量 可以在任意位置访问
全局变量分为俩种
1.(普通)全局变量
直接在函数外声明的变量
2. 自动全局变量
不使用let/var 关键字声明 直接给变量名赋值 这样的变量就会变成自动全局变量
它存到了Window 对象 成为了window 的属性
4.DOM
1.DOM简介
DOM (Document Object Model) 文档对象模型
这里的文档指HTML页面
可以通过DOM控制页面中的元素
- Document 文档 这里指整个网页html
- Object DOM将整个网页都抽象转换成了对象
div有div对象 input 有input对象 属性 文本都有对应的对象
对他们进行操作的时候 就是通过他们的对象来完成
-Model 模型是指文档中个对象之间的关系 比如父子关系 兄弟关系
DOM树
2.获取节点对象的方法
:nth-of-type(1)
找到父元素下 同标签类型元素的第一个元素
同类型标签 p标签\div标签\em标签\ul标签
所有的p标签是一个类型 所有的div标签是同一个类型
排序是在同类型标签中排序
先将父元素的标签分类 在分别获取同类型标签中的第一个
:nth-child(1)
找到父元素下 所有子元素中的第一位(不分类)
排序 将所有子元素都进行排序
.box :nth-of-type(1)
.box 和 :nth-of-type(1)的交集
同时满足下列条件 才会选中元素
1.标签带有.box类名
2.这个标签必须是其父元素下 同类型标签中第一个元素
body div 后代选择器 会选中body 下所有的div 包括儿子 孙子
一般用于缩小选择范围
body :nth-child(1)
会选中body下 第一个子元素
.box.text 中间没有空格 交集选择器
必须同时满足俩个选择器的条件
3.事件绑定
事件
用户和页面之间发生的交互行为
比如 当用户点击鼠标是 就可以修改背景颜色
当用户点击enter 就进入网站
总之
当某种情况发生时 就执行了一段代码 完成了一些操作 这里的某中情况就是事
某个事件被触发时 就执行一段代码 (这段代码我们通常封装成一个事件处理函数)
如何为一个元素绑定事件
1.用元素的addEventListener("事件名称",事件处理函数名,是否捕获) 方法绑定
特别注意
这里的事件名称不能有on前缀 并且这个事件名称是规定好的 不能自己修改
常用事件
但是可以自定事件 然后使用自己定义的事件
步骤
1.获取元素对象
2.声明一个事件处理函数
3.给元素对象添加事件监听器 也就是调用addEventListener
解绑事件
元素对象.removeEventListener("要解绑的事件",这个事件对应的要解绑的处理函数)
注意 addEventListener可以为一个元素绑定多个事件 并且可以为一个事件绑定多个处理函数
4.常用的鼠标监听事件
鼠标移入
mouseover
outmouseover
鼠标移入
mouseleave
onmouseleave
5.通过DOM树的关系获取节点
Node节点: 文本 元素 属性 换行 空格
获取父元素的所有节点
元素对象.childNodes
获取父元素的所有子元素
元素对象.children
返回都是数组
想要获取某一个子元素 用索引访问
6.增删改节点
<script>
/*
创建元素并添加属性
document.createElement("标签名")
新添加的元素对象.属性名 = "属性值"
*/
let newElem = document.createElement("div")
newElem.className = "box2"
/*
appendChild 向父元素尾部添加子元素
1.获取父元素对象
body 直接用 document.body
2.父元素对象.appendChild(子元素对象)
*/
document.body.appendChild(newElem)
// document.body.append(newElem)
/*
prepend 向父元素头部添加子节点
*/
document.body.prepend(newElem)
let box3 = document.getElementsByClassName("box3")[0];
box3.insertBefore(box3,newElem)
/*
remove() 删除当前元素
要删除的元素对象.remove()
*/
let box1 = document.getElementsByClassName("box1")[0];
// box1.remove()
/*
replaceWith 用一个节点替换另外一节点
要被替换的节点对象.replacWith(newNote)
*/
// box1.replaceWith(newElem)
</script>
7. 操作标签的属性
操作标签的属性
1.获取:元素对象 属性名
修改: 元素对象.属性名 = 新的属性值
2.setAttribute("属性名","属性值") 为元素设置属性
getAttribute("属性名") 获取元素的属性值
removeAttribute("属性名")删除元素的属性值
8.操作标签的样式
1.通过元素的style属性修改标签的样式
元素对象.style.样式名 = 样式值
这种方式是修改的内联样式
注意 样式名 font-size 应该修改成小驼峰 fontSize
2.通过添加类名修改样式
元素对象.className += " 类名"
注意类名前需要加空格
3.通过classList属性操作类名
添加:元素对象.classList.add("类名1","类名2")
删除:元素对象.classList.remove("类名1","类名2")
9. 定时器
定时器
在JS中定时器就是一种函数 这种函数可以设置在指定时间后触发一段代码
1.setTimeout(要执行的函数,延迟的时长)
返回值:计时器对应的编号id
停止定时器
clearTimeout(timerId)
2.循环计时器
setInterval(要执行的函数,循环间隔的时间)
停止计时器
clearInterval(计时器编号)
10.文档的加载
js默认情况下是顺序执行 所有将script 编写在body前面 获取window的load 写在load里面
控制文档的加载
window.οnlοad=function(){
let btn = document.getElementsByTagName("button")
console.log(btn);
}
5.JQuery
1.JQuery的引入和使用
在使用jquery前 必须先引入jquery的js文件
压缩版 min.js 通常在开发中使用
未压缩包 .js 用于查看源码
引入的js文件必须在自定义的脚本文件之前
引入JQuery库 就是相对于向这个网页添加了一个函数Jquery/$
$是JQuery的核心函数 JQuery的所有功能都是通过这个函数来进行的
通过$ 获取JQuery对象
$("选择器名称")
JQuery 对象实际上是一个数组(类似数组) 可以用索引访问里面的数组元素
这个数组元素就是DOM 对象
访问方式
1.索引 Jquery对象[索引]
2.get Jquery对象.get(索引)
DOM对象转换成Jquery 对象
将DOM 对象作为参数传入$函数中
$(DOM对象)
2.设置样式
<script>
window.οnlοad=function(){
let $boxs = $(".box");
//css函数读取样式 读取Jquery对象中的第一个dom元素的属性值
console.log($boxs.css("width"));
console.log($boxs.css("height"));
//可以传入一个样式名数组
console.log($boxs.css(["height","width"]));
//CSS函数设置样式 为JQuery 对象中的所有dom元素都设置上样式
// $boxs.css("width","600px")
$boxs.css("background-color","red")
$boxs.css("background-color",function(index,value){
// index 当前数组成员的索引
console.log("index:"+index);
//value 当前数组成员对应的"background-color"的属性值
console.log("value:"+value);
//返回值 就是新的属性值
return index%2==0?"green":"red"
})
}
</script>
3.操作类
<script>
window.οnlοad=function(){
/*
当我们修改JQuery 对象时他会自动修改JQuery对象中所有的元素
这个称为JQuery 的隐式迭代 (for循环)
*/
let $boxs = $(".box");
//添加类
$boxs.addClass("box2")
//删除类
$boxs.removeClass("active")
//开关类 有就删除 没有就添加
$boxs.toggleClass("box3")
//判断类是否存在
console.log($boxs.hasClass("box3"));
}
</script>
4.设置属性
<script>
window.οnlοad=function(){
let $boxs = $(".box");
//读取属性 读取Jquery中的第一个元素的属性值
console.log($boxs.attr("class"));
//读取自定义属性
console.log($boxs.attr("my-box"));
//设置属性
let $input = $("input")
$input.attr("value","1234")
console.log($input.attr("value"));
// $input[0].disabled = true;//设置为true 禁用
// $input[0].disabled = false;//设置为true 可用
// $input[0].setAttribute("disabled",false)//这种写法无论第二个参数些什么都是禁用
// $input[0].removeAttribute("disabled")//可以删除disabled属性 使得input可以使用
//Jquery设置
$input.attr("disabled",false)//设置为可使用
//删除属性
$boxs.removeAttr("my-box")
}
</script>
5.常用的set和get方法
<script>
window.οnlοad=function (){
// .html()获取标签中的文本
// html(str) 设置文本内容 还可以用于插入标签
console.log($(".box1").html());
let $box1 =$(".box1");
let $box2 =$(".box2");
let $box3 =$(".box3");
$box1.html("555")
$box1.html("<h1>321<h1>")
/*
text(str) 只能设置文本不能插入标签
同样可以进行获取值
*/
$box2.text("<h1>321<h1>")
console.log($box2.text());
console.log($box1.width());
$box3.width("200")//设置宽
$box3.height("200")//设置高
let $input = $("input");
/*
val() 获取和设置value值
*/
console.log( $input.val());
$input.val("333");
}
</script>
6.事件的绑定和解绑
JQuery 对象绑定事件 就是直接调用事件名称对应的函数
参数就是事件处理函数
<script>
window.οnlοad=function(){
let $box1 = $(".box1");
//手动触发事件 调用事件函数
// $box1.click()
/*
使用on 函数绑定事件
on("事件名称","事件处理函数")
*/
//1.声明事件处理函数
function click1 (event){
console.log(event);
console.log("click");
}
//2.给JQuery对象绑定事件
$box1.on("click",click1)
/*
使用off函数解绑事件
*/
$box1.off("click",click1)
//不写第二个参数 会解绑事件对应的所有函数
$box1.off("click")
/*
使用one函数可以让绑定的事件只触发一次
*/
$box1.one("click",function(){
console.log("one click");
})
</script>
7.常用表单事件
<script>
//获取焦点(输入框有光标)
$("input").focus(()=>{
console.log("获取焦点了");
})
//失去焦点
$("input").blur(()=>{
console.log("失去焦点了");
})
//监听输入内容的改变
$("input").change(()=>{
console.log("内容改变了");
})
</script>
8.each遍历
<script>
const $lis = $("ul>li")
$lis.each(function(index,element){
//第一个参数 index 索引
console.log("index:"+index);
//第二个参数 element dom 对象
console.log("element:"+element);
// $(element)将dom对象转换成JQuery
$element = $(element);
if(index%2==0)
$element.css("color","red")
else
$element.css("color","green")
})
</script>
9.通过DOM树查找节点
<script>
//parent()找到父节点
$(".a").parent().css("background-color","blueviolet")
//parents() 找到所有祖先节点
console.log($(".a").parents());
//parents("选择器名称") 找到指定的祖先节点
$(".a").parents("tr").css("background-color","")
//find("选择器名称") 父元素查找指定的后代元素
console.log($(".b").find("th"));
</script>
10.增删节点
<script>
// 创建元素JQuery 对象
let $box = $(`<div class = "box box1"></div>`);
console.log($box);
//获取body的JQuery对象
let $body = $(document.body);
//向元素内追加一个元素 谁要添加谁
// $body.append($box)//末尾添加
// $body.prepend($box)//头部添加
//将子元素追加到父元素末尾
// $box.appendTo($body) //添加到末尾
$box.prependTo($body) //添加到末尾
//body>.box:nth-child(2) 获取下的第二个div 并且这个div 有box类
let $box2 = $("body>.box:nth-child(2)")
//在一个元素的后面添加另一个元素
//$box2.atfer($box1)
//在一个元素的前面添加另一个元素
//$box2.before($box1)
</script>
11.获取JQuery对象
<script>
let $list = $("li")
$list.each(function(index,ele){
//怎么获取每个ele的Jquery对象
//1.$(dom对象)
console.log($(ele).html);
})
//2.eq(index)函数 返回index 索引对应dom元素的Jquery对象
$ele = $list.eq(0)
console.log($ele);
</script>
12.页面加载事件
<script>
$(document).ready(function (){
//这里写我们自己的脚本
console.log("加载完成");
})
//可以简化为
$(function(){
//这里写我们自己的脚本
console.log("加载完成");
})
</script>
13.过滤选择器
<script>
//子元素过滤器
/*
seletor:nth-child(n)
1.找到当前元素的父元素下 第n个孩子
2.判断这个孩子是否匹配seletor选择器
如果匹配就选择它 应用样式
如果不匹配就不选择它 这个伪类选择器失效
当前元素:所有匹配seletor选择器的元素
按照子元素在文档中出现的位置排序,从1开始
seletor: 标签名 类名 id名
:nth-child(n) 等同于 *:nth-child(n)
*/
// $("h1:nth-child(5)").css("background-color","red")
// $(".a:nth-child(3)").addClass("text")
// $("div:nth-child(2)").addClass("text")
//body 所有父元素下的第一个孩子
$("body *:nth-child(1)").css("background-color","red")
/*
seletor: nth-of-type(n)
1.找到当前元素的第n个 跟它同标签名兄弟
1.判断这个孩子是否匹配seletor
按照同类标签在文档中出现的位置排序 序号从1开始
*/
// $(".a:nth-of-type(3)").addClass("text")
//索引过滤器
/* seletor:eq(index)
在匹配的集合中选择索引值为index的元素 索引从0开始
匹配的集合:$("seletor")
*/
/*这个JQuery 扩展出来的选择器 性能没有原生的css选择器好
推荐 eq() 方法
同类的
:even 偶数索引 :odd奇数索引
:gt(index) 大于index的索引 :lt(index) 小于index的索引
*/
//$(".a:eq(2)") 获取到$(".a")这个JQuery对象中的第3个元素
$(".a:eq(2)").addClass("test")
//表单过滤器
/*
:checked
匹配所有勾选的元素
只适用于复选框和单选框
下拉菜单：selected
*/
// function count(){
// //打印有有几个input被选中了
// $("input:checked")
// }
// $("input[type='checkbox']").click(radiofun);
// $("input[type='checkbox']").click();
// function radiofun(){
// $("input:checked").each(function(index,element){
// console.log($(element).val());
// })
// }
// $("input[type='radio']").click(radiofun)
radiofun()
$("input[type='radio'],[type='checkbox']").click(radiofun);
function radiofun(){
$("input:checked").each(function(index,element){
console.log($(element).val());
})
}
</script>
14.数组的常用方法
<script>
let arr = ["1", 2, true, "hhhh", 2, null]
/* push 向数组的末尾添加一个或多个成员
参数：被添加的新数组成员
返回值：新的数组长度
操作会改变原数组
*/
let r = arr.push('hello world', 'JS');
console.log('push的返回值：', r);//8
console.log('push后的arr：', arr);//JS被添加到arr末尾
/* pop 删除并返回数组的最后一个成员
返回值是被删除的这个成员
操作会改变原数组
*/
r = arr.pop()
console.log("pop的返回值：", r);//JS
console.log("pop后的arr：", arr);//arr中JS被删除
/* unshift 向数组的开头添加一个或多个成员
参数：被添加的新数组成员
返回值：新的数组长度
操作会改变原数组
*/
r = arr.unshift('my best day', 'JS')
console.log('unshift后的返回值：', r);//9
console.log('unshift后的arr', arr);//两个值被依次添加到arr头部
/* shift 删除并返回数组的第一个成员
返回值是被删除的这个成员
操作会改变原数组
*/
r = arr.shift()
console.log('shift的返回值：', r);// my best day
console.log('shift后的arr：', arr);//arr中 my best day被删除
/* splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面
第一个参数：删除成员的起始位置
第二个参数：删除成员的个数
第三个参数：用于替换被删除成员的新数据，该参数可以省略
返回值： 被删除的成员数组
会改变原数组
*/
// 删除一个成员：
r = arr.splice(5, 2)
console.log('splice的返回值：', r);//[2, null]
console.log('splice后的arr：', arr);//索引为5和6的成员被删除
// 在指定成员前追加新数据
// 若第二个参数为0，则可以实现在指定位置的前面添加成员的功能
r = arr.splice(3, 0, "newvalue")
console.log('splice的返回值：', r);//[]
console.log('splice后的arr：', arr);//newvalue索引为3
/* concat 连接数组
参数：多个被追加进数组的成员，若成员是数组，该数组中每个成员都被加入原数组
返回值：一个新数组
不改变原数组
*/
r = arr.concat(7, 8, 9)
console.log('concat的返回值', r);//[...,'hello world', 7, 8, 9]
r = arr.concat([7, 8, 9], [10, 11])
console.log('concat的返回值', r);//[..., 'hello world', 7, 8, 9, 10, 11]
console.log('concat后的arr：', arr);//arr未发生变化
// concat 的应用场景多用于克隆数组
let arr2 = [].concat(arr)
console.log('concat克隆的arr2:', arr2);
console.log(arr === arr2);//false
/* join 使数组成员用一个字符连接起来，返回字符串
参数：连接数组成员时使用的字符
返回值：数组成员被连接起来的字符串
*/
arr2 = ['abc', 'xyz', '123']
r = arr2.join('-*-')
console.log('join的返回值：', r);// abc-*-xyz-*-123
/* includes 判断是否包含某成员
参数：需要判断的值
返回值：布尔值
*/
r = arr.includes('z')
console.log('includes的返回值：', r);//false
/* indexOf 得到某个元素第一次出现的位置，没有返回-1
*/
r = arr.indexOf('JS')
console.log('indexOf JS 的返回值：', r);//0
// 可以使用indexOf判断是否包含某个数组成员 若不包含 返回 -1
r = arr.indexOf('g')
console.log('indexOf g 的返回值：', r); // -1
if (arr.indexOf('g') === -1) {
console.log('该数组成员不存在');
}
/* lastIndexOf 得到某个元素最后一次出现的位置，没有返回-1
*/
console.log('lastIndexOf的返回值：', arr.lastIndexOf(2));//2
/* slice 数组切片 获取子数组
第一个参数：起始位置(包含这个成员)
第二个参数：结束位置(不含这个成员)
第二个参数可省略，代表从第一个参数开始截取到最后
返回值：截取的子数组
不改变原数组
*/
r = arr.slice(3, 5)
console.log('slice的返回值: ', r);//['newvalue', true]
console.log('slice后的arr: ', arr);//arr不变
// 参数只有一个，代表从该位置开始 一直截取到最后
r = arr.slice(4)
console.log('slice的返回值: ', r);//[true, 'hhhh', 'hello world']
/* sort 数组排序
将元素视为string，默认按第一个字符的ascii码升序排序
参数：可以传递一个回调函数作为参数，通过回调函数来指定排序规则
(a, b) => a - b 升序排列
(a, b) => b - a 降序排列
会改变原数组
*/
arr.sort();
// console.log('sort的返回值：', r);//排序后的数组
console.log('sort后的arr: ', arr);//arr变成升序
// 根据指定函数排序，这里a-b表示升序 b-a 降序
arr.sort((a, b) => b - a);
console.log('sort(f)后的arr: ', arr);//arr变成降序
/* reverse 将数组中的元素倒序
返回值：倒叙后的数组
会改变原数组
*/
r = arr.reverse();
console.log('reverse的返回值', r);
console.log('reverse后的arr: ', arr);//arr倒序
// every 验证数组中的元素是否都满足指定函数
r = arr.every(function (a) {
return a > 5;
});
console.log(r);
// some 检测数组中是否有满足指定函数的元素
r = arr.some(function (a) {
return a > 10000;
});
console.log(r);
</script>
15.JSON对象
<script>
let obj = {
name:"孙悟空",
age:18,
}
console.log(obj);
/* 对象序列化 将对象转换成一个字符串
这个字符串就称为JSON字符串 有时也称为JSON 对象
注意:JSON字符串的属性名必须有双引号引起来
JSON.stringify(obj)将Object对象转换成JSON字符串
JSON.parse(json)将JSON字符串转换成Object对象
*/
let json1 = `{"name":"swk","age":18,}`;
console.log("json:",json1);
//
let json = JSON.stringify(obj)
console.log(json);
let obj1 = JSON.parse(json);
console.log(obj1);
</script>
16.location
<script>
let btn =document.querySelector("button")
btn.οnclick=()=>{
//跳转百度
//location 代表浏览器地址,当给window.location赋值时
//就跳转href的值
window.location.href="https://www.baidu.com/"
}
</script>
17.history
<script>
//history 代表浏览器的地址 通过它可以通过控制浏览器的前进和后退
window.history.go(1)
</script>
扫一扫
2099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
