关于前端页面播放音频
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<audio autoplay="autoplay" id="auto" src=""></audio>
<button onclick="fn()">播放声音</button>
<script>
function fn() {
$("#auto").attr("src", "./default.mp3");
}
</script>
</body>
</html>
关于前端页面播放音频：方案2
<audio src="{{ layui.setter.base }}style/res/default.mp3" id="video" ref="video"></audio>
document.getElementById("video").play();
jQuery中$ $() $(document)三个的区别
$是jquery专用的特殊符号，可以说所有jquery函数的调用都是从$开始的
$()在jquery里面表示一个选择器，括号里面填写一定的表达式就可以选中你想要的元素，jquery的选择器除了能很好地遵循css的表达式外，还额外提供了一些更个性化的选择方式，比如$("div li:nth-child(2)")选中的是div中的第2个li元素。
关于选择器的更多用法可以百度一下jquery的api
$(document)是一个选择器，选中的是整个html所有元素的集合。
$(function(){..})等于$(document).ready(function(){})事件，即在页面所有元素准备完毕之后，载入页面之前执行本方法
$().click()和$(document).on('click','要选择的元素',function(){})的不同
1. $(选择器).click(fn)
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器;
2.$(document).on('click','要选择的元素',function(){})
on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数
$().on()的知识点补充：
1.从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
$().delegate()是更精确的小范围的使用事件代理。
$().on()结合了这三个方法的优势摒弃了劣势。
2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
3. 阻止事件冒泡和事件委托的方法：
A：return false。
在事件的处理中，可以阻止默认事件和冒泡事件。
B：event.preventDefault()
在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。
C：event.stopPropagation().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
自定义过滤器
1). 理解
对需要显示的数据进行格式化后再显示
2). 编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_过滤器</title>
</head>
<body>
<!--
1. 理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>{{time}}</p>
<p>最完整的: {{time | dateString}}</p>
<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
// 定义过滤器
Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
return moment(value).format(format);
//return moment(value).format(format | | 'YYYY-MM-DD HH:mm:ss');
})
new Vue({
el: '#test',
data: {
time: new Date()
},
mounted () {
setInterval(() => {
this.time = new Date()
}, 1000)
}
})
</script>
</body>
</html>
