一、有关鼠标的知识点
1. 将鼠标的光标定位到某个文本框中
$("#文本框ID").focus();
2.鼠标放上去呈现手的形状
cursor: pointer;
3.判断鼠标左击还是右击
canvas.onmousedown = function(e) { if (e.button == 0) { alert("您点击了鼠标左键!"); } else if (e.button == 2) { alert("您点击了鼠标右键!") } }
4.禁止选中文本内容
onselectstart="return false"
5.禁止拖动元素
οndragstart="return false"
二、有关滚动条的知识点
1.滚动条设置
父容器：overflow: hidden;height: 200px;
子容器：overflow-y: scroll;或 overflow-y: auto !important;
2.每次打开弹窗，滚动条置顶
$("#弹窗位置")[0].scrollTop = 0;
3.获取滚动条高度和宽度
//获取竖向滚动条到顶部的距离 $(document).scrollTop(); //获取横向滚动条到最左侧的距离 $(document).scrollLeft() //获取滚动条宽度 function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;"; noScroll = document.body.appendChild(oDiv).clientWidth; oDiv.style.overflowY = "scroll"; scroll = oDiv.clientWidth; document.body.removeChild(oDiv); return noScroll-scroll; }
三、有关css样式的知识点
1.a标签去掉下划线
a{text-decoration:none}
2.文字在div里面垂直居中
vertical-align: middle;
3.css字体超出部分用省略号表示
1. 使用overflow: hidden; 把超出的内容进行隐藏
2. 然后使用white-space: nowrap; 设置内容不换行
3. 最后使用text-overflow: ellipsis; 设置超出内容为省略号
4.隐藏/展示某个模块
$("#button-batch-delete").removeClass("hidden"); $("#button-batch-delete").addClass("hidden"); 或者 $("#button-batch-delete").show(); $("#button-batch-delete").hide();
5.让span在div中垂直居中
<div style='display: inline-grid;text-align: center;float: left;'> <span class='kssj'></span> <span>至</span> <span class='jssj'></span> <div>
6.CSS里面的>
A > B 表示选择A元素的所有子B元素
A B选择A元素的所有后代B元素，
所以，> 表示只选择一代
7.设置高度
$("#").css("height", "100%");
8.背景图片设置
background: url("../../icons/abbs-slide-left-normal.png") no-repeat;
或者
background-image: url("../../icons/abbs-slide-left-hover.png");
或者
$(“位置”).css("background-image","url(on.jpg)");
9.图片块级变行级
html
<div class='guide-img-container'> <image class='guide-img' src='../../images/iii.png'></image> </div>
css
.guide-img-container{ display:flex; justify-content: center; } .guide-img{ width: 60px; height: 60px; }
10.父元素根据子元素的高度自适应
四、有关时间的知识点
1.JS实现间隔一段时间之后执行当前代码
setTimeout(function() { refreshAllTrees(); }, 2500);
2.JS实现间隔一段时间之后执行下一段代码
function sleep(delay) { var start = (new Date()).getTime(); while ((new Date()).getTime() - start < delay) { continue; } }
五、处理对象的知识点
1. 关于span里面内容的获取与赋值
$('#word').text(place);
2.关于var self = this
在全局对象中，this指向的是window对象；
在自定义函数中，this对象指向的是调用这个函数的对象;
3.关于表格单元格的获取
.data-list .table-head:nth-child(1) .data-list tbody tr td:nth-child(1)
其中，小括号里面的数字表示第几列，从1开始。
4.JSON.parse()与JSON.stringify()
JSON.stringify()，将JSON对象转换为JSON类型的字符串
JSON.parse()，将JSON类型的字符串转换为JSON对象
4.1 使用JSON.parse()
var data='{"name":"Peter"}'
JSON.parse(data)
结果：name:"Peter"
4.2 使用JSON.stringify(data)
JSON.stringify(data)结果：'{"name":"Peter"}'
5.截取字符串
str=str.substring(0,i) 0是开始下标，i是结束下标，不包括i
6.对数组中的对象进行排序
1. list.sort(function (a,b) { 2. return a.JHYF < b.JHYF; 3. })
7.获取同级元素
$("#id").next();相邻下一个同级元素 $("#id").prev();相邻上一个同级元素 $("#id").siblings();所有同级元素 举例： $($(this).siblings().children(".device-content").children("span")).removeClass("selected-mt");
8.字符串替换
var aTime = a.addTime.replace(/:/g, "").replace(/-/g, "").replace(/[ ]/g,"");
上面是把2000-01-01 17:08:53中的所有非数字去掉
9.对象不支持“getElementsByClassName”属性或方法
if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element){ var children = (element || document).getElementsByTagName('*'); var elements = new Array(); for (var i=0; i<children.length; i++){ var child = children[i]; var classNames = child.className.split(' '); for (var j=0; j<classNames.length; j++){ if (classNames[j] == className){ elements.push(child); break; } } } return elements; }; } var seled = document.getElementsByClassName('seled');
10.返回数组中指定元素的索引值
$.inArray(“3“，["2", "1", "3"]); //返回值为2
11.复选框选择
$("复选框位置").prop('checked',true);
