一,jquery的一系列盒子边距属性
1,width()/height()
只是默认的宽度,设置多少就是多少
$('.box').width()
2,innerWidth()/innerHeight()
到内部宽度,width+padding
$('.box').innerWidth()
3,outerWidth()/outerHeight()
到外部的宽度,width+padding+border
$('.box').outerWidth()
4,outerWidth(true)/outerHeight(true)
到外部宽度(真),width+padding+border+margin
$('.box').outerWidth(true)
二,jquery的位置属性
1,position()
$('.box').position()返回值是json对象{top: 100, left: 500}
2,srcollTop()/scrollLeft()
srcollTop(500),可以通过调用该方法设置初始卷去高度
srcollTop()的返回值是被卷去的高度
3,html()/text()
获取元素内容,html返回包括标签和内容,text只返回内容
写入元素内容,html可写入标签,可被读取,text写入什么则显示什么
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
4,val()
只可设置或者返回表单元素的内容
不可操作dom
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
5,text,html,及val的回调函数
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
}
6,attr()、prop()
attr() 、prop()方法用于获取和返回属性值。
$("button").click(function(){ alert($("#runoob").attr("href")); });
$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });
三,jquery插件
(一),颜色插件
引入color.js文件,引入之后直接使用animate动画进行设置即可
jquery中的animate动画本身不支持变色，但是jquery.color.js弥补了这一缺陷。
.color.js 依赖于 jQuery. 所以需要先引用jqueryjs：
<script src="jquery.min.js"></script>
<script src="jquery.color.js"></script>
(二),懒加载
引入js文件
用图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片。
懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。
与图片预加载的处理方式相反，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，尤其是移动端。浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。
<script src="jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<img alt="" width="640" height="480" data-original="img/test.jpg" />
$(function() {
$("img").lazyload();
});
(三),jquery.ui.js的使用
引入
下载zip包并解压，通常情况下，需要在页面中引用这三个文件，以便使用 jQuery UI 的窗体小部件和交互部件：
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
例如设置一个日期选择器
则需要对一个文本框操作datepicker()方法即可
<input type="text" name="date" id="date" />
$( "#date" ).datepicker();
例如设置一个允许鼠标拖动元素，在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。
$(function() {
$( "#draggable" ).draggable();
});
(四)、Echarts的使用
ECharts安装
1、官网下载然后引入
完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。
2、使用CND方法
Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
第一步：创建 HTML 页面
创建一个 HTML 页面，引入 echarts.min.js：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<script src="echarts.min.js"></script></head></html>
第二步: 为 ECharts 准备一个具备高宽的 DOM 容器
实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div></body>
第三步: 设置配置信息
ECharts 库使用 json 格式来配置。
echarts.init(document.getElementById('main')).setOption(option);
这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：
标题
为图表配置标题：
title: {
text: '第一个 ECharts 实例'}
提示信息
配置提示信息：
tooltip: {},
图例组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]}
X 轴
配置要在 X 轴显示的项:
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}
Y 轴
配置要在 Y 轴显示的项。
yAxis: {}
系列列表
每个系列通过 type 决定自己的图表类型:
series: [{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容}]
每个系列通过 type 决定自己的图表类型：
type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列
浙公网安备 33010602011771号