JS面试准备二
1.常用的字符串方法
1. indexOf：查找字符串某一项的初始位置
2. slice：截取字符串（包含起始位置，不包含结束位置）
不会根据参数大小，交换参数位置
如果出现-1按倒数第一个数，如果出现-2按倒数第二个数。3. substring：截取字符串（包含起始位置，不包含结束位置）
会根据参数大小，交换参数位置
如果出现负数，则按0处理。4. substr：截取字符串
5. split：
作用: 通过一个指定的字符串 把原字符串分割成一个数组。
语法: array string.split([separator] [, limit])
参数:separator是指分割符。limit指定最多分割的数量，可以理解为数组长度，默认为全部。
返回值:返回一个数组。
注意:当没有分割符的时候(没有传入参数)，整个字符串将作为一个整体保存到数组中。 用分割符分割的时候，分割符会在被删除了在传入数组。<script>
var str="我爱,你,们";
console.log(str.split(","));//["我爱","你","们"]
console.log(str.split(",",2));//["我爱","你"]
console.log(str.split());//["我爱,你,们"]
console.log(str.split("mmm"));//["我爱,你,们"]
console.log(str.split(""));//["我", "爱", "," , "你", "," ,"们"]
</script>6.charAt：返回对应位置的字符
2.常用的数组方法
1. join： 将数组通过指定字符拼接成字符串。
separator可选，如果省略的话，默认为一个逗号。如果 seprator 是一个空字符串，那么数组中的所有元素将被直接连接。2. push： 往数组的末尾添加一个或者多个元素。返回值：新数组的length。会修改原数组。
3. unshift： 往数组的末尾添加一个或者多个元素。返回值：新数组的length。会修改原数组。
4. pop： 作用: 删除数组最后 一个 元素。返回值： 被删除的那一个元素。注意：会修改原数组。
5. shift： 作用: 删除数组 第一个 元素。返回值： 被删除的那一个元素。注意：会修改原数组。
6. slice： 作用:截取数组中一部分，并返回这个新的数组.返回值: 截取后的新的数组。注意：不会修改原数组。
7. splice
array array.splice(start, deleteCount[, item1[, item2[, ...]]])
- start 起始位置
- deleteCount 删除长度
- item 添加的内容
返回值： 由被删除的元素组成的一个数组
注意：修改了原数组的内容。
<script>
var att="Liangzhifang".split("");
console.log(att.splice(2,4,["a"]));//["a","n","g","z"]
console.log(att);//["L","i",["a"],"h","i","f","a","n","g"]
</script>4.sort
作用： 对数组的元素进行排序。
语法： array arr.sort([compareFunction]);
参数: compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
返回值: 排序后的数组.
<script>
//当什么都不传入的时候，sort（）默认由小到大排列。
var attr=[9,5,4,3,2];
console.log(attr.sort());//[2, 3, 4, 5, 9]
//传入function的时候，sort（）内的function返回值大于0，由小到大排列。
var attrO=[9,5,4,3,2];
console.log(attrO.sort(function () {
return 1;
}));//[2, 3, 4, 5, 9]
//传入function的时候，sort（）内的function返回值小于或者等于0，数组序列不变。
var attrT=[9,5,4,3,2];
console.log(attrT.sort(function () {
return -1;
}));// [9, 5, 4, 3, 2]
//由于sort内部是随机抽取两个值，我们在利用function函数的返回值，大于0的时候，交换位置。小于或者等于0的时候不变，来排序。
//以下是由小到大排序
var attrTh=[9,5,4,3,2];
console.log(attrTh.sort(function (a,b) {
return a-b;
}));// [2, 3, 4, 5, 9]
//以下是由大到小排序
var attrF=[9,5,4,3,2];
console.log(attrF.sort(function (a,b) {
return b-a;// [9, 5, 4, 3, 2]
}));
</script>3.DOM
1.children 和 childNodes
children 获取节点的一级的元素子节点，返回的是集合 HTMLCollection
childNodes 获取节点的子节点，可能获取到 元素节点，文本节点，注释节点，返回的是集合 NodeList<body>
<div id="wrap">
<div id="content">
<div id="inner"></div>
</div>
<p>p</p>
一句话
</div>
<script>
var wrap = document.getElementById("wrap");
console.log( wrap.childNodes );
console.log( wrap.children );
</script>
</body>
2.
node.previousElementSibling 上一个元素兄弟节点
node.nextElementSibling 下一个元素兄弟节点
<body>
<!--、
兄弟关系
node.previousElementSibling 上一个元素兄弟节点
node.nextElementSibling 下一个元素兄弟节点
-->
<ul id="list">
<li>1</li>
<li id="item">2</li>
<li>3</li>
<li>4</li>
</ul>
一句话
<link rel="stylesheet" type="text/css" href=""/>
<script>
var list = document.getElementById("list");
var item = document.getElementById("item");
console.log( item.previousElementSibling );
console.log( item.previousElementSibling.previousElementSibling );
console.log( item.nextElementSibling );
console.log( item.nextElementSibling.nextElementSibling );
console.log( item.nextElementSibling.nextElementSibling.nextElementSibling );
</script>
3.firstElementChild和lastElementChild
<body>
<div id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
var wrap = document.getElementById("wrap");
console.log( wrap.firstElementChild );//<div>1</div>
console.log( wrap.lastElementChild );//<div>4</div>
</script>
</body>4.setAttribute和removeAttribute
<body>
<img id="img" _src="./2.jpg" src="1.jpg"/>
<script>
var img = document.getElementById("img");
document.onclick = function(){
img.setAttribute( "src", img.getAttribute("_src") );//点击页面后，将图片1换成图片2
};
img.setAttribute( "s", img.getAttribute("_src") );//在行间设置自定义属性 s="./2.jpg".
console.log(img.getAttribute("s"));
setTimeout(function(){
img.removeAttribute( "s" );//页面打开是后，删除行间设置的自定义属性。
},1000)
</script>
</body>5.getBoundingClientRect()
script>
var box = document.getElementById("box");
console.log( box.getBoundingClientRect() );
console.log( box.getBoundingClientRect().left );//盒子 左边 距离 可视区 左边 的距离 301
console.log( box.getBoundingClientRect().right);//盒子 右边 距离 可视区 左边 的距离 481
console.log( box.getBoundingClientRect().top);//盒子 顶部 距离 可视区 顶部 的距离 ,这个页面的滚动会发生变化 501
console.log( box.getBoundingClientRect().bottom);//盒子 底部 距离 可视区 顶部 的距离,这个页面的滚动会发生变化 731
console.log( box.getBoundingClientRect().width);//盒子 可视 宽度（就是不包括margin） 180
console.log( box.getBoundingClientRect().height);//盒子 可视 高度（就是不包括margin）230
</script>6.createElemen
创建元素:
innerHTML
问题:原先元素的事件会被清除.
document.createElement("div");
为创建的元素添加属性,样式,事件<script>
var d = document.createElement("div");//创建一个div元素,此方法的返回值是你创建的元素
d.id = "box";
d.className = "title";
d._index = 1; // 通过 js 方式 添加的自定义属性
console.log( d._index );
//------------------------------------------
d.onclick = function(){
alert(1);
}
console.log( d.onclick );
//------------------------------------------
d.setAttribute("_src","abc");
console.log( d );
</script>
7.appendChild
parentNode.appendChild(childNode)
往一个节点里边添加一个子节点，注意是添加在最后
parentNode:父节点（需要把节点放入哪个容器的内部）
childNode:子节点（需要放的节点）
childNode 会被放进 parentNode 内部 的 尾部<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#wrap{
border: 1px solid #000;
}
#son{
background-color: red;
}
.white{
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<div>大头儿子</div>
</div>
<script>
var wrap = document.getElementById("wrap");
var div = document.createElement("div");
div.innerHTML = "老王之子";
div.id = "son";
div.className = "white";
div.onclick = function(){
alert( "绿了" );
}
console.log( div );
wrap.appendChild( div );
</script>
</body>
</html>
8.insertBefore
parentNode.insertBefore(childNode1,childNode2)
往一个节点的 指定子节点前边插入一个节点
childNode1插入到childNode2前边；
如果第二个参数没有，会报错
如果第二个参数是null,相当于appendChild9.removeChild
parentNode.removeChild(childNodes)
从一个节点中删除指定的子节点。
注意：返回值是你删除的节点10.replaceChild
parentNode.replaceChild(node,childNode)
node用来替换的节点
childNodes被替换的子节点
两个参数都必须写。11.cloneNode
node.cloneNode(boolean)
克隆一个节点,返回值是 克隆 的新节点
boolean:是否进行深度克隆
true：克隆元素和元素包含的子孙节点
flase：克隆元素但不包含元素的子孙节点
注意：
克隆的时候会把节点的id也克隆下来，所以要注意单独设置节点的id<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#wrap{
border: 10px solid #000;
}
.box{
width:100px;
height:60px;
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<div id="bigHead" class="box">
大头儿子
<!--注释-->
<div>半碗粉
<div>辣椒油</div>
</div>
</div>
</div>
<script>
var wrap = document.getElementById("wrap");
var bigHead = document.getElementById("bigHead");
bigHead.onclick = function(){
console.log( 1 );
}
var num = 0;
document.onclick = function(){
// var clone = document.createElement("div");
// clone.innerHTML = bigHead.innerHTML;
//------------------------------------------
// var clone = bigHead.cloneNode();
var clone = bigHead.cloneNode(true);
clone.onclick = bigHead.onclick;
clone.id = "box"+num++;
console.log( clone.onclick );
console.log( clone );
wrap.appendChild( clone );
}
</script>
</body>
</html>JS面试准备二的更多相关文章
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- qrcode.js 动态生成二维码
用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...
- node.js 初学（二）—— 搭建注册/登录服务器
node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...
- js生成简单二维码
js文件下载地址:https://download.csdn.net/download/weixin_38296752/10554485 一.引入qrcode.js文件 <script type ...
- 进击Node.js基础（二）
一.一个牛逼闪闪的知识点Promise npm install bluebird 二.Promise实例 ball.html <!doctype> <!DOCTYPE html> ...
- js生成中文二维码
http://www.cnblogs.com/xcsn/archive/2013/08/14/3258035.html http://www.jb51.net/article/64928.htm 使用 ...
- Cordova app 检查更新 ----JS进行调用(二)
原文:Cordova app 检查更新 ----JS进行调用(二) 1.获取版本号 需要添加 插件 cordova plugin add https://github.com/whiteoctober ...
- 面试常考的js题目（二）
1. 已知 fn 为一个预定义函数,实现函数 curryIt,调用之后满足如下条件: 返回一个函数 a,a 的 length 属性值为 1(即显式声明 a 接收一个参数) 调用 a 之后,返回一个函数 ...
- 前端js面试中的常见的算法问题
虽说我们很多时候前端很少有机会接触到算法.大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂 ...
随机推荐
- LeetCode No.97,98,99
No.97 IsInterleave 交错字符串 题目 给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的. 示例 输入: s1 = "aabcc&qu ...
- 看了这个Java实习生入职测试题后，幸亏我不是实习生
看了这个Java实习生入职测试题后,幸亏我不是实习生 一个Java实习生的入职测试题,你能答对几个? 今天在某APP中看到,有实习生放出的Java实习生入职测试题.看完之后,很庆幸自己不是实习生. 本 ...
- Nginx的下载与安装
.创建文件输入网页中需要复制的 cat >/etc/yum.repos.d/nginx.repo<<EOF [nginx-stable] name=nginx stable repo ...
- 导出Wireless组中的成员
get-adgroupmember -Identity wireless |export-csv -path C:\Group.csv -Encoding UTF8
- 3）小案例三，加乐前端入口index.php
之前的代码没有什么改动,唯一改动的就是我在之前的目录结构中加了 index.php作为前端的入口文件 目前,我的文件目录关系是: 然后我的index.php代码内容是: <?php /** * ...
- java 变量分类
转:https://blog.csdn.net/suneqing/article/details/37909811 1.按被声明的位置划分 局部变量:方法和语句块内定义的的变量.(在定义局部变量时,必 ...
- u盘出现大文件无法复制的解决
如果u盘出现大文件无法复制的情况,修改U盘的文件系统格式: 把U盘格式化为NTFS格式. FAT32的都不能放4G+的文件;右键格式化里如果没有NTFS,就在开始运行里输入cmd 然后输入" ...
- 吴裕雄--天生自然HTML学习笔记：HTML 布局
网页布局对改善网站的外观非常重要. 请慎重设计您的网页布局. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- <JZOJ5906>传送门
emmm dpdpdp然鹅我考场上并想不到 还是凉凉 #include<cstdio> #include<cmath> #include<iostream> #in ...
- idea 使用sonarlint报错解决方案
在idea使用sonarlint可能出现以下报错: Plugin 'org.sonarlint.idea' failed to initialize and will be disabled. Ple ...