web的问题回顾

前端问题

前端三层有哪三层：

html结构层  css样式层  js行为层

js的组成

    ECMAScript 欧洲计算器协会定制的语法规范 es5 es6 

    Dom  文档对象模型 经常用于操作标签

    bom    浏览器对象模型

警告框：

    alert（）

提示框：

    prompt（）

    有输入文本和确定和取消

    prompt（第一个参数（文本提示）,第二个参数（文本框输入））

 

数据类型

检测数据类型 typeof

一个五种基本类型

string number boolean undefined null

一种引用类型 object

 

undefined的数据即定义之后没有赋值的变量默认值为undefined

这个时候参与数学运算会显示为NaN

undefined参与运算隐式转换为NaN参与运算

NaN是数字类型的特殊值，它参与运算得出的结果都是NaN

 

String在进行数学运算除了加好是字符串拼接外其他都是隐式转换为NaN进行运算，运算结果都是NaN

undefined进行数学运算时也是隐式转换为NaN

null隐式转为0

false隐式转换为0

true隐式转换为1

 

js没有函数重载，永远是后者覆盖前者

 

节点树：

节点element 就是标签

dom的四个小属性

documet.documentElement 获取html标签

documet.head获取html的head标签

documet.body获取html的body标签

documet.title获取title标签的文字内容

 

获取其他的标签 可以通过document.getElementById()

通过节点上的id获取标签

 

操作标签的文本：

标签中间的文字就是文本

通过节点的 innerHtml属性来获取修改

表单通过value修改文本

 

dom只能修改标签的行内样式

dom修改带-的样式的时候修改为驼峰写法

font-size 通过dom修改时为 fontSize=“19px”

 

事件

Element.onxxx = function(){

事件的处理函数

}

单击事件 onclick

var div = documnet.getElementById("box");

box.onclick =function(){

 

}

 

js创建标签

document.createElemenr("li");

增加子节点

element.appendChile(xx);

 

echarts图标库

作用：快速开发各种图表

4步  

1.引入echarts.js

2.准备一个有宽高的盒子存放图表

3.设置相关的信息

当引入echarts函数的时候，它对外保留一个对象通过init方法创建实例

var myChart = echarts.init(document.getElementById('main'));

设置option

myChart.setOption(option);

 

 

js中引用类型都是对象 可以通过点语法来添加属性和方法

 

Js的狭义对象

var obj ={}；

该对象可以拥有属性和方法

 

广义对象

函数即为广义对象或者系统自带的document 他有自带的属性

document.title

 

什么不是对象：

基本数据类型就不是对象

前端的5个基本数据类型：

数字，字符串，null，boolean，undefined

不能通过点语法来动态地添加属性

 

函数执行在js中有五种方式

函数名+小括号；window

函数作为事件处理函数 标签

定时器回调函数执行 window

函数作为数组元素枚举出来执行 当前的数组

函数作为对象方法执行  this 返回当前的侠义对象 最后打点对象 

关键字new调用 

 

函数上下文 就是this，上面标红的就是在方法中console.log(this) 所输出的内容

 

构造函数：

1.函数首字母大写（非决定性因素）

2.new调用+函数名调用函数（决定性因素）

new Fun();

这样调用函数的时候 自动返回当前函数的狭义对象返回

例子：

function Fun(){

this.name="张三";

this.age=19；

}

var obj = new Fun；

返回一个狭义对象{}

输出obj的内容为

Fun{

name:"张三",

age:19

}

如果在函数内console.log(this)，输出的内容就是标红的内容

 

构造函数的原型

使用prototype

Fun.prototype.tuitu = function(){

console.log("sds");

}

对象obj可以通过 obj.tuitu调用

创建多个实例对象时 共享内存

 

jquery是个简洁的js框架，但是更多的作为js的函数库

jquery的基本使用

(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！

1.导入jquery的js文件

2.使用jquery的函数

 

jq用于操作节点

支持css中的几个选择器：

标签选择器，id选择器，class选择器

//如果向设置匹配标签的行内样式可以连续打点css函数

    $("p").css({

        "color": "red",

        "fontSize": 30,

        "background": "cyan",

        "textAlign": "center"

    })

 

• 一般情况下单位px可以省略
• 中间带有横杠的样式【font-size、padding-left】可以变为驼峰写法

jq独有的选择器

$("div:even")  偶数选择器

$("div:odd")  奇数选择器

$("div:first") 选择第一个

$("div:last")   选择最后一个

$("div:gt(5)") 选择索引值大于5的div 

$("div:lt(5)") 选择索引值小于5的div

 

jq操作标签文本

1.操作表单元素 利用val()

2.操作非表单元素使用html方法操作文本

 

jq的节点关系函数 element关系一些方法的使用

例如：找到父标签，兄弟标签等

1.parent

    一个关系方法：作用是找到某个节点的父元素

 

document.getElementById("box").style.backgroundColor ="red";

document设置css样式

 

2.siblings 

        //siblings:获取姊妹元素

    //单击某一个P让他的背景颜色为黄色，他的其余兄弟元素们为绿色

    //给P标签绑定单击事件

    $("p").click(function () {

        $(this).css({

            "background": "yellow"

        }).siblings().css({

            "background": "green"

        })

    });

    //链式语法【来源于OC语言:搞iOS苹果开发语言】

    //为了方便(书写语句的时候)可以从左到右连续打点

    //看着比较整洁

    //链式语法执行顺序：从左到右一次执行

3.chlidren

 

特效函数

淡入淡出

隐藏显示的动画效果

///第一个按钮单击事件

    $("#box1").click(function () {

        //slideUp:可以让元素向上卷起，它传递参数2000代表动画时间（MS）

        $("div").slideUp(2000);

    });

    //第二个按钮的单击事件

    $("#box2").click(function () {

        //slideDown:可以让元素向下展开，它传递参数2000代表动画时间（MS）

        $("div").slideDown(2000);

    });

    //第三个按钮绑定单击事件

    $("#box3").click(function () {

        //fadeOut:可以让元素淡出，它传递参数2000代表动画时间（MS）

        $("div").fadeOut(2000);

    });

    //第四个按钮绑定单击事件

    $("#box4").click(function () {

        //fadeIn:可以让元素淡入，它传递参数2000代表动画时间（MS）

        $("div").fadeIn(2000);

    });

 

动画函数

animate

animate（json，time，function）

三个参数

第一个可以放参数：

height：500px

width：100px

第二个

2000

第三个

console.log("动画结束会运行我")

 

将标签高度修改为500px，宽度修改为100px，用时2秒

动画结束后 运行回调函数

 

stop（true） 

动画积累问题解决办法

作用：取消之前的动画，执行当前最后一个动画

 

addClass和removeClass增加和移除Class名

eq(x)获取x索引的标签

index获取当前标签的索引值

 

轮播图插件 Swiper

 

prevAll()

获取某一个元素处于他前面的所有的兄弟元素

each()

遍历所有的元素

innerWidth（）

获取元素的宽度

 

script标签解决跨域问题

可以在jd商城上找到网页 打开f12 搜索callback

可引入的script的js地址

找到方法名

引入输出