测试:
<html>
<style>
</style>
<title>Demo</title>
<body>
<div >
</div>
<script type="text/javascript">
//机试的测试代码
</script>
</body>
</html>
题目:现在有个 HTML 片段,要求编写代码,点击编号为几的链接就alert弹出其编号?(闭包题目)
<ul>
<li>编号1,点击我请弹出1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click', function(i){
return function(){
alert(i + 1)
}
}(i), true)
}
若有如下场景,一个<div>中包含了若干个<a>,而且还能继续增加。那如何快捷方便地为所有<a>绑定事件呢?
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>
这里就会用到事件代理。我们要监听<a>的事件,但要把具体的事件绑定到<div>上,然后看事件的触发点是不是<a>
var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
// e.target 可以监听到触发点击事件的元素是哪一个
var target = e.target
if (e.nodeName === 'A') {
// 点击的是 <a> 元素
alert(target.innerHTML)
}
})
手写 XMLHttpRequest 不借助任何库?
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
// 这里的函数异步执行,可参考之前 JS 基础中的异步模块
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
xhr.open("GET", "/api", false)
xhr.send(null)
手写 clearfix?
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}
如何实现水平居中?
inline 元素用text-align: center;
block 元素可使用margin: auto;
绝对定位元素可结合left和margin实现,但是必须知道宽度
.container { //container是item的父级
position: relative;
width: 500px;
}
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
如何实现垂直居中?
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
border: 1px blue solid;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: red
}
</style>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
找出下面代码的优化点,并且优化它?
var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
var dom = document.getElementById('list');
dom.innerHTML += '<li>' + data[i] + '</li>';
}
var dom = document.getElementById('list');
var data = ['string1', 'string2', 'string3'];
var frag = document.createDocumentFragment();
var li;
for(var i = 0; i < data.length; i++){
li = document.createElement("li");
li.innerHTML = data[i];
frag.appendChild(li); // 先放在 frag 中,最后一次性插入到 DOM 结构中。
}
listNode.appendChild(frag);
请用CSS实现以下图形?
圆形
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
椭圆
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
等边三角
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
直角三角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
平行四边形
#parallelogram {
width: 150px;
height: 100px;
margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
梯形
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
移动端设置meta?
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
数组去重?
ES6
let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
console.log(array);
Set
数据结构, 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数
Array.from
,可以把类似数组的对象转换为数组,如通过querySelectAll
方法得到HTML DOM Node List
,以及ES6中新增的Set
和Map
等可遍历对象
ES5
<html>
<body>
<script type="text/javascript">
var array = [1, '1', 1, 2, 3, 2, 4];
var tmpObj = {};
var result = [];
array.forEach(function(a) {
var key = (typeof a) + a;
console.log(key)
if (!tmpObj[key]) { //Array对象是从Object对象继承得到,js是可以使用字符串作为数组下标的
tmpObj[key] = true;
console.log(tmpObj[key])
result.push(a);
}
})
console.log(result);
</script>
</body>
</html>
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
请实现对象深度clone?
1、
function deepClone(o1, o2) {
for (let k in o2) {
if (typeof o2[k] === 'object') {
o1[k] = {};
deepClone(o1[k], o2[k]);
} else {
o1[k] = o2[k];
}
}
}
// 测试用例
let obj = {
a: 1,
b: [1, 2, 3],
c: {}
};
let emptyObj = Object.create(null);
deepClone(emptyObj, obj);
console.log(emptyObj.a == obj.a);
console.log(emptyObj.b == obj.b);
2、
var obj = {a:{b:10}};
function copy(obj){
var newobj = {};
for ( var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
}
var obj2 = copy(obj);
obj2.a.b = 20;
alert(obj.a.b);
请把鼠标指针移动到蓝色的 div 元素上,看到过渡效果?
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s;
/* Firefox 4 */
-webkit-transition: width 2s;
/* Safari and Chrome */
-o-transition: width 2s;
/* Opera */
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
实现动画移动效果
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/*Safari and Chrome*/
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</body>
</html>
请写出以下正则表达式:
匹配14*的手机号:
/^(1)4[5-9](\d){8}$/.test(14531121989)
匹配126邮箱:
/((^([a-zA-Z]))(\w){5,17})@126.com$/.test("[email protected]")
匹配qq邮箱:
/(^[1-9]){5,10}@qq.com$/.test("[email protected]")
中文
/^[\u4e00-\u9fa5]$/g.test("我")
国内邮政编码
/^[0-9]{6}$/.test(100000)
找某个字符串中出现最多的字符和它一共出现多少次?
var str = "sssfgtdfssddfsssfssss";
var num = 0;
var value = null;
function max() {
var new_str = str.split("").sort().join("");
var re = /(\w)\1+/g; //没有\1,re就是一整个排好序的字符串,有了\1就是出现过的有重复的取出来,\1表示跟前面第一个子项是相同的
new_str.replace(re, function(match_str, char) { //$0代表取出来重复的一个个整体,如[s,s...],[f,f..],[d,d....] $1代表这个整体里的字符
if (num < match_str.length) {
num = match_str.length;
value = char;
}
});
alert(value + ":" + num)
console.log(new_str)
};
max(str);
使用vue-cli搭建一个基础项目?
vue-loader是一个webpack的loader;可以将vue文件转换为JS模块
cd到目录,vue init webpack [your project name] 后会创建一个名为 你设置名字 的文件夹
cnpm install 安装依赖,cnpm run dev运行
cnpm run build创建线上版本
使用webpack完成一次打包?
1、创建目录并转到这个目录,执行npm init –y创建一个 package.json
(在安装一个要打包到生产环境的安装包时,你应该使用 npm install --save,如果你在安装一个用于开发环境的安装包(例如,linter, 测试库等),你应该使用 npm install --save-dev)
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
2、创建src目录,里面创建一个index.js,创建一个index.html
在package.json中指定main为index.js(main字段指定一个主入口文件)
3、index.html引入<script src="main.js"></script>
4、npx webpack 执行打包(执行 npx webpack,会将我们的脚本作为入口起点,然后 输出 为 main.js,目标目录是dist)
5、使用配置文件webpack.config.js ,运行npx webpack时默认运行webpack.config.js配置文件,当然,如果有其他配置文件,也可以使用—config指定文件名:npx webpack --config webpack.config.js(默认)
npx webpack --config webpack.config2.js(自定义)
6、简化 CLI ,也就是命令行不用写那么多内容,做法:在package.json中的scripts中新增"build": "webpack"
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
npm run build 就可以代替npx
通过向 npm run build 命令和你的参数之间添加两个中横线,可以将自定义参数传递给 webpack,例如:npm run build -- --colors
使用Gulp和Babel完成对ES6的编译?
1、
mkdir webpack-demo && cd webpack-demo
npm init -y
$ npm install --global gulp
步骤一、创建工程目录
Project-demo/
|── dist/
├── src/
├── js/
└── index.js
步骤二、安装gulp和编译ES6所需要的模块
用cd命令进入myProject,分别执行:
npm install --global gulp
npm install gulp —save-dev;
npm install gulp-babel —save-dev;
// babel-preset-env插件,该插件可以根据配置的目标运行环境自动启用需要的babel插件(即动态转换ES6代码至可执行的JS代码)
npm install babel-preset-env —save-dev;
// 根据babel文档指引是不需要babel-core的,但是在实际操作中少了babel-core会报找不到该模块,所以安装上即可
npm install babel-core —save-dev; (根本问题所在)
步骤三、构建Gulp任务
根目录创建gulpfile.js 和.babelrc
gulpfile:
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});
.babelrc:
{
"presets": ["env"]
}
src/app.js :
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
for(let value of arr){
console.log(value)
}
步骤四
命令行运行Gulp
使用Git从远程仓库拷贝项目,修改,并提交的操作?
请利用template原理实现一个template
var reviewTemplate = $("#reviewTemplate").html().trim()
temp = reviewTemplate
.replace(/\${equipment}/g, jData[i].productName || "")
.replace(/\${function}/g, jData[i].function || "")
$("#accessment").append(temp);
用你熟悉的sql语句创建数据库、对表进行增删改查
1、说明:创建数据库
CREATE DATABASE database-name
2、说明:删除数据库
drop database dbname
说明:创建新表
create table tabname(col1 type1 [not null] [primary key],col2 type2 [not null],..)
说明:增加一个列
Alter table tabname add column col type
选择:select * from table1 where 范围
插入:insert into table1(field1,field2) values(value1,value2)
删除:delete from table1 where 范围
更新:update table1 set field1=value1 where 范围
查找:select * from table1 where field1 like ’%value1%’
SELECT * FROM tb_name WHERE sum > 100;
SELECT * FROM tb_stu WHERE sname = '小刘'
SELECT * FROM tb_stu WHERE sname like '刘%'
SELECT * FROM tb_stu WHERE date = '2011-04-08'
INSERT INTO `tb_column` (`columnId`, `columnName`, `columnDisc`, `columnOrder`)
VALUES
('1', '新闻', '国内国外新闻', '12'),
('2', '财经', '关注q', '7'),
('3', '娱乐', '关注', '14'),
('4', '体育', '关注新闻', '6'),
('5', '读书', '读书内容', '5');
连接到本机上的 MySQL。
mysql -uroot –pmysql
使用JSONP实现跨域
前端
1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
//回调函数
function showData (result) {
var data = JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}
$(document).ready(function () {
$("#btn").click(function () {
//向头部输入一个脚本,该脚本发起一个跨域请求
$("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
服务端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//数据
List<Student> studentList = getStudentList();
JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();
//前端传过来的回调函数名称
String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";
response.getWriter().write(result);
}
JS实现冒泡排序?
将8,4,3,1,4,6,等数字按照从小到大的顺序依次输出;
var arr=new Array();
arr.push(8);
arr.push(4);
arr.push(3);
arr.push(1);
arr.push(5);
arr.push(6);
var temp;
for(var i=0; i<arr.length;i++)
{
for(var j=i+1;j<arr.length;j++)
{
if(arr[i]>arr[j])
{
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
for(var x in arr )
{
alert(arr[x]);
}
JS实现快排?
随机选择数组中的一个数 A,以这个数为基准
其他数字跟这个数进行比较,比这个数小的放在其左边,大的放到其右边
经过一次循环之后,A 左边为小于 A 的,右边为大于 A 的
这时候将左边和右边的数再递归上面的过程
具体代码如下:
const Arr = [85, 24, 63, 45, 17, 31, 96, 50];
function quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
let pivotIndex = Math.floor(arr.length / 2);
let pivot = arr.splice(pivotIndex, 1)[0];
let left = [];
let right = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
// 递归
return quickSort(left).concat([pivot], quickSort(right));
}
console.log(quickSort(Arr))
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数?
function Find(target, array) {
let i = 0;
let j = array[i].length - 1;
while (i < array.length && j >= 0) {
if (array[i][j] < target) {
i++;
} else if (array[i][j] > target) {
j--;
} else {
return true;
}
}
return false;
}
//测试用例
console.log(Find(10, [
[1, 2, 3, 4],
[5, 9, 10, 11],
[13, 20, 21, 23]
])
)
怎么判断两个对象是否相等?
- function equals( x, y ) {
- var in1 = x instanceof Object;
- var in2 = y instanceof Object;
- if(!in1||!in2){
- return x===y;
- }
- if(Object.keys(x).length!==Object.keys(y).length){
- return false;
- }
- 10. for(var p in x){
- 11. var a = x[p] instanceof Object;
- 12. var b = y[p] instanceof Object;
- 13. if(a&&b){
- 14. return equals( x[p], y[p]);
- 15. }
- 16. else if(x[p]!==y[p]){
- 17. return false;
- 18. }
- 19. }
- 20.
- 21. return true;
22. }
- 23.
24. alert(equals({a:1},{a:1}));//true