前端+js知识点总结

最新推荐文章于 2022-04-11 09:19:49 发布

洁洁儿

最新推荐文章于 2022-04-11 09:19:49 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/Xiayuyuren_Study/article/details/84886561

版权

1、js 中查看是数据中是否存在某元素：

var a = [1,2,3]
if ( a.indexOf(1) !=-1) {
	console.log(‘something’)
}

2、js正则，判断ip

var reg='/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/';
var res=reg.test(ip)
if(res){
  ...
}
else{
...
}

3、jquery 删除cookie

（1）安装 jquery-cookie.js 插件

（2）删除cookie $.cookie("name",null)

4、dataTable插件

dataTable动态插入行

var table = $('#example').DataTable();
 
table.row.add( {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
         null:       "5421"
    } ).draw();

或者
 
table.row.add( [ 'Fiona White', 32, 'Edinburgh' ] )
    .draw();

Add a row and get its newly created node to highlight that it was newly added:

var table = $('#example').DataTable();
 
var rowNode = table
    .row.add( [ 'Fiona White', 32, 'Edinburgh' ] )
    .draw()
    .node();
 
$( rowNode )
    .css( 'color', 'red' )
    .animate( { color: 'black' } );

dataTable插件渲染标红

            "sAjaxSource": "../dzxswebservice/OrderInfoService.ashx?action=getOrderInfo",
            "createdRow": function (row, data, dataIndex) {
                if (data.ORDER_STATUS == "未接单") {
                    for (var i = 0; i < 9; i++) {
                        $('td', row).eq(i).css('font-weight', "bold").css("color", "red");
                    }
                }
            }

JQuery Datatables 之参数配置详解，参考博客

 sDom 
  * 默认值为lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 
  * 该初始化属性用来指定你想把各种控制组件注入到dom节点的位置（比如你想把分页组件放到表格的顶部） 
  * DIV元素（带或者不带自定的class）可以添加目标样式，下列语法被使用 
  *  可供使用的选项 
  *      ‘l‘ - 长度改变 
  *      ‘f‘ - 过滤输入 
  *      ‘t‘ - 表格 
  *      ‘i‘ - 信息 
  *      ‘p‘ - 分页 
  *      ‘r‘ - 处理 
  *  可供使用的常量 
  *      ‘H‘ - jQueryUI theme "header" classes(‘fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix‘) 
  *      ‘F‘ - jQueryUI theme "footer" classes (‘fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix‘) 
  *  需要的语法 
  *      ‘<‘ 和 ‘>‘ - div元素 
  *      ‘<"class" and ‘>‘ - 带有class属性的div元素 
  *      ‘<"#id" and ‘>‘ - 带有id属性的div元素 
  *  例子 
  *      ‘<"wrapper"flipt>‘ 
  *      ‘<lf<t>ip>‘ 
  */  
 $(document).ready(function(){  
   $(‘#example‘).dataTable( {  
     "sDom": ‘<"top"i>rt<"bottom"flp><"clear"&lgt;‘  
   });  
 });

5、JS正则表达式

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script>
        var result = (new RegExp("/^[\u4e00-\u9fa5]$/")).test("所");
        console.log(result);
    </script>
</head>
<body>
</body>
</html>

或者
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script>
        var re=/^[\u4e00-\u9fa5]$/
        var result = re.test("所");
        console.log(result);
    </script>
</head>
<body>
</body>
</html>

6、datatimerangepicker配置

datetimerangepicker配置及默认时间段展示：参考博客（https://www.cnblogs.com/beileixinqing/p/7794190.html）
使用datetimepicker时，如何显示和选择小时、分钟呢？

（1）html的代码：

 <input type="datetime" value="{{ start_time }}" name="start_time" id="start_time_picker" class="datetimepicker" readonly>

（2）javascript的代码：其中，”format”表示时间的格式：year month day hour min second;
“minView”设置为0，表示可以选择小时和分钟，其他值有1,2,3,4.读者可以根据需要使用；
“minuteStep”是选择分钟时显示的时间间隔，此处设置为1分钟；

$('.datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    autoclose: true,
    minView: 0,
    minuteStep:1
});

datetimepicker选择日期后事件

window.onload=function(){
        $('#daotime').datetimepicker({
                    language:  'zh-CN',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 0,
                    forceParse: 0,
                    format:'yyyy-mm-dd hh:ii:ss',
        }).on('changeDate',function(ev){
            var  time=$("#daotime").val();
            var  recently=$("#recently").val();
            if(recently!=''&&time!=''){
                if(time.split(" ")[0]===recently.split(" ")[0]){
                    return confirm("该学生在所选择当天已登记诺访，是否继续操作？");
                }
            }
        }); 
    }

7、jquery无刷新添加和删除input输入框增加减少input框

8、Echarts饼状图默认显示lable

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('graph-donut'));

// 指定图表的配置项和数据
option = {  
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '75%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '5',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问', label: {show: true , fontSize: '8',  fontWeight: 'bold'}},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'}
                
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

9、bootstrap-multiselect样式修改

10、设置选中值后，需要刷新select控件：$("#sceneIdSelectBox").multiselect('refresh');

洁洁儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端+js知识点总结

1、js 中查看是数据中是否存在某元素：var a = [1,2,3]if ( a.indexOf(1) !=-1) { console.log(‘something’)}2、js正则，判断ipvar reg='/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(...
复制链接

扫一扫