驼峰命名
驼峰命名式分为大驼峰和小驼峰
大驼峰样式：TypesOfFish
小驼峰样式：typesOfFish
title属性
title归档关于元素的额外信息，鼠标放上出会出现提示性文本
拖放
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>
设置元素为可拖放：<img draggable="true" />
**拖动什么- **
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。
放到何处 - ondragover
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的event.preventDefault() 方法：
function allowDrop(ev)
{
ev.preventDefault();
}
进行放置 - ondrop
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
preventDefault()阻止默认事件（drop的默认行为是以链接的形式打开）
dataTransfer.getData(“Text”)获得被拖的数据，该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目标元素）中
var test=new Boolean()；
对象 无初始值 或者其值为 **0、-0、null、""、false、undefined 或者 NaN，**那么对象的值为 false
除了上面几个，其它值都为 true（即使值为字符串 “false” ）
每条选择器最多只能出现一个伪元素
实现表单子增加以及字符串匹配
<body>
<div id="box">
<input type="text" id="input" onkeyup="add()">
<div id="textBox">
</div>
</div>
</body>
<script>
//find();
var input = document.getElementById("input");
var textBox = document.getElementById("textBox");
var odivs = document.getElementsByClassName("odiv");
//添加列表项
function add() {
if (event.keyCode == 13) {
console.log("回车");
console.log(input.value);
//创建子元素
var odiv = document.createElement("div");
var op = document.createElement("p");
var ospan = document.createElement("span");
//为p标签添加值
op.innerHTML = input.value;
ospan.innerHTML = "×";
odiv.appendChild(op);
odiv.appendChild(ospan);
odiv.className = "odiv";
textBox.appendChild(odiv);
input.value = '';
//点击叉号
ospan.onclick = function() {
textBox.removeChild(odiv);
}
}
}
//模糊查询
function select() {
input.addEventListener('keyup', function() {
var str = input.value;
//声明一个正则表达式
//子模式匹配 多个组按照$1 $2这样的顺序
var patt = new RegExp('(' + str + ')', 'g');
for (var i = 0; i < odivs.length; i++) {
//这里返回的是一个数组！！！！所以要加[0]
var op = odivs[i].getElementsByTagName("p")[0];
//将符合正则表达式的字符替换成红色
//replace返回替换后的新的字符串
//因为这里用到了html代码 所以要用innerhtml在p标签中正确显示
var pattStr = op.innerText.replace(patt, '<font color="red">$1</font>');
//包含输入的字符串的div显示 不包含的不显示
if (op.innerText.indexOf(str) == -1) {
odivs[i].style.display = 'none';
} else {
op.innerHTML = pattStr;
}
}
if (str == '') {
for (var i = 0; i < odivs.length; i++) {
odivs[i].style.display = 'block';
}
}
})
}
select(); //函数解析完就运行
</script>
for in 语句
用于对数组或对象的属性进行循环操作
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (var x in mycars)
{
//这里的x表示的是索引！！！
document.write(mycars[x] + "<br />")
}
for in遍历对象的可枚举属性
属性的可枚举会影响三个函数的结果：
for…in
Object.keys()
JSON.stringify
上传图片
<div id="content">
<div id="upload">
<img src="https://p1.pstatp.com/large/3ecd0004b6bdeff4c48d" alt="" id="img">
<input type="file" accept="image/jpg,image/jpeg,image/png,image/PNG" onchange="uploadImg(this)" id="file">
</div>
<div id="footer">
<button class="btn btnUpload" onclick="submit()">上传</button>
<button class="btn btnCancel">取消</button>
</div>
</div>
function uploadImg() {
var fileReader = new FileReader();z
//获取文件对象
//注意这里的files[0]
var files = document.getElementById('file').files[0];
//读取指定的blob和file对象。读取操作完成的时候，
//readyState会变成已完成DONE，并触发loaded事件，
//同时result属性将包含一个data：url格式的字符串（base64编码），
//以表示所读取文件的内容
fileReader.readAsDataURL(files);
fileReader.onload = function(e) {
var img = document.createElement("img");
var content = document.getElementById("content");
//获取区域中第一个元素
var first = content.firstChild;
//设置图片的src
img.src = this.result;
img.style.display = "inline-block";
img.width = '110';
img.height = '110';
img.style.marginRight = '10px';
//在第一个元素最前面插入元素
content.insertBefore(img, first);
}
}
XMLHTTPReaquest和JSONP的适用场景，以及其分别如何检测请求错误的
XMLHTTPRquest是一个浏览器接口，使javascript可以进行http通信，就是我们熟悉的ajax。用于浏览器端和服务器端异步请求数据从而实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。
JSONP用于非跨域请求数据的场景，只支持GET请求。
XMLHTTPRequest异常判断一般是通过该对象的readystate和http状态码status来判断，JSONP异常判断一般是onerror事件和超时timer来判断
JSONP是XMLHttpRequest中的一种
请简述浏览器渲染页面的过程,并给出下方script代码中对哪些CSS属性的"修改"会触发重绘（repaint）和重排（reflow）？
<style>.sg-container {padding: 10px;margin-bottom: 10px;width: 100px; height: 100px;}</style>
<div class="sg-container">
<p style="line-height:20px">2019搜狗校园招聘</p>
<script>
document.querySelector('p').style.cssText +='height:10px; line-height:24px;font-size:20px;visibility:hidden;background-color:#00f;border:1px solid #f00';
</script>
</div>
- 解析html/svg/xhtml文件，产生DOM tree——>解析css文件，构建层叠样式表模型CSSOM(CSS Object Model)。如果节点是css，图片，视频等资源，会调用资源加载器加载他们，因该类资源是异步的，不会阻塞DOM解析但是会阻塞DOM的渲染，样式文件会阻塞脚本的执行；如果节点是js，就停止DOM树的创建——>根据DOM树和CSSOM来构造Rendering Tree。rendering tree不等同于DOM树，因为一些像Header或者display:none的东西不需要放在渲染树中——>布局Layout：计算出每个节点在屏幕中的位置——>绘制：遍历render树，使用UI后端层绘制每个节点
回流（Reflow）：浏览器要花时间去渲染，当他发现了某个部分发生了变化影响了布局，就要倒回去重新渲染
重绘（repaint）：如果只是改变了某个元素的背景颜色，文字颜色的，不影响元素周围或内部布局的属性，就只会引起浏览器的repaint，重画某一部分
reflow的原因：
页面初始化的时候（不可避免）；
操作DOM时，比如添加或删除可见的DOM元素；
浏览器窗口改变尺寸；
元素尺寸改变；
元素位置改变；
元素内容改变
reflow比repaint更花费时间，也更影响性能，所以要尽量避免过多的reflow。在优化页面渲染性能的时候，减少reflow/repaint就是基本的出发点。
重绘不会引起重排，但重排会引起重绘
js加载和执行的特点：
载入后马上执行；
执行时会阻塞页面后续的内容（包括DOM的渲染，DOM的解析、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现
获取页面中的标签
获取页面中的标签
<script>
var str = [];
function getTags(node) {
if (node.nodeType == 1) {
var name = node.nodeName;
str.push(name.toLowerCase());
// var childen = node.childNodes;
// for (var i = 0; i < childen.length; i++) {
// getTags(childen[i]);
// }
}
var childen = node.childNodes;
for (var i = 0; i < childen.length; i++) {
getTags(childen[i]);
}
}
getTags(document);
alert(str);
</script>
每三位分隔数字
function paddingNum(number) {
var count = 0;
//用'.'分隔成数组
var arrnumber = number.toString().split('.');
//取出左边的常数
var left = Array.from(arrnumber[0]);
//取出右边的小数
var right = arrnumber[1] ? arrnumber[1] : '';
//console.log(left);
//判断是否是负数
var flag = (left[0] == '-') ? true : false;
//如果是负数的话就先删除 后面再加上
if (flag) {
left.shift();
}
//left.reverse();
// 这里进行添加逗号操作
for (var i = left.length - 3; i > 0; i -= 3) {
left.splice(i, 0, ',');
}
//left.reverse();
var result = "";
//将数组中每个元素都执行一个函数 赋值给result
left.forEach(element => {
result += element;
})
//如果是负数 这里加上负号
if (flag) {
result = '-' + result;
}
//如果有小数 这里加上小数部分
if (right) {
result += '.' + right;
}
return result;
}
iframe会阻塞主页面的load事件
- iframe会在主页面的onload之前加载
- iframe会在所有iframe的内容都加载完毕之后触发iframe的onload
- 主页面的onload会在iframes的onload触发之后触发，所以iframe会阻塞主页面的加载。
- 当iframe在加载的过程中，浏览器会标识正在加载东西，处于忙碌状态。
DOMContentLoaded/Load事件
解析HTML结构——>加载外部脚本和样式表文件——>解析并执行脚本代码（有些脚本会阻塞页面的加载）——>DOM树构建完成执行DOMContentLoaded事件——>加载图片等外部文件——>页面加载完毕执行load事件
立即执行
ajax的readystate有哪几个状态，含义分别是什么
readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
总共有五个状态
0 未初始化状态：此时，已经创建了一个XMLHttpRequest对象
1 准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2 已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应
3 正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
4 完成响应状态：此时，已经完成了HTTP响应的接收
薯队长写了n篇笔记，编号从1~n,每篇笔记都获得了不少点赞数。
薯队长想从中选出一些笔记，作一个精选集合。挑选的时候有两个规则：
1.不能出现连续编号的笔记。
2.总点赞总数最多
如果满足1，2条件有多种方案，挑选笔记总数最少的那种
使用动态规划，与基本算法不同的是这里需要输出挑选的笔记数，所以这里使用了n*2的二维数组，第一列存储最大点赞数，第二列存储挑选的笔记数
public static void main(String[] args) {
// TODO Auto-generated method stub
int n;
Scanner scanner=new Scanner(System.in);
n=scanner.nextInt();
int[] m=new int[n];
for(int i=0;i<n;i++) {
m[i]=scanner.nextInt();
}
int[][] opt=new int[n][2];
opt[0][0]=m[0];
opt[0][1]=1;
opt[1][0]=getmax(m[0], m[1]);
opt[1][1]=1;
for(int i=2;i<n;i++) {
int a=opt[i-1][0];
int b=opt[i-2][0]+m[i];
int asum=opt[i-1][1];
int bsum=opt[i-2][1]+1;
if(a>b) {
opt[i][0]=a;
opt[i][1]=asum;
}else if(a<b) {
opt[i][0]=b;
opt[i][1]=bsum;
}else {
opt[i][0]=a;
opt[i][1]=getmin(asum, bsum);
}
}
System.out.println(opt[n-1][0]+" "+opt[n-1][1]);
}
public static int getmax(int a,int b) {
return a>b?a:b;
}
public static int getmin(int a,int b) {
return a>b?b:a;
}
代金券组合
美团笔试题-近期某商场由于周年庆，开启了“0元购”活动。活动中，消费者可以通过组合手中的代金券，实现0元购买指定商品。
聪明的小团想要用算法来帮助他快速计算：对于指定价格的商品，使用代金券凑出其价格即可，但所使用的代金券总面额不可超过商品价格。由于代金券数量有限，使用较少的代金券张数则可以实现价值最大化，即最佳优惠。
假设现有100元的商品，而代金券有50元、30元、20元、5元四种，则最佳优惠是两张50元面额的代金券；而如果现有65元的商品，则最佳优惠是两张30元代金券以及一张5元代金券。
请你帮助小团使用一段代码来实现代金券计算。
动态规划的应用
用一个二维数组dp保存代金券和所给的金额信息。左边一列是代金券，上边一列是从0-给定的金额。当金额为0时，所用的代金券张数都赋值为0，即dp[i][0]=0；当i=0时，如果金额%m[0]==0，即能整除，则赋值为整除的结果，如果不能整除，则赋值为-1，表示不能组合出该金额；这样左边一列和上面一列都赋值完了，接下来赋值剩下的位置。
剩下的位置上使用的最少代金券张数可以表示为：选当前代金券和不选当前的代金券
选：dp[i][j]=dp[i][j-m[i]]
不选：dp[i][j]=dp[i-1][j]
取者之间的最小值赋值即可
最后要求的结果就是dp数组最后一行最后一列的值
//动态规划 （判断一组数中是否有组合相加等于s）
public class 最少代金券 {
public static void main(String[] args) {
// TODO Auto-generated method stub
Scanner scanner=new Scanner(System.in);
int p;
int n;
boolean flag=true;
//当需要输入多组测试用例 输入0结束时 用arraylist
ArrayList<Integer> lists = new ArrayList<Integer>();
while(flag) {
p=scanner.nextInt();
if(p==0) {
break;
}
n=scanner.nextInt();
int[] m=new int[n];
for(int i=0;i<n;i++) {
m[i]=scanner.nextInt();
}
if(subset(p, m)==-1) {
System.out.println("Impossible");
}else {
System.out.println(subset(p, m));
}
}
}
public static int subset(int p,int[] m) {
int[][] dp=new int[m.length][p+1];
for(int i=0;i<m.length;i++) {
dp[i][0]=0;
}
for(int j=1;j<=p;j++) {
if(j%m[0]==0) {
dp[0][j]=j/m[0];
}
else {
dp[0][j]=-1;
}
}
for(int i=1;i<m.length;i++) {
for(int j=1;j<=p;j++) {
if(m[i]>j) {
dp[i][j]=dp[i-1][j];
}else if(m[i]==j) {
dp[i][j]=1;
}else {
int a=dp[i-1][j];//不选
int b=dp[i][j-m[i]];//选 因为选了这个券 所以个数记得加1 即自己本身
//这里是if else if！！！不是if if if！
if(a==-1&&b!=-1) {
dp[i][j]=b+1;
}
else if(b==-1&&a!=-1) {
dp[i][j]=a;
}
else if(a==-1&&b==-1) {
dp[i][j]=-1;
}
else {
dp[i][j]=a<(b+1)?a:(b+1);
}
}
}
}
return dp[m.length-1][p];
}
}
数位之积
vivo笔试题-现给定任意正整数 n，请寻找并输出最小的正整数 m（m>9），使得 m 的各位（个位、十位、百位 … …）之乘积等于n，若不存在则输出 -1。
public class 数位之积 {
public static void main(String[] args) {
// TODO Auto-generated method stub
Scanner scanner=new Scanner(System.in);
int n;
int m = 0;
int base=1;
int i;
n=scanner.nextInt();
if(n<10) {
System.out.println(10+n);
}else {
//关键
//将目标数从大到小往前除
for(i=9;i>1;i--) {
if(n%i==0) {
m+=i*base;
base=base*10;
n=n/i;
//这里必须要把i重新置为9 不然重复的数字会读取不到
i=9;
//break;
}
}
if(m==0) {
System.out.println(-1);
}
else {
System.out.println(m);
}
}
}
}
迷宫寻路
美团笔试题-给定一个包含非负整数的 M x N 迷宫，请找出一条从左上角到右下角的路径，使得路径上的数字总和最小。每次只能向下或者向右移动一步。
动态规划的应用
用一个二维数组dp来表示从0位置到dp[i][j]位置的最小值，先对左边一列和上边一列赋值，其他的位置就是与上面和左边的值相比较，取较小的那个再加上原本这个位置的数即可
public class 迷宫寻路 {
public static void main(String[] args) {
// TODO Auto-generated method stub
int m;
int n;
Scanner scanner=new Scanner(System.in);
m=scanner.nextInt();
n=scanner.nextInt();
int[][] arr=new int[m][n];
for(int i=0;i<m;i++) {
for(int j=0;j<n;j++) {
arr[i][j]=scanner.nextInt();
}
}
System.out.println(getnum(arr, m, n));
}
public static int getnum(int[][] arr,int m,int n) {
int[][] dp=new int[m][n];
dp[0][0]=arr[0][0];
//为dp数组左边一列赋值
for(int i=1;i<m;i++) {
int sum=0;
for(int k=i;k>=0;k--) {
sum+=arr[k][0];
}
dp[i][0]=sum;
}
//为dp数组上边一列赋值
for(int j=1;j<n;j++) {
int sum=0;
for(int k=j;k>=0;k--) {
sum+=arr[0][k];
}
dp[0][j]=sum;
sum=0;
}
//为dp数组的其他位置赋值
for(int i=1;i<m;i++) {
for(int j=1;j<n;j++) {
int a=dp[i-1][j];
int b=dp[i][j-1];
int res=a<b?a:b;
dp[i][j]=res+arr[i][j];
}
}
return dp[m-1][n-1];
}
}
按顺序写出打印结果并说明原因
var name = 'global';
var obj = {
name: 'local',
foo: function(){
this.name = 'foo';
}.bind(window)
};
var bar = new obj.foo();
setTimeout(function() {
console.log(window.name);
}, 0);//3.global settimeout并不是立即执行，而是放在队列里面，等其他的函数执行完了再延迟所设定的时间执行，在这里是最后执行的
console.log(bar.name);//1.foo
var bar3 = bar2 = bar;//因为bar是对象，这里赋值的是指针，将指向bar对象的指针赋值给了bar2和bar3，他们三个指向的地址是一样的，所以其中有一个变量改变其他的都会改变
bar2.name = 'foo2';
console.log(bar3.name);//2.foo2 因为bar2改变了，所以bar3也改变了
因此最后的执行顺序是foo foo2 global
OSI参考模型与TCP/IP参考模型
4859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
