公益网站 html 模板,百度浏览器,网站栏目建设征求意见,常德建设工程信息网什么是nginx
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器
Nginx是一款轻量级的Web 服务器/反向代理服务器#xff0c;处理高并发能力是十分强大的#xff0c;并且支持热部署#xff0c;启动简单#xff0c;可以做到7*24不间断运行
正代和反代
学习nginx处理高并发能力是十分强大的并且支持热部署启动简单可以做到7*24不间断运行
正代和反代
学习nginx最重要的就是反向代理 安装nginx
直接安装
初学者可以尝试这种模式
yum install -y nginx
docker安装
docker pull nginx:latest
docker run -itd --name nginx -p 80:80 nginx:latest
用docker的话就把配置文件和目录映射出来方便修改
常用命令
# 开启服务
nginx
# 快速停止
nginx -s stop
# 有序停止
nginx -s quit
# 重启服务
nginx -s reload
# 检查配置文件是否有语法操作
nginx -t
nginx.conf
nginx默认配置文件
一般在/usr/local/nginx/conf/nginx.conf
nginx.conf由多个块组成最外面的块是mainmain包含Events和HTTPHTTP包含upstream和多个ServerServer又包含多个location
user nginx; # 指定nginx进程的运行用户
worker_processes auto; # 指定Nginx要开启的进程数每个Nginx进程平均耗费10M~12M内存。建议指定和CPU的数量一致即可。
error_log /var/log/nginx/error.log notice; # 用来定义全局错误日志文件。日志输出级别有debug、info、notice、warn、error、crit可供选择其中debug输出日志最为最详细而crit输出日志最少。
pid /var/run/nginx.pid; # 用来指定进程pid的存储文件位置
events {worker_connections 1024; # 用于定义Nginx每个进程的最大连接数默认是1024
}
http {include /etc/nginx/mime.types;default_type application/octet-stream; # 这里设定默认类型为二进制流也就是当文件类型未定义时使用这种方式例如在没有配置PHP环境时Nginx是不予解析的此时用浏览器访问PHP文件就会出现下载窗口。
log_format main $remote_addr - $remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for;
access_log /var/log/nginx/access.log main;
sendfile on; # 用于开启高效文件传输模式。将tcp_nopush和tcp_nodelay两个指令设置为on用于防止网络阻塞
keepalive_timeout 65; # 设置客户端连接保持活动的超时时间。在超过这个时间之后服务器会关闭该连接
include /etc/nginx/conf.d/*.conf; # 导入其他的配置文件注意include所在的位置
}
main全局设置、server主机设置、upstream负载均衡服务器设置和 locationURL匹配特定位置的设置。 main块设置的指令将影响其他所有设置 server块的指令主要用于指定主机和端口 upstream指令主要用于负载均衡设置一系列的后端服务器 location块用于匹配网页位置。
localtion
URL地址匹配是进行Nginx配置中最灵活的部分。 location支持正则表达式匹配也支持条件判断匹配用户可以通过location指令实现Nginx对动、静态网页进行过滤处理 我这里准备了一个html文件html文件引入了图片
然后配置文件如下
server {listen 80;location / {root /opt/nginx_study/html; # 根目录index index.html; # 默认显示的页面}
}
此时访问服务器ip就可以正常看到页面和图片
注意啊在html引入图片是相对路径如果你这样写
img src/html/image/1.jpg alt
img src/html/image/2.jpg alt
不改nginx的情况下页面上能看到图片吗
答案是肯定的肯定看不到的
那我们可以配置一下图片的访问路径
server {listen 80;
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {root /opt/nginx_study;}location / {root /opt/nginx_study/html; # 根目录index index.html; # 默认显示的页面}
}
或者
server {listen 80;
location /html/ { # 后面没有/就会重定向root /opt/nginx_study;index image/1.jpg; # 直接访问这个路径会显示这个图片}location / {root /opt/nginx_study/html; # 根目录index index.html; # 默认显示的页面}
}
alias
Nginx中配置文件路径有两种方式一种是root一种是alias
例如一个项目里面有两个html文件要配置路由去访问
目录如下
htmlhtml1index.htmlhtml2index.html
我想实现 访问127.0.0.1:80就是 访问html1下的index.html
访问127.0.0.1:80/xxx就是 访问html2下的index.html
如果这样写会发现/xxx/怎么也到不了/html2那里
server {listen 80;location / {root /opt/nginx_study/html/html1;index index.html;}location /xxx/ {root /opt/nginx_study/html/html2/; # 会把/xxx/的路径拼接上index index.html;}
}
所以就有了路径别名
这样就可以解决这个问题了
server {listen 80;location / {root /opt/nginx_study/html/html1;index index.html;}location /xxx/ {alias /opt/nginx_study/html/html2/; # 只会把/xxx/后面的路径拼接过来index index.html;}
}
域名配置
server_name
如果你的项目是用ip访问的话这个可以不写
但是如果你的服务器上要跑很多服务并且都想使用80端口去访问
那就使用域名
通过访问不同的子域名来访问不同的服务
准备三个目录方便让三个子域名访问 因为演示是在内网环境没有真正的域名可以用
所以我们只能修改访问者的hosts文件将上面三个域名执行到 目标服务器上
例如我现在的hosts文件
192.168.100.185 doc.fengfengzhidao.com
192.168.100.185 news.fengfengzhidao.com
192.168.100.185 video.fengfengzhidao.com
然后配置nginx配置文件
server {listen 80;server_name doc.fengfengzhidao.com;location / {root /opt/nginx_study/html/doc.fengfengzhidao.com;index index.html;}
}
server {listen 80;server_name news.fengfengzhidao.com;location / {root /opt/nginx_study/html/news.fengfengzhidao.com;index index.html;}
}
server {listen 80;server_name video.fengfengzhidao.com;location / {root /opt/nginx_study/html/video.fengfengzhidao.com;index index.html;}
}
测试
C:\Users\枫枫curl http://doc.fengfengzhidao.com
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
doc.fengfengzhidao.com
/body
/htmlC:\Users\枫枫curl http://news.fengfengzhidao.com
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
news.fengfengzhidao.com
/body
/htmlC:\Users\枫枫curl http://video.fengfengzhidao.com
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
video.fengfengzhidao.com
/body
/html
其他匹配模式
server_name 中支持通配符 *, 但需要注意的是通配符不能出现在域名的中间只能出现在首段或尾段
server_name 中可以使用正则表达式并且使用 ~ 作为正则表达式字符串的开始标记
有些博客网站用户创建博客之后就会得到一个自己的专属博客我们可以使用通配符来实现这个修改
server {listen 80;server_name *.bolg.fengfengzhidao.com;location / {root /opt/nginx_study/html/doc.fengfengzhidao.com;index index.html;}
}
也可以使用正则表达式
这样就只能 zhangsan lisi wangwu三个访问
server {listen 80;server_name ~^(zhangsan)|(lisi)|(wangwu).bolg.fengfengzhidao.com$;location / {root /opt/nginx_study/html/doc.fengfengzhidao.com;index index.html;}
}
当然前端肯定要获取当前的子域名是什么然后发给后端查询是否有这个用户
我们的hosts文件
192.168.100.185 blog.fengfengzhidao.com
192.168.100.185 zhangsan.blog.fengfengzhidao.com
192.168.100.185 lisi.blog.fengfengzhidao.com
192.168.100.185 wangwu.blog.fengfengzhidao.com
192.168.100.185 fengfeng.blog.fengfengzhidao.com
认证 经常能看到这种输入用户名密码才能访问的网页
这种效果是怎么实现的呢
使用htpasswd生成特定的密码文件
yum install httpd-tools -y
这里我以test用户密码123456为例
htpasswd -c /opt/nginx_study/auth/htpasswd test nginx配置认证
server {listen 80;location / {# 开启功能模块关闭为offauth_basic on;# 指定密码配置文件auth_basic_user_file /opt/nginx_study/auth/htpasswd;root /opt/nginx_study/html; # 根目录index index.html; # 默认显示的页面}}
如果是用curl访问
curl -u test:123456 http://127.0.0.1
proxy_pass
这个就是nginx的重头戏了nginx的代理
一般是针对特定的路由代理到后端服务器上
例如我这里写了一个程序匹配全部的路径然后打印出来
package mainimport (encoding/jsonflagfmtgithub.com/gin-gonic/gin
)var name *string// handler
func handler(c *gin.Context) {byteData, _ : json.Marshal(c.Request.Header)fmt.Println(string(byteData))c.String(200, fmt.Sprintf(%s %s name:%s, c.Request.URL.Path, c.ClientIP(), *name))return
}func main() {addr : flag.String(addr, :8080, addr)name flag.String(name, default, name)flag.Parse()router : gin.Default()router.GET(, handler)fmt.Println(服务运行中...)fmt.Printf(服务运行在%s \n, *addr)router.Run(*addr)
}
build.bat
set GOOSlinux
go build -o main
set GOOSwindows
然后将编译好的文件放在服务器上运行
然后配置proxy_pass
server {listen 80;location /a1/ { # 匹配/a1/开始将/a1/之后的加到/之后proxy_pass http://127.0.0.1:8080/;}location /a2/ { # 匹配/a2/开始将匹配的路径加到/之后直观感受就是把被匹配的路径加上了proxy_pass http://127.0.0.1:8080;}location /b1/ {proxy_pass http://127.0.0.1:8080/xxx/;}location /b2/ {proxy_pass http://127.0.0.1:8080/xxx;}
}
这里这个路径会有绝对路径和相对路径的说法演示一下就清楚了
请求路径 实际到后端的路径
/a1/ /
/a1/123 /123/a2/ /a2/
/a2/123 /a2/123/b1/ /xxx/
/b1/123 /xxx/123/b2/ /xxx
/b2/123 /xxx123
携带原始ip
这个时候你会发现我请求192.168.100.185这个服务器ip
但是在服务内部接收到的ip全是127.0.0.1这是为什么呢
我们都知道nginx的proxy就是代理将源用户的请求代理到目标服务器上也就是请求者变成了nginx
我们只需要将源请求的标识ip的特征一起代理过去就行
主要配置一个特殊的请求头就可以了
server {listen 80;# proxy_set_header X-Real-IP $remote_addr; # 加在这里也可以location /a1/ {proxy_set_header X-Real-IP $remote_addr;proxy_pass http://127.0.0.1:8080/;}
}
负载均衡
nginx应用场景之一就是负载均衡。在访问量较多的时候可以通过负载均衡将多个请求分摊到多台服务器上相当于把一台服务器需要承担的负载量交给多台服务器处理进而提高系统的吞吐率另外如果其中某一台服务器挂掉其他服务器还可以正常提供服务以此来提高系统的可伸缩性与可靠性。
后端启动两个服务
./main -addr 127.0.0.1:8080 -name s1
./main -addr 127.0.0.1:8081 -name s2
upstream myapp1 {server 127.0.0.1:8080;server 127.0.0.1:8081;
}server {listen 80;location /api/ {proxy_set_header X-Real-IP $remote_addr;proxy_pass http://myapp1/;}
}
然后访问 服务器ip:80/api/
你会发现分别将请求打到不同的后端服务上了
此时它们的权重是一样的
nginx给我们提供了不同的权重模式
轮询(Nginx自带、默认)
该策略是Nginx默认的负载均衡策略每一个客户端请求按时间顺序轮流分配到不同的服务器上如果后端服务不可以用会自动过滤掉。
weight 权重(Nginx自带)
upstream myapp1 {server 127.0.0.1:8080 weight1; # 打中的比例是 1/3server 127.0.0.1:8081 weight2; # 打中的比例是 2/3
}
ip_hash(Nginx自带)
ip_hash是将每个请求按照访问ip的hash结果进行分配这种方式可以保证同一个用户会固定访问一个后端服务器。优点可以保证session会话解决服务器之间session不能共享的问题。
upstream myapp1 {ip_hash;server 127.0.0.1:8080;server 127.0.0.1:8081;
}server {listen 80;location /api/ {proxy_set_header X-Real-IP $remote_addr;proxy_pass http://myapp1/;}
}
least_conn(Nginx自带)
将请求转发给连接数较少的后端服务器。每个后端服务器配置可能不同处理的请求也有可能不同对于处理的请求有快有慢least_conn是根据后端服务器的连接情况动态的选择连接数量较少的一台服务器来处理当前的请求。
upstream myapp1 {least_conn;server 127.0.0.1:8080;server 127.0.0.1:8081;
}server {listen 80;location /api/ {proxy_set_header X-Real-IP $remote_addr;proxy_pass http://myapp1/;}
}
nginx限制措施
黑名单
nginx的黑名单功能可以直接在nginx层面拦截恶意ip让它到不了后端服务
被拦截之后的效果就是这样 它的配置也很简单
server {listen 80;
# deny 192.168.100.113; # 可以放在 server块location / {root /opt/nginx_study/html/;index index.html;}location /yyy/ {deny 192.168.100.113; # 也可以放在location块中alias /opt/nginx_study/html/;index index.html;}
}
deny 这个配置也是不挑地方的可以放在不同的作用域中
也可以专门用一个文件去存放黑名单只需要在不同的地方include即可如下
black.conf
deny 192.168.100.113;
nginx.conf
server {listen 80;location / {root /opt/nginx_study/html/;index index.html;}include /opt/nginx_study/black.conf;
}
白名单
allow一般和deny 连用
如下只允许192.168.100.113访问其他ip访问则被拒绝
server {listen 80;allow 192.168.100.113;deny all;location / {root /opt/nginx_study/html/;index index.html;}
}
UA黑名单
map $http_user_agent $bad_user_agent {default 0;~*curl 1;~*wget 1;~*Unicornscan 1;~*sqlmap 1;~*nessus 1;~*netsparker 1;}server {listen 80;if ($bad_user_agent) {return 404;}location / {root /opt/nginx_study/html/;index index.html;}
} 注意这个map只能写在server的外面 此时通过 curl直接访问会得到 404
C:\Users\枫枫curl 192.168.100.185
html
headtitle404 Not Found/title/head
body bgcolorwhite
centerh1404 Not Found/h1/center
hrcenternginx/1.13.7/center
/body
/htmlC:\Users\枫枫curl --user-agent sss 192.168.100.185
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
你会
/body
/html
Referer黑名单
map $http_referer $bad_referer {default 0;~*evil\.com 1;~*xxx\.com 1;~*yyy\.com 1;}server {listen 80;if ($bad_referer) {return 404;}location / {root /opt/nginx_study/html/;index index.html;}
}
C:\Users\枫枫curl 192.168.100.185
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
你会
/body
/htmlC:\Users\枫枫curl -e xxx.com 192.168.100.185
html
headtitle404 Not Found/title/head
body bgcolorwhite
centerh1404 Not Found/h1/center
hrcenternginx/1.13.7/center
/body
/html
请求频率黑名单
黑客可以通过发送大量请求来模拟各种攻击在一定时间内发送的请求达到某个阈值后则会被判定为恶意请求。实现请求频率限制也是黑名单的一种应用场景
这是一分钟内请求5次的示例
limit_req_zone $binary_remote_addr zoneperip:10m rate5r/m;server {listen 80;limit_req zoneperip burst5 nodelay;location / {root /opt/nginx_study/html/;index index.html;}
}
这是一秒钟内请求5次的示例
limit_req_zone $binary_remote_addr zoneperip:10m rate5r/s;server {listen 80;limit_req zoneperip burst10 nodelay; # 最多可以处理10个并发请求location / {root /opt/nginx_study/html/;index index.html;}
}
https配置
自签名ssl证书
openssl genrsa -out private.key 2048
openssl req -new -key private.key -out cert.csr
openssl x509 -req -in cert.csr -out cacert.pem -signkey private.key
server {listen 443 ssl;ssl_certificate /opt/nginx_study/ssl/cacert.pem; # pem的路径ssl_certificate_key /opt/nginx_study/ssl/private.key; # key的路径location / {root /opt/nginx_study/html/;index index.html;}
}
因为是自签的所以浏览器会提示不安全正常的 云平台的ssl证书
将key和pem文件放到服务器上
server {listen 80; # 将80的请求重定向到443上去server_name www.xxx.com;return 301 https://$server_name$request_uri;
}server {listen 443 ssl;ssl_certificate /www/server/nginx/www.xxx.com.pem; # pem的路径ssl_certificate_key /www/server/nginx/www.xxx.com.key; # key的路径server_name www.xxx.com;location / {uwsgi_pass 127.0.0.1:8000; # 这个案例是uwsgi的案例include uwsgi_params;}location /static {alias /www/wwwroot/flask_deploy/static;}
}
gzip配置
这个配置也是不挑地方的
server {listen 80;location / {gzip on;gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript;root /opt/nginx_study/html/;index index.html;}location /xxx/ {alias /opt/nginx_study/html/;index index.html;}
} 参考文档
官网nginx
nginx详解Nginx详解一文带你搞懂Nginx-CSDN博客
nginx常用命令操作nginx常用操作命令_nginx命令-CSDN博客
8分钟了解nginxhttps://zhuanlan.zhihu.com/p/34943332
nginx常用命令和总结nginx的常用命令和总结 - ministep88 - 博客园
nginx配置文件 Nginx安装及配置文件nginx.conf详解-CSDN博客
nginx负载均衡百度安全验证
nginx server_name: nginx 配置指令之server_name_nginx servername-CSDN博客
nginx 黑名单 如何使用Nginx实现IP黑名单-Nginx-PHP中文网
nginx请求频率限制https://www.python100.com/html/109613.html
nginx gzip Nginx中启用Gzip压缩加速网页加载,-CSDN博客
nginx gzip具体配置 Nginx Gzip配置详解优化压缩效率与范围-CSDN博客
jQuery 安装
下载 jQuery
有两个版本的 jQuery 可供下载 Production version - 用于实际的网站中已被精简和压缩 Development version - 用于测试和开发未压缩是可读的代码
以上两个版本都可以从 jquery.com 中下载
headscript srcjquery-1.10.2.min.js/script
/head
替代方案
Staticfile CDN:
headscript srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js/script
/head
百度 CDN:
headscript srchttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/script
/head
字节跳动:
headscript srchttps://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js/script
/head
又拍云 CDN:
headscript srchttps://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js/script
/head
新浪 CDN:
headscript srchttps://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js/script
/head
Microsoft CDN:
headscript srchttps://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js/script
/head
jQuery 语法
基础语法 $(selector).action() $(this).hide() - 隐藏当前元素 $(p).hide() - 隐藏所有 p 元素 $(p.test).hide() - 隐藏所有 classtest 的 p 元素 $(#test).hide() - 隐藏 idtest 的元素
文档就绪事件
实例中的所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){// 执行代码
});
// 或者
$(function(){// 执行代码
});
jQuery 选择器
元素选择器
script srchttps://cdn.staticfile.net/jquery/2.0.0/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(p).hide();});});
/script
/head
bodyh2这是一个标题/h2p这是一个段落/pbutton点我/button
/body
#id 选择器
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#test).hide();});});
/script
/head
bodyh2这是一个标题/h2p这是一个段落/pp idtest这是另外一个段落/pbutton点我/button
/body
.class 选择器
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(.test).hide();});});
/script
/head
bodyh2 classtest这是一个标题/h2p classtest这是一个段落/pp这是另外一个段落/pbutton点我/button
/body
更多实例
语法描述$(*)选取所有元素$(this)选取当前 HTML 元素$(p.intro)选取 class 为 intro 的 p 元素$(p:first)选取第一个 p 元素$(ul li:first)选取第一个 ul 元素的第一个 li 元素$(ul li:first-child)选取每个 ul 元素的第一个 li 元素$([href])选取带有 href 属性的元素$(a[target_blank])选取所有 target 属性值等于 _blank 的 a 元素$(a[target!_blank])选取所有 target 属性值不等于 _blank 的 a 元素$(:button)选取所有 typebutton 的 input 元素 和 button 元素$(tr:even)选取偶数位置的 tr 元素$(tr:odd)选取奇数位置的 tr 元素
独立文件中使用 jQuery 函数
headscript srchttp://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js/scriptscript srcmy_jquery_functions.js/script
/head
jQuery 事件
鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclick 双击元素时警报keydownchange 规定针对被选元素当 change 事件发生时运行的函数resizemouseenterkeyupfocus 获得焦点时发生 focus 事件scrollmouseleaveblur 失去焦点时发生 blur 事件unloadhover
鼠标事件
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(p).click(function(){$(this).fadeOut();});});
/script
/head
bodyp点击这个段落使其消失。/p
/body
script$(document).ready(function(){$(p).dblclick(function(){$(this).fadeOut();});});
/script
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(p).mouseenter(function(){$(p).css(background-color,yellow);});$(p).mouseleave(function(){$(p).css(background-color,lightgray);});});
/script
/head
bodyp鼠标移动到该段落。/p
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(p).hover(function(){$(p).css(background-color,yellow);},function(){$(p).css(background-color,pink);});});
/script
/head
bodyp鼠标移动到该段落。/p
/body
键盘事件
与 keypress 事件相关的事件顺序 keydown 键按下的过程 keypress 键被按下 keyup 键被松开
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
scripti0;$(document).ready(function(){$(input).keypress(function(){$(span).text(i1);});});
/script
/head
body输入你的名字: input typetextp按键的次数: span0/span/p
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(input).keydown(function(event){ $(div).html(Key: event.which);});});
/script
/head
body输入名称: input typetextp当你在以上输入框中输入内容时div 中会陷入输入键的数字码。/pdiv /
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(input).keydown(function(){$(input).css(background-color,yellow);});$(input).keyup(function(){$(input).css(background-color,pink);});});
/script
/head
body输入你的名字: input typetextp在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。/p
/body
表单事件
当提交表单时显示警告框
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(form).submit(function(){alert(Submitted);});$(button).click(function(){$(form).submit();}); });
/script
/head
bodyform actionFirst name: input typetext nameFirstName valueMickeybrLast name: input typetext nameLastName valueMousebr/form button触发 submit 事件/button
/body
文档/窗口事件
$(document).ready(function(){$(img).load(function(){alert(图片已载入);});
});
对浏览器窗口调整大小进行计数
scriptx0;$(document).ready(function(){$(window).resize(function(){$(span).text(x1);});});
/script
对元素滚动的次数进行计数
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
scriptx0;$(document).ready(function(){$(div).scroll(function(){$(span).text(x1);});});
/script
/head
bodyp尝试滚动 div 中的滚动条/pdiv styleborder:1px solid black;width:200px;height:100px;overflow:scroll;菜鸟教程 —— 学的不仅是技术更是梦想菜鸟教程 —— 学的不仅是技术更是梦想brbr菜鸟教程 —— 学的不仅是技术更是梦想菜鸟教程 —— 学的不仅是技术更是梦想/divp滚动了 span0/span 次。/p
/body
当离开页面时显示提示消息
$(window).unload(function(){alert(Goodbye!);
});
jQuery 效果- 隐藏和显示
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#hide).click(function(){$(p).hide(1000);});$(#show).click(function(){$(p).show(1000);});});
/script
/head
bodyp如果你点击“隐藏” 按钮我将会消失。/pbutton idhide隐藏/buttonbutton idshow显示/button
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
stylediv{width: 130px;height: 50px;padding: 15px;margin: 15px;background-color: green;}
/style
script$(document).ready(function(){$(.hidebtn).click(function(){$(div).hide(1000,linear,function(){alert(Hide() 方法已完成!);});});});
/script
/head
bodydiv隐藏及设置回调函数/divbutton classhidebtn隐藏/button
/body
script$(document).ready(function(){$(button).click(function(){$(p).toggle(1000);});});
/script
jQuery Callback 方法
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数
speed 或 duration 参数可以设置许多不同的值比如 slow, fast, normal 或毫秒
!-- 在隐藏效果完全实现后回调函数 --
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(p).hide(slow,function(){alert(段落现在被隐藏了);});});});
/script
/head
bodybutton隐藏/buttonp我们段落内容点击“隐藏”按钮我就会消失/p
/body
!-- 没有回调函数警告框会在隐藏效果完成前弹出 --
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(p).hide(1000);alert(现在段落被隐藏了);});});
/script
/head
bodybutton隐藏/buttonp这是一个段落内容很少/p
/body jQuery 效果 - 淡入淡出
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).fadeIn();$(#div2).fadeIn(slow);$(#div3).fadeIn(3000);});});
/script
/head
bodyp以下实例演示了 fadeIn() 使用了不同参数的效果。/pbutton点击淡入 div 元素/buttonbrbrdiv iddiv1 stylewidth:80px;height:80px;display:none;background-color:red;/divbrdiv iddiv2 stylewidth:80px;height:80px;display:none;background-color:green;/divbrdiv iddiv3 stylewidth:80px;height:80px;display:none;background-color:blue;/div
/body
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).fadeOut();$(#div2).fadeOut(slow);$(#div3).fadeOut(3000);});});
/script
/head
bodyp以下实例演示了 fadeOut() 使用了不同参数的效果。/pbutton点击淡出 div 元素。/buttonbrbrdiv iddiv1 stylewidth:80px;height:80px;background-color:red;/divbrdiv iddiv2 stylewidth:80px;height:80px;background-color:green;/divbrdiv iddiv3 stylewidth:80px;height:80px;background-color:blue;/div
/body
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).fadeToggle();$(#div2).fadeToggle(slow);$(#div3).fadeToggle(3000);});});
/script
/head
bodyp实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。/pbutton点击淡入/淡出/buttonbrbrdiv iddiv1 stylewidth:80px;height:80px;background-color:red;/divbrdiv iddiv2 stylewidth:80px;height:80px;background-color:green;/divbrdiv iddiv3 stylewidth:80px;height:80px;background-color:blue;/div
/body
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度值介于 0 与 1 之间
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).fadeTo(slow,0.15);$(#div2).fadeTo(slow,0.4);$(#div3).fadeTo(slow,0.7);});});
/script
/head
bodyp演示 fadeTo() 使用不同参数/pbutton点我让颜色变淡/buttonbrbrdiv iddiv1 stylewidth:80px;height:80px;background-color:red;/divbrdiv iddiv2 stylewidth:80px;height:80px;background-color:green;/divbrdiv iddiv3 stylewidth:80px;height:80px;background-color:blue;/div
/body
jQuery 效果 - 滑动
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(#flip).click(function(){$(#panel).slideDown(slow);});});
/script
style typetext/css #panel,#flip {padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel {padding:50px;display:none;}
/style
/head
bodydiv idflip点我滑下面板/divdiv idpanelHello world!/div
/body
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(#flip).click(function(){$(#panel).slideUp(slow);});});
/script
style typetext/css #panel,#flip {padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel {padding:50px;}
/style
/head
bodydiv idflip点我拉起面板/divdiv idpanelHello world!/div
/body
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(#flip).click(function(){$(#panel).slideToggle(slow);});});
/script
style typetext/css #panel,#flip {padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel {padding:50px;display:none;}
/style
/head
bodydiv idflip点我显示或隐藏面板。/divdiv idpanelHello world!/div
/body
jQuery 效果- 动画
animate() 方法
animate() 方法用于创建自定义动画
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(button).click(function(){$(div).animate({left:250px});});});
/script
/head
bodybutton开始动画/buttonp默认情况下所有的 HTML 元素有一个静态的位置且是不可移动的。 如果需要改变为我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!/pdiv stylebackground:#98bf21;height:100px;width:100px;position:absolute;/div
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(button).click(function(){$(div).animate({left:250px,opacity:0.5,height:150px,width:150px});});});
/script
/head
bodybutton开始动画/buttonp默认情况下所有的 HTML 元素有一个静态的位置且是不可移动的。 如果需要改变我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!/pdiv stylebackground:#98bf21;height:100px;width:100px;position:absolute;/div
/body
animate() - 使用相对值
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(button).click(function(){$(div).animate({left:250px,height:150px,width:150px});});});
/script
/head
bodybutton开始动画/buttonp默认情况下所有的 HTML 元素有一个静态的位置且是不可移动的。 如果需要改变为我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!/pdiv stylebackground:#98bf21;height:100px;width:100px;position:absolute;/div
/body
animate() - 使用预定义的值
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(button).click(function(){$(div).animate({height:toggle});});});
/script
/head
bodybutton开始动画/buttonp默认情况下所有的 HTML 元素有一个静态的位置且是不可移动的。 如果需要改变为我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!/pdiv stylebackground:#98bf21;height:100px;width:100px;position:absolute;/div
/body
animate() - 使用队列功能
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(button).click(function(){var div$(div);div.animate({height:300px,opacity:0.4},slow);div.animate({width:300px,opacity:0.8},slow);div.animate({height:100px,opacity:0.4},slow);div.animate({width:100px,opacity:0.8},slow);});});
/script
/head
bodybutton开始动画/buttonp默认情况下所有的 HTML 元素有一个静态的位置且是不可移动的。 如果需要改变为我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!/pdiv stylebackground:#98bf21;height:100px;width:100px;position:absolute;/div
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(button).click(function(){var div$(div); div.animate({left:100px},slow);div.animate({fontSize:3em},slow);});});
/script
/head
bodybutton开始动画/buttonp默认情况下所有的 HTML 元素有一个静态的位置且是不可移动的。 如果需要改变为我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!/pdiv stylebackground:#98bf21;height:100px;width:200px;position:absolute;HELLO/div/body
jQuery 停止动画
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script $(document).ready(function(){$(#flip).click(function(){$(#panel).slideDown(5000);});$(#stop).click(function(){$(#panel).stop();});});
/script
style typetext/css #panel,#flip {padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel {padding:50px;display:none;}
/style
/head
bodybutton idstop停止滑动/buttondiv idflip点我向下滑动面板/divdiv idpanelHello world!/div
/body
jQuery - 链(Chaining)
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function() {$(button).click(function() {$(#p1).css(color,red).slideUp(2000).slideDown(2000);});});
/script
/head
bodyp idp1菜鸟教程!!/pbutton点我/button
/body
jQuery - 获取内容和属性
获得内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容包括 HTML 标签 val() - 设置或返回表单字段的值
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#btn1).click(function(){alert(Text: $(#test).text());});$(#btn2).click(function(){alert(HTML: $(#test).html());});});
/script
/head
bodyp idtest这是段落中的 b粗体/b 文本。/pbutton idbtn1显示文本/buttonbutton idbtn2显示 HTML/button
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){alert(值为: $(#test).val());});});
/script
/head
bodyp名称: input typetext idtest value菜鸟教程/pbutton显示值/button
/body
获取属性 - attr()
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){alert($(#runoob).attr(href));});});
/script
/head
bodypa hrefhttp://www.runoob.com idrunoob菜鸟教程/a/pbutton显示 href 属性的值/button
/body
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#btn1).click(function(){$(#test1).text(Hello world!);});$(#btn2).click(function(){$(#test2).html(bHello world!/b);});$(#btn3).click(function(){$(#test3).val(RUNOOB);});});
/script
/head
bodyp idtest1这是一个段落。/pp idtest2这是另外一个段落。/pp输入框: input typetext idtest3 value菜鸟教程/pbutton idbtn1设置文本/buttonbutton idbtn2设置 HTML/buttonbutton idbtn3设置值/button
/body
text()、html() 以及 val() 的回调函数
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#btn1).click(function(){$(#test1).text(function(i,origText){return 旧文本: origText 新文本: Hello world! (index: i ); });});$(#btn2).click(function(){$(#test2).html(function(i,origText){return 旧 html: origText 新 html: Hello bworld!/b (index: i ); });});});
/script
/head
bodyp idtest1这是一个有 b粗体/b 字的段落。/pp idtest2这是另外一个有 b粗体/b 字的段落。/pbutton idbtn1显示 新/旧 文本/buttonbutton idbtn2显示 新/旧 HTML/button
/body
设置属性 - attr()
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#runoob).attr(href,http://www.runoob.com/jquery);});});
/script
/head
bodypa hrefhttp://www.runoob.com idrunoob菜鸟教程/a/pbutton修改 href 值/buttonp点击按钮修改后可以点击链接查看链接地址是否变化。/p
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#runoob).attr({href : http://www.runoob.com/jquery,title : jQuery 教程});// 通过修改的 title 值来修改链接名称title $(#runoob).attr(title);$(#runoob).html(title);});});
/script
/head
bodypa hrefhttp://www.runoob.com idrunoob菜鸟教程/a/pbutton修改 href 和 title/buttonp点击按钮修改后可以查看 href 和 title 是否变化。/p
/body
attr() 的回调函数
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js/script
script$(document).ready(function(){$(button).click(function(){$(#runoob).attr(href, function(i, origValue){return origValue /jquery;});});});
/script
/head
bodypa hrefhttp://www.runoob.com idrunoob菜鸟教程/a/pbutton修改 href 值/buttonp点击按钮修改后可以点击链接查看 href 属性是否变化。/p
/body
jQuery - 添加元素
jQuery append() 方法
方法在被选元素的结尾插入内容仍然在该元素的内部
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#btn1).click(function(){$(p).append( b追加文本/b。);});$(#btn2).click(function(){$(ol).append(li追加列表项/li);});});
/script
/head
bodyp这是一个段落。/pp这是另外一个段落。/polliList item 1/liliList item 2/liliList item 3/li/olbutton idbtn1添加文本/buttonbutton idbtn2添加列表项/button
/body
jQuery prepend() 方法
方法在被选元素的开头插入内容
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#btn1).click(function(){$(p).prepend(b在开头追加文本/b。 );});$(#btn2).click(function(){$(ol).prepend(li在开头添加列表项/li);});});
/script
/head
bodyp这是一个段落。/pp这是另外一个段落。/polli列表 1/lili列表 2/lili列表 3/li/olbutton idbtn1添加文本/buttonbutton idbtn2添加列表项/button
/body
通过 append() 和 prepend() 方法添加若干新元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
scriptfunction appendText(){var txt1p文本-1。/p; // 使用 HTML 标签创建文本var txt2$(p/p).text(文本-2。); // 使用 jQuery 创建文本var txt3document.createElement(p);txt3.innerHTML文本-3。; // 使用 DOM 创建文本 text with DOM$(body).append(txt1,txt2,txt3); // 追加新元素}
/script
/head
bodyp这是一个段落。/pbutton οnclickappendText()追加文本/button
/body
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容
jQuery before() 方法在被选元素之前插入内容
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(#btn1).click(function(){$(img).before(b之前/b);});$(#btn2).click(function(){$(img).after(i之后/i);});});
/script
/head
bodyimg src/images/logo.png brbrbutton idbtn1之前插入/buttonbutton idbtn2之后插入/button
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
scriptfunction afterText(){var txt1bI /b; // 使用 HTML 创建元素var txt2$(i/i).text(love ); // 使用 jQuery 创建元素var txt3document.createElement(big); // 使用 DOM 创建元素txt3.innerHTMLjQuery!;$(img).after(txt1,txt2,txt3); // 在图片后添加文本}
/script
/head
bodyimg src/images/logo2.png brbrbutton οnclickafterText()之后插入/button
/body
jQuery - 删除元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).remove();});});
/script
/head
bodydiv iddiv1 styleheight:100px;width:300px;border:1px solid black;background-color:yellow;这是 div 中的一些文本。p这是在 div 中的一个段落。/pp这是在 div 中的另外一个段落。/p/divbrbutton移除div元素/button
/body
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).empty();});});
/script
/head
bodydiv iddiv1 styleheight:100px;width:300px;border:1px solid black;background-color:yellow;这是 div 中的一些文本。p这是在 div 中的一个段落。/pp这是在 div 中的另外一个段落。/p/divbrbutton清空div元素/button
/body
过滤被删除的元素
jQuery remove() 方法也可接受一个参数允许您对被删元素进行过滤
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(p).remove(.italic);});});
/script
/head
bodyp这是一个段落。/pp classitalici这是另外一个段落。/i/pp classitalici这是另外一个段落。/i/pbutton移除所有 classitalic 的 p 元素。/button
/body
jQuery - 获取并设置 CSS 类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性
jQuery addClass() 方法
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(h1,h2,p).addClass(blue);$(div).addClass(important blue);});});
/script
style typetext/css.important {font-weight:bold;font-size:xx-large;}.blue {color:blue;}
/style
/head
bodyh1标题 1/h1h2标题 2/h2p这是一个段落。/pp这是另外一个段落。/pdiv这是一些重要的文本!/div brbutton为元素添加 class/button
/body
jQuery removeClass() 方法
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(h1,h2,p).removeClass(blue);});});
/script
style typetext/css.important {font-weight:bold;font-size:xx-large;}.blue {color:blue;}
/style
/head
bodyh1 classblue标题 1/h1h2 classblue标题 2/h2p classblue这是一个段落。/pp classimportant这是另外一个段落。/pbrbutton从元素中移除 class/button
/body
jQuery toggleClass() 方法
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(h1,h2,p).toggleClass(blue);});});
/script
style typetext/css.blue {color:blue;}
/style
/head
bodyh1 classblue标题 1/h1h2 classblue标题 2/h2p classblue这是一个段落。/pp这是另外一个段落。/pbrbutton切换 class/button
/body
jQuery css() 方法
返回 CSS 属性
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){alert(背景颜色 $(p).css(background-color));});});
/script
/head
bodyh2这是一个标题/h2p stylebackground-color:#ff0000这是一个段落。/pp stylebackground-color:#00ff00这是一个段落。/pp stylebackground-color:#0000ff这是一个段落。/pbutton返回第一个 p 元素的 background-color /button
/body
设置 CSS 属性
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(p).css(background-color,yellow);});});
/script
/head
bodyh2这是一个标题/h2p stylebackground-color:#ff0000这是一个段落。/pp stylebackground-color:#00ff00这是一个段落。/pp stylebackground-color:#0000ff这是一个段落。/pp这是一个段落。/pbutton设置 p 元素的 background-color /button
/body
设置多个 CSS 属性
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(p).css({background-color:yellow,font-size:200%});});});
/script
/head
bodyh2这是一个标题/h2p stylebackground-color:#ff0000这是一个段落。/pp stylebackground-color:#00ff00这是一个段落。/pp stylebackground-color:#0000ff这是一个段落。/pp这是一个段落。/pbutton为 p 元素设置多个样式/button
/body
jQuery 尺寸
width() height() innerWidth() innerHeight()
width() 方法设置或返回元素的宽度不包括内边距、边框或外边距
height() 方法设置或返回元素的高度不包括内边距、边框或外边距
innerWidth() 方法返回元素的宽度包括内边距
innerHeight() 方法返回元素的高度包括内边距
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){var txt;txtdiv 宽度: $(#div1).width() /br;txtdiv 高度: $(#div1).height() /br;txtdiv 宽度包含内边距: $(#div1).innerWidth() /br;txtdiv 高度包含内边距: $(#div1).innerHeight();$(#div1).html(txt);});});
/script
/head
bodydiv iddiv1 styleheight:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;/divbrbutton显示 div 元素的尺寸/buttonpinnerWidth() - 返回元素的宽度 (包含内边距)。/ppinnerHeight() - 返回元素的高度 (包含内边距)。/p
/body
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度包括内边距和边框
outerHeight() 方法返回元素的高度包括内边距和边框
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){var txt;txtdiv 宽度: $(#div1).width() /br;txtdiv 高度: $(#div1).height() /br;txtdiv 宽度包含内边距和边框: $(#div1).outerWidth() /br;txtdiv 高度包含内边距和边框: $(#div1).outerHeight();$(#div1).html(txt);});});
/script
/head
bodydiv iddiv1 styleheight:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;/divbrbutton显示 div 元素的尺寸/buttonpouterWidth() - 返回元素的宽度 (包含内边距和边框)。/ppouterHeight() - 返回元素的高度 (包含内边距和边框)。/p
/body
jQuery 遍历 - 祖先
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素
style.ancestors *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(span).parent().css({color:red,border:2px solid red});});
/script
/head
bodydiv classancestorsdiv stylewidth:500px;div (曾祖父元素)ulul (祖父元素) lili (父元素)spanspan/span/li/ul /divdiv stylewidth:500px;div (祖父元素) pp (父元素)spanspan/span/p /div/div
/body
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素它一路向上直到文档的根元素 (html)
style.ancestors * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(span).parents().css({color:red,border:2px solid red});});
/script
/head
body classancestorsbody (曾曾祖父元素)div stylewidth:500px;div (曾祖父元素)ulul (祖父元素) lili (父元素)spanspan/span/li/ul /div
/body
$(document).ready(function(){$(span).parents(ul);
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
style.ancestors * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(span).parentsUntil(div).css({color:red,border:2px solid red});});
/script
/head
body classancestors body (曾曾祖父元素)div stylewidth:500px;div (曾祖父元素)ulul (祖父元素) lili (父元素)spanspan/span/li/ul /div
/body
jQuery 遍历 - 后代
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素
style.descendants * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(div).children(p.1).css({color:red,border:2px solid red});// $(div).children().css({color:red,border:2px solid red});});
/script
/head
bodydiv classdescendants stylewidth:500px;div (当前元素) p class1p (儿子元素)spanspan (孙子元素)/span /pp class2p (儿子元素)spanspan (孙子元素)/span/p /div
/body
jQuery find() 方法
find() 方法返回被选元素的后代元素一路向下直到最后一个后代
!-- 返回属于 div 后代的所有 span 元素 --
style.descendants * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(div).find(span).css({color:red,border:2px solid red});// 返回 div 的所有后代// $(div).find(*).css({color:red,border:2px solid red});});
/script
/head
bodydiv classdescendants stylewidth:500px;div (当前元素) pp (儿子元素)spanspan (孙子元素)/span /ppp (儿子元素)spanspan (孙子元素)/span/p /div
/body
jQuery 遍历 - 同胞(siblings)
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素
style.siblings * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(h2).siblings().css({color:red,border:2px solid red});// $(h2).siblings(p); // 返回属于 h2 的同胞元素的所有 p 元素});
/script
/head
body classsiblingsdivdiv (父元素)pp/pspanspan/spanh2h2/h2h3h3/h3pp/p/div
/body
jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素
script$(document).ready(function(){$(h2).next();});
/script
jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素
style.siblings * { display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}
/style
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(h2).nextAll().css({color:red,border:2px solid red});});
/script
/head
body classsiblingsdivdiv (父元素)pp/pspanspan/spanh2h2/h2h3h3/h3pp/p/div
/body
jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
script$(document).ready(function(){$(h2).nextUntil(h6);});
/script
jQuery prev(), prevAll() prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似只不过方向相反而已它们返回的是前面的同胞元素在 DOM 树中沿着同胞之前元素遍历而不是之后元素遍历
jQuery 遍历- 过滤
jQuery first() 方法
first() 方法返回被选元素的首个元素
script$(document).ready(function(){$(div p).first();});
/script
jQuery last() 方法
last() 方法返回被选元素的最后一个元素
script$(document).ready(function(){$(div p).last();});
/script
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(p).eq(1).css(background-color,yellow);});
/script
/head
bodyh1欢迎访问我的主页/h1p菜鸟教程 (index 0)./pphttp://www.runoob.com (index 1)。/ppgoogle (index 2)./pphttp://www.google.com (index 3)。/p
/body
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除匹配的元素会被返回
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(p).filter(.url).css(background-color,yellow);});
/script
/head
bodyh1欢迎访问我的主页/h1p菜鸟教程 (index 0)./pp classurlhttp://www.runoob.com (index 1)。/ppgoogle (index 2)./pp classurlhttp://www.google.com (index 3)。/p
/body
jQuery not() 方法
not() 方法返回不匹配标准的所有元素not() 方法与 filter() 相反
script$(document).ready(function(){$(p).not(.url);});
/script
jQuery - AJAX load() 方法
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).load(/try/ajax/demo_test.txt);});});
/script
/head
bodydiv iddiv1h2使用 jQuery AJAX 修改文本内容/h2/divbutton获取外部内容/button
/body
load() 方法从服务器加载数据并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
可选的 callback 参数是 load() 方法完成后所执行的函数名称
这是示例文件demo_test.txt的内容
h2jQuery AJAX 是个非常棒的功能/h2
p idp1这是段落的一些文本/p
$(#div1).load(demo_test.txt);
$(#div1).load(demo_test.txt #p1);
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数 responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$(#div1).load(/try/ajax/demo_test.txt,function(responseTxt,statusTxt,xhr){if(statusTxtsuccess)alert(外部内容加载成功!);if(statusTxterror)alert(Error: xhr.status: xhr.statusText);});});});
/script
/head
bodydiv iddiv1h2使用 jQuery AJAX 修改该文本/h2/divbutton获取外部内容/button
/body
jQuery - AJAX get() 和 post() 方法
jQuery $.get() 方法
script$.get(URL,callback);// 或$.get( URL [, data ] [, callback ] [, dataType ] )
/script URL发送请求的 URL字符串 data可选的发送给服务器的字符串或 key/value 键值对 callback可选的请求成功后执行的回调函数 dataType可选的从服务器返回的数据类型。默认智能猜测可以是xml, json, script, 或 html
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$.get(/try/ajax/demo_test.php,function(data,status){alert(数据: data \n状态: status);});});});
/script
/head
bodybutton发送一个 HTTP GET 请求并获取返回结果/button
/body
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
script$.post(URL,callback);// 或$.post( URL [, data ] [, callback ] [, dataType ] )
/script
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$(document).ready(function(){$(button).click(function(){$.post(/try/ajax/demo_test_post.php,{name:菜鸟教程,url:http://www.runoob.com},function(data,status){alert(数据: \n data \n状态: status);});});});
/script
/head
bodybutton发送一个 HTTP POST 请求页面并获取返回内容/button
/body
?php$name isset($_POST[name]) ? htmlspecialchars($_POST[name]) : ;
$url isset($_POST[url]) ? htmlspecialchars($_POST[url]) : ;
echo 网站名: . $name;
echo \n;
echo URL 地址: .$url;
?# demo_test_post.php
jQuery - noConflict() 方法
jQuery 使用 $ 符号作为 jQuery 的简写
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$.noConflict();jQuery(document).ready(function(){jQuery(button).click(function(){jQuery(p).text(jQuery 仍然在工作!);});});
/script
/head
bodyp这是一个段落/pbutton点我/button
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
scriptvar jq$.noConflict();jq(document).ready(function(){jq(button).click(function(){jq(p).text(jQuery 仍然在工作!);});});
/script
/head
bodyp这是一个段落。/pbutton点我/button
/body
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js
/script
script$.noConflict();jQuery(document).ready(function($){$(button).click(function(){$(p).text(jQuery 仍然在工作!);});});
/script
/head
bodyp这是一个段落。/pbutton点我/button
/body
JSONP 教程
Jsonp(JSON with Padding) 是 json 的一种使用模式可以让网页从别的域名网站那获取资料即跨域读取数据
JSONP 应用
1. 服务端 JSONP 格式数据
如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallbackcallbackFunction。
假设客户期望返回数据[customername1,customername2]
真正返回到客户端的数据显示为: callbackFunction([customername1,customername2])
服务端文件 jsonp.php 代码为
?phpheader(Content-type: application/json);
//获取回调函数名
$jsoncallback htmlspecialchars($_REQUEST [jsoncallback]);
//json数据
$json_data [customername1,customername2];
//输出jsonp格式的数据
echo $jsoncallback . ( . $json_data . );
?# jsonp.php
2. 客户端实现 callbackFunction 函数
script typetext/javascriptfunction callbackFunction(result, methodName) {var html ul;for(var i 0; i result.length; i) {html li result[i] /li;}html /ul;document.getElementById(divCustomers).innerHTML html;}
/script
页面展示
div iddivCustomers/div
客户端页面完整代码
!DOCTYPE html
htmlheadmeta charsetutf-8titleJSONP 实例/title/headbodydiv iddivCustomers/divscript typetext/javascriptfunction callbackFunction(result, methodName) {var html ul;for(var i 0; i result.length; i) {html li result[i] /li;}html /ul;document.getElementById(divCustomers).innerHTML html;}/scriptscript typetext/javascript srchttps://www.runoob.com/try/ajax/jsonp.php?jsoncallbackcallbackFunction/script/body
/html
jQuery 使用 JSONP
以上代码可以使用 jQuery 代码实例
!DOCTYPE html
htmlheadmeta charsetutf-8titleJSONP 实例/titlescript srchttps://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js/script /headbodydiv iddivCustomers/divscript$.getJSON(https://www.runoob.com/try/ajax/jsonp.php?jsoncallback?, function(data) {var html ul;for(var i 0; i data.length; i) {html li data[i] /li;}html /ul;$(#divCustomers).html(html); });/script/body
/html
jQuery 插件
jQuery Validate | 菜鸟教程 (runoob.com)
jQuery 实例
jQuery 选择器
$(this).hide()
演示 jQuery 的 hide() 函数隐藏当前的 HTML 元素。
$(p).hide()
演示 jQuery 的 hide() 函数隐藏所有 p 元素。
$(.test).hide()
演示 jQuery 的 hide() 函数隐藏所有 classtest 的元素。
$(#test).hide()
演示 jQuery 的 hide() 函数隐藏 idtest 的元素。 jQuery 事件
jQuery click() 演示 jQuery jQuery click() 事件.
jQuery dblclick() 演示 jQuery dblclick() 事件。
jQuery mouseenter() 演示 jQuery mouseenter() 事件。
jQuery mouseleave() 演示 jQuery mouseleave() 事件。
jQuery mousedown() 演示 jQuery mousedown() 事件。
jQuery mouseup() 演示 jQuery mouseup() 事件。
jQuery hover() 演示 jQuery hover() 事件。
jQuery focus() 和 blur() 演示 jQuery focus() 和 blur() 事件。
实例解析 jQuery 隐藏/显示
jQuery hide() 演示 jQuery hide() 方法。
jQuery hide() 和 show() 演示jQuery hide() 和 show() 方法。
jQuery toggle() jQuery toggle() 用于切换 hide() 和 show() 方法。
jQuery hide() 另外一个隐藏文本的实例。
实例解析 jQuery 淡入淡出
jQuery fadeIn() 演示 jQuery fadeIn() 方法。
jQuery fadeOut() 演示 jQuery fadeOut() 方法。
jQuery fadeToggle() 演示 jQuery fadeToggle() 方法。
jQuery fadeTo() 演示 jQuery fadeTo() 方法。
实例解析 jQuery 滑动
jQuery slideDown() 演示 jQuery slideDown() 方法。
jQuery slideUp() 演示 jQuery slideUp() 方法。
jQuery slideToggle() 演示 jQuery slideToggle() 方法。
实例解析 jQuery 动画
jQuery animate() 演示简单的 jQuery animate() 方法。
jQuery animate() - 设置多个css属性 演示通过 jQuery animate() 方法 改变样式。
jQuery animate() - 使用相关值 演示如何在 jQuery animate() 方法中使用相关值。
jQuery animate() - 使用预定义值 演示通过 animate() 方法预定义 hide, show, toggle 值。
jQuery animate() 演示更多 jQuery animate() 方法实例
jQuery animate() 演示更多 jQuery animate() 方法实例 (多个 animate() 回调).
实例 解析 jQuery 停止动画
jQuery stop() 滑动 演示 jQuery stop() 方法。
jQuery stop() 动画 (带参数) 演示 jQuery stop() 方法。
实例解析 jQuery HTML 获取 和 属性
jQuery text() 和 html() - 获取文本和内容 使用jQuery text() 和 html() 方法获取内容。
jQuery val() - 获取值 使用jQuery val() 方法获取表单的字段值。
jQuery attr() - 获取属性值 使用jQuery attr() 方法获取属性值。
实例解析 jQuery HTML 设置内容和属性
jQuery text(), html(), 和 val() - 设置内容 使用 jQuery text(), html() 和 val() 方法设置内容 。
jQuery text() 和 html() - 设置内容并使用回调函数 使用 text() 和 html() 设置内容并使用回调函数
jQuery attr() - 设置属性值 使用 jQuery attr() 方法设置属性值 。
jQuery attr() - 设置 多个属性值 使用jQuery attr() 方法设置多个属性值。
jQuery attr() - 设置属性值并使用回调函数 设置属性值 并使用回调函数调用attr().
实例解析 jQuery HTML 添加元素/内容
jQuery append() 在选取元素的末尾添加内容
jQuery prepend() 在选取元素的开头添加内容
jQuery append() -插入多个元素 创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。
jQuery after() 和 before() 在选取元素的前后添加 HTML 元素。
jQuery after() - 插入多个元素 创新新的 text/HTML 元素,jQuery和 JavaScript/DOM。在选取元素的末尾插入新元素。
实例解析 jQuery HTML 移除元素/内容
jQuery remove() 移除选取的元素
jQuery empty() 移除选取元素的所有子元素
jQuery remove() - 使用参数 过滤元素并移除
实例解析 jQuery Get 和 设置 CSS 类
jQuery addClass() 不同元素添加 class 属性
jQuery addClass() - 多个类 使用 addClass() 方法添加多个类
jQuery removeClass() 移除指定元素的类
jQuery toggleClass() 在选取的元素切换添加/删除类
实例解析 jQuery css() 方法
jQuery css() - 返回 CSS 属性 返回第一个匹配元素的css属性值
jQuery css() - 设置 CSS 属性 设置 所有配置元素指定的 CSS 属性
jQuery css() - 设置 CSS 属性 设置多个匹配元素的 CSS 属性
实例解析 jQuery 尺寸
jQuery - 返回 width() 和 height() 返回指定元素的 width 和 height
jQuery - 返回 innerWidth() 和 innerHeight() 返回指定元素的 inner-width/height
jQuery - 返回 outerWidth() 和 outerHeight() 返回指定元素的 outer-width/height
jQuery - 返回 outerWidth(true) 和 outerHeight(true) 返回指定元素的 outer-width/height (包含外边框)
jQuery - 返回 width() 和 height() of document 和 window 返回 HTML 文档和窗口的 width 和 height
jQuery - 设置 width() 和 height() 设置指定元素的 width 和 height
实例解析 jQuery 遍历 - 祖先
jQuery parent() 演示 jQuery parent() 方法。
jQuery parents() 演示 jQuery parents() 方法。
jQuery parentsUntil() 演示 jQuery parentsUntil() 方法。
实例解析 jQuery 遍历 - 后代
jQuery children() 演示 jQuery children() 方法。
jQuery find() 演示 jQuery find() 方法。
实例解析 jQuery 遍历 - 同胞(siblings)
jQuery siblings() 演示 jQuery siblings() 方法。
jQuery next() 演示 jQuery next() 方法。
jQuery nextAll() 演示 jQuery nextAll() 方法。
jQuery nextUntil() 演示 jQuery nextUntil() 方法。
实例解析 jQuery AJAX load() 方法
jQuery load() 异步载入文件内容并插入到 div 元素中。
jQuery load() 异步载入文件内容中指定的元素内容并插入到 div 元素.
jQuery load() - 使用回调函数(callback) 使用 jQuery load() 方法的回调函数。
实例解析 jQuery AJAX get() 和 post() 方法
jQuery get() 使用 $.get() 方法从服务端异步获取数据
jQuery post() 使用 $.post() 方法从服务端异步获取数据
实例解析 其他实例
jQuery 动态粒子效果
Elasticsearch搜索引擎
es安装
# 拉取镜像
docker pull elasticsearch:7.12.0
# 创建docker容器挂载在的目录
# linux的命令
mkdir -p /opt/es/config mkdir -p /opt/es/data mkdir -p /opt/es/plugins
chmod 777 /opt/es/data
# 配置文件
echo http.host: 0.0.0.0 /opt/es/config/elasticsearch.yml
# 创建容器
# linux
docker run --name es -p 9200:9200 -p 9300:9300 -e discovery.typesingle-node -e ES_JAVA_OPTS-Xms84m -Xmx512m -v /opt/es/config/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml -v /opt/es/data:/usr/share/elasticsearch/data -v /opt/es/plugins:/usr/share/elasticsearch/plugins -d elasticsearch:7.12.0
# windows
docker run --name es -p 9200:9200 -p 9300:9300 -e discovery.typesingle-node -e ES_JAVA_OPTS-Xms84m -Xmx512m -v H:\\docker\\es\\config\\elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml -v H:\\docker\\es\\data:/usr/share/elasticsearch/data -v H:\\docker\\es\\plugins:/usr/share/elasticsearch/plugins -d elasticsearch:7.12.0
# windows添加目录映射需要在dockerDesktop里面设置映射目录
访问ip:9200能看到东西就说明安装成功了
浏览器可以下载一个 Multi Elasticsearch Head es插件
或者这个ElasticHD
连接es
package core
import (es_study/globalfmtgithub.com/olivere/elastic/v7
)
func EsConnect() {client, err : elastic.NewClient(elastic.SetURL(http://127.0.0.1:9200),elastic.SetSniff(false),elastic.SetBasicAuth(, ),)if err ! nil {fmt.Println(err)return}global.ESClient client
}
es认证
不需要认证的情况 服务器自己使用92009300端口不对外开放 本身跑在127.0.0.1上
需要认证的情况 es需要对外提供服务的
给docker创建的elasticsearch容器添加密码_docker elasticsearch 设置密码-CSDN博客 这样就说明成功了
输入用户名和密码就能看到之前的那个页面
或者使用curl进行测试
curl http://127.0.0.1:9200/
curl -u elastic:xxxxxx http://127.0.0.1:9200/
索引操作
mapping
// 查看某个索引的map
/index/_mapping
常见的类型
{mappings: {properties: {title: { type: text // 查询的时候是分词匹配},key: { type: keyword // 完整匹配},user_id: {type: integer},created_at:{type: date,null_value: null,format: [yyyy-MM-dd HH:mm:ss]}}}
}
创建索引
func CreateIndex() {createIndex, err : global.ESClient.CreateIndex(user_index).BodyString(models.UserModel{}.Mapping()).Do(context.Background())if err ! nil {fmt.Println(err)return}fmt.Println(createIndex)fmt.Println(索引创建成功)
} 注意索引存在执行创建索引是会报错的 判断索引是否存在
// ExistsIndex 判断索引是否存在
func ExistsIndex(index string) bool {exists, _ : global.ESClient.IndexExists(index).Do(context.Background())return exists
}
删除索引
func DeleteIndex(index string) {_, err : global.ESClient.DeleteIndex(index).Do(context.Background())if err ! nil {fmt.Println(err)return}fmt.Println(index, 索引删除成功)
}
文档操作
添加文档
添加单个文档
func DocCreate() {user : models.UserModel{ID: 12,UserName: lisi,Age: 23,NickName: 夜空中最亮的lisi,CreatedAt: time.Now().Format(2006-01-02 15:04:05),Title: 今天天气很不错,}indexResponse, err : global.ESClient.Index().Index(user.Index()).BodyJson(user).Do(context.Background())if err ! nil {fmt.Println(err)return}fmt.Printf(%#v\n, indexResponse)
}
添加文档
如果是mapping里面没有的字段那么es会自动创建这个字段对应的mapping
批量添加
func DocCreateBatch() {list : []models.UserModel{{ID: 12,UserName: fengfeng,NickName: 夜空中最亮的枫枫,CreatedAt: time.Now().Format(2006-01-02 15:04:05),},{ID: 13,UserName: lisa,NickName: 夜空中最亮的丽萨,CreatedAt: time.Now().Format(2006-01-02 15:04:05),},}bulk : global.ESClient.Bulk().Index(models.UserModel{}.Index()).Refresh(true)for _, model : range list {req : elastic.NewBulkCreateRequest().Doc(model)bulk.Add(req)}res, err : bulk.Do(context.Background())if err ! nil {fmt.Println(err)return}fmt.Println(res.Succeeded())
}
删除文档
根据id删除
func DocDelete() {deleteResponse, err : global.ESClient.Delete().Index(models.UserModel{}.Index()).Id(tmcqfYkBWS69Op6Q4Z0t).Refresh(true).Do(context.Background())if err ! nil {fmt.Println(err)return}fmt.Println(deleteResponse)
}
如果文档不存在会报404的错误
根据id批量删除
func DocDeleteBatch() {idList : []string{tGcofYkBWS69Op6QHJ2g,tWcpfYkBWS69Op6Q050w,}bulk : global.ESClient.Bulk().Index(models.UserModel{}.Index()).Refresh(true)for _, s : range idList {req : elastic.NewBulkDeleteRequest().Id(s)bulk.Add(req)}res, err : bulk.Do(context.Background())if err ! nil {fmt.Println(err)return}fmt.Println(res.Succeeded()) // 实际删除的文档切片
}
如果文档不存在不会有错误 res.Succeeded() 为空
文档查询
列表查询
func DocFind() {limit : 2page : 4from : (page - 1) * limitquery : elastic.NewBoolQuery()res, err : global.ESClient.Search(models.UserModel{}.Index()).Query(query).From(from).Size(limit).Do(context.Background())if err ! nil {fmt.Println(err)return}count : res.Hits.TotalHits.Value // 总数fmt.Println(count)for _, hit : range res.Hits.Hits {fmt.Println(string(hit.Source))}
}
精确匹配
针对keyword字段
query : elastic.NewTermQuery(user_name, fengfeng)
模糊匹配
主要是查text也能查keyword
模糊匹配keyword字段是需要查完整的
匹配text字段则不用搜完整的也会搜出很多
query : elastic.NewMatchQuery(nick_name, 夜空中最亮的枫枫)
嵌套字段的搜索 ElementPlus UI
ElementUI 安装及配置
一个 Vue 3 UI 框架 | Element Plus
安装
npm install element-plus --save
按钮
代码
// demo\src\main.js
import { createApp } from vue
//整体导入 ElementPlus 组件库
import ElementPlus from element-plus //导入 ElementPlus 组件库的所有模块和功能
import element-plus/dist/index.css //导入 ElementPlus 组件库所需的全局 CSS 样式
import App from ./App.vue
const app createApp(App)
app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中
app.mount(#app)
!--demo\src\App.vue--
script setup
/script
templateh3按钮/h3el-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
hrh3按钮属性/h3el-button plain朴素按钮/el-buttonel-button round圆角按钮/el-buttonel-button circle圆/el-buttonel-button disabled禁用按钮/el-buttonel-button loading加载中/el-button
hrh3尺寸/h3el-button sizelarge大型按钮/el-buttonel-button默认按钮/el-buttonel-button sizesmall小型按钮/el-button
/templates
style scoped
/style
图标
ElementPlus 图标
Icon 图标 | Element Plus
demo\src\main.jsimport { createApp } from vue
//整体导入 ElementPlus 组件库import ElementPlus from element-plus //导入 ElementPlus 组件库的所有模块和功能 import element-plus/dist/index.css //导入 ElementPlus 组件库所需的全局 CSS 样式import * as ElementPlusIconsVue from element-plus/icons-vue //导入 ElementPlus 组件库中的所有图标
import App from ./App.vue
const app createApp(App)
//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中app.mount(#app)
demo\src\App.vue
script setup
/script
template
h3图标/h3
el-iconPlus //el-icon
el-iconEdit //el-icon
el-iconDelete //el-icon
el-icon classis-loadingLoading //el-icon
hr
h3属性/h3
el-icon size30 colorredSearch //el-icon
hr
h3按钮/h3
el-button typeprimaryel-iconSearch //el-iconspan 搜索 /span/el-button
el-button typeprimaryel-iconSearch //el-icon/el-button
el-button typeprimary circleel-iconSearch //el-icon/el-button
hr
h3按钮组/h3
el-button-groupel-button typeprimaryel-iconPlus //el-icon/el-button
el-button typeprimaryel-iconEdit //el-icon/el-button
el-button typeprimaryel-iconDelete //el-icon/el-button/el-button-group
/template
style scoped
/style
提示框
demo\src\App.vue
script setupimport { ElMessage, ElMessageBox, ElNotification } from element-plus
// 消息const openMsg () {ElMessage({type: success, // success | warning | info | errormessage: dengruicode.com,showClose: true})}
// 确认框const openConfirm () {ElMessageBox.confirm(确认删除?, 标题, {type: warning,confirmButtonText: 确认,cancelButtonText: 取消}).then(() {console.log(确认)}).catch(() {console.log(取消)})}
// 通知const openNotifiy () {ElNotification({title: 标题,message: 邓瑞编程,duration: 1500 // 展示时间 [单位:毫秒]})}
// 通知2const openNotifiy2 () {ElNotification({type: success, // success | warning | info | errortitle: 标题,message: dengruicode.com,duration: 1500,position: bottom-right})}
/script
template
el-button clickopenMsg消息/el-button
el-button clickopenConfirm确认框/el-button
el-button clickopenNotifiy通知/el-button
el-button clickopenNotifiy2通知2/el-button
/template
style scoped
/style
导航
demo\src\App.vue
script setupimport { reactive, ref } from vue
//默认选中的菜单索引//const selectedIndex ref(2-2)const selectedIndex ref(3)
//选中菜单触发的回调const selected (index, indexPath) {console.log(index, index, indexPath, indexPath)}
//默认展开的菜单索引const defaultOpeneds ref([1,3])
//用户执行的命令const userCommand (command) { //点击菜单触发的回调console.log(command:, command)}
/script
template
h3水平导航/h3
el-menu modehorizontal :default-activeselectedIndex selectselectedel-menu-item index1邓瑞编程/el-menu-itemel-sub-menu index2template #title我的工作台/template
el-menu-item index2-1选项1/el-menu-item
el-menu-item index2-2选项2/el-menu-item
el-menu-item index2-3选项3/el-menu-item
/el-sub-menu
el-menu-item index3消息中心/el-menu-item
el-menu-item index4订单管理/el-menu-item
/el-menu
h3水平导航-自定义样式/h3
el-menu modehorizontal :default-activeselectedIndex selectselected background-color#545c64text-color#fff active-text-color#ffd04b styleheight: 40px; width: 600px;el-menu-item index1邓瑞编程/el-menu-itemel-sub-menu index2template #title我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-itemel-menu-item index2-3选项3/el-menu-item/el-sub-menuel-menu-item index3消息中心/el-menu-itemel-menu-item index4订单管理/el-menu-item
/el-menu
h3垂直导航/h3br
el-menu :default-activeselectedIndex selectselected stylewidth: 200px;el-sub-menu index1template #title
el-iconSearch //el-icon
span导航一/span/templateel-menu-item-groupel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-group/el-sub-menuel-menu-item index2el-iconEdit //el-icontemplate #title导航二/template/el-menu-itemel-menu-item index3el-iconDelete //el-icontemplate #title导航三/template/el-menu-itemel-menu-item index4el-iconSetting //el-icontemplate #title导航四/template/el-menu-item
/el-menu
h3垂直导航-默认展开和自定义样式/h3
el-menu :default-activeselectedIndex selectselected :default-openedsdefaultOpenedsbackground-color#545c64 text-color#fff active-text-color#ffd04b stylewidth: 200px;el-sub-menu index1template #title
el-iconSearch //el-icon
span导航一/span/templateel-menu-item-groupel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-group/el-sub-menuel-menu-item index2el-iconEdit //el-icontemplate #title导航二/template/el-menu-itemel-sub-menu index3template #title
el-iconSearch //el-icon
span导航三/span/templateel-menu-item-groupel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-group/el-sub-menuel-menu-item index4el-iconSetting //el-icontemplate #title导航四/template/el-menu-item
/el-menu
h3面包屑/h3
el-breadcrumb separator/el-breadcrumb-itema href#首页/a/el-breadcrumb-itemel-breadcrumb-item邓瑞编程/el-breadcrumb-itemel-breadcrumb-itemdengruicode.com/el-breadcrumb-item
/el-breadcrumb
h3下拉菜单/h3br
el-dropdown commanduserCommandspan个人中心el-iconUser //el-icon/spantemplate #dropdown
el-dropdown-menuel-dropdown-item commandorder订单/el-dropdown-itemel-dropdown-item commandlogout退出/el-dropdown-item/el-dropdown-menu/template
/el-dropdown
/template
style scoped
/style
标签页
demo\src\App.vue
script setup
import { ref, reactive } from vue
//默认选中的标签名称const selectedName ref(2)
//选中标签触发的回调const tabClick (tab, event) {console.log(tab, tab.props, event, event)}
const tab reactive({arr: [{ name: 1, title: 邓瑞, content: 内容1 },{ name: 2, title: 邓瑞编程, content: 内容2 },{ name: 3, title: dengruicode.com, content: 内容3 },]})
//添加const tabAdd () {let index tab.arr.lengthindex
tab.arr.push({name: index,title: 新选项卡 index,content: 内容 index})}
//移除const tabRemove (name) {console.log(name:, name)
const index tab.arr.findIndex((value) {return value.name name})
tab.arr.splice(index, 1) //移除元素}
/script
template
h3标签页/h3
el-tabs v-modelselectedName tab-clicktabClickel-tab-pane label邓瑞 name1内容1/el-tab-paneel-tab-pane label邓瑞编程 name2内容2/el-tab-paneel-tab-pane labeldengruicode.com name3内容3/el-tab-pane/el-tabs
h3卡片风格/h3
el-tabs v-modelselectedName tab-clicktabClick typecardel-tab-pane label邓瑞 namea内容1/el-tab-paneel-tab-pane label邓瑞编程 nameb内容2/el-tab-paneel-tab-pane labeldengruicode.com nameb内容3/el-tab-pane/el-tabs
h3带有边框的卡片风格/h3
el-tabs v-modelselectedName tab-clicktabClick typeborder-cardel-tab-pane label邓瑞 nameA内容1/el-tab-paneel-tab-pane label邓瑞编程 nameB内容2/el-tab-paneel-tab-pane labeldengruicode.com nameC内容3/el-tab-pane/el-tabs
h3动态添加/h3
el-button clicktabAdd添加/el-button
el-tabs v-modelselectedName tab-removetabRemove closable typecardel-tab-pane v-for(value, key) in tab.arr :keyvalue.name :labelvalue.title :namevalue.name{{ value.content }}/el-tab-pane/el-tabs
/template
style scoped
/style
输入框
demo\src\App.vue
script setupimport { ref } from vueconst name ref()const password ref()const content ref(邓瑞编程)const url ref(dengruicode.com)const url2 ref(dengruicode)const email ref(123456)//const selected ref()const selected ref(2) //选中的下拉框
/scripttemplate
div stylewidth: 300px;!-- clearable 可一键清空 --h3输入框/h3el-input v-modelname clearable placeholder请输入用户名 /!-- show-password 可切换显示隐藏密码 --h3密码框/h3el-input v-modelpassword show-password placeholder请输入密码 /h3文本域/h3el-input typetextarea v-modelcontent rows2 /h3输入内容长度限制 - 输入框/h3el-input v-modelname maxlength10 show-word-limit /h3输入内容长度限制 - 文本域/h3el-input typetextarea v-modelcontent maxlength20 rows3 show-word-limit /h3尺寸/h3大 el-input sizelarge /默认 el-input /小 el-input sizesmall /h3前置/h3el-input v-modelurltemplate #prependhttps:///template
/el-inputh3后置/h3
el-input v-modelemailtemplate #appendqq.com/template
/el-inputh3前置后置/h3
el-input v-modelurl2template #prependhttps:///templatetemplate #append.com/template
/el-inputh3前置后置扩展 - 搜索/h3
el-input placeholder请输入课程名称template #prepend
el-select v-modelselected placeholder请选择 stylewidth: 100px;el-option label前端 value1 /el-option label后端 value2 /el-option label服务端 value3 //el-select/templatetemplate #append
el-buttonel-iconSearch //el-icon/el-button/template
/el-input
/div
/templatestyle scoped/style
单选框、复选框
demo\src\App.vue
script setupimport { ref } from vue//单选框const radio ref(3)const radio2 ref(b)const radio3 ref(C)const radioChange (val) {console.log(radioChange:, val)}const radioGroupChange (val) {console.log(radioGroupChange:, val)}//复选框const checked ref([1, 2])const checked2 ref([])const checkboxGroupChange (val) {console.log(checkboxGroupChange, val)}
/scripttemplate
h3单选框/h3
el-radio v-modelradio value1前端/el-radio
el-radio v-modelradio value2后端/el-radio
el-radio v-modelradio value3服务端/el-radioh3单选框 - 事件绑定/h3
el-radio v-modelradio2 valuea changeradioChange前端/el-radio
el-radio v-modelradio2 valueb changeradioChange后端/el-radio
el-radio v-modelradio2 valuec changeradioChange服务端/el-radioh3单选框组/h3
el-radio-group v-modelradio3 changeradioGroupChangeel-radio valueA前端/el-radioel-radio valueB后端/el-radioel-radio valueC服务端/el-radio/el-radio-grouph3复选框/h3
el-checkbox-group v-modelcheckedel-checkbox value1前端/el-checkboxel-checkbox value2后端/el-checkboxel-checkbox value3服务端/el-checkbox/el-checkbox-grouph3事件绑定/h3
el-checkbox-group v-modelchecked2 changecheckboxGroupChangeel-checkbox value1前端/el-checkboxel-checkbox value2后端/el-checkboxel-checkbox value3服务端/el-checkbox/el-checkbox-group
/templatestyle scoped/style
下拉框
demo\src\App.vue
script setupimport { ref,reactive } from vueconst selected ref(2)const selected2 ref()const selected3 ref(C)const selected4 ref([1,3])const data reactive({options: [{ value: A, label: 前端, },{ value: B, label: 后端, },{ value: C, label: 服务端, }]})//回调const selectChange (val) {console.log(selectChange:, val)}
/scripttemplate
div stylewidth: 300px;h3下拉框/h3el-select v-modelselected placeholder请选择el-option value1 label前端 /el-option value2 label后端 /el-option value3 label服务端 //el-selecth3下拉框 - 事件绑定/h3el-select v-modelselected2 changeselectChange placeholder请选择el-option valuea label前端 /el-option valueb label后端 /el-option valuec label服务端 //el-selecth3动态下拉框/h3el-select v-modelselected3 placeholder请选择el-option v-foritem in data.options :valueitem.value :labelitem.label:keyitem.value //el-selecth3多选 - multiple/h3el-select v-modelselected4 multiple changeselectChange placeholder请选择el-option value1 label前端 /el-option value2 label后端 /el-option value3 label服务端 //el-select/div
/templatestyle scoped/style
日期选择器
demo\src\main.jsimport { createApp } from vue//整体导入 ElementPlus 组件库import ElementPlus from element-plus //导入 ElementPlus 组件库的所有模块和功能 import element-plus/dist/index.css //导入 ElementPlus 组件库所需的全局 CSS 样式import * as ElementPlusIconsVue from element-plus/icons-vue //导入 ElementPlus 组件库中的所有图标import zhCn from element-plus/dist/locale/zh-cn.mjs //导入 ElementPlus 组件库的中文语言包import App from ./App.vueconst app createApp(App)//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}//app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中sapp.use(ElementPlus, {locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体})app.mount(#app)
demo\src\App.vue
script setupimport { ref } from vueconst date ref()const dateChange (val) {console.log(dateChange:, val)}
/scripttemplate
h3日期/h3
el-date-picker v-modeldate typedate placeholder请选择 /h3日期时间/h3
el-date-picker v-modeldate typedatetime placeholder请选择 /h3事件绑定/h3
el-date-picker v-modeldate typedatetime value-formatYYYY-MM-DD HH:mm:ss changedateChange /
/templatestyle scoped/style
表单
demo\src\App.vue
script setupimport { ref } from vueconst data ref({name: ,radio: ,checkbox: [],date: ,select: ,multipleSelect: [],textarea: })const add () {console.log(data.value)}const reset () {data.value {name: ,radio: ,checkbox: [],date: ,select: ,multipleSelect: [],textarea: }}
/scripttemplate
el-form label-width80 stylewidth: 400px;el-form-item label文本框el-input v-modeldata.name placeholder请填写名称 //el-form-itemel-form-item label单选框el-radio-group v-modeldata.radioel-radio value1前端/el-radioel-radio value2后端/el-radioel-radio value3服务端/el-radio/el-radio-group/el-form-itemel-form-item label复选框el-checkbox-group v-modeldata.checkboxel-checkbox valuea前端/el-checkboxel-checkbox valueb后端/el-checkboxel-checkbox valuec服务端/el-checkbox/el-checkbox-group/el-form-itemel-form-item label日期时间el-date-picker v-modeldata.date typedatetime value-formatYYYY-MM-DD HH:mm:ss //el-form-itemel-form-item label下拉框el-select v-modeldata.select placeholder请选择el-option valueA label前端 /el-option valueB label后端 /el-option valueC label服务端 //el-select/el-form-itemel-form-item label多选框el-select v-modeldata.multipleSelect multiple placeholder请选择el-option valueAA label前端 /el-option valueBB label后端 /el-option valueCC label服务端 //el-select/el-form-itemel-form-item label文本域el-input typetextarea v-modeldata.textarea rows2 placeholder请填写内容 //el-form-itemel-form-itemel-button typeprimary clickadd添加/el-buttonel-button clickreset重置/el-button/el-form-item/el-form
/templatestyle scoped/style
对话框
demo\src\App.vue
script setupimport { ref } from vueconst data ref({name: ,radio: ,checkbox: [],date: ,select: ,multipleSelect: [],textarea: })const add () {console.log(data.value)}const reset () {data.value {name: ,radio: ,checkbox: [],date: ,select: ,multipleSelect: [],textarea: }}//对话框const dialog ref(false)const dialogClose () {console.log(关闭)}
/scripttemplate
el-button clickdialog true打开/el-button!-- draggable 允许拖拽 --
el-dialog v-modeldialog width500 title标题 draggable closedialogCloseel-form label-width80el-form-item label文本框el-input v-modeldata.name placeholder请填写名称 //el-form-itemel-form-item label单选框el-radio-group v-modeldata.radioel-radio value1前端/el-radioel-radio value2后端/el-radioel-radio value3服务端/el-radio/el-radio-group/el-form-itemel-form-item label复选框el-checkbox-group v-modeldata.checkboxel-checkbox valuea前端/el-checkboxel-checkbox valueb后端/el-checkboxel-checkbox valuec服务端/el-checkbox/el-checkbox-group/el-form-itemel-form-item label日期时间el-date-picker v-modeldata.date typedatetime value-formatYYYY-MM-DD HH:mm:ss //el-form-itemel-form-item label下拉框el-select v-modeldata.select placeholder请选择el-option valueA label前端 /el-option valueB label后端 /el-option valueC label服务端 //el-select/el-form-itemel-form-item label多选框el-select v-modeldata.multipleSelect multiple placeholder请选择el-option valueAA label前端 /el-option valueBB label后端 /el-option valueCC label服务端 //el-select/el-form-itemel-form-item label文本域el-input typetextarea v-modeldata.textarea rows2 placeholder请填写内容 //el-form-itemel-form-itemel-button typeprimary clickadd添加/el-buttonel-button clickreset重置/el-button/el-form-item/el-form/el-dialog
/templatestyle scoped/style
分页
demo\src\App.vue
script setupconst currentPage (val) {console.log(currentPage:,val)}
/scripttemplate
h3page-size:每页显示记录数 total:总记录数/h3
el-pagination layoutprev, pager, next :page-size10 :total50 /h3background:显示背景/h3
el-pagination layoutprev, pager, next :page-size5 :total50 background /h3layouttotal 显示总数/h3
el-pagination layoutprev, pager, next, total :page-size5 :total50 /h3layoutjumper 跳转/h3
el-pagination layoutprev, pager, next, jumper, total :page-size5 :total50 /h3事件绑定/h3
el-pagination layoutprev, pager, next :page-size5 :total50 current-changecurrentPage /
/templatestyle scoped/style
表格
demo\src\App.vue
script setupimport { ref } from vueconst data ref({arr: [{ id: 1, name: 邓瑞, web: dengruicode.com, date: 2023-06-20 },{ id: 2, name: David, web: www.dengruicode.com, date: 2023-06-21 },{ id: 3, name: Luna, web: dengruicode.com, date: 2023-06-22 },{ id: 4, name: Lisa, web: www.dengruicode.com, date: 2023-06-22 }]})//选中的复选框let idArr []const selected (data) {//console.log(selected, data)idArr [] //重置data.forEach((value) {idArr.push(value.id)})console.log(idArr:, idArr)}//删除const del () {console.log(del:, idArr)}//编辑const edit (index, row) {console.log(index:, index, row:, row)}
/scripttemplate
h3表格/h3
el-table :datadata.arr stylewidth: 800px;el-table-column propid label编号 width80 /el-table-column propname label姓名 /el-table-column propweb label网站 width300 /el-table-column propdate label日期 //el-tableh3带边框表格/h3
el-table :datadata.arr border stylewidth: 800px;el-table-column propid label编号 width80 /el-table-column propname label姓名 /el-table-column propweb label网站 width300 /el-table-column propdate label日期 //el-tableh3设置高度固定表头/h3
el-table :datadata.arr border height120 stylewidth: 800px;el-table-column propid label编号 width80 /el-table-column propname label姓名 /el-table-column propweb label网站 width300 /el-table-column propdate label日期 //el-tableh3typeselection 多选/h3
el-table :datadata.arr border stylewidth: 800px;el-table-column typeselection width55 /el-table-column propid label编号 width80 /el-table-column propname label姓名 /el-table-column propweb label网站 width300 /el-table-column propdate label日期 //el-tableh3按钮/h3
el-button typeprimary clickdel删除/el-buttonel-table :datadata.arr selection-changeselected border stylewidth: 900px;margin: 3px 0;el-table-column typeselection width55/el-table-columnel-table-column propid label编号 width80 /el-table-column propname label姓名 /el-table-column propweb label网站 width300 /el-table-column propdate label日期 /el-table-column label操作 width150template #defaultscopeel-button sizesmall typeprimary clickedit(scope.$index, scope.row)编辑/el-buttonel-button sizesmall删除/el-button
/template
/el-table-column
/el-tableel-pagination layoutprev, pager, next, jumper, total :page-size5 :total50 /
/templatestyle scoped/style
按需导入
代码#自动导入#安装 unplugin-vue-components 和 unplugin-auto-import 插件npm install -D unplugin-vue-components unplugin-auto-import#自动导入 图标#安装 unplugin-icons 插件npm install -D unplugin-icons代码demo\vite.config.jsimport { defineConfig } from viteimport vue from vitejs/plugin-vue//unpluginimport AutoImport from unplugin-auto-import/viteimport Components from unplugin-vue-components/viteimport { ElementPlusResolver } from unplugin-vue-components/resolversimport Icons from unplugin-icons/vite //图标import IconsResolver from unplugin-icons/resolver// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数如ref, reactive, toRef 等imports: [vue], resolvers: [ElementPlusResolver(),// 自动导入图标组件IconsResolver(),],}),Components({resolvers: [ElementPlusResolver(),// 自动注册图标组件IconsResolver({enabledCollections: [ep],}),],}),Icons({autoInstall: true,}),],})demo\src\main.jsimport { createApp } from vue/*//整体导入 ElementPlus 组件库import ElementPlus from element-plus //导入 ElementPlus 组件库的所有模块和功能 import element-plus/dist/index.css //导入 ElementPlus 组件库所需的全局 CSS 样式import * as ElementPlusIconsVue from element-plus/icons-vue //导入 ElementPlus 组件库中的所有图标import zhCn from element-plus/dist/locale/zh-cn.mjs //导入 ElementPlus 组件库的中文语言包*/import App from ./App.vueconst app createApp(App)/*//注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}//app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中sapp.use(ElementPlus, {locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体})*/app.mount(#app)demo\src\App.vuescript setup// 消息const openMsg () {ElMessage({type: success, // success | warning | info | errormessage: dengruicode.com,showClose: true})}// 确认框const openConfirm () {ElMessageBox.confirm(确认删除?, 标题, {type: warning,confirmButtonText: 确认,cancelButtonText: 取消}).then(() {console.log(确认)}).catch(() {console.log(取消)})}// 通知const openNotifiy () {ElNotification({title: 标题,message: 邓瑞编程,duration: 1500 // 展示时间 [单位:毫秒]})}// 通知2const openNotifiy2 () {ElNotification({type: success, // success | warning | info | errortitle: 标题,message: dengruicode.com,duration: 1500,position: bottom-right})}const url ref(dengruicode.com)/scripttemplateh3按钮/h3el-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-buttonh3图标/h3!-- el-iconPlus //el-icon --el-iconi-ep-Plus //el-icon !-- i-ep- --el-iconIEpEdit //el-icon !-- IEp- --el-iconIEpDelete //el-iconel-icon classis-loadingIEpLoading //el-iconh3提示框/h3el-button clickopenMsg消息/el-buttonel-button clickopenConfirm确认框/el-buttonel-button clickopenNotifiy通知/el-buttonel-button clickopenNotifiy2通知2/el-buttonh3输入框/h3el-input v-modelurl placeholder请输入网址 //templatestyle scoped/style ECharts 安装
独立版本(推荐下载本地)
cdn.staticfile.net/echarts/4.7.0/echarts.min.js
cdn.staticfile.net/echarts/4.7.0/echarts.js
使用 CDN 方法 Staticfile CDN国内 : https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js jsDelivrhttps://cdn.jsdelivr.net/npm/echarts4.3.0/dist/echarts.min.js。 cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script ECharts 实例
!DOCTYPE html
htmlheadmeta charsetutf-8title第一个 ECharts 实例/title!-- 引入 echarts.js --script srchttps://cdn.staticfile.org/echarts/4.3.0/echarts.min.js/script/headbody!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));
// 指定图表的配置项和数据var option {title: {text: 第一个 ECharts 实例},tooltip: {}, // 提示信息legend: {data:[销量]}, // 图例主键xAxis: {data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子]},yAxis: {},// 系列列表series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);/script/body
/html
script// 图例组件legend: {data: [{name: 系列1,// 强制设置图形为圆。icon: circle,// 设置文本为红色textStyle: {color: red}}]}
/script
ECharts图表类型
!-- 图表类型 --
type: bar柱状/条形图
type: line折线/面积图
type: pie饼图
type: scatter散点气泡图
type: effectScatter带有涟漪特效动画的散点气泡
type: radar雷达图
type: tree树型图
type: treemap树型图
type: sunburst旭日图
type: boxplot箱形图
type: candlestickK线图
type: heatmap热力图
type: map地图
type: parallel平行坐标系的系列
type: lines线图
type: graph关系图
type: sankey桑基图
type: funnel漏斗图
type: gauge仪表盘
type: pictorialBar象形柱图
type: themeRiver主题河流
type: custom自定义系列
ECharts 饼图
!-- 引入 echarts.js --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));myChart.setOption({series : [{name: 访问来源,type: pie, // 设置图表类型为饼图radius: 55%, // 饼图的半径外半径为可视区尺寸容器高宽中较小一项的 55% 长度。data:[ // 数据数组name 为数据项名称value 为数据项值{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}]}]})/script
/body
南丁格尔图
!-- roseType: angle, 饼图显示成南丁格尔图 --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {series : [{name: 访问来源,type: pie,radius: 55%,roseType: angle, // 饼图显示成南丁格尔图data:[{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
阴影的配置
!-- 引入 echarts.js --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {series : [{name: 访问来源,type: pie,radius: 55%,data:[{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}],roseType: angle,itemStyle: {normal: {shadowBlur: 200,shadowColor: rgba(0, 0, 0, 0.5)}}}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);/script
/body
ECharts 样式设置
颜色主题
ECharts4 开始除了默认主题外内置了两套主题分别为 light 和 dark
!-- 使用方式 --
var chart echarts.init(dom, light);
var chart echarts.init(dom, dark);
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main), dark); // dark 可尝试修改为 lightmyChart.setOption({series : [{name: 访问来源,type: pie, // 设置图表类型为饼图radius: 55%, // 饼图的半径外半径为可视区尺寸容器高宽中较小一项的 55% 长度。data:[ // 数据数组name 为数据项名称value 为数据项值{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}]}]})/script
/body
另外我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载
!-- 下载并引入主题 --
script srchttps://www.runoob.com/static/js/wonderland.js/script
var myChart echarts.init(dom, wonderland);
$.getJSON(wonderland.json, function (themeJSON) {echarts.registerTheme(wonderland, themeJSON)var myChart echarts.init(dom, wonderland);
});
调色盘
// 全局调色盘。
color: [#ff0000,#00ff00, #0000ff, #d48265, #91c7ae,#749f83, #ca8622, #bda29a,#6e7074, #546570, #c4ccd3],
!-- 引入 echarts.js --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例svar myChart echarts.init(document.getElementById(main));myChart.setOption({// 全局调色盘color: [#ff0000,#00ff00, #0000ff, #d48265, #91c7ae,#749f83, #ca8622, #bda29a,#6e7074, #546570, #c4ccd3],series : [{name: 访问来源,type: pie, // 设置图表类型为饼图radius: 55%, // 饼图的半径外半径为可视区尺寸容器高宽中较小一项的 55% 长度。data:[ // 数据数组name 为数据项名称value 为数据项值{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}]}]})/script 直接的样式设置 itemStyle, lineStyle, areaStyle, label, ... 高亮的样式emphasis
!-- 引入 echarts.js --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));myChart.setOption({series : [{name: 访问来源,type: pie, // 设置图表类型为饼图radius: 55%, // 饼图的半径外半径为可视区尺寸容器高宽中较小一项的 55% 长度。// 高亮样式。emphasis: {itemStyle: {// 高亮时点的颜色color: red},label: {show: true,// 高亮时标签的文字formatter: 高亮时显示的标签内容}},data:[ // 数据数组name 为数据项名称value 为数据项值{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}]}]})/script
/body
ECharts 异步加载数据
// echarts_test_data.json 数据
{ data_pie : [{value:235, name:视频广告},{value:274, name:联盟广告},{value:310, name:邮件营销},{value:335, name:直接访问},{value:400, name:搜索引擎}]
}
script srchttps://cdn.staticfile.net/jquery/2.2.4/jquery.min.js/script
!-- 引入 echarts.js --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));myChart.showLoading(); // 开启 loading 效果$.get(https://www.runoob.com/static/js/echarts_test_data.json, function (data) {alert(可以看到 loading 字样); // 测试代码用于查看 loading 效果myChart.hideLoading(); // 隐藏 loading 效果myChart.setOption({sseries : [{name: 访问来源,type: pie, // 设置图表类型为饼图radius: 55%, // 饼图的半径外半径为可视区尺寸容器高宽中较小一项的 55% 长度。data:data.data_pie}]})}, json);/script
数据的动态更新
script srchttps://cdn.staticfile.net/jquery/2.2.4/jquery.min.js/script
!-- 引入 echarts.js --
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar base new Date(2014, 9, 3); // 定义了一个变量base它是一个时间戳表示2014年10月3日的日期var oneDay 24 * 3600 * 1000; // 定义了一个变量oneDay用来表示一天的毫秒数var date []; // 定义了一个空数组date用来存储日期数据var data [Math.random() * 150]; // 定义了一个数组data初始化为包含一个随机数乘以150的结果var now new Date(base); // 定义了一个变量now初始化为base时间戳对应的日期对象function addData(shift) { // 定义了一个函数addData它用于添加新的数据点到图表中。参数shift决定是否移除旧的数据点now [now.getFullYear(), now.getMonth() 1, now.getDate()].join(/); // 这行代码获取当前日期对象的年、月、日并将其格式化为字符串date.push(now); // 将格式化后的日期字符串添加到date数组data.push((Math.random() - 0.4) * 10 data[data.length - 1]); // 这行代码生成一个新的随机数据点并将其添加到data数组if (shift) { date.shift();data.shift();}now new Date(new Date(now) oneDay); // 更新now变量为当前日期的下一天}for (var i 1; i 100; i) {addData();}option {xAxis: {type: category, // type: category表示x轴是分类轴boundaryGap: false,data: date},yAxis: {boundaryGap: [0, 50%],type: value},series: [{name:成交,type:line, // 设置数据系列的类型为折线图smooth:true, // 设置折线图是否平滑symbol: none, // 设置折线图的数据点是否显示标记这里设置为不显示stack: a, // 设置数据系列的堆叠方式这里设置为堆叠到aareaStyle: {// 设置折线图的区域样式这里没有具体设置样式属性normal: {}},data: data}]};setInterval(function () {addData(true); // 在定时器的回调函数中调用addData函数并传递true作为参数表示每次更新时都移除最旧的数据点myChart.setOption({ // 使用setOption方法更新图表的配置选项xAxis: {data: date},series: [{name:成交,data: data}]});}, 500); // 设置一个定时器每500毫秒调用一次函数更新图表数据// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));myChart.setOption(option)/script
ECharts 数据集dataset
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {legend: {},tooltip: {},dataset: {// 提供一份数据。source: [[product, 2015, 2016, 2017],[Matcha Latte, 43.3, 85.8, 93.7],[Milk Tea, 83.1, 73.4, 55.1],[Cheese Cocoa, 86.4, 65.2, 82.5],[Walnut Brownie, 72.4, 53.9, 39.1]]},// 声明一个 X 轴类目轴category。默认情况下类目轴对应到 dataset 第一列。xAxis: {type: category},// 声明一个 Y 轴数值轴。yAxis: {},// 声明多个 bar 系列默认情况下每个系列会自动对应到 dataset 的每一列。series: [{type: bar},{type: bar},{type: bar}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
body!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {legend: {},tooltip: {},dataset: {// 这里指定了维度名的顺序从而可以利用默认的维度到坐标轴的映射。// 如果不指定 dimensions也可以通过指定 series.encode 完成映射参见后文。dimensions: [product, 2015, 2016, 2017],source: [{product: Matcha Latte, 2015: 43.3, 2016: 85.8, 2017: 93.7},{product: Milk Tea, 2015: 83.1, 2016: 73.4, 2017: 55.1},{product: Cheese Cocoa, 2015: 86.4, 2016: 65.2, 2017: 82.5},{product: Walnut Brownie, 2015: 72.4, 2016: 53.9, 2017: 39.1}]},xAxis: {type: category},yAxis: {},series: [{type: bar},{type: bar},{type: bar}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body
数据到图形的映射
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {legend: {},tooltip: {},dataset: {source: [[product, 2012, 2013, 2014, 2015],[Matcha Latte, 41.1, 30.4, 65.1, 53.3],[Milk Tea, 86.5, 92.1, 85.7, 83.1],[Cheese Cocoa, 24.1, 67.2, 79.5, 86.4]]},xAxis: [{type: category, gridIndex: 0},{type: category, gridIndex: 1}],yAxis: [{gridIndex: 0},{gridIndex: 1}],grid: [{bottom: 55%},{top: 55%}],series: [// 这几个系列会在第一个直角坐标系中每个系列对应到 dataset 的每一行{type: bar, seriesLayoutBy: row},{type: bar, seriesLayoutBy: row},{type: bar, seriesLayoutBy: row},// 这几个系列会在第二个直角坐标系中每个系列对应到 dataset 的每一列{type: bar, xAxisIndex: 1, yAxisIndex: 1},{type: bar, xAxisIndex: 1, yAxisIndex: 1},{type: bar, xAxisIndex: 1, yAxisIndex: 1},{type: bar, xAxisIndex: 1, yAxisIndex: 1}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body
竖表
eries.encode 属性将对应的数据映射到坐标轴如 X、Y 轴
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {dataset: {source: [[score, amount, product],[89.3, 58212, Matcha Latte],[57.1, 78254, Milk Tea],[74.4, 41032, Cheese Cocoa],[50.1, 12755, Cheese Brownie],[89.7, 20145, Matcha Cocoa],[68.1, 79146, Tea],[19.6, 91852, Orange Juice],[10.6, 101852, Lemon Juice],[32.7, 20112, Walnut Brownie]]},grid: {containLabel: true},xAxis: {},yAxis: {type: category},series: [{type: bar,encode: {// 将 amount 列映射到 X 轴。x: amount,// 将 product 列映射到 Y 轴。y: product}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body
更多 encode 实例
script srchttps://cdn.staticfile.net/jquery/1.10.2/jquery.min.js/script
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));$.get(https://www.runoob.com/static/js/life-expectancy-table.json, function (data) {var sizeValue 57%; // 用于设置网格(grid)的尺寸var symbolSize 2.5; // 用于设置散点图点的大小option {legend: {},tooltip: {}, toolbox: {left: center,feature: {dataZoom: {}}},grid: [{right: sizeValue, bottom: sizeValue},{left: sizeValue, bottom: sizeValue},{right: sizeValue, top: sizeValue},{left: sizeValue, top: sizeValue}],xAxis: [{type: value, gridIndex: 0, name: Income, axisLabel: {rotate: 50, interval: 0}},{type: category, gridIndex: 1, name: Country, boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},{type: value, gridIndex: 2, name: Income, axisLabel: {rotate: 50, interval: 0}},{type: value, gridIndex: 3, name: Life Expectancy, axisLabel: {rotate: 50, interval: 0}}],yAxis: [{type: value, gridIndex: 0, name: Life Expectancy},{type: value, gridIndex: 1, name: Income},{type: value, gridIndex: 2, name: Population},{type: value, gridIndex: 3, name: Population}],dataset: {dimensions: [Income,Life Expectancy,Population,Country,{name: Year, type: ordinal}],source: data},series: [{type: scatter,symbolSize: symbolSize,xAxisIndex: 0,yAxisIndex: 0,encode: {x: Income,y: Life Expectancy,tooltip: [0, 1, 2, 3, 4]}},{type: scatter,symbolSize: symbolSize,xAxisIndex: 1,yAxisIndex: 1,encode: {x: Country,y: Income,tooltip: [0, 1, 2, 3, 4]}},{type: scatter,symbolSize: symbolSize,xAxisIndex: 2,yAxisIndex: 2,encode: {x: Income,y: Population,tooltip: [0, 1, 2, 3, 4]}},{type: scatter,symbolSize: symbolSize,xAxisIndex: 3,yAxisIndex: 3,encode: {x: Life Expectancy,y: Population,tooltip: [0, 1, 2, 3, 4]}}]};myChart.setOption(option);});/script
/body
视觉通道颜色、尺寸等的映射
视觉元素可以是 symbol: 图元的图形类别 symbolSize: 图元的大小 color: 图元的颜色 colorAlpha: 图元的颜色的透明度 opacity: 图元以及其附属物如文字标签的透明度 colorLightness: 颜色的明暗度 colorSaturation: 颜色的饱和度 colorHue: 颜色的色调
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {dataset: {source: [[score, amount, product],[89.3, 58212, Matcha Latte],[57.1, 78254, Milk Tea],[74.4, 41032, Cheese Cocoa],[50.1, 12755, Cheese Brownie],[89.7, 20145, Matcha Cocoa],[68.1, 79146, Tea],[19.6, 91852, Orange Juice],[10.6, 101852, Lemon Juice],[32.7, 20112, Walnut Brownie]]},grid: {containLabel: true},xAxis: {name: amount},yAxis: {type: category},visualMap: {orient: horizontal,left: center,min: 10,max: 100,text: [High Score, Low Score],// Map the score column to colordimension: 0,inRange: {color: [#D7DA8B, #E15457]}},series: [{type: bar,encode: {// Map the amount column to X axis.x: amount,// Map the product column to Y axisy: product}}]};myChart.setOption(option);/script
/body
交互联动
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));setTimeout(function () {option {legend: {},tooltip: {trigger: axis,showContent: false},dataset: {source: [[product, 2012, 2013, 2014, 2015, 2016, 2017],[Matcha Latte, 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],[Milk Tea, 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],[Cheese Cocoa, 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],[Walnut Brownie, 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]]},xAxis: {type: category},yAxis: {gridIndex: 0},grid: {top: 55%},series: [{type: line, smooth: true, seriesLayoutBy: row},{type: line, smooth: true, seriesLayoutBy: row},{type: line, smooth: true, seriesLayoutBy: row},{type: line, smooth: true, seriesLayoutBy: row},{type: pie,id: pie,radius: 30%,center: [50%, 25%],label: {formatter: {b}: {2012} ({d}%)},encode: {itemName: product,value: 2012,tooltip: 2012}}]};myChart.on(updateAxisPointer, function (event) {var xAxisInfo event.axesInfo[0];if (xAxisInfo) {var dimension xAxisInfo.value 1;myChart.setOption({series: {id: pie,label: {formatter: {b}: {[ dimension ]} ({d}%)},encode: {value: dimension,tooltip: dimension}}});}});myChart.setOption(option);});/script
/body ECharts 交互组件
dataZoom
dataZoom 组件可以实现通过鼠标滚轮滚动放大缩小图表的功能
默认情况下 dataZoom 控制 x 轴即对 x 轴进行数据窗口缩放和数据窗口平移操作
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {xAxis: {type: value},yAxis: {type: value},dataZoom: [{ // 这个dataZoom组件默认控制x轴。type: slider, // 这个 dataZoom 组件是 slider 型 dataZoom 组件start: 10, // 左边在 10% 的位置。end: 60 // 右边在 60% 的位置。}],series: [{type: scatter, // 这是个『散点图』itemStyle: {opacity: 0.8},symbolSize: function (val) {return val[2] * 40;},data: [[14.616,7.241,0.896],[3.958,5.701,0.955],[2.768,8.971,0.669],[9.051,9.710,0.171],[14.046,4.182,0.536],[12.295,1.429,0.962],[4.417,8.167,0.113],[0.492,4.771,0.785],[7.632,2.605,0.645],[14.242,5.042,0.368]]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body
增加 type: inside 的配置信息
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {xAxis: {type: value},yAxis: {type: value},dataZoom: [{ // 这个dataZoom组件默认控制x轴。type: slider, // 这个 dataZoom 组件是 slider 型 dataZoom 组件start: 10, // 左边在 10% 的位置。end: 60 // 右边在 60% 的位置。},{ // 这个dataZoom组件也控制x轴。type: inside, // 这个 dataZoom 组件是 inside 型 dataZoom 组件start: 10, // 左边在 10% 的位置。end: 60 // 右边在 60% 的位置。}],series: [{type: scatter, // 这是个『散点图』itemStyle: {opacity: 0.8},symbolSize: function (val) {return val[2] * 40;},data: [[14.616,7.241,0.896],[3.958,5.701,0.955],[2.768,8.971,0.669],[9.051,9.710,0.171],[14.046,4.182,0.536],[12.295,1.429,0.962],[4.417,8.167,0.113],[0.492,4.771,0.785],[7.632,2.605,0.645],[14.242,5.042,0.368]]}]}myChart.setOption(option);/script
/body
可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var data1 [];var data2 [];var data3 [];var random function (max) {return (Math.random() * max).toFixed(3);};for (var i 0; i 500; i) {data1.push([random(15), random(10), random(1)]);data2.push([random(10), random(10), random(1)]);data3.push([random(15), random(10), random(1)]);}option {animation: false,legend: {data: [scatter, scatter2, scatter3]},tooltip: {},xAxis: {type: value,min: dataMin,max: dataMax,splitLine: {show: true}},yAxis: {type: value,min: dataMin,max: dataMax,splitLine: {show: true}},dataZoom: [{type: slider,show: true,xAxisIndex: [0],start: 1,end: 35},{type: slider,show: true,yAxisIndex: [0],left: 93%,start: 29,end: 36},{type: inside,xAxisIndex: [0],start: 1,end: 35},{type: inside,yAxisIndex: [0],start: 29,end: 36}],series: [{name: scatter,type: scatter,itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data1},{name: scatter2,type: scatter,itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data2},{name: scatter3,type: scatter,itemStyle: {normal: {opacity: 0.8,}},symbolSize: function (val) {return val[2] * 40;},data: data3}]}myChart.setOption(option);/script
/body
ECharts 响应式
left/right/top/bottom/width/height 定位方式
这六个量中每个量都可以是『绝对值』或者『百分比』或者『位置描述』 绝对值 单位是浏览器像素px用 number 形式书写不写单位。例如 {left: 23, height: 400} 百分比 表示占 DOM 容器高宽的百分之多少用 string 形式书写。例如 {right: 30%, bottom: 40%} 位置描述 可以设置 left: center表示水平居中 可以设置 top: middle表示垂直居中
center / radius 定位方式 center 是一个数组表示 [x, y]其中x、y可以是『绝对值』或者『百分比』含义和前述相同 radius 是一个数组表示 [内半径, 外半径]其中内外半径可以是『绝对值』或者『百分比』含义和前述相同 在自适应容器大小时百分比设置是很有用的
横向horizontal和纵向vertical
ECharts的『外观狭长』型的组件如 legend、visualMap、dataZoom、timeline等大多提供了『横向布局』『纵向布局』的选择。例如在细长的移动端屏幕上可能适合使用『纵向布局』在PC宽屏上可能适合使用『横向布局』
横纵向布局的设置一般在『组件』或者『系列』的 orient 或者 layout 配置项上设置为 horizontal 或者 vertical
script srchttps://cdn.staticfile.net/jquery/2.2.4/jquery.min.js/script
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));$.when($.getScript(https://www.runoob.com/static/js/timelineGDP.js),$.getScript(https://www.runoob.com/static/js/draggable.js)).done(function () {draggable.init($(div[_echarts_instance_])[0],myChart,{width: 700,height: 400,throttle: 70});myChart.hideLoading();option {baseOption: {title : {text: 南丁格尔玫瑰图,subtext: 纯属虚构,x:center},tooltip : {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},legend: {data:[rose1,rose2,rose3,rose4,rose5,rose6,rose7,rose8]},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true,type: [pie, funnel]},restore : {show: true},saveAsImage : {show: true}}},calculable : true,series : [{name:半径模式,type:pie,roseType : radius,label: {normal: {show: false},emphasis: {show: true}},lableLine: {normal: {show: false},emphasis: {show: true}},data:[{value:10, name:rose1},{value:5, name:rose2},{value:15, name:rose3},{value:25, name:rose4},{value:20, name:rose5},{value:35, name:rose6},{value:30, name:rose7},{value:40, name:rose8}]},{name:面积模式,type:pie,roseType : area,data:[{value:10, name:rose1},{value:5, name:rose2},{value:15, name:rose3},{value:25, name:rose4},{value:20, name:rose5},{value:35, name:rose6},{value:30, name:rose7},{value:40, name:rose8}]}]},media: [{option: {legend: {right: center,bottom: 0,orient: horizontal},series: [{radius: [20, 50%],center: [25%, 50%]},{radius: [30, 50%],center: [75%, 50%]}]}},{query: {minAspectRatio: 1},option: {legend: {right: center,bottom: 0,orient: horizontal},series: [{radius: [20, 50%],center: [25%, 50%]},{radius: [30, 50%],center: [75%, 50%]}]}},{query: {maxAspectRatio: 1},option: {legend: {right: center,bottom: 0,orient: horizontal},series: [{radius: [20, 50%],center: [50%, 30%]},{radius: [30, 50%],center: [50%, 70%]}]}},{query: {maxWidth: 500},option: {legend: {right: 10,top: 15%,orient: vertical},series: [{radius: [20, 50%],center: [50%, 30%]},{radius: [30, 50%],center: [50%, 75%]}]}}]};myChart.setOption(option);});/script
/body
要在 option 中设置 Media Query 须遵循如下格式
option {baseOption: { // 这里是基本的『原子option』。title: {...},legend: {...},series: [{...}, {...}, ...],...},media: [ // 这里定义了 media query 的逐条规则。{query: {...}, // 这里写规则。option: { // 这里写此规则满足下的option。legend: {...},...}},{query: {...}, // 第二个规则。option: { // 第二个规则对应的option。legend: {...},...}},{ // 这条里没有写规则表示『默认』option: { // 即所有规则都不满足时采纳这个option。legend: {...},...}}]
};
media: [...,{query: {maxAspectRatio: 1 // 当长宽比小于1时。},option: {legend: { // legend 放在底部中间。right: center,bottom: 0,orient: horizontal // legend 横向布局。},series: [ // 两个饼图左右布局。{radius: [20, 50%],center: [50%, 30%]},{radius: [30, 50%],center: [50%, 70%]}]}},{query: {maxWidth: 500 // 当容器宽度小于 500 时。},option: {legend: {right: 10, // legend 放置在右侧中间。top: 15%,orient: vertical // 纵向布局。},series: [ // 两个饼图上下布局。{radius: [20, 50%],center: [50%, 30%]},{radius: [30, 50%],center: [50%, 75%]}]}},...
]
script srchttps://cdn.staticfile.net/jquery/2.2.4/jquery.min.js/script
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));$.when($.getScript(https://www.runoob.com/static/js/timelineGDP.js),$.getScript(https://www.runoob.com/static/js/draggable.js)).done(function () {draggable.init($(div[_echarts_instance_])[0],myChart,{width: 700,height: 630,lockY: true,throttle: 70});myChart.hideLoading();var categoryData [北京,天津,河北,山西,内蒙古,辽宁,吉林,黑龙江,上海,江苏,浙江,安徽,福建,江西,山东,河南,湖北,湖南,广东,广西,海南,重庆,四川,贵州,云南,西藏,陕西,甘肃,青海,宁夏,新疆];option {baseOption: {timeline: {axisType: category,autoPlay: true,playInterval: 1000,data: [2002-01-01, 2003-01-01, 2004-01-01,2005-01-01, 2006-01-01, 2007-01-01,2008-01-01, 2009-01-01, 2010-01-01,2011-01-01],label: {formatter : function(s) {return (new Date(s)).getFullYear();}}},title: {subtext: Media Query 示例},tooltip: {trigger:axis,axisPointer: {type: shadow}},xAxis: {type: value,name: GDP亿元,max: 30000,data: null},yAxis: {type: category,data: categoryData,axisLabel: {interval: 0},splitLine: {show: false}},legend: {data: [第一产业, 第二产业, 第三产业, GDP, 金融, 房地产],selected: {GDP: false, 金融: false, 房地产: false}},calculable : true,series: [{name: GDP, type: bar},{name: 金融, type: bar},{name: 房地产, type: bar},{name: 第一产业, type: bar},{name: 第二产业, type: bar},{name: 第三产业, type: bar},{name: GDP占比, type: pie}]},media: [{option: {legend: {orient: horizontal,left: right,itemGap: 10},grid: {left: 10%,top: 80,right: 90,bottom: 100},xAxis: {nameLocation: end,nameGap: 10,splitNumber: 5,splitLine: {show: true}},timeline: {orient: horizontal,inverse: false,left: 20%,right: 20%,bottom: 10,height: 40},series: [{name: GDP占比, center: [75%, 30%], radius: 28%}]}},{query: {maxWidth: 670, minWidth: 550},option: {legend: {orient: horizontal,left: 200,itemGap: 5},grid: {left: 10%,top: 80,right: 90,bottom: 100},xAxis: {nameLocation: end,nameGap: 10,splitNumber: 5,splitLine: {show: true}},timeline: {orient: horizontal,inverse: false,left: 20%,right: 20%,bottom: 10,height: 40},series: [{name: GDP占比, center: [75%, 30%], radius: 28%}]}},{query: {maxWidth: 550},option: {legend: {orient: vertical,left: right,itemGap: 5},grid: {left: 55,top: 32%,right: 100,bottom: 50},xAxis: {nameLocation: middle,nameGap: 25,splitNumber: 3},timeline: {orient: vertical,inverse: true,right: 10,top: 150,bottom: 10,width: 55},series: [{name: GDP占比, center: [45%, 20%], radius: 28%}]}}],options: [{title: {text: 2002全国宏观经济指标},series: [{data: dataMap.dataGDP[2002]},{data: dataMap.dataFinancial[2002]},{data: dataMap.dataEstate[2002]},{data: dataMap.dataPI[2002]},{data: dataMap.dataSI[2002]},{data: dataMap.dataTI[2002]},{data: [{name: 第一产业, value: dataMap.dataPI[2002sum]},{name: 第二产业, value: dataMap.dataSI[2002sum]},{name: 第三产业, value: dataMap.dataTI[2002sum]}]}]},{title : {text: 2003全国宏观经济指标},series : [{data: dataMap.dataGDP[2003]},{data: dataMap.dataFinancial[2003]},{data: dataMap.dataEstate[2003]},{data: dataMap.dataPI[2003]},{data: dataMap.dataSI[2003]},{data: dataMap.dataTI[2003]},{data: [{name: 第一产业, value: dataMap.dataPI[2003sum]},{name: 第二产业, value: dataMap.dataSI[2003sum]},{name: 第三产业, value: dataMap.dataTI[2003sum]}]}]},{title : {text: 2004全国宏观经济指标},series : [{data: dataMap.dataGDP[2004]},{data: dataMap.dataFinancial[2004]},{data: dataMap.dataEstate[2004]},{data: dataMap.dataPI[2004]},{data: dataMap.dataSI[2004]},{data: dataMap.dataTI[2004]},{data: [{name: 第一产业, value: dataMap.dataPI[2004sum]},{name: 第二产业, value: dataMap.dataSI[2004sum]},{name: 第三产业, value: dataMap.dataTI[2004sum]}]}]},{title : {text: 2005全国宏观经济指标},series : [{data: dataMap.dataGDP[2005]},{data: dataMap.dataFinancial[2005]},{data: dataMap.dataEstate[2005]},{data: dataMap.dataPI[2005]},{data: dataMap.dataSI[2005]},{data: dataMap.dataTI[2005]},{data: [{name: 第一产业, value: dataMap.dataPI[2005sum]},{name: 第二产业, value: dataMap.dataSI[2005sum]},{name: 第三产业, value: dataMap.dataTI[2005sum]}]}]},{title : {text: 2006全国宏观经济指标},series : [{data: dataMap.dataGDP[2006]},{data: dataMap.dataFinancial[2006]},{data: dataMap.dataEstate[2006]},{data: dataMap.dataPI[2006]},{data: dataMap.dataSI[2006]},{data: dataMap.dataTI[2006]},{data: [{name: 第一产业, value: dataMap.dataPI[2006sum]},{name: 第二产业, value: dataMap.dataSI[2006sum]},{name: 第三产业, value: dataMap.dataTI[2006sum]}]}]},{title : {text: 2007全国宏观经济指标},series : [{data: dataMap.dataGDP[2007]},{data: dataMap.dataFinancial[2007]},{data: dataMap.dataEstate[2007]},{data: dataMap.dataPI[2007]},{data: dataMap.dataSI[2007]},{data: dataMap.dataTI[2007]},{data: [{name: 第一产业, value: dataMap.dataPI[2007sum]},{name: 第二产业, value: dataMap.dataSI[2007sum]},{name: 第三产业, value: dataMap.dataTI[2007sum]}]}]},{title : {text: 2008全国宏观经济指标},series : [{data: dataMap.dataGDP[2008]},{data: dataMap.dataFinancial[2008]},{data: dataMap.dataEstate[2008]},{data: dataMap.dataPI[2008]},{data: dataMap.dataSI[2008]},{data: dataMap.dataTI[2008]},{data: [{name: 第一产业, value: dataMap.dataPI[2008sum]},{name: 第二产业, value: dataMap.dataSI[2008sum]},{name: 第三产业, value: dataMap.dataTI[2008sum]}]}]},{title : {text: 2009全国宏观经济指标},series : [{data: dataMap.dataGDP[2009]},{data: dataMap.dataFinancial[2009]},{data: dataMap.dataEstate[2009]},{data: dataMap.dataPI[2009]},{data: dataMap.dataSI[2009]},{data: dataMap.dataTI[2009]},{data: [{name: 第一产业, value: dataMap.dataPI[2009sum]},{name: 第二产业, value: dataMap.dataSI[2009sum]},{name: 第三产业, value: dataMap.dataTI[2009sum]}]}]},{title : {text: 2010全国宏观经济指标},series : [{data: dataMap.dataGDP[2010]},{data: dataMap.dataFinancial[2010]},{data: dataMap.dataEstate[2010]},{data: dataMap.dataPI[2010]},{data: dataMap.dataSI[2010]},{data: dataMap.dataTI[2010]},{data: [{name: 第一产业, value: dataMap.dataPI[2010sum]},{name: 第二产业, value: dataMap.dataSI[2010sum]},{name: 第三产业, value: dataMap.dataTI[2010sum]}]}]},{title : {text: 2011全国宏观经济指标},series : [{data: dataMap.dataGDP[2011]},{data: dataMap.dataFinancial[2011]},{data: dataMap.dataEstate[2011]},{data: dataMap.dataPI[2011]},{data: dataMap.dataSI[2011]},{data: dataMap.dataTI[2011]},{data: [{name: 第一产业, value: dataMap.dataPI[2011sum]},{name: 第二产业, value: dataMap.dataSI[2011sum]},{name: 第三产业, value: dataMap.dataTI[2011sum]}]}]}]};myChart.setOption(option);});/script
/body
ECharts 数据的视觉映射 图形类别symbol 图形大小symbolSize 颜色color 透明度opacity 颜色透明度colorAlpha 颜色明暗度colorLightness 颜色饱和度colorSaturation 色调colorHue
数据和维度
series.data最常见的形式 是线性表即一个普通数组
series: {data: [{ // 这里每一个项就是数据项dataItemvalue: 2323, // 这是数据项的数据值valueitemStyle: {...}},1212, // 也可以直接是 dataItem 的 value这更常见。2323, // 每个 value 都是『一维』的。4343,3434]
}
series: {data: [{ // 这里每一个项就是数据项dataItemvalue: [3434, 129, 圣马力诺], // 这是数据项的数据值valueitemStyle: {...}},[1212, 5454, 梵蒂冈], // 也可以直接是 dataItem 的 value这更常见。[2323, 3223, 瑙鲁], // 每个 value 都是『三维』的每列是一个维度。[4343, 23, 图瓦卢] // 假如是『气泡图』常见第一维度映射到x轴// 第二维度映射到y轴// 第三维度映射到气泡半径symbolSize]
}
visualMap 组件
visualMap 组件定义了把数据的指定维度映射到对应的视觉元素上
option {visualMap: [{ // 第一个 visualMap 组件type: continuous, // 定义为连续型 visualMap...},{ // 第二个 visualMap 组件type: piecewise, // 定义为分段型 visualMap...}],...
};
html styleheight: 100%headmeta charsetutf-8/headbody styleheight: 100%; margin: 0div idcontainer styleheight: 100%/divscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/scriptscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js/scriptscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js/scriptscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js/scriptscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts/map/js/china.js/scriptscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts/map/js/world.js/scriptscript typetext/javascript srchttps://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js/scriptscript typetext/javascriptvar dom document.getElementById(container);var myChart echarts.init(dom);var app {};option null;var geoCoordMap {海门:[121.15,31.89],鄂尔多斯:[109.781327,39.608266],招远:[120.38,37.35],舟山:[122.207216,29.985295],齐齐哈尔:[123.97,47.33],盐城:[120.13,33.38],赤峰:[118.87,42.28],青岛:[120.33,36.07],乳山:[121.52,36.89],金昌:[102.188043,38.520089],泉州:[118.58,24.93],莱西:[120.53,36.86],日照:[119.46,35.42],胶南:[119.97,35.88],南通:[121.05,32.08],拉萨:[91.11,29.97],云浮:[112.02,22.93],梅州:[116.1,24.55],文登:[122.05,37.2],上海:[121.48,31.22],攀枝花:[101.718637,26.582347],威海:[122.1,37.5],承德:[117.93,40.97],厦门:[118.1,24.46],汕尾:[115.375279,22.786211],潮州:[116.63,23.68],丹东:[124.37,40.13],太仓:[121.1,31.45],曲靖:[103.79,25.51],烟台:[121.39,37.52],福州:[119.3,26.08],瓦房店:[121.979603,39.627114],即墨:[120.45,36.38],抚顺:[123.97,41.97],玉溪:[102.52,24.35],张家口:[114.87,40.82],阳泉:[113.57,37.85],莱州:[119.942327,37.177017],湖州:[120.1,30.86],汕头:[116.69,23.39],昆山:[120.95,31.39],宁波:[121.56,29.86],湛江:[110.359377,21.270708],揭阳:[116.35,23.55],荣成:[122.41,37.16],连云港:[119.16,34.59],葫芦岛:[120.836932,40.711052],常熟:[120.74,31.64],东莞:[113.75,23.04],河源:[114.68,23.73],淮安:[119.15,33.5],泰州:[119.9,32.49],南宁:[108.33,22.84],营口:[122.18,40.65],惠州:[114.4,23.09],江阴:[120.26,31.91],蓬莱:[120.75,37.8],韶关:[113.62,24.84],嘉峪关:[98.289152,39.77313],广州:[113.23,23.16],延安:[109.47,36.6],太原:[112.53,37.87],清远:[113.01,23.7],中山:[113.38,22.52],昆明:[102.73,25.04],寿光:[118.73,36.86],盘锦:[122.070714,41.119997],长治:[113.08,36.18],深圳:[114.07,22.62],珠海:[113.52,22.3],宿迁:[118.3,33.96],咸阳:[108.72,34.36],铜川:[109.11,35.09],平度:[119.97,36.77],佛山:[113.11,23.05],海口:[110.35,20.02],江门:[113.06,22.61],章丘:[117.53,36.72],肇庆:[112.44,23.05],大连:[121.62,38.92],临汾:[111.5,36.08],吴江:[120.63,31.16],石嘴山:[106.39,39.04],沈阳:[123.38,41.8],苏州:[120.62,31.32],茂名:[110.88,21.68],嘉兴:[120.76,30.77],长春:[125.35,43.88],胶州:[120.03336,36.264622],银川:[106.27,38.47],张家港:[120.555821,31.875428],三门峡:[111.19,34.76],锦州:[121.15,41.13],南昌:[115.89,28.68],柳州:[109.4,24.33],三亚:[109.511909,18.252847],自贡:[104.778442,29.33903],吉林:[126.57,43.87],阳江:[111.95,21.85],泸州:[105.39,28.91],西宁:[101.74,36.56],宜宾:[104.56,29.77],呼和浩特:[111.65,40.82],成都:[104.06,30.67],大同:[113.3,40.12],镇江:[119.44,32.2],桂林:[110.28,25.29],张家界:[110.479191,29.117096],宜兴:[119.82,31.36],北海:[109.12,21.49],西安:[108.95,34.27],金坛:[119.56,31.74],东营:[118.49,37.46],牡丹江:[129.58,44.6],遵义:[106.9,27.7],绍兴:[120.58,30.01],扬州:[119.42,32.39],常州:[119.95,31.79],潍坊:[119.1,36.62],重庆:[106.54,29.59],台州:[121.420757,28.656386],南京:[118.78,32.04],滨州:[118.03,37.36],贵阳:[106.71,26.57],无锡:[120.29,31.59],本溪:[123.73,41.3],克拉玛依:[84.77,45.59],渭南:[109.5,34.52],马鞍山:[118.48,31.56],宝鸡:[107.15,34.38],焦作:[113.21,35.24],句容:[119.16,31.95],北京:[116.46,39.92],徐州:[117.2,34.26],衡水:[115.72,37.72],包头:[110,40.58],绵阳:[104.73,31.48],乌鲁木齐:[87.68,43.77],枣庄:[117.57,34.86],杭州:[120.19,30.26],淄博:[118.05,36.78],鞍山:[122.85,41.12],溧阳:[119.48,31.43],库尔勒:[86.06,41.68],安阳:[114.35,36.1],开封:[114.35,34.79],济南:[117,36.65],德阳:[104.37,31.13],温州:[120.65,28.01],九江:[115.97,29.71],邯郸:[114.47,36.6],临安:[119.72,30.23],兰州:[103.73,36.03],沧州:[116.83,38.33],临沂:[118.35,35.05],南充:[106.110698,30.837793],天津:[117.2,39.13],富阳:[119.95,30.07],泰安:[117.13,36.18],诸暨:[120.23,29.71],郑州:[113.65,34.76],哈尔滨:[126.63,45.75],聊城:[115.97,36.45],芜湖:[118.38,31.33],唐山:[118.02,39.63],平顶山:[113.29,33.75],邢台:[114.48,37.05],德州:[116.29,37.45],济宁:[116.59,35.38],荆州:[112.239741,30.335165],宜昌:[111.3,30.7],义乌:[120.06,29.32],丽水:[119.92,28.45],洛阳:[112.44,34.7],秦皇岛:[119.57,39.95],株洲:[113.16,27.83],石家庄:[114.48,38.03],莱芜:[117.67,36.19],常德:[111.69,29.05],保定:[115.48,38.85],湘潭:[112.91,27.87],金华:[119.64,29.12],岳阳:[113.09,29.37],长沙:[113,28.21],衢州:[118.88,28.97],廊坊:[116.7,39.53],菏泽:[115.480656,35.23375],合肥:[117.27,31.86],武汉:[114.31,30.52],大庆:[125.03,46.58]};var convertData function (data) {var res [];for (var i 0; i data.length; i) {var geoCoord geoCoordMap[data[i].name];if (geoCoord) {res.push(geoCoord.concat(data[i].value));}}return res;};option {backgroundColor: #404a59,title: {text: 全国主要城市空气质量,subtext: data from PM25.in,sublink: http://www.pm25.in,left: center,textStyle: {color: #fff}},tooltip: {trigger: item},legend: {orient: vertical,top: bottom,left: right,data:[pm2.5],textStyle: {color: #fff}},visualMap: {min: 0,max: 300,splitNumber: 5,color: [#d94e5d,#eac736,#50a3ba],textStyle: {color: #fff}},geo: {map: china,label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: #323c48,borderColor: #111},emphasis: {areaColor: #2a333d}}},series: [{name: pm2.5,type: scatter,coordinateSystem: geo,data: convertData([{name: 海门, value: 9},{name: 鄂尔多斯, value: 12},{name: 招远, value: 12},{name: 舟山, value: 12},{name: 齐齐哈尔, value: 14},{name: 盐城, value: 15},{name: 赤峰, value: 16},{name: 青岛, value: 18},{name: 乳山, value: 18},{name: 金昌, value: 19},{name: 泉州, value: 21},{name: 莱西, value: 21},{name: 日照, value: 21},{name: 胶南, value: 22},{name: 南通, value: 23},{name: 拉萨, value: 24},{name: 云浮, value: 24},{name: 梅州, value: 25},{name: 文登, value: 25},{name: 上海, value: 25},{name: 攀枝花, value: 25},{name: 威海, value: 25},{name: 承德, value: 25},{name: 厦门, value: 26},{name: 汕尾, value: 26},{name: 潮州, value: 26},{name: 丹东, value: 27},{name: 太仓, value: 27},{name: 曲靖, value: 27},{name: 烟台, value: 28},{name: 福州, value: 29},{name: 瓦房店, value: 30},{name: 即墨, value: 30},{name: 抚顺, value: 31},{name: 玉溪, value: 31},{name: 张家口, value: 31},{name: 阳泉, value: 31},{name: 莱州, value: 32},{name: 湖州, value: 32},{name: 汕头, value: 32},{name: 昆山, value: 33},{name: 宁波, value: 33},{name: 湛江, value: 33},{name: 揭阳, value: 34},{name: 荣成, value: 34},{name: 连云港, value: 35},{name: 葫芦岛, value: 35},{name: 常熟, value: 36},{name: 东莞, value: 36},{name: 河源, value: 36},{name: 淮安, value: 36},{name: 泰州, value: 36},{name: 南宁, value: 37},{name: 营口, value: 37},{name: 惠州, value: 37},{name: 江阴, value: 37},{name: 蓬莱, value: 37},{name: 韶关, value: 38},{name: 嘉峪关, value: 38},{name: 广州, value: 38},{name: 延安, value: 38},{name: 太原, value: 39},{name: 清远, value: 39},{name: 中山, value: 39},{name: 昆明, value: 39},{name: 寿光, value: 40},{name: 盘锦, value: 40},{name: 长治, value: 41},{name: 深圳, value: 41},{name: 珠海, value: 42},{name: 宿迁, value: 43},{name: 咸阳, value: 43},{name: 铜川, value: 44},{name: 平度, value: 44},{name: 佛山, value: 44},{name: 海口, value: 44},{name: 江门, value: 45},{name: 章丘, value: 45},{name: 肇庆, value: 46},{name: 大连, value: 47},{name: 临汾, value: 47},{name: 吴江, value: 47},{name: 石嘴山, value: 49},{name: 沈阳, value: 50},{name: 苏州, value: 50},{name: 茂名, value: 50},{name: 嘉兴, value: 51},{name: 长春, value: 51},{name: 胶州, value: 52},{name: 银川, value: 52},{name: 张家港, value: 52},{name: 三门峡, value: 53},{name: 锦州, value: 54},{name: 南昌, value: 54},{name: 柳州, value: 54},{name: 三亚, value: 54},{name: 自贡, value: 56},{name: 吉林, value: 56},{name: 阳江, value: 57},{name: 泸州, value: 57},{name: 西宁, value: 57},{name: 宜宾, value: 58},{name: 呼和浩特, value: 58},{name: 成都, value: 58},{name: 大同, value: 58},{name: 镇江, value: 59},{name: 桂林, value: 59},{name: 张家界, value: 59},{name: 宜兴, value: 59},{name: 北海, value: 60},{name: 西安, value: 61},{name: 金坛, value: 62},{name: 东营, value: 62},{name: 牡丹江, value: 63},{name: 遵义, value: 63},{name: 绍兴, value: 63},{name: 扬州, value: 64},{name: 常州, value: 64},{name: 潍坊, value: 65},{name: 重庆, value: 66},{name: 台州, value: 67},{name: 南京, value: 67},{name: 滨州, value: 70},{name: 贵阳, value: 71},{name: 无锡, value: 71},{name: 本溪, value: 71},{name: 克拉玛依, value: 72},{name: 渭南, value: 72},{name: 马鞍山, value: 72},{name: 宝鸡, value: 72},{name: 焦作, value: 75},{name: 句容, value: 75},{name: 北京, value: 79},{name: 徐州, value: 79},{name: 衡水, value: 80},{name: 包头, value: 80},{name: 绵阳, value: 80},{name: 乌鲁木齐, value: 84},{name: 枣庄, value: 84},{name: 杭州, value: 84},{name: 淄博, value: 85},{name: 鞍山, value: 86},{name: 溧阳, value: 86},{name: 库尔勒, value: 86},{name: 安阳, value: 90},{name: 开封, value: 90},{name: 济南, value: 92},{name: 德阳, value: 93},{name: 温州, value: 95},{name: 九江, value: 96},{name: 邯郸, value: 98},{name: 临安, value: 99},{name: 兰州, value: 99},{name: 沧州, value: 100},{name: 临沂, value: 103},{name: 南充, value: 104},{name: 天津, value: 105},{name: 富阳, value: 106},{name: 泰安, value: 112},{name: 诸暨, value: 112},{name: 郑州, value: 113},{name: 哈尔滨, value: 114},{name: 聊城, value: 116},{name: 芜湖, value: 117},{name: 唐山, value: 119},{name: 平顶山, value: 119},{name: 邢台, value: 119},{name: 德州, value: 120},{name: 济宁, value: 120},{name: 荆州, value: 127},{name: 宜昌, value: 130},{name: 义乌, value: 132},{name: 丽水, value: 133},{name: 洛阳, value: 134},{name: 秦皇岛, value: 136},{name: 株洲, value: 143},{name: 石家庄, value: 147},{name: 莱芜, value: 148},{name: 常德, value: 152},{name: 保定, value: 153},{name: 湘潭, value: 154},{name: 金华, value: 157},{name: 岳阳, value: 169},{name: 长沙, value: 175},{name: 衢州, value: 177},{name: 廊坊, value: 193},{name: 菏泽, value: 194},{name: 合肥, value: 229},{name: 武汉, value: 273},{name: 大庆, value: 279}]),symbolSize: 12,label: {normal: {show: false},emphasis: {show: false}},itemStyle: {emphasis: {borderColor: #fff,borderWidth: 1}}}]};if (option typeof option object) {myChart.setOption(option, true);}/script/body
视觉映射方式的配置
visualMap 中可以指定数据的指定维度映射到对应的视觉元素上
option {visualMap: [{type: piecewisemin: 0,max: 5000,dimension: 3, // series.data 的第四个维度即 value[3]被映射seriesIndex: 4, // 对第四个系列进行映射。inRange: { // 选中范围中的视觉配置color: [blue, #121122, red], // 定义了图形颜色映射的颜色列表// 数据最小值映射到blue上// 最大值映射到red上// 其余自动线性计算。symbolSize: [30, 100] // 定义了图形尺寸的映射范围// 数据最小值映射到30上// 最大值映射到100上// 其余自动线性计算。},outOfRange: { // 选中范围外的视觉配置symbolSize: [30, 100]}},...]
};
option {visualMap: [{...,inRange: { // 选中范围中的视觉配置colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。// 本来的颜色可能是从全局色板中选取的颜色visualMap组件并不关心。symbolSize: [30, 100]},...},...]
};
ECharts 事件处理
ECharts 中我们可以通过监听用户的操作行为来回调对应的函数
ECharts 通过 on 方法来监听用户的行为例如监控用户的点击行为
ECharts 中事件分为两种类型:
用户鼠标操作点击如 click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu 事件
还有一种是用户在使用可以交互的组件后触发的行为事件例如在切换图例开关时触发的 legendselectchanged事件数据区域缩放时触发的datazoom事件等等
myChart.on(click, function (params) {// 在用户点击后控制台打印数据的名称console.log(params);
});
myChart.on(legendselectchanged, function (params) {console.log(params);
});
chart.on(click, series.line, function (params) {console.log(params);
});
chart.on(mouseover, {seriesIndex: 1, name: xx}, function (params) {console.log(params);
});
鼠标事件
ECharts 支持的鼠标事件类型包括 click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu 事件
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {xAxis: {data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 处理点击事件并且弹出数据名称myChart.on(click, function (params) {alert(params.name);});/script
/body
组件交互的行为事件
在 ECharts 中基本上所有的组件交互行为都会触发相应的事件常用的事件和事件对应参数在 events 文档中有列出
下面是监听一个图例开关的示例
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {xAxis: {data: [衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};myChart.setOption(option);myChart.on(click, function (params) {alert(params.name);});/script
/body
代码触发 ECharts 中组件的行为
上面我们只说明了用户的交互操作但有时候我们也会需要在程序里调用方法并触发图表的行为比如显示 tooltip
ECharts通过 dispatchAction({ type: }) 来触发图表行为统一管理了所有动作也可以根据需要去记录用户的行为路径
以上实例用于轮播饼图中的tooltip
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain styleheight: 100%;min-height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var app {};option null;var option {title : {text: 饼图程序调用高亮示例,x: center},tooltip: {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},legend: {orient: vertical,left: left,data: [直接访问,邮件营销,联盟广告,视频广告,搜索引擎]},series : [{name: 访问来源,type: pie,radius : 55%,center: [50%, 60%],data:[{value:335, name:直接访问},{value:310, name:邮件营销},{value:234, name:联盟广告},{value:135, name:视频广告},{value:1548, name:搜索引擎}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};app.currentIndex -1;setInterval(function () {var dataLen option.series[0].data.length;// 取消之前高亮的图形myChart.dispatchAction({type: downplay,seriesIndex: 0,dataIndex: app.currentIndex});app.currentIndex (app.currentIndex 1) % dataLen;// 高亮当前图形myChart.dispatchAction({type: highlight,seriesIndex: 0,dataIndex: app.currentIndex});// 显示 tooltipmyChart.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: app.currentIndex});}, 1000);if (option typeof option object) {myChart.setOption(option, true);}/script
/body
ECharts 旭日图
旭日图Sunburst由多层的环形图组成在数据结构上内圈是外圈的父节点。因此它既能像饼图一样表现局部和整体的占比又能像矩形树图一样表现层级关系。
ECharts 创建旭日图很简单只需要在 series 配置项中声明类型为 sunburst 即可data 数据结构以树形结构声明看下一个简单的实例
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {series: {type: sunburst,data: [{name: A,value: 10,children: [{value: 3,name: Aa}, {value: 5,name: Ab}]}, {name: B,children: [{name: Ba,value: 4}, {name: Bb,value: 2}]}, {name: C,value: 3}]}};myChart.setOption(option);/script
/body
颜色等样式调整
默认情况下会使用全局调色盘 color 分配最内层的颜色其余层则与其父元素同色
在旭日图中扇形块的颜色有以下三种设置方式 在 series.data.itemStyle 中设置每个扇形块的样式 在 series.levels.itemStyle 中设置每一层的样式 在 series.itemStyle 中设置整个旭日图的样式
上述三者的优先级是从高到低的也就是说配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置
下面我们将整体的颜色设为灰色 #aaa将最内层的颜色设为蓝色 blue将 Aa、B 这两块设为红色 red
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var option {series: {type: sunburst,data: [{name: A,value: 10,children: [{value: 3,name: Aa,itemStyle: {color: red}}, {value: 5,name: Ab}]}, {name: B,children: [{name: Ba,value: 4}, {name: Bb,value: 2}],itemStyle: {color: red}}, {name: C,value: 3}],itemStyle: {color: #aaa},levels: [{// 留给数据下钻的节点属性}, {itemStyle: {color: blue}}]}};myChart.setOption(option);/script
/body
数据下钻
旭日图默认支持数据下钻也就是说当点击了扇形块之后将以该扇形块的数据作为根节点进一步显示该数据的细节
在数据下钻后图形的中间会出现一个用于返回上一层的图形该图形的样式可以通过 levels[0] 配置
script srchttps://cdn.staticfile.net/echarts/4.3.0/echarts.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascriptvar myChart echarts.init(document.getElementById(main));var data [{name: Grandpa,children: [{name: Uncle Leo,value: 15,children: [{name: Cousin Jack,value: 2}, {name: Cousin Mary,value: 5,children: [{name: Jackson,value: 2}]}, {name: Cousin Ben,value: 4}]}, {name: Father,value: 10,children: [{name: Me,value: 5}, {name: Brother Peter,value: 1}]}]}, {name: Nancy,children: [{name: Uncle Nike,children: [{name: Cousin Betty,value: 1}, {name: Cousin Jenny,value: 2}]}]}];option {series: {type: sunburst,// highlightPolicy: ancestor,data: data,radius: [0, 90%],label: {rotate: radial}}};myChart.setOption(option);/script
/body
高亮相关扇形块
旭日图支持鼠标移动到某扇形块时高亮相关数据块的操作可以通过设置 highlightPolicy包括以下几种高亮方式 descendant默认值高亮鼠标移动所在扇形块与其后代元素 ancestor高亮鼠标所在扇形块与其祖先元素 self仅高亮鼠标所在扇形块 none不会淡化downplay其他元素
https://www.runoob.com/echarts/echarts-sunburst.html Ajax 简介 AJAX Asynchronous JavaScript and XML异步的 JavaScript 和 XML AJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术 Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据 伪造Ajax - iframe标签 !DOCTYPE html
htmlhead langenmeta charsetUTF-8titlekuangshen/title/headbodyscript typetext/javascriptwindow.onload function(){var myDate new Date();document.getElementById(currentTime).innerText myDate.getTime();};function LoadPage(){var targetUrl document.getElementById(url).value;console.log(targetUrl);document.getElementById(iframePosition).src targetUrl;}/scriptdivp请输入要加载的地址:span idcurrentTime/span/ppinput idurl typetext valuehttps://www.baidu.com//input typebutton value提交 οnclickLoadPage()/p/divdivh3加载页面位置:/h3iframe idiframePosition stylewidth: 100%;height: 500px;/iframe/div/body
/html
利用AJAX可以做: 注册时输入用户名自动检测用户是否已经存在 登陆时提示用户名密码错误 删除数据行时将行ID发送到后台后台在数据库中删除数据库删除成功后在页面DOM中将数据行也删除
jQuery.ajax code.jquery.com/jquery-3.7.1.js 也可直接在jQuery官网下载最小的版本 通过 jQuery AJAX 方法您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中 jQuery Ajax本质就是 XMLHttpRequest对他进行了封装方便调用
jQuery.get(...)
/* 参数
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数
- dataType: 返回内容格式, xml, json, script, text, html */
jQuery.post(...)
/* 参数
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数
- dataType: 返回内容格式, xml, json, script, text, html */
jQuery.getJSON(...)
/* 参数
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数 */
jQuery.getScript(...)
/* 参数
- url: 待载入页面的URL地址
- data: 待发送 key/value 参数
- success: 载入成功时回调函数 */
jQuery.ajax(...)
/* 参数(了解)
- url: 请求地址
- type: 请求方式GET、POST1.9.0之后用method
- headers: 请求头
- data: 要发送的数据
- contentType: 即将发送信息至服务器的内容编码类型(默认: application/x-www-form-urlencoded; charsetUTF-8)
- async: 是否异步
- timeout: 设置请求超时时间毫秒
- beforeSend: 发送请求前执行的函数(全局)
- complete: 完成之后执行的回调函数(全局)
- success: 成功之后执行的回调函数(全局)
- error: 失败之后执行的回调函数(全局)
- accepts: 通过请求头发送给服务器告诉服务器当前客户端可接受的数据类型
- dataType: 将服务器端返回的数据转换成指定类型
- xml: 将服务器端返回的内容转换成xml格式
- text: 将服务器端返回的内容转换成普通文本格式
- html: 将服务器端返回的内容转换成普通文本格式在插入DOM中时如果包含JavaScript标签则会尝试去执行。
- script: 尝试将返回值当作JavaScript去执行然后再将服务器端返回的内容转换成普通文本格式
- json: 将服务器端返回的内容转换成相应的JavaScript对象
- jsonp: JSONP 格式使用 JSONP 形式调用函数时如 myurl?callback? jQuery 将自动替换 ? 为正确的函数名以执行回调函数 */
我们来个简单的测试使用最原始的HttpServletResponse处理 , .最简单 , 最通用
1、配置web.xml 和 springmvc的配置文件复制上面案例的即可 【记得静态资源过滤和注解驱动配置上】
?xml version1.0 encodingUTF-8?
beans xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexmlns:contexthttp://www.springframework.org/schema/contextxmlns:mvchttp://www.springframework.org/schema/mvcxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttps://www.springframework.org/schema/mvc/spring-mvc.xsd
!-- 自动扫描指定的包下面所有注解类交给IOC容器管理 --context:component-scan base-packagecom.kuang.controller/mvc:default-servlet-handler /mvc:annotation-driven /
!-- 视图解析器 --bean classorg.springframework.web.servlet.view.InternalResourceViewResolveridinternalResourceViewResolver!-- 前缀 --property nameprefix value/WEB-INF/jsp/ /!-- 后缀 --property namesuffix value.jsp //bean
/beans
2、编写一个AjaxController
Controller
public class AjaxController {RequestMapping(/a1)public void ajax1(String name , HttpServletResponse response) throws IOException {if (admin.equals(name)){response.getWriter().print(true);}else{response.getWriter().print(false);}}
}
3、导入jquery 可以使用在线的CDN 也可以下载导入
script srchttps://code.jquery.com/jquery-3.1.1.min.js/script
script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/script
4、编写index.jsp测试
% page contentTypetext/html;charsetUTF-8 languagejava %htmlheadtitle$Title$/title%--script srchttps://code.jquery.com/jquery-3.1.1.min.js/script--%script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscriptfunction a1(){$.post({url:${pageContext.request.contextPath}/a1,data:{name:$(#txtName).val()},success:function (data,status) {alert(data);alert(status);}});}/script/headbody%--onblur:失去焦点触发事件--%用户名:input typetext idtxtName οnblura1()//body/html
5、启动tomcat测试打开浏览器的控制台当我们鼠标离开输入框的时候可以看到发出了一个ajax的请求是后台返回给我们的结果测试成功
Springmvc实现
实体类user
Data
AllArgsConstructor
NoArgsConstructor
public class User {private String name;private int age;private String sex;
}
我们来获取一个集合对象展示到前端页面
RequestMapping(/a2)
public ListUser ajax2(){ListUser list new ArrayListUser();list.add(new User(秦疆1号,3,男));list.add(new User(秦疆2号,3,男));list.add(new User(秦疆3号,3,男));return list; //由于RestController注解将list转成json格式返回
}
前端页面
% page contentTypetext/html;charsetUTF-8 languagejava %htmlheadtitleTitle/title/headbodyinput typebutton idbtn value获取数据/table width80% aligncentertrtd姓名/tdtd年龄/tdtd性别/td/trtbody idcontent/tbody/tablescript src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscript$(function () {$(#btn).click(function () {$.post(${pageContext.request.contextPath}/a2,function (data) {console.log(data)var html;for (var i 0; i data.length ; i) {html tr td data[i].name /td td data[i].age /td td data[i].sex /td /tr}$(#content).html(html);});})})/script/body/html
成功实现了数据回显可以体会一下Ajax的好处 注册提示效果 我们再测试一个小Demo思考一下我们平时注册时候输入框后面的实时提示怎么做到的如何优化
我们写一个Controller
RequestMapping(/a3)
public String ajax3(String name,String pwd){String msg ;//模拟数据库中存在数据if (name!null){if (admin.equals(name)){msg OK;}else {msg 用户名输入错误;}}if (pwd!null){if (123456.equals(pwd)){msg OK;}else {msg 密码输入有误;}}return msg; //由于RestController注解将msg转成json格式返回
}
前端页面 login.jsp
% page contentTypetext/html;charsetUTF-8 languagejava %htmlheadtitleajax/titlescript src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscriptfunction a1(){$.post({url:${pageContext.request.contextPath}/a3,data:{name:$(#name).val()},success:function (data) {if (data.toString()OK){$(#userInfo).css(color,green);}else {$(#userInfo).css(color,red);}$(#userInfo).html(data);}});}function a2(){$.post({url:${pageContext.request.contextPath}/a3,data:{pwd:$(#pwd).val()},success:function (data) {if (data.toString()OK){$(#pwdInfo).css(color,green);}else {$(#pwdInfo).css(color,red);}$(#pwdInfo).html(data);}});}/script/headbodyp用户名:input typetext idname οnblura1()/span iduserInfo/span/pp密码:input typetext idpwd οnblura2()/span idpwdInfo/span/p/body/html
【记得处理json乱码问题】
测试一下效果动态请求响应局部刷新就是如此 获取baidu接口Demo !DOCTYPE HTML
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8titleJSONP百度搜索/titlestyle#q{width: 500px;height: 30px;border:1px solid #ddd;line-height: 30px;display: block;margin: 0 auto;padding: 0 10px;font-size: 14px;}#ul{width: 520px;list-style: none;margin: 0 auto;padding: 0;border:1px solid #ddd;margin-top: -1px;display: none;}#ul li{line-height: 30px;padding: 0 10px;}#ul li:hover{background-color: #f60;color: #fff;}/stylescript// 2.步骤二// 定义demo函数 (分析接口、数据)function demo(data){var Ul document.getElementById(ul);var html ;// 如果搜索数据存在 把内容添加进去if (data.s.length) {// 隐藏掉的ul显示出来Ul.style.display block;// 搜索到的数据循环追加到li里for(var i 0;idata.s.length;i){html lidata.s[i]/li;}// 循环的li写入ulUl.innerHTML html;}}// 1.步骤一window.onload function(){// 获取输入框和ulvar Q document.getElementById(q);var Ul document.getElementById(ul);// 事件鼠标抬起时候Q.onkeyup function(){// 如果输入框不等于空if (this.value ! ) {// ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆// 创建标签var script document.createElement(script);//给定要跨域的地址 赋值给src//这里是要请求的跨域的地址 我写的是百度搜索的跨域地址script.src https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wdthis.valuecbdemo;// 将组合好的带src的script标签追加到body里document.body.appendChild(script);}}}/script/headbodyinput typetext idq /ul idul/ul/body
/html
