CSS, js, jQuery, vue

Dec 17, 2020

前端可视化
- css
- JavaScript

前端可视化

css

CSS是指层叠样式表 cascading style sheets
引入CSS的方式
1. 直接在标签里写
```
  <div style=“color:red”>hello</div>  
```
1. 内部样式表在head和body之间插入
2. 外部样式表
```
  1.  
  <link rel="stylesheet" href="css/css01.css">  
  2.  
  <style>  
   @import url("css/css01.css");  
  </style>  
```
- import vs link
  1. 加载顺序不同
    @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面;
  1. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

选择器

元素选择器
- div
类选择器
- .class
id选择器
- #id
属性选择器
- tagName[attrName]
- tagName[attrName=‘xxx’]
选择器组
- div, img (|| 满足一个条件)
- div.class (&&必须满足两个条件)
派生选择器
- 子代 div > p
- 后代 div p
伪类超链接的伪类要遵守顺序：LoVeHAte，lvha
- a:active
- a:hover
- a:link
- a:visited
- li:first-child

文本属性

font-family
Font-size
Font-weight
color
Text-align
Text-decoration
Line-height
Text-indent

背景属性

background-color
background-image
background-repeat 图片重复的规则
background-position 图片的位置
background-attachment 背景图片是否跟随拖动

列表属性

none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha

边框属性

border-width
border-color
border-style
- dotted
- dashed
- solid
- …

轮廓属性

outline-width
outline-color
outline-style
- dotted
- dashed
- solid
- …

css定位

默认定位
- 块级元素block 可以改变宽高，独占一行
  - h1~h6,p,div
- 行内元素inline 不能改变宽高
  - a,b,span
- 行内块元素inline-block 从左向右，水平排列(自动换行);可以改变宽高
  - Input,img
- 改变默认定位display
浮动定位float 不仅可以靠着左边或右边。还可以消除“块级”的霸道特性
- none
- left
- right
相对定位position: relative 原来的位置进行比较，进行移动定位
- top
- left
- right
- bottom
绝对定位position: absolute 本元素与已定位的祖先元素的距离
- 如果父级元素定位了，就以父级为参照物;
- 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
- 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。
  - top
  - left
  - right
  - bottom
固定定位position: fixed 将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动
- top
- left
- right
- bottom
z-index 如果有重叠元素，使用z轴属性，定义上下层次。

css3

border-radius
box-shadow 1， 2，3， 4
background-image:linear-gradient([方向/角度]，颜色列表)
background-image: radial-gradient(颜色列表)
background-origin 指定了背景图像的位置区域
- border-box
- padding-box
- content-box
background-clip 调整背景色的位置
- border-box
- padding-box
- content-box
background-size 图片的大小
- cover
- contain
transition{1 2 3 4}
动画
- @keyframes
- animation{ 1 , 2 , 3 , 4 , 5 }

JavaScript

基本语法

引入script
- 在行内直接写方法
- 在html文件中任何位置添加
- 引入外部script<script src=“…”></script>
变量
- 弱类型的变量
  - 局部变量用 var 声明
  - 全局变量不用声明
- 自动类型转换
  - 任何类型+string = string
  - Boolean 类型+number=number
- 类型转换
  - parseInt
  - parseFloat
  - typeof -> string/boolean/number/object
- null
- Undefined
- 关系运算符
  - === 严格相等，类型和数据都相等
  - == 一般相等， 1==“1” ->true
  - !== 非严格相等
控制流
- if else
- switch case 可以使用string类型
- for(var i=0; I<10;i++) ; for(var I: arr)
- while(){}
字符串
- length
- toUpperCase/toLowerCase
- charAt
- indexOf
- lastIndexOf
- subString
- subStr
- replace
- split
数组
- 初始化
  - new Array()
  - New Array(1,2)
  - []
- toString()
- join(str)
- concat(arr)
- push(element)
- unshift(element)
- slice(startIndex,[endIndex]) 裁剪成新的数组
- reverse()
- sort() 默认排序结果是字符串排序，如果是数字排序，需要传入规则
- splice(index, [length]) 删除元素
Math
- 封装了常用的数学方法
Number
- fixed()
正则表达式
- 创建方法
  - /xxxx/
  - New RegExp(“xxxx”)
- test()
Date
- getFullYear()
- getMonth()
- …
函数
- 函数也是一种数据类型
- function name(x, y) {…. return 3;}
- Var name = (x, y)=>{… return 3;};
- 参数属性
  - arguments
- 全局函数
  - isNaN
  - eval
  - encodeURI
  - decodeURI
- 闭包指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数
  - 作用访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理;
  - 优缺点
    - 闭包的优点: 方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
    - 闭包的缺点: 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大
系统方法Window
- alert()
- console.log()
- document.write() 会替换掉整个页面的内容
- confirm()
- prompt()

DOM(Document Object Model)

DOM修改
- 查询
  - document.getElementById()
  - document.getElementsByName()
  - document.getElementsByTagName()
  - document.querySelector()
- 修改
  - Element.innerHTML
  - Element.style
  - Element.appendChild()
  - Document.createElement()
  - Element.setAttribute()
- 删除
  - Element.prarentNode.removeChild(element)
- 替换
  - elementOld.parentNode.replaceChild(elementNew, elementOld)
DOM事件
- Element.addEventListener()
- Body->onload
- Input -> onblur
- Input -> onfocus
- Tag->onclick
- Tag->ondblclick
- Tag->onmouseout
- Tag->onmouseover
- Window.onkeydown
- Window.onkeyup

事件传递

事件冒泡

target.addEventListener(type, listener );  

自内向外

事件捕获

target.addEventListener(type, listener [, useCapture]);  

自外向内

阻断
- e.stopPropagation()

面向对象

new Object()

var user = new Object();   
user.name = "吕布";  
user.age = 21;  
user.say = function(){  
	console.log("大家好，我	叫:"+this.name+"，我今	年"+this.age+"岁了!"); }  
user.say();  

构造函数

function userinfo(name , age){  
    this.name = name;  
    this.age = age;  
    this.say = function(){  
console.log("大家好，我叫:"+this.name+"，我今年"+this.age+"岁了!"); }  
}  
var user = new userinfo("詹姆斯",35); user.say();  

直接量

var user = {  
username : "孙悟空", age : 527,  
say : function(){  
console.log("大家好，我叫:"+this.username+"，我今年"+this.age+"岁了!"); }  
};  
user.say();  

JSON(JavaScript Object Notation)
- 就是js里边的一种数据类型

BOM(Browser Object Model)

window对象
- open()
- screen
  - width
  - height
location
- reload()
- href
history
- back()
- forward()
- go()
navigator 浏览器信息
- appCodeName
- appName
- appVersion
- platform
- userAgent
- cookieEnabled
localStorage
- setItem()
- getItem()
- clear()
- removeItem()
- length
sessionStorage
- setItem()
- getItem()
- clear()
- removeItem()
- length
setInterval()
clearInterval()
setTimeout()

jQuery

jQuery是一个javascript库，jQuery凭借着简洁的语法和跨平台的兼容性，极大的简化了js操作DOM、处理
事件、执行动画等操作

jQuery对象
- $(“xxx”)
- Jq对象->dom对象：jdObject[0];
  jdObject.get(0);
- dom对象->Jq对象：
  $(dom对象)

调用onload方法

$(function(){})
$(document).ready(function(){
})

事件派发

$(function(){  
        $("#btn2").click(function(){  
		alert("jQuery想试试");   
	})  
})  

jQuery选择器
- 基本选择器:和css一模一样
- 层级选择器:和css一模一样
- 属性选择器:和css一模一样
- 基本过滤选择器
  - :first
  - :last
  - :even
  - :odd
  - :eq(index)
  - :gt(index)
  - :lt(index)
  - :contains(text)
- 表单选择器
  - :input
  - :text
  - :password
  - :radio
  - :checkbox
  - :submit
  - :image
  - :reset
  - :button
  - :file
  - :hidden
链式编程，使用“.”调用方法
jQuery的DOM
- 文本查询和修改
  - val([value])
  - text([value])
  - html([value])
- 属性操作推荐使用prop，而不是attr
  - attr(name[,value])
  - prop(name[,value])
  - removeAttr(name)
- class相关
  - css(name[,value])
  - addClass(value)
  - removeClass(value)
  - toggleClass(value)
- 插入对象
  - $(“”)
  - 父元素.append(element)
  - 父元素.prepend(element)
  - 兄弟元素.before(element)
  - 兄弟元素.after(element)
- 删除对象
  - remove() 整个节点都删除掉
  - empty() 清空节点内的html

遍历的方式

// Way 1   
  for(var i=0;i<元素数组.length;i++){ 元素数组[i];  
}  
    
// way2  
 jquery对象.each(function(index,element){});  
其中，  
index:就是元素在集合中的索引 element:就是集合中的每一个元素对象  
    
//way3  
 $.each(jquery对象,function(index,element){});  
其中，  
index:就是元素在集合中的索引 element:就是集合中的每一个元素对象  
    
//way4  
 for(变量 of jquery对象){ 变量;  
}  
其中， 变量:定义变量依次接受jquery数组中的每一个元素 jquery对象:要被遍历的jquery对象   
    

jQuery动画

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

$(selector).animate({params},speed,callback);

$("button").click(()=>{  
            $("div").animate({  
                height: "300px",  
                opacity: 0.4  
            },"slow").animate({  
                width: "400px",  
                opacity: 0.6  
            }, "slow").animate({  
                left: "300px"  
            }, "slow").animate({  
                top: "300px"  
            }, "slow", ()=>{  
                alert("done");  
            });  
        })  

ajax

概念： Ajax 即”Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。
功能： Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面。提升用户的体验

Js原生请求

XMLHttpRequest

// create Ajax  
var xhr = new XMLHttpRequest();  
// 监听状态变化  
xhr.onreadystatechange = function() {  
    //readyState 1 2 3 4,(响应结束)  
    //status 请求状态码  
    if (xhr.readyState == 4 && xhr.status == 200) {  
        addContent(xhr.responseText);  
    }  
}  
// 请求方式 ， url， 是否异步  
xhr.open("GET", "http://localhost:8080/demo_ajax/DemoServlet", true);  
// 发送请求  
xhr.send();  

jQuery
- $.get(url, [data], [callback], [type])
  - url: 请求的服务器端url地址
  - data: 发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
  - callback: 当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
  - type: 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
- $.post(url, [data], [callback], [type])
  - url: 请求的服务器端url地址
  - data: 发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
  - callback: 当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
  - type: 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
- $.ajax([settings]) setting 是一个js对象
  - url: 请求的服务器端url地址
  - data: 发送到服务器的数据，可以是键值对形式，也可以是js对象形式
  - type: (默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”
  - dataType: 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
  - success: 请求成功后的回调函数
  - error: 请求失败时调用此函数
  - async: (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
json
- jackson
  - ObjectMapper
    - public String writeValueAsString(Object var1)
  - 注解的使用
    - @JsonIgnore 排除属性。
    - @JsonFormat 属性值的格式化,例如，针对日期格式:@JsonFormat(pattern = “yyyy-MM-dd”)

vue

MVVM的实践，分离View和Model

基本案例

<script src="../js/vue.js"></script>  
<body>  
    <div id="app">  
        <!-- 插值表达式 -->  
            
    </div>  
    
</body>  
<script>  
    var app = new Vue({  
        // 绑定元素  
        el: "#app",  
        data: {  
            message: "Hello lagou!!"  
        }  
    })  
</script>  

插值表达式
- 可以引用data中的变量
- 可以写三目运算
- 可以做简单的计算
el挂载 el(ement): 通过选择器关联标签，只会关联第一个找到的元素，只有挂载的标签内部才能使用差值表达式，不作用于html和body
data
- 当data变化时，插值表达式中的内容也会随之变化
- 可以写js的任意数据类型，读取的时候也可以使用js的获取语句

methods Vue绑定的方法都要写在methods或data里边，建议写在methods里边, 调用的时候，没参数直接写函数名就可以，有参数funname(params)

<button @click="sub">sub</button>  
	    
	    
var app = new Vue({  
        el: "#app",  
        data: {  
            count: 1  
        },  
        methods: {  
            sub() {  
                this.count -= 1;  
            }  
        }  
    });  

常用指令

v-text 把内容插入到innerText中

<p v-text="message+'heheh'">cgharu</p>  

v-html 把内容插入到innerHtml中
```
<p v-html=“html”>cgharu</p>  
```
不建议使用
v-if和v-show 用来动态决定是否显示内容
v-if：直接屏蔽元素，切换开销较大
v-show ：把display设置为none，早期渲染开销较大
```
<p v-if=“true”>我是p标签中的内容</p>  
<p v-show="isShow">我是p标签中的内容</p>  
```

v-on 关联绑定方法, 可以传$event

<body>  
    <div id="app">  
        <button v-on:click="add">++++</button>  
        <button @click="sub">----</button>  
        <hr>  
        <button v-on:click="count += 1">22++++</button>  
        <button @click="count -= 1">22----</button>  
        <hr>  
        <button @click="fun(count)">get count</button>  
        <button @click="fun1($event)">get event</button>  
        <h1>8</h1>  
        <input type="text" name="name" id="uid" @keydown="fun2($event)">  
    </div>  
</body>  
<script>  
    //     <!-- 1.获取元素,操作元素  
    // 点击按钮一 count值增加  
    // 点击按钮二 count值减少 2.参数传递  
    // 传递count  
    // 传递$event : 如果有一个输入框,键盘按下,只能输入数字,不能输入其他内容. 需求:有一个文本输入框,只可以输入数字0-9 ,其他内容不能输入.  
    // -->  
    var app = new Vue({  
        el: "#app",  
        data: {  
            count: 1  
        },  
        methods: {  
            add: function() {  
                this.count += 1;  
	    
            },  
            sub: function() {  
                this.count -= 1;  
            },  
            fun: function(c) {  
                alert(c);  
            },  
            fun1: function(e) {  
                alert(e);  
            },  
            fun2: function(e) {  
                // alert(e.keyCode);  
                if (e.keyCode < 48 || e.keyCode > 57) {  
                    // 阻止默认点击事件发生  
                    e.preventDefault()  
                }  
            }  
        }  
    });  
</script>  

常用键盘事件 @keyup.enter
- .enter
- .tab
- .delete
- .esc
- .right
- .space
- .ctrl
- .up
- .alt
- .down
- .shift
- .left

v-for 循环遍历元素，并生成对应的list元素

<p v-for="(element, index) in arr"> === </p>  
	    
        <ul>  
            <li v-for="(value, key, index) in person">  
                 ===  ,   
            </li>  
        </ul>  

V-bind 关联属性

div id="app">  
        <!-- 绑定图片资源 -->  
        <img v-bind:src="imgUrl" />  
        <!-- 简化语法 -->  
        <img :src="imgUrl" />  
        <!-- 三目方式 -->  
        <div v-bind:class="isDivStyle?'divStyle':''"></div>  
        <hr>  
        <!-- 简化方式判断是否添加class -->  
        <div :class="{divStyle:isDivStyle}"></div>  
        <hr>  
        <!-- 数组方式添加 -->  
        <p v-bind:class="[fontColor , fontSize]"> the p</p>  
    </div>  

V-model 双向绑定，让data中的值随着input：text的值变化

<body>  
    <div id="app">  
        <input type="text" name="name" id="id" v-model="message"> <br>  
        <input type="button" value="点击按钮修改message" @click="update"><br>  
        <h2></h2>  
    </div>  
</body>  
<script>  
    var app = new Vue({  
        el: "#app",  
        data: {  
            message: "hello"  
        },  
        methods: {  
            update: function() {  
                this.message = "hello update";  
            }  
        }  
    })  
</script>  

生命周期

必须在第一层调用

beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
created 在实例创建完成后被立即调用。
beforeMount 在挂载开始之前被调用。
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。
destroyed 实例销毁后调用。

<body>  
    <div id="app">  
        <p id="span">  
                
        </p>  
        <button @click="updateMsg">update</button>  
    </div>  
</body>  
<script>  
    new Vue({  
        el: "#app",  
        data: {  
            message: "April",  
        },  
        methods: {  
            show() {  
                console.log("Hello world!!!!");  
            },  
        updateMsg() {  
                this.message = "ANgie";  
              
        },  
},  
        beforeCreate() {  
            // 无数据，未初始化数据  
            console.log("---------beforeCreate----------");  
            console.log("message:" + this.message);  
            console.log("dom:" + document.getElementById("span").innerText);  
            this.show();  
            console.log("---------beforeCreate----------");  
        },  
        created() {  
            // 有数据，未渲染  
            console.log("---------created----------");  
            console.log("message:" + this.message);  
            this.show();  
            console.log("dom:" + document.getElementById("span").innerText);  
            console.log("---------created----------");  
        },  
        // mount 渲染，挂上数据  
        beforeMount() {  
            console.log("---------beforeMount----------");  
            console.log("message:" + this.message);  
            this.show();  
            console.log("dom:" + document.getElementById("span").innerText);  
            console.log("---------beforeMount----------");  
        },  
        mounted() {  
            console.log("---------mounted----------");  
            console.log("message:" + this.message);  
            this.show();  
            console.log("dom:" + document.getElementById("span").innerText);  
            console.log("---------mounted----------");  
        },  
        beforeUpdate() {  
            console.log("---------beforeUpdate----------");  
            console.log("message:" + this.message);  
            this.show();  
            console.log("dom:" + document.getElementById("span").innerText);  
            console.log("---------beforeUpdate----------");  
        },  
        updated() {  
            console.log("---------updated----------");  
            console.log("message:" + this.message);  
            this.show();  
            console.log("dom:" + document.getElementById("span").innerText);  
            console.log("---------updated----------");  
        }  
    })  
</script>  

axios 配合vue使用的网络请求插件，内部封装ajax了

<!-- 官网提供的 axios 在线地址 -->  
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 或者去github中下载源码  
https://github.com/axios/axios  

get

格式1: axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});   
格式2: axios.get(地址,{params:{key1:value1...}}).then(function(response){},function(error){});  
	    
	    
	    
<body>  
    <div id="app">  
        <input type="button" value="生成笑话" @click="generateJoke"><br>  
        <p>  
            <ul v-for="(joke, index) in jokes">  
                <li>\{\{index+1\}\}.\{\{joke\}\}</li>  
            </ul>  
        </p>  
    </div>  
</body>  
<script>  
    new Vue({  
        el: "#app",  
        data: {  
            jokes: [""]  
        },  
        methods: {  
            generateJoke() {  
                // 这里需要引用一下this，不然在请求结果的方法体中无法使用  
                var that = this;  
                axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response) {  
                    console.log(response.data.jokes);  
                    that.jokes = response.data.jokes;  
                }, function(error) {  
                    console.log("error:" + error);  
                })  
            }  
        }  
    })  
</script>  

post

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){})  
	     

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

数据可视化

HighCharts 演示文档
ECharts 示例文档