1.将数组转化为json格式:
JSON.stringify(exam_info_arr)
2.layui下拉选框多选
<
div
class=
"lab"
>
填报方向
<
div
class=
"layui-input-block"
style=
"
display
:
inline-block
;
position
:
absolute
;
left
:
0
;
width
:
85
%
"
>
<
select
name=
"first"
id=
"first"
multiple
lay-verify=
""
>
<
option
value=
""
>
请选择填报方向(可多选)
</
option
>
<
option
value=
"美术类"
>
美术类
</
option
>
<
option
value=
"声乐类"
>
声乐类
</
option
>
</
select
>
</
div
>
</
div
>
layui.use([
'form'
,
'layer'
],
function
() {
var
form = layui.form;
var
layer = parent.layer === undefined ? layui.layer : parent.layer;
form.render();
});
3.html页面加判断
<a href="javascript:void(0)" class="{adcdeal_suc == -1?'active':''}">
4.刷新页面
document.location.reload();
5.跳转页面
function look_details_homework(setting_id) {
window.location.href="/index/index/homework_history/setting_id/"+setting_id;
}
6.循环表格中的某一列
$(".slider_status_name").each(function(){
if($(this).text()=="隐藏"){
$(this).css("color","#F7B824");
}else{
$(this).css("color","#5FB878");
}
});
7.
function loadXMLDoc
{
src ='';
var http = new XMLHttpRequest();
http.open("GET", src ,true);//false为同步
http.send();
}
8.layer弹窗,点击取消/关闭,刷新父页面
$('#exam_add_close').on('click',function(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
9.微信小程序点击按钮分享
<button open-type='share'>转发</button>
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
success: function (res) {
console.log("转发成功!")
},
fail: function (res) {
// 转发失败
}
}
}
10.jq控制audio
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body> 音乐
</audio>
<span id="bf" οnclick="bf();">播放/暂停</span>
<span id="bf" οnclick="rbf();">重新播放</span>
<script>
function rbf(){
var audio = document.getElementById('music1');
audio.currentTime = 0;
}
function bf(){
var audio = document.getElementById('music1');
if(audio!==null){
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
alert(audio.paused);
if(audio.paused) {
audio.play();//audio.play();// 这个就是播放
}else{
audio.pause();// 这个就是暂停
}
}
}
</script>
</body>
</html>
11.ajax标准格式:
$.ajax({
type: 'POST',
url: '',------------------(接口地址)
dataType: 'json',
data: {
(向后台传的数据)
},
error: function () {
layer.msg('网络错误,请稍后再试!');-------------------(前台错误)
},
success: function (data) {
if (data.ret == 200) {
$("table tbody").html("");
ready();
} else {
layer.msg(data.msg);
}
}
})
12.改变div的样式,如果改变多个css样式
$("...").css({"..":"..","..",".."})
$(".layui-layer-btn").css({"border-color":"#ee5b47","background-color":"#ee5b47"});
13.js如何解析时间戳
var date = new Date(时间戳); //获取一个时间对象 注意:如果是uinx时间戳记得乘于1000。比如php函数time()获得的时间戳就要乘于1000
/*----------下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了----------*/
date.getFullYear();//获取完整的年份(4位,1970)
date.getMonth();//获取月份(0-11,0代表1月,用的时候记得加上1)------注意月份比实际小1
date.getDate();//获取日(1-31)
date.getTime();//获取时间(从1970.1.1开始的毫秒数)
date.getHours();//获取小时数(0-23)
date.getMinutes();//获取分钟数(0-59)
date.getSeconds();//获取秒数(0-59)
14.datatables是一种非常强大的表格前端软件
datatable自带分页及关键字搜索、排序
必须加: $(document).ready(function () {
$('.dataTables-example').dataTable({
"aaSorting": [[ 4,"asc" ]
});
});
需要引入
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/font-awesome.min.css"/>
<linkrel="stylesheet"type="text/css"href="__PUBLIC__/bootstrap/css/plugins/dataTables/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/bootstrap/css/style.min.css"/>
<script src="__PUBLIC__/bootstrap/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/bootstrap/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="__PUBLIC__/bootstrap/js/plugins/dataTables/dataTables.bootstrap.js"></script>
15.普通表格排序(根据json数据的其中一个字段排序)
var slider = data.data.slider;(slider为数组名称)
slider.sort(function (a, b) {
return a.slider_sort - b.slider_sort;
});
排序完再向页面插入数据
16.jq向页面动态循环插入数据
var tr="......";(在循环里面加)
var tr = "";
tr +=".....";
$("..").append(tr);(在循环外面加)
17.jq查找当前点击的父级元素、同级元素、等等
var localId = $(obj).siblings("div"); (同级)
$(obj).parent("td").parent("tr"); (父级)
18.给一个元素添加onclick事件,以及移除onclick事件
$("#upload_audio").removeAttr("onclick");
$("#upload_audio").attr("onclick", "stop()";
19.layer弹出层改变样式,需要在js的后面加,因为layer是js动态加入的
$(".layui-layer-btn .layui-layer-btn0").css({"border-color":"#009688","background-color":"#009688"});
20.去掉a标签点击时的阴影效果
a{
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
21.layui富文本框
<
div
class=
"layui-form-item"
>
<
label
class=
"layui-form-label"
>
广告详情页
</
label
>
<
div
class=
"layui-input-block"
>
<
textarea
class=
"layui-textarea"
id=
"packet_addetail"
></
textarea
>
</
div
>
</
div
>
var
layedit
=
""
;
var
packet_addetail
=
""
;
var
index
=
""
;
layui
.
use
(
'layedit'
,
function
() {
layedit
=
layui
.
layedit
;
layedit
.
set
({
uploadImage
: {
url
:
'/admin/packet/packet_addetail_upload'
//接口url
,
type
:
'post'
//默认post(但必须写)
}
});
index
=
layedit
.
build
(
'packet_addetail'
, {
height
:
200
//设置编辑器高度
});
});
packet_addetail
=
layedit
.
getContent
(
index
);//获取富文本框里的信息
22.jq一个函数反复调用
function
runAll
() {
var
packet_sum
=
$
(
"#packet_sum"
).
val
();
var
packet_value
=
$
(
"#packet_value"
).
val
();
$
(
"#packet_money"
).
val
(
packet_sum
*
packet_value
);
}
setInterval
(
runAll
,
100
);
23.动态获取表单输入的值
(layui表单的监听)
layui
.
use
(
'form'
,
function
() {
var
form
=
layui
.
form
;
form
.
render
();
form
.
on
(
'select(permission)'
,
function
(data)
{
//表单监听事件(前提设置了lay-filter="permission"属性)
permission
= data.
value
;
console
.
log
(data.
value
);
//得到被选中的值
if
(
permission
==
3
) {
$
(
".
information
"
).
css
(
"display"
,
"block"
);
}
else
{
$
(
".
information
"
).
css
(
"display"
,
"none"
);
}
});
});
24.tab切换
// 评论/咨询的切换
$(
".tab_ul li"
).click(
function
() {
$(
this
).addClass(
"active"
).siblings().removeClass(
"active"
);
var
index=$(
this
).index();
console.log(index);
$(
".tab_box > div"
).eq(index).show().siblings(
".tab_box > div"
).hide();
$(
".tab_num"
).eq(index).show().siblings(
".tab_num"
).hide();
});
//css样式
.
tab_ul
{
list-style
:
none
;
border-bottom
:
1
px solid
#DDDDDD
;
}
.
tab_ul li
{
display
:
inline-block
;
color
:
#353533
;
font-size
:
24
px
;
line-height
:
41
px
;
padding-bottom
:
4
px
;
cursor
:
pointer
;
margin-right
:
20
px
;
border-bottom
:
3
px solid
#ffffff
;
}
.
tab_ul li
:
last-child
{
border-left
:
1
px solid
#DDDDDD
;
padding-left
:
10
px
;
}
.
persion_num
{
display
:
inline-block
;
float
:
right
;
}
.
persion_num
.
tab_num
{
display
:
none
;
}
.
persion_num
.
tab_num
:
first-child
{
display
:
block
;
}
.
questionDiv
.
tab_box
>
div
{
display
:
none
;
}
.
questionDiv
.
tab_box
>
div
:
first-child
{
display
:
block
;
}
.
tab_ul li
.
active
{
color
:
#e60012
;
border-bottom
:
3
px solid
#e60012
;
}