概述
考前知识点复习
css考点
1.让一个小div在大div中水平垂直居中的方法
-
使用 margin:0 auto; 进行水平定位
.parent{ width:300px; height:200px; border:1px solid red; position:relative; } .child{ width:100px; height:100px; border:1px solide violet; position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; }实现原理是设置margin 自动适应，然后设置定位的上下左右都为0，就如四边均衡受力从而实现盒子居中；
-
使用定位的方法
.parent{ width:300px; height:200px; border:1px solide red; position:relative; } .child{ width:100px; height:100px; border:1px solide violet; position:absolute; top:50%; left:50%; margin-top:-50px; /* 这里是小盒子高的一半 */ margin-left:-50px; /* 这里是小盒子宽的一半 */ }使用定位方法：需要知道子元素的宽高，但是不需要知道父元素父元素的宽高
-
使用display:table-cell;
.parent{ width:300px; height:200px; border:1px solide red; display:table-cell; vertical-align:middle; text-align:center; } .child{ width:100px; height:100px; border:1px solid violet; display:inline-block; }实现原理： display:table-cell 属性指让标签元素以表格单元格的形式呈现，类似于 td标签， 组合使用 certical-align, text-align , 可以使父元素内的所有行内元素水平垂直居中（也就是将元素内部的元素设置成display:inline-block） -
使用伸缩布局display:flex
.parent{ width:300px; height:200px; border:1px solid red; display:flex; justify-content:center; /* 水平居中 */ align-items:center; /* 垂直居中 */ } .child{ width:100px; height:100px; border:1px solid violet; } -
计算四周的间距设置子元素与父元素之间的margin-top和margin-left
.parent{ width:300px; height:200px; border:1px solid red; } .child{ width:100px; height:100px; border:1px solid violet; margin-top:50px; margin-left:100px; }这种方法需要同时知道父元素与子元素的宽高，不方便日后的维护。
2.页面布局为什么要浮动，怎么请浮动
页面布局的时候子元素不浮动的时候会撑起父盒子的高度，如果浮动了父盒子的高度为0，对后面的布局造成影响，所以需要清楚浮动
清除浮动的方式：
- 额外标签法
- overflow:hidden;等
- 伪元素清除浮动
- 给浮动元素的祖先元素加高度
- clear:both;
3.定位有几种？参照点有哪些？
position:fixed; 相对于浏览器进行定位
position:absolute; 相对于最近的有定位的父元素进行定位，如果父元素没有定位，则继续向上一级找
position:relative; 相对于自身进行定位，自身定位还在，只是进行偏移
记住：子绝父相
4.文字居中操作
文字水平居中：text-align:center;
单行文本垂直居中：line-height: 盒子的高度;
多行文本垂直居中：
- 给父盒子添加行高，然后把行数*行高=总行高，用盒子高度-总行高/2=给子盒子设置magin-top的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 400px;
background-color: #E7E7E7;
text-align: center;
line-height: 40px;
}
.aa{
padding-top: 140px;
}
</style>
</head>
<body>
<div class="box">
<p class="aa">
dasdasdasdasdasdasadasdasdasdasdadasdasdasdasda
dasdasdasdasdadasdasdasdasdasdasdasadasdasdasda
sdasdasdasdasdasadasdasdasdasdadasdasdasdasdasd
</p>
</div>
</body>
</html>
-
直接在父盒子中设置padding-top，但是pandding会把盒子撑大，所以我们要用宽度减去设置margin-top的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ width: 500px; /* height: 400px; */ height: 260px; background-color: #E7E7E7; text-align: center; line-height: 40px; padding-top: 140px; } /* .aa{ padding-top: 140px; } */ </style> </head> <body> <div class="box"> <p class="aa"> dasdasdasdasdasdasadasdasdasdasdadasdasdasdasda dasdasdasdasdadasdasdasdasdasdasdasadasdasdasda sdasdasdasdasdasadasdasdasdasdadasdasdasdasdasd </p> </div> </body> </html>
5.文字 属性
- font-size 设置文字大小
- font-family 设置字体
- font-weight 设置字体粗细
- color 设置字体颜色
- font-style 设置字体样式(斜体[oblique],)
- text-decoration 设置字体是否有下划线
6.background系列属性
-
background-color 属性：设置背景颜色
-
background-image:url(); 属性 设置背景图片
-
background-repeat 属性 设置背景图片是否重复
-
background-position 属性 设置背景定位
background-position:向右移动量 向下移动量; background-position: right bottom; /* 右下角 */ background-position: 描述左右的词 描述上下的词; /* * 描述左右的词： left（左）、 center（中）、right（右） * 描述上下的词： top（上） 、center（中）、bottom（底） */ -
background-attachment 属性 背景是否固定
background-attachment:fixed; /* 固定背景，使背景不会被滚动条滚走 */
7.选择器权重
-
!important 属性的权重最高
-
第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
**注意：**通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0
8.边框
border 属性
dashed 虚线
solid 实线
1像素的红色实线：
border:1px solid red ;
css3考点
1.边框阴影：
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
值:
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
2.边框圆角
border-radius: 1-4 length|% / 1-4 length|%;
**注意：**每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
过渡transition：
原理：当指定元素存在属性变换时，增加过渡效果。（比如给hover事件）
最少2个值：1、要添加的CSS属性过渡效果，2、指定效果的持续事件
transition(简写): ①该元素身上的过渡效果CSS ②过渡时间 ③过渡效果的时间曲线 ④过渡效果何时开始
线性渐变：
语法：background：linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变默认情况是从上到下。
从左到右的线性渐变：
#grad {
background: -webkit-linear-gradient(left, red, blue);
background: -o-liner-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red, blue);/*标准语法*/
}
从左上角开始到右下角的渐变：
设置方向为：left top/bottom right/to bottom right(标准语法下)
使用角度对方向进行设置：
这里的角度是指水平线和渐变线之间的角度。So 0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。
使用透明度：
支持透明度，用于创建减弱变淡的效果。
为了添加透明度，使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。
重复的线性渐变：
**repeating-linear-gradient()**函数用于重复的线性渐变。
径向渐变：
我们可以指定渐变的中心、形状（圆形或者椭圆形）、大小，默认情况下，渐变的中心是center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。
语法:
background: radial-gradient(center, shape size, start-color, …, last-color)
颜色结点分布不均匀的径向渐变：
#grad{
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
}
Size参数定义了渐变的大小，可以是以下四个值：
closest-side/farthest-side/closest-corner/farthest-corner
重复的径向渐变：
Reperting-radial-gradient() //函数用于重复径向渐变。
2D转换：transform方法
| 方法 | 作用 | 案例 |
|---|---|---|
| translate() | 平移 | div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 / -webkit-transform: translate(50px,100px); / Safari and Chrome */ } |
| rotate() | 旋转 | div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 / -webkit-transform: rotate(30deg); / Safari and Chrome */ } |
| scale() | 缩放 | -ms-transform:scale(2,3); /* IE 9 / -webkit-transform: scale(2,3); / Safari / transform: scale(2,3); / 标准语法 */ |
| skew() | 倾斜 | div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 / -webkit-transform: skew(30deg,20deg); / Safari and Chrome */ } |
| matrix() | 组合2D变换方法 | div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 / -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Safari and Chrome */ } |
js 和 jq 考点
JavaScript 基础
运行在客户端的脚本语言
数据存储单位
大小关系：bit < byte < kb < GB < TB <......
- 位(bit) : 1bit可以保存一个0或者1（最小的存储单位）
- 字节(Byte): 1B = 8b
- 千字节(KB): 1KB = 1024B
- 兆字节(MB): 1MB = 1024KB
- 吉字节(GB): 1GB = 1024MB
- 太字节(TB)：1TB = 1024GB
初识JavaScript
JavaScript是脚本语言
-
JavaScript是一种轻量级的编程语言
-
JavaScript是可插入HTML页面的编程代码
-
JavaScript插入HTML页面后，可由所有的现代浏览器执行
-
脚本语言：不需要编译，运行过程中由（js 引擎）逐渐来进行解释并执行
-
现在也可以基于Node.js技术进行服务器端编程
JavaScript的作用
- 表单动态效验（密码强度检测）（JS产生的最初目的）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d.js)
HTML/CSS/JS的关系
- HTML决定网页结构和内容( 决定看到什么 )，相当于人的身体
- css决定我那个呈现给用户的模样( 决定好不好看)，相当于给人穿衣服、化妆
- js实现业务逻辑和页面控制( 决定功能)，相当于人的各种动作
用法
在HTML网页中使用js需使用
<script>
alert("我的第一个 JavaScript");
<7896/* +script>
js可以写在head、body、外部中
外部文件通常包含被多个网页使用的代码。外部javaScript文件的扩展名是 .js。外部脚本不能包含
输出
var a="hello world";
doucument.write(a); #-网页输出
alert(a); #-网页弹窗
console.log(a); #-控制台输出
变量 var
命名规则：
- 可以含有字母、数字、下划线、$
- 不能以数字开头
- 声明变量不要使用关键字或保留字
- 驼峰命名法
数据类型（6种）
| 数据类型 | |
|---|---|
| String | 字符串 |
| Number | 数值 |
| Boolean | 布尔值 |
| Null | 空值 |
| Undefined | 空值 |
| Object | 对象 |
typeof 输出变量类型
算术运算符
| 运算符 | 作用 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 模移 |
| & | 值传递 |
注意：
-
+加
-
如果两个字符串相加则做拼串操作
-
任何值和字符串相加都会先转换字符串再拼串
var c = 123; c = c + "";//可以将数值转换为字符串 -
-
/除
- 可以通过为一个值 -0 *1 /1来将其转换为Number
-
%取模
保留两位小数
var a=10;
var b=3;
console.log((a/b).toFixed(3))
小数精度问题解决
var m=0.1
var n=0.2
console.log(m*10+n*10)/10
一元运算符
- +正号
- 不会对数字产生任何影响
- -负号
- 负号可以对数字进行取反
自增和自减
-
自增
-
通过自增可以使变量在自身的基础上增加1
-
var a = 1; a +=1;
-
比较运算符
| 运算符 | 解释 |
|---|---|
| > | 大于 |
| < | 小于 |
| == | 等于 |
| != | 不等于 |
| === | 全等 |
| !== | 全不等 |
流程控制
条件语句
if(结果为ture){
执行结果；
}else{
否则执行；
};
案例一：
var salary= prompt("请输入您的月薪");
if(salary>10000){
console.log("您是成功人士")
}else{
console.log("继续被生活践踏吧！")
}
案例二：
var salary=prompt("请输入您的月薪");
var city=prompt("您居住的城市");
if(salary>10000 && city=="北京"){
console.log("您是成功人士")
}else{
console.log("还不错嘛继续努力")
}
逻辑运算符
&& 与 ：只要一个不是true，运算结果就不是true。
|| 或：只要一个为true，运算结果就为true。
！ 非：取反。
比较运算符>逻辑运算符
for循环
for( 表达式1;表达式2;表达式3){}
案例：
for(var i=0;i<5;i++){ // 0,1,2,3,4
//循环代码体
document.write(i)
}
for循环的嵌套
for(外循环的初始；外循环的条件；外循环的操作表达式){
for(外循环的初始；外循环的条件；外循环的操作表达式){
需要执行的代码;
}
}
-
内层循环可以看作外层循环的循环体语句
-
内层循环执行的顺序也要遵循for循环的执行顺序
-
外层循环执行一次，内层循环要执行全部次数
案例
//打印五行五列星星 for(var i=0;i<5;i++){ for(var j=0;j<5;j++){ document.write("*"); } document.write("<br>") }//循环打印1~100的素数 for(var i = 2 ; i<100 ; i++){ //外循环，打印2~100的整数 var flag = true; //创建布尔值，用来保存结果 for(var j =2 ;j<=Math.sqrt(i):j++){ //判断i是否能被 j整除 if(i%j==0){ flag=flase; break; } } if(flag){ document.write(i+"<br>"); } }
while循环
while(条件表达式){
循环体代码
}
案例
//循环打印1~10
var i = 1;
while(i<=10){
document.write(i);
i++;
}
do…while循环
do{
//循环体代码
}while(条件表达式);
**注意：**先执行循环体，再判断，do…while循环语句至少会执行一次循环体代码
案例
//循环打印1~10
var i = 0
do{
i++；
document.write(i);
}while(i<=10)
continue、break
continue关键字用于立即跳出本次循环，继续下一次循环，不能在if中使用
案例
//去非诚勿扰相亲第4个女生太胖，pass掉，接着选其他的
for(var i = 1;i<6;i++){
if(i == 4){
console.log("对不起，我们不合适")
continue;
}
console.log("我的心动女生是"+ i +"号女嘉宾")
}
break关键字用于跳出整个循环（循环结束）。
//继续去相亲，相到一半老婆来了，被打回家
for(var i =1; i<=5;i++){
if(i==3){
cosole.log("第"+i+"位女嘉宾很遗憾，有缘再见")
break;//跳出循环
}
console.log("第"+i+"位女嘉宾我好喜欢")
}
类型转化
- 指将一个数据类型强制转换成为其他数据类型
- 主要转换为 String Number Booleam
转换为String
方式一：调用被转换类型的tostring（）方法，注意：Null、Undefined无效
var a=123;
a = a.tostring();
console.log(a);
方式二：调用String（）函数，并将被转换的数据作为参数传递给函数
var a =123;
a = String(a);
console.log(a);
//null会转换为“null”;undefined会转换为“undefined”
转换为Nubmer
方式一：Number()函数，
var a = "123";
a = Number(a);
console.log(a);
//如果字符串中有非数字转换为NaN;
var b = "123px";
console.log(Number(b));
//如果是个空字符串或空格则转换为0；
var c = "";
console.log(Number(c))
//true转换为1 false转换为0
//Nall转换为0 undefined转换为NaN;
方式二：parseInt()可以将字符串中的整数取出
var a ='123px';
console.log(parseInt(a));
//输出 123
parseFloat()可以将字符串中的小数取出
var a ='12.3px';
console.log(parseFloat(a));
//输出 12.3
转换为Boolean
方式一：调用Boolean()函数来将数值转换为布尔值
var a = 123;
console.log(Boolean(a))
- 数字 转布尔
- 除了0和NaN,其余的都是true
var a = "123";
console.log(Boolean(a))
- 字符串 转布尔
- 除了空串都是true
- nall和undefined都是false
- 对象也会转换为true
数组
创建数组：var arr = new Array();
简写：var arr = [];
中括号中的数字叫做索引或下标，每个房间中存储的数据叫做元素,元素之间用逗号分隔。
获取数组长度
var arr = [1,2,3];
arr.length;
遍历数组中的数据
//遍历数组中的数据
var arr = [1,2,3,4,5];
for(var i = 0;i<arr.length;i++){
document.write(arr[i]);
}
案例
//创建数组，存储宿舍中每位同学养的宠物
var dogs=['旺财','小黄','小王','小白','小黑']
for(var a = 0; a<dogs.length; a++){
dogs[i]='单身狗'+dogs[a]
//修改数组中的值
}
console.log('dogs[0]')
添加元素
数组[数组.length]=新数据
查找元素
console.log(数组名[索引])
函数
声明函数
function 函数名(){
//函数体代码
}
-
声明函数的关键字必须小写
-
通常将函数名命名位动词，如getSum
-
调用函数:函数名称()
-
调用函数时传递的参数，叫做实参
-
可以使用retrun来设置函数的返回值，retrun后的值将会作为函数的执行结果返回，可以定义一个变量来接受该结果，函数return后的语句后不会执行
案例
//计算1~x的和
function sum(x){
//x为形参
sum=0;
for(var i = 1;i<=x; i++){
sum+=i;
}
return sum;
}
var res=sum(100);//100为实参
- 当参数过多时，可以将参数封装到一个对象中，然后通过对象传递
function fn(o){
document.write(`我叫${o.name}今年${o.age}家住${o.address}我是${o.sex}`)
}
var obj = {
name:'小蜜瓜',
age:23,
address:'夏威夷',
sex:18
}
fn(obj)
-
返回值return可以返回任意数据类型
- 也可以是对象，也可以是函数
//返回对象 function fn(){ var obj = {name:'张三'} return obj; } var a=fn(); document.write(a.name)//返回函数 function fn(){ function fn1(){ document.write("李四") } return fn1 } var a =fn() a() //或者 a()();立即执行函数（只执行一次）
//无参数 (function(){ document.write('我是立即执行函数') })() //有参数 (function(a,b){ var c = a+b; document.write(c) })(1,2)
作用域
一个变量作用的范围
局函数作用域：
-
调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
-
每调用一次函数就会创建一个新的函数作用域，他们之间时互相独立的
-
在函数作用域中可以访问到全局作用域的变量，全局作用域中无法访问到函数作用域的变量
-
当在函数作用域操作一个变量时，他会先在自身作用域中寻找，如果有就直接使用如果没有则向上一级作用域中寻找
-
在函数中访问全局变量需要加window
var a =10; function fn(){ var a = '我是局部变量'; console.log(window.a) } fn()
全局作用域：
-
直接编写在script标签中的js代码，都在全局作用域
-
全局作用域在页面打开时创建，在页面关闭时销毁
-
全局作用域中有一个全局对象window，代表浏览器的窗口，由浏览器创建可以直接使用。
-
在全局作用域中
-
创建的变量都会作为window对象的属性保存
var a = 10; console.log(window.a);//输出10
-
创建的函数都会作为window对象的方法保存
function fn(){ document.write("全局作用域")} window.fn();//输出全局作用域 -
全局作用域中的变量都是全局变量，在页面的任意位置都可以访问到
-
变量的提前声明
-
使用var关键字声明的变量，会在所有的代码执行之前被声明（不会赋值）,但是声明变量时不使用var关键字，则不会被声明提前
console.log(a); console.log(b); var a = 123;//输出undefined b = 456//报错
-
-
函数的声明提前
-
使用函数声明形式创建的函数function 函数(){}他会在代码执行之前就被创建，所以可以在函数声明前来调用
//函数声明 fn() function fn(){ console.log("函数提前") }//输出 函数提前 //函数表达式，不会提前创建 fn2() var fn2 = function(){ console.log("不会提前") }//报错
-
-
-
有关对象的方法与基本操作(4种)
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。
对象的分类：
- 内建对象
- 由ES标准中定义的对象，在任何的ES的实现中都可以使用
2. 如：Math、String、Number、Boolean、Function、Object
- 由ES标准中定义的对象，在任何的ES的实现中都可以使用
- 宿主对象
- 由js的运行环境提供的对象，目标来源主要是浏览器提供的对象
- 如BOM(浏览器对象模型) DOM（文档对象模型）
- 自定义对象
Math对象
| 属性、方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入（就近取整）大于5进位 |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 求最大值和最小值 |
| Math.random() | 获取范围 在[0,1)的随机值 |
//圆周率
var pi = Math.PI;
console.log(pi);
//floor向下取整
var a = 123.6;
var b = Math.floor(a)
console.log(b)
//ceil向上取整
var b =Math.ceil(a);
console.log(b);
//round 四舍五入
var a1 = 3.5;
var a2 = -3.5;
console.log(Math.round(a1))
console.log(Math.round(a2))//输出-3
//Math.abs 绝对值
var a = -2;
console.log(Math.abs(a))
//最大值/最小值
// ... 展开数组
var arr = [3,4,51,2];
console.log(Math.max(...arr));
console.log(Math.min(...arr));
//random 获取0~1的随机数
var a = Math.random()
document.write(a)
//案例 获取指定范围内的随机整数
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min
}
var a = getRandom(1,4);
document.write(a)
日期对象
-
使用Date实例化日期对象
-
获取当前时间必须实例化:
var now = new Date(); -
获取指定时间的日期对象
var future = new Date('2020/5/1')
-
| 方法名 | 说明 | 代码 |
|---|---|---|
| getFullYear() | 获取当年 | |
| getMonth() | 获取当月 | |
| getDate() | 获取当天日期 | |
| getDay() | 获取星期几 | |
| getHours() | 获取当前小时 | |
| getMinutes | 获取当前分钟 | |
| getSeconds() | 获取当前秒数 |
获取当前月份
var time = new Date();
var month = time.getMonth()+1;
console.log(`现在是${month}月`)
数组对象
创建数组的两种方式
-
字面量方式
var arr = [1,"test",true]; -
new Array()
var arr = new Array();
检测是否为数组
-
instanceof运算符
-
instanceof可以判断一个对象是否某是个构造函数的实例
var arr = [1,23]; var obj = {}; console.log(arr instanceof Array)//true console.log(obj instanceof Array)//false
-
-
Array.isArray()
-
Array.isArray()用于判断一个对象是否为数组
var arr = [1,2]; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false添加删除数组元素的方法
方法名 说明 返回值 push（参数1…） 末尾添加元素 返回新的长度 pop() 删除数组最后一个元素 返回它删除的元素值 unshift(参数1…) 向数组的开头添加一个或更多的元素 返回新的长度 shift() 删除数组第一个元素 返回第一个元素的值 var arr = ['初始数据'] arr.push('新的数据') arr.pop() arr.unshift('第一个数据') arr.shift() document.write(arr)//初始数据
-
数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序,无参数 | 改变原数组 |
| sort() | 对数组进行排序 | 改变原元素组 |
- 使用sort()做升降排序
- 降序
//方法一:
var num = [3,1,5,6];
num.sort(function(a,b){
retrun b-a;
})
console.log(num)
//方法二:
num.sort((a,b) => b - a);
- 升序
var num = [3,1,5,6];
num.sort(function(a,b){
retrun b-a;
})
console.log(num)
数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 不存在返回-1 |
| lastIndexOf() | 查找最后一个索引 | 不存在返回-1 |
数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 转换为字符串,逗号分隔 | 返回字符串 |
| join(‘分隔符’) | 转换为字符串 | 返回字符串 |
//toString
var a = [2,3,4,1,6];
a = a.toString();
document.write(typeof a)//输出string
//join
var a = [2,3,4,1,6];
a = a.join('|');
document.write(typeof a)//输出string
document.write(a)
其他方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| concat() | 连接两个或多个数组,不影响原数组 | 返回新数组 |
| slice() | 数组截取slice(begin索引,end索引) 不包括end值 | 返回被截取项目的新数组 |
| splice() | 数组删除splice(第几个开始,要删除个数) | 会影响原数组 |
//concat
var a = [2,3,4,1,6];
var b = ['一','二','三'];
var c = a.concat(...b)
document.write(c)//输出2,3,4,5,6,一,二,三
//slice
var a = [2,3,4,1,6];
var c =a.slice(0,2)
document.write(c)//输出2,3
//splice()
var a = [2,3,4,1,6];
a.splice(1,2)
document.write(a)//输出2,1,6
字符串对象
根据字符串返回位置
| 方法名 | 说明 |
|---|---|
| indexOf（‘要查找的字符’，开始的位置） | 返回指定内容在原字符串中的位置，如过找不到就返回-1，开始的位置是索引号 |
| lastIndexOf（） | 从后往前找，只找到第一个匹配的 |
根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt（index） | 返回指定位置的字符（index字符串的索引号） | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码（index索引号） | str.charCode(0) |
| str[index] | 获取指定位置处字符 | HTML5,IE8+支持和charAt（）等效 |
字符串操作对象
| 方法名 | 说明 |
|---|---|
| concat（str1，str2） | 此方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr（start.lenght） | 从start位置开始（索引号）lenght取得个数 |
| slice(start,end) | 从start位置开始，截取到end位置，end取不到 |
| substring（start，end） | 从start位置开始，截取到end位置，end取不到，基本和slice相同但不接受负值 |
replace（）方法
replace（）方法用于在字符串中用一些字符替换另一些字符
字符串.replace(被替换的字符串，要替换的字符串)
split（）方法
用于切分字符串，可以将字符串切分成数组。并返回一个新数组
字符串.split('分割字符')
创建对象
使用new关键字调用的函数，是构造函数constructor
构建函数是专门用来创建对象的函数
var obj = new Object();
console.log(obj);
- 在对象中保存的值称为属性
- 向对象添加属性
- 语法：对象.属性名 = 属性值
- 可以把对象看成一个塑料袋，向里面添加的值就是往塑料袋里装的各种东西
obj.name = "刘玲兵"
obj.size = "小傻子儿"
obj.age = "18"
console.log(obj)
读取对象
console.log(obj.name)
- 语法：对象.属性名
修改属性值
obj.name = "兵兵"
console.log(obj.name)
- 语法：对象.属性名 = 新值
删除对象属性
delete obj.属性名
- 语法：delete 对象.属性名
属性名
- 对象的属性名不强制要求遵守标识符的规范
- 如果使用特殊的属性名，需要使用
- 对象[“属性名”] = 属性值
- 读取特殊属性名也用此方法
基本数据类型和引用数据类型
- 基本数据类型
- string、number、boolean、null、undefined
- 引用数据类型
- object
js中的变量都是保存在栈内存中的，基本的数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他变量。（保存值）
对象是保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个变量通过一个变量修改属性时，另一个的也会收到影响。（保存地址）
js和jq中对于DOM的操作方式有哪些？
JavaScript考点
JavaScript 获取内容
| 方法 | 作用 | 范围 | 案例 |
|---|---|---|---|
| element.innerText | 改变元素内容 | 从起始位置到终止位置的内容，但去除html标签 | <button>点击事件</button><script>var btn = document.querySelector(“button”) btn.onclick = function(){ btn.innerText=“我变粗了” } |
| element.innerHTML | 改变元素内容 | 从起始到终止位置的全部内容，包括html标签 | <button>点击事件</button><script>var btn = document.querySelector(“button”) btn.onclick = function(){ btn.innerHTML=“我变粗了” } |
区别：
| 状态 | 区别 |
|---|---|
| 获取内容时 | innerText会去除空格和换行，innerHTML会保存 |
| 设置内容时 | innerText不识别HTML，innerHTML会识别 |
js中获取DOM的方式有几种？
-
通过id获取
document,getElementById();
-
通过class获取
document.getElementsByClassName
-
通过标签名获取
document.getElementsByTagName
-
通过name属性获取
document.getElementsByName
-
通过querySelector获取（括号里如果是选择器，前面加符号）
document.querySeletor
-
获取相同元素
document.querySeletorAll
-
获取html
document.documentElement
JavaScript 的节点类型
一般的，节点至少拥有nodeName（节点名称）、 node Type（节点类型）、nodeValue（节点值）
| nodeName（节点名称） | node Type（节点类型） |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点(包含文字、空格、换行等) | 3 |
我们在实际开发中，节点操作主要操作的是元素节点
常用的节点分类
| 类型 | 作用域 | 值 | 内容 |
|---|---|---|---|
| 文档节点 | 整个html文档 | 9 | null |
| 元素节点 | html文档中的html标签 | 1 | null |
| 属性节点 | 元素的属性 | 2 | 属性值 |
| 文本节点 | html标签中的文本内容 | 3 | 文本内容 |
JavaScript对于DOM节点的操作
| 节点名称 | 代码 | 作用 |
|---|---|---|
| 父节点 | node.parenNode | parentNode属性可返回某节点的最近一个父节点 如果指定的节点没有父节点则返回null |
| 所有子节点 | parentNode.childNodes (标准) | parentNode.childNodes返回包含指定节点的子节点的集合——不提倡使用 |
| 子元素节点 | parenNode.children(非标准) | parentNote.children只是一个只读属性，返回所有的子元素的节点。它只返回子元素节点，其余节点不返回——掌握 |
| 第一个子节点 | parentNode.firstChild | firstChild返回第一个子节点，找不到则返回null。 |
| 最后一个子节点 | parentNode.lastChild | lastChild返回最后一个子节点，找不到则返回null |
| 第一个子元素节点 | parentNode.firstElementChild | 返回第一个子元素节点,找不到则返回null |
| 最后一个子元素节点 | parentNode.lastElementChild | 返回最后一个子元素节点,找不到则返回null |
| 下一个兄弟节点 | node.nextSibling | 返回下一个兄弟节点，找不到则返回null |
| 下一个兄弟元素节点（IE9以上支持） | node.nextElementSibling | 返回下一个兄弟元素节点，找不到则返回null |
| 上一个兄弟元素节点(IE9以上支持) | node.previousElementSibling | 返回上一个兄弟元素节点，找不到则返回null |
| 创建节点 | document.creatrElement(‘tagName’) | 动态创建元素节点 |
| 末尾添加节点 | node.appendChild(Child) | 将一个节点添加到指定父节点的子节点列表末尾。 |
| 开头添加节点 | node.insertBefore(child,指定元素) | 将一个节点添加到指定父节点的子节点列表的前面 |
| 删除节点 | node.removeChild(child) | 从node节点中删除一个子节点，返回删除的节点 |
| 复制节点 | node.cloneNode | 返回调用该方法的节点的一个副本 注意：如果括号参数为空或者为flase，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 如果括号参数为True,则是深度拷贝，会复制节点本身 |
ELement.insertAdjacentElement()方法的使用(十分推荐)
Element.insertAdjecentElement方法解析HTML字符串，然后将生成的节点插入DOM树的指定位置
-
beforebegin——在当前元素节点的前面
-
afterbegin——在当前元素节点的里面，插在它的第一个子元素之前
-
beforeend——在当前元素节点的里面，插在他的最后一个子元素之后
-
afterend——在当前元素节点的后面
//beforebegin
var box = document.querySelector('.box')
box.insertAdjacentElement('beforebegin','<p>我是第三者</p>')
//afterbegin
var box = document.querySelector('.box')
box.insertAdjacentElement('afterbegin','<p>我是第三者</p>')
//beforeend
var box = document.querySelector('.box')
box.insertAdjacentElement('beforeend','<p>我是第三者</p>')
//afterend
var box = document.querySelector('.box')
box.insertAdjacenElement('afterend','<p>我是第三者</p>')
JavaScript常见的鼠标事件
| 事件 | 说明 |
|---|---|
| onClick | 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 |
| onfocus | 获得鼠标焦点 |
| onblur | 失去鼠标焦点 |
| onMouseOut | 当鼠标离开某对象范围时触发的事件 |
| onDblClick | 鼠标双击事件 |
| onMouseDown | 鼠标上的按钮被按下了 |
| onMouseUp | 鼠标按下后，松开时激发的事件 |
| onMouseOver | 当鼠标移动到某对象范围的上方时触发的事件 |
| onMouseMove | 鼠标移动时触发的事件 |
JavaScript 键盘事件
| 事件 | 说明 |
|---|---|
| onkeydown | 按下键盘时运行脚本 |
| onkeypress | 按下并松开时运行脚本 |
| onkeyup | 事件会在键盘按键被松开时发生 |
事件监听
| 方式 | 作用 |
|---|---|
| eventTarget.addEventListener(type,listener[,useCapture]) | 添加事件监听 |
| eventTarget.removeEventListener (type , listener[ , useCapture]); | 删除事件监听(解绑事件) |
JavaScript DOM事件流
事件流 描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照待定的顺序传播，这个传播过程即DOM事件流
- 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获：由DOM最顶层节点开始，然后逐级向下传播到DOM最底层元素的接收过程
DOM事件流会经历3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
注意：
- js代码中只能执行捕获或者冒泡其中一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener（type，listenes[, useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是flase（默认），表示在事件冒泡阶段处理程序
- 有些事件没有冒泡，如：onblur，onfocus，onmouseenter、onmouseleave
jquery考点
jQuery对象
使用 jQuery 方法和原生JS获取的元素是不一样的
总结如下 :
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScript 方法
jquery 对象操作
| 方法 | 作用 |
|---|---|
| pretend | 内部头部追加 |
| befor | 外部头部追加 |
| append | 内部尾部追加 |
| after | 外部尾部追加 |
| remove | 自杀式删除(自身和所有子节点都删除) |
| empty | 删除子元素(所有的子元素) |
jQuery 对象和 DOM 对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生 js 比jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装. 要想使用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用。
<body>
<div id="box"></div>
<script src="jquery.min.js"></script>
<script>
//1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');//获取DOM对象
var jQueryObject= $(box);//把DOM对象转换为 jQuery 对象
//2.jQuery 对象转换为DOM 对象有两种方法：
// 2.1 jQuery 对象[索引值]
var domObject1 = $('div')[0];
// 2.2 jQuery 对象.get[索引值]
var domObject1 = $('div').get(0);
</script>
</body>
总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。
jQuery对内容的操作
| 方法 | 作用 | 范围 | 案例 |
|---|---|---|---|
| 选择器.html(‘xxx’) | 设置内容 | 普通标签 div li tr td 等内容 | $("#box").html(“我是内容”); 设置内容 |
| 选择器.html() | 获取内容 | 普通标签 div li tr td 等内容 | var res=$("#box").html(); 获取内容 console.log(res); |
| 选择器.val(‘xxx’) | 设置内容 | 表单标签比如input、textarea等 | $("#txt").val(‘xxxx’) 设置内容 |
| 选择器.val() | 获取内容 | 表单标签比如input、textarea等 | $("#txt").val() 获取内容 |
| 选择器.text(‘xxx’) | 设置内容 | 普通标签 div li tr td 等内容 | $(".box").text(“<p>我是子元素</p>”) |
| 选择器.text() | 获取内容 | 普通标签 div li tr td 等内容 | $(".box").text() |
注意：html 和 text虽然都可以对普通标签 div等标签进行操作，但是他们是不一样的
| 方法 | 作用 |
|---|---|
| html | 把内容当成标签解析 |
| text | 把内容当成文本解析 |
获取元素的属性值
prop 和 attr
| 方法 | 作用 |
|---|---|
| prop() | 获取属性则同意返回true和false |
| attr | 自定义返回被选元素的属性和值 |
jq设置样式
1.操作css方法
jQuery可以使用css方式来修改简单元素样式；也可以操作类，修改多个样式
常见以下三种形式：
//1.参数只写属性名，则返回属性值
var strColor = $(this).css('color');
//2.参数可以是属性名,属性值，逗号分隔，时设置一组样式，属性必须添加引号，只如果是数字可以不用跟单位和引号
$(this).css("cokor","red");
//3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-saize":"20px"});
2.类样式方法
| 方法 | 作用 | 案例 |
|---|---|---|
| addClass | 添加类 | $(“div”).addClass(“current”); |
| removeClass | 删除类 | $(“div”).removeClass(“current”); |
| toggleClass | 切换类 | $(“div”).toggleClass(“current”); |
jQuery 选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID 选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类标签的所有元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集多个元素 |
层级选择器
层级选择器常用的两个分别为：后代选择器和子代选择器。
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用 > 号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
基础选择器和层级选择器案例代码
<body>
<div id="box"></div>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
console.log($(".nav"));
console.log($("ul li"))
})
</script>
</body>
筛选选择器
筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择，常见如下：
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到li元素中，选择索引号为2的元素,索引号index从0开始 |
| :odd | $(“li:odd”) | 获取到的li元素中,选择索引号为奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中,选择索引号为偶数的元素 |
另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent(); | 查找父级 |
| children(selector) | $(“ul”).children(“li”); | 相当于$(“ul>li”),最近一级(亲儿子) |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”)，后代选择器 |
| siblings(selector) | $(“first”).siblings(“li”); | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(“first”).nextAll() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(‘div’).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index 从0开始 |
<div class="nav">我是nav div</div>
<ul>
<li class="first">多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li class="last">多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script src="jquery.min.js"></script>
<script>
$(function() {
$("ul li:first").css("color", "red"); //获取第一个元素
$("ul li:eq(2)").css("color", "blue"); //索引值为2的元素
$("ol li:odd").css("color", "skyblue"); //索引值为奇数的元素
$("ol li:even").css("color", "pink"); //索引为值为偶数的元素
$("li").parent().css("color","green"); //li的父级元素
$("ol").children("li").css("color","yellow"); ///查找离查询父级最近的子级
$("ul").find("li").css("color","black");//相当于后代选择器
$(".first").siblings("li").css("color","red");//兄弟选择器
$(".first").nextAll().css("color","pink")//当前元素之后的同辈元素
$(".last").prevAll().css("color", "skyblue")//当前元素之前的同辈元素
console.log($('div').hasClass("nav"));//检查当前元素是否含有某个特定的类，返回结果为布尔值
$("li").eq(2).css("font-size","30px");//相当于$("li:eq(2)"),index 从0开始
})
</script>
</body>
jQuery事件
| 事件 | 作用 |
|---|---|
| click | 鼠标单击时 |
| mouseover | 鼠标经过 |
| mouseout | 鼠标移开 |
| mousemove | 鼠标移动 |
| focus | 获取焦点 |
| blur | 失去焦点 |
| keydown | 按键按下 |
| keyup | 按键弹起 |
| keypress | 长按按钮不松 |
事件语法
选择器.事件名(function(){
这是具体执行的代码
})
实例：
$("#btn").click(function () {
$("#box").css({
"width":"100px",
"height":"100px",
"background-color":"red"
})
})
jQuery 动画
| 方法 | 作用 | 案例 |
|---|---|---|
| hide() | 隐藏 | $("#btn").click(function(){ $("#box").hide(1000,function(){ alert(‘我被删除了’); }); }) |
| show() | 显示 | $("#btn").click(function(){ $("#box").show(1000,function(){ alert(‘我被删除了’); }); }) |
| toggle() | 切换(通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。) | $(document).ready(function(){ $(“button”).click(function(){ $(“p”).toggle(); }); }); |
| slideUp() | 滑上去 | $("#btn").click(function(){ $("#box").slideUp(1000,function(){ alert(‘滑动上去了’) }) |
| slideDown() | 滑下来 | $("#btn").click(function(){ $("#box").slideDowen(1000,function(){ alert(‘滑动下来了’) }) |
| fadeIn() | 用于淡入已隐藏的元素 | $(document).ready(function(){ $(“button”).click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn(“slow”); $("#div3").fadeIn(3000); }); }); |
| fadeOut() | 用于淡出可见元素 | $(document).ready(function(){ $(“button”).click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut(“slow”); $("#div3").fadeOut(3000); }); }); |
| animate({样式},时间,速度,执行完后的函数function(){内容}) | 自定义动画 | $("#btn").click(function(){ $("#box").animate({ “width”:“150px”, “height”:“150px”, “border-radius”:‘50%’ },1000,function(){ }) }) |
| clearInterval() | 清除定时器 | 定时器案例 |
| setInterval() | 设置定时器 | 定时器案例 |
定时器案例：
var timer=setInterval(function(){},1000)
函数中是重复执行的代码块，1000代表时间是1000毫秒，也就是1秒
或者写一个单独的函数，然后用定时器调用
function fn(){}
var timer=setInterval(fn,1000)
clearInterval(timer);清除上面定时器的返回值，就是清除定时器的意思
简单示例如下：
var i=0;
var timer=setInterval(function(){
i++;
document.write(i)
if(i==5){
clearInterval(timer);
}
},1000)
数据类型转变
| 方法 | 作用 |
|---|---|
| parsetInt | 转换成整数 |
| parestFloat | 转换成浮点数 |
| toFixed | 保留两位小数 |
入口函数
jQuery入口函数
jQuery 的引包可以放在head或者body标签都可以，
作用：等待文档中的标签加载完毕(不等待内容加载完毕)，然后再执行入口函数中的代码
语法：
写法一：
//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。<script type="text/javascript">
$(document).ready(function () {
alert("hello");
})
</script>
写法二：(写法一的简洁版)
//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。<script type="text/javascript">
$(function () {
alert("hello");
})
</script>
写法三：
//文档加载完毕， 图片也加载完毕的时候， 再执行这个函数。<script type="text/javascript">
$(window).ready(function () {
alert("hello");
})
</script>
JavaScript入口函数
DOM入口函数
作用：等待文档中的标签和内容加载完毕，然后再执行入口函数中的代码
语法：
window.onload = function() {}
jQuery与JavaScript的对比
在JavaScript中
- 当有多个 window.onload 时只会执行一次,前面的会被后面的覆盖
window.onload = function () {
alert("Hello·多选参数"); // 不会弹窗
}
window.onload = function () {
alert("多选参数"); // 会弹窗
}
- window.onload函数必须等待网页全部加载完毕(包括 图片等),然后再执行里面的代码。
在JQuery中
- 多个$(document).ready()会执行多次,前面的不会被后面的覆盖
$(document).ready(function () {
alert("Hello·多选参数"); //会弹窗
});
$(document).ready(function () {
alert("多选参数"); // 会弹窗
});
-
( d o c u m e n t ) . r e a d y ( ) 只 需 要 等 待 网 页 中 的 D O M 结 构 加 载 完 毕 , 就 能 执 行 里 面 的 代 码 。 并 且 他 可 以 简 写 为 (document).ready() 只需要等待网页中的 DOM 结构 加载完毕,就能执 行里面的代码。并且他可以简写为 (document).ready()只需要等待网页中的DOM结构加载完毕,就能执行里面的代码。并且他可以简写为(function () { });
-
在jQuery中满足下列等式
window.jQuery = window.$ = jQuery; -
所以jQuery的入口函数又可以写为：
<script>
// 方式一
$(document).ready(function () {
alert("Hello·多选参数1");
});
// 方式二
$(function () {
alert("Hello·多选参数2");
});
// 方式三
jQuery(document).ready(function () {
alert("Hello·多选参数3");
});
// 方式四
jQuery(function () {
alert("Hello·多选参数4");
});
</script>
解决$访问符冲突问题
如果先引入jQuery然后自己定义了一个$，再用jQuery中的 $ 访问符就不能用了
<script>
var $ = function(){
alert("Hello·word");
}
</script>
想解决这个问题很简单
- 直接不用 $ 符号定义
- 释放 $ 使用权
//释放$的使用权
jQuery.noConflict();//noConflict()释放函数
//使用 jQuery
jQuery(function () {
alert("Hello·world");
})
- 自定义其他访问符号
当 $ 访问符号发生冲突时,我们可以自定义其他访问符号
<script>
// 在使用jQuery之前指定自定义符号
var syy = jQuery.noConflict();
// 在这里syy = $
// 和使用$一样通过自定义符号调用jQuery
syy(function () {
alert("Hello·多选参数"
});
</script>
总结
JavaScript的入口函数和jQuery的入口的区别
-
原生Js和jQuery入口函数加载模式不同。
1、原生Js会等到DOM元素加载完毕，并且图片也加载完毕才会执行； 2、jQuery会等到DOM元素加载完毕，但不会等到图片加载完毕就会执行。 -
二、编写多个入口函数的区别。
1、一个html文档中，最多只有一个“DOM入口函数”，所以原生Js如果编写多个入口函数，后面编写的会覆盖前面编写的； 2、JQuery中编写多个入口函数，后面的不会覆盖前面的。
onload和ready的区别
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等网页全部加载完毕(包括图片等)，然后再执行包裹代码 | 只需要等待网页中的DOM结构加载完毕，就能执行包裹代码 |
| 执行次数 | 只能执行一次，如果第二次，那么第一次的执行会被覆盖 | 可以执行多次，第N次都不会被上一次覆盖 |
| 简写方案 | 无 | $(function(){ }); |
js典型案例题
设置倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-size: 12px;
}
.jd {
width: 200px;
height: 250px;
background-color: red;
margin-left: 100px;
margin-top: 100px;
text-align: center;
}
h2 {
padding: 15px 0px;
font-size: 36px;
color: #fff;
}
h3 {
font-size: 20px;
color: #ccc;
}
.titlt {
margin-top: 100px;
color: #fff;
font-size: 16px;
}
.deay {
height: 30px;
margin-top: 30px;
text-align: center;
line-height: 30px;
}
.days,
.hours,
.minute,
.second {
display: inline-block;
width: 30px;
height: 30px;
background-color: #000;
color: #fff;
font-size: 16px;
}
</style>
</head>
<body>
<div class="jd">
<h2>京东秒杀</h2>
<h3>FALSH DEALS</h3>
<p class="title">距离本场结束</p>
<div class="deay">
<span class="days">04</span> :
<span class="hours">01</span> :
<span class="minute">20</span> :
<span class="second">39</span>
</div>
</div>
<script>
var days_span = document.querySelector('.days')
var hours_span = document.querySelector('.hours');
var minute_span = document.querySelector('.minute');
var second_span = document.querySelector('.second')
countDown();
setInterval(countDown, 1000);
function countDown() {
var now = new Date().getTime()
var t = new Date('2020-12-25 0:0').getTime()
var time = (t - now) / 1000
var days = parseInt(time / 60 / 60 / 24)
days = days < 10 ? "0" + days : days;
days_span.innerHTML=days;
var hours = parseInt(time / 60 / 60 % 24) //小时
hours = hours < 10 ? "0" + hours : hours;
hours_span.innerHTML = hours;
var minute = parseInt(time / 60 % 60); // 分
minute = minute < 10 ? "0" + minute : minute;
minute_span.innerHTML = minute;
var second = parseInt(time % 60); //秒
second = second < 10 ? "0" + second : second;
second_span.innerHTML = second;
}
</script>
</body>
</html>
获取年月日星期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//年月日星期
var year = new Date().getFullYear()
var month=new Date().getMonth()+1
var day = new Date().getDate()
var week = new Date().getDay()
document.write('<br>')
document.write("今天是"+year+"年" + month+"月"+day+"日"+"星期"+week)
</script>
</body>
</html>
js动态创建一个div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 600px;
height: 600px;
background-color: #CCCCCC;
position: relative;
}
.aa{
position: absolute;
width: 100px;
height: 100px;
font-size: 14px;
background-color: red;
top: 10px;
left: 100px;
}
</style>
</head>
<body>
<div class="box">
</div>
<!-- 页面有一个按钮，动态创建一个div 按钮点击 盒子定位 左100 上10 宽高100 背景红色 字体大小14px -->
<button id="btn">创建</button>
<script>
var btn=document.querySelector('#btn');
btn.addEventListener('click',function(){
var aa=document.createElement("div");
var box=document.querySelector('.box');
box.appendChild(aa);
aa.className='aa';
})
</script>
</body>
</html>
js动态创建一个标签
/* 第一种：*/
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
jq动态添加数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq动态创建一个盒子</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js "></script>
<style>
*{
margin: 50px;
padding: 0;
}
.box{
width: 18.75rem;
height: 18.75rem;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div class="box">
</div>
<button class="btn" onclick="du()">动态添加数据</button>
</body>
<script>
function du(){
$('.box').append('<p>这是一条测试数据</p>')
}
</script>
</html>
AJAX
jQuery的ajax
AJAX简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
可以在不刷新整个页面的情况下和服务器进行局部的数据交互。
类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……等都可以使用ajax技术实现。
AJAX语法
$.ajax({
type:'get/post',
url:'xxxx',
data:{
xx:xx
},
dataType:'xx',
success:function(){
},
error:function(){
}
})
type里面有两种方式 get或者post
url是后台请求的地址
data是传递给后台的数据 可以省略
dataType是后台返回给前台的数据类型
success是成功处理函数
error是错误处理函数
JSON数据格式
键值对的数据格式
{“id”:1,"name":"tom","score":89}
{
“stuInfo”:[
{“id”:1,"name":"tom","score":89},
{“id”:2,"name":"jim","score":89},
{“id”:3,"name":"jack","score":89}
]
}
原生ajax
概念
ajax也是技术名词的缩写
Asychronous ：异步的
JavaScript ：JavaScript语言
And ：和、与
XML ：数据传输格式
获取对象
基于W3C标准
var xhr = new XMLHttpRequest();
基于IE标准
var xhr = new ActiveXObject('Microsoft',XMLHttp);
我们经常用的获取对象方法是基于W3C标准的
配置请求服务器的地址
xhr.open();
注意配置服务器请求地址的方法主要有两种，一种是get方式，一种是post方式，这两个请求方式最大的区别是他们传值的方式不一样
get方法
配置请求的服务器地址，参数以问好传值的方式传递，多个参数使用 & 分隔
xhr.open('get','地址?要传递的内容');
例：
xhr.open('get','get.php?id=5&title=明天放假了');
post方法
xhr.open('post','地址');
post方法的两个参数，只有传递方式和要传递的地址，他要船只的内容写在send()里
例：
xhr.open('post','post.php');
send('id=5&title=明天放假了');
注意send是发送请求的方法
常用的请求方式还有：
3.3 post
3.4 delete
为xhr对象注册事件
为对象注册时间的方式有两种写法
第一种
xhr.onreadystatechange=function(){
console.log('state')
}
第二种
xhr.addEventListener('readystatechange',function){
console.log('state')
}
XMLHttpRequest.onreadstatechange会在XMLHttpRequest发生改变的时候触发readystatechange事件的时候被调用
注意：当XMLHttpRequest请求被abort()方法取消时，readystatechange事件不会被触发
在事件中添加条件
为事件添加条件，查看是否传递成功
/*
xhr.readyState==4 说明请求完毕，且服务器已经返回数据成功
xhr.status==200 说明整个请求是成功的
*/
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}
服务器默认返回的是json字符串，需要收订讲起转换为json对象
if(xhr.readyState==4 && xhr.statue==200){
//console.log(xhr.responseText);
var date = JSON.parse(xhr.responseText);
console.log(date);
}
发送请求
发送请求也有两种方式，一种是get直接发送，一种是post携带内容请求
get方式
xhr.send();
post方式
post方式要增加一个请求头，然后携带内容传递
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('内容');
例：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('id=5&title=明天放假');
最后
以上就是拼搏小蝴蝶为你收集整理的2020-12-17考前知识点复习的全部内容，希望文章能够帮你解决2020-12-17考前知识点复习所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复