前端技术资料经验总结

技术资料经验总结

资料地址搜集

//1,highcharts画图地址  https://www.highcharts.com.cn/demo/highcharts/renderer/grid-light

1，jq判断是select还是input

if( jquery对象.is("input") ){
   
 
    alert('input');
 
}else if( jquery对象.is("select") ){
   
 
    alert('select');
 
}

2，jQuery与DOM对象互转

var element= $(text).get(0);//element就是一个dom对象
//或$(text)[0]
var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

3，.html()获取到的还是一个字符串

var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"
               + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"
               + "</div>";
console.log(typeof($(text).html()));//此时打印出来的还是字符串string类型

4，原生获取子节点

document.body.childNodes;//此时得到的是body下所有子节点的数组集合！！

5，jq用find或者children获取子元素

$("ul").children("li");
$("ul").find("li");

6，js字符串转对象

 function parseDom(arg) {
   
　　 var objE = document.createElement("div");
　　 objE.innerHTML = arg;
　　 return objE.childNodes;
};
var obj=parseDom('<div id="div_1" class="div1">Hello World!</div>');
var obj=parseDom('<div id="div_1" class="div1">Hello World!</div><span>多个也没关系</span>');

7，JSON字符串和对象互转

// 字符串转化为 对象
    var jsonString = '[{"name":"天鸽"},{"name":"梅花"},{"name":"台风"}]';
    // console.log(JSON.parse(jsonString));
    var jsArr = JSON.parse(jsonString);
    jsArr.push({
   "name":"帕卡"});
    console.log(jsArr);

// 把js对象 数组 转化为 JSON格式的字符串
    var result = JSON.stringify(jsArr);
    console.log(result);

8，input属性选择器的写法

$("input[id='supi']")

9，jq中禁用和只读的使用

//禁用
$('#smfSelForm').find('input').prop('disabled',true);//禁用
$('#smfSelForm').find('input').prop('disabled',false);//取消禁用

//只读
$('.dataContent .row-content').find('input[id="supi"]').attr('readonly','readonly');
$('.dataContent .row-content').find('input[id="supi"]').removeAttr('readonly');
//注；attr只有一个参数时是取属性值

10，select标签如何获取当前选中的option值

通过change事件中的event.target.selectedIndex来拿

11，bootatrap-datetimepicker的使用和取值

1，引入文件

<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

2，html写法：

<style>
      .start-time{
   
          position:relative;
      } 
.start-time button{
   
    background:#fff;
    border:none;
    position:absolute;
    top:4px;
    right:12px;
}
 </style>
<form id="getTime">
    <label for="create-startTime" class="control-label">Ordering In StartTime</label>
    <div class="input-group date start-time form_datetime" data-link-field="creat-startTime">
      <input type="text" class="form-control" type="text"> 
        <button type="button" class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>    
        </button>
    </div>
</form>

3，js写法

$(document).ready(funnction(){
   
      $('.form_datetime').datetimepicker({
   
    		language:'en',
    		weekStart:1,
    		format:"yyyy-mm-dd hh:ii:ss",
    		todayBtn:1,
    		clearBtn:1,
    		autoclose:1,
    		todayHightlight:1,
    		startView:2,
    		initialDate:new Date(),
    		forceParse:0,
    		showMeridian:1
       }).on('changeDate',function(ev){
   console.log(ev);})
 })

12,select中placeholder的设置

直接给第一个option加一个hidden就行了$红色字$$红色字$

13，dom对象字符串互转

//dom字符串转对象
function parseDom(str) {
   
    var obj = document.createElement("div");
    obj.innerHTML = str;
    return obj.childNodes;
};
const dom = parseDom('<div>这是一个dom字符串</div>')

//dom对象转字符串
  function nodeToString ( node ) {
     
    //createElement()返回一个Element对象
   var tmpNode = document.createElement( "div" ); 
   //appendChild()  参数Node对象   返回Node对象  Element方法
   //cloneNode()  参数布尔类型  返回Node对象   Element方法
   tmpNode.appendChild( node.cloneNode( true ) );  
   var str = tmpNode.innerHTML;  
   tmpNode = node = null; // prevent memory leaks in IE  
   return str;  
  } 

14，文字换行设置

//不定位情况下
span{
   
    display: block;
    overflow-wrap: break-word;
}
//定位情况下,要有固定宽度才能实现换行
span{
   
    position:absolute;
    white-space:pre-wrap;
    word-wrap:break-word;
    width:36%;
}

15 匹配字母数字下划线的正则和不是字母数字下划线的正则

1.由数字、26个英文字母或者下划线组成的字符串:
    ^[0-9a-zA-Z_]{
   1,}$
2，匹配不是字母数字下划线的字符
'$a$a$'.replace(/[^0-9a-zA-Z_]$/g, '')  //这种如果用户输着输着在往回输就不生效了
'$a$a$'.replace(/[^0-9a-zA-Z_]+/g, '')  //这种就不会出现上面这种情况
                  
 //例如
 $('.number-word-_').keyup(function(){
   
     let value&#