基础知识

时间：2016-06-14 00:51:34 阅读：249 评论：0 收藏：0 [点我收藏+]

标签：

1. 将“300px”转换成数字300 . 用parseInt();

var num = parseInt( "300px" ) ;
console.log( num ) ;    //300
console.log(typeOf(num));  //number

2. a instanceof b (判断a是否是b的一个实例)

function foo () {
  this.name = "kingov" ;
  this.age = 25 ;
};
foo.prototype = {
  sum : function(a,b,c){
    console.log(a+b+c);
  },
  mul : function(a,b){
    console.log(a*b);
  }
};
var test = new foo ;
test.sum(1,2,3);  //6
test.mul(2,5);    //10
console.log(test instanceof foo);   //true

3.arguements

function foo() {
  console.log(arguments.length);  //传入的实参的个数,4
  console.log(arguments[1]);      //2
  console.log(typeof(arguments)); //object
  return 1 ;
}
console.log(foo(1,2,3,4));

4.字符串操作

4.1数组转化成字符串

var num = 10 ;
console.log(10 + "");

4.2用string构造函数，将数字转换为字符串

var num = 20 ;
var a = String(num);
console.log(typeof(a));  //string

4.3toString(),转换成字符串

var num = 10 ;
var a = num.toString();
console.log(a);   //10
console.log(typeof a);    //string

4.4进制之间的转换

var num = 20 ;
console.log(num.toString(2));   //10100
console.log(num.toString(8));   //24(8进制)
console.log(num.toString(16));  //14(16进制)

4.5charAt(),根据字符的位置来获取该字符，charCodeAt()返回对应字符的编码

var str = "abcdefg";
console.log(str.charAt(2));   //c
console.log(str.charCodeAt(0));   //97  返回对应字符的编码

返回一个带中文和英文的字符串的真实长度（一个汉字的长度是2个字符，一个字母是一个字符）

4.6 indexOf，从前向后索引字符串位置（参数：索引字符串）

indexOf，从前向后索引字符串位置（参数：索引字符串）

从前面寻找第一个符合元素的位置找不到则返回 -1

2 lastIndexOf，从后向前索引字符串位置（参数：索引字符串）

从后面寻找第一个符合元素的位置

找不到则返回 -1

从后面往前面找，找到后，索引号数的时候从前面往后数

他们是根据字符返回位置。

技术分享

4.7 concat连接字符串

var txt = "123";
var str = "XYZ"
console.log(txt.concat(str));   //123XYZ
console.log(txt.concat("abc")); //123abc

4.8 slice() ，截取字符串

  （参数1：截取位置（必须），参数2：终结点，不包括终结点）

参数1：是截取位置，即从第几个字符开始截取，（从第0个字符开始数）

参数2：终结位置，截取的字符不包括终结位置。（从第0个字符开始数）

可见：参数1不能大于参数2，不然系统认不出

asdf.slice(-1); //f 负号表示从右边开始往左边取

技术分享

4.9 substr（参数1，参数2）,截取字符串

（参数1，截取位置必须有；参数2，从截取位置往后数x个字符）

参数1：是截取位置，即从第几个字符开始截取，（从第0个字符开始数）

参数2：终结位置，截取的字符包括终结位置，（从截取位置开始数，）

4.10 toUpperCase(),转换大写(没有参数)

4.11 toLowerCase(),转换为小写（没有参数）

4.12 查看上传图片的格式

5. 获取页面所有的checkbox

var inputs = document.getElementsByTagName("input");
var checkboxes = [];
for(var i=0 ; i<inputs.length ; i++){
  if(inputs[i].type == "checkbox"){
     checkboxes.push(inputs[i]);
  };
};

6.用addEventListener

    var one = document.getElementById("one");
    one.addEventListener(‘click‘,function () {
        alert("okey");
    })

7.描述浏览器在输入网址的所有过程

8. JavaScript怎样访问cookies

9. 清除浮动

.clear:after {

　content:".";

　height:0;

　visibility:hidden;

　display:block;

　clear:both;

}

10. ajax请求的安全性，get还是post

POST安全

11. 移动端的事件

12. DOM事件介绍

12.1 HTML5的新特性，写出至少5个

什么是HTML5

是HTML的超集，不仅仅是HTML，更多的是JavaScript API和CSS的提升，
构建 Web 应用程序整体解决方案

HTML

标签
- 更语义化标签
智能表单
- 新的表单类型，如：email,url,number
- 新增表单功能属性，如：autocomplete，autofocus
- 虚拟键盘适配，通过表单的类型决定移动端弹出的键盘类型
网页多媒体，我们可以在网页中直接通过原生方式播放视频音频
- 音频
- 视频
- 字幕
属性，语义化属性，在移动Web bootstrap的课程中用到
- 链接关系描述
- 结构数据标记
- ARIA
- 自定义属性
Canvas，提供网页绘图的可能，后面在Canvas课程会专门去学习
- 2D 绘图
- 3D (WebGL)
SVG，仅仅了解即可

视频

定义播放视频组件

<video src="要播放的视频文件"></video>

多媒体标签属性

属性	含义
controls	决定是否显示控制菜单
autoplay	自动播放
loop	循环播放
height/width	定义播放器的宽高，只会在视频标签中生效
preload	预加载是否在页面加载完成并且没有开始播放时就开始加载文件，如果有自动播放属性则该属性无意义

方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

全屏 API

HTML5中提供了可以通过JS实现网页全屏的效果
具体的方式就是通过特定元素的requestFullScreen方法实现
由于在不同浏览器中该方法需要加上特定前缀
退出全屏通过exitFullScreen方法

13. 判断true/false

var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == ‘‘;     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true

14. 数组的常用操作

14.1 join(),将数组转化为字符串

arrayObject.join(separator)

数组转换为字符串

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = ["welcome","to","China","!"];
var str = arr.join();
var str1 = arr.join(",");
var str2 = arr.join("-");
var str3 = arr.join("");
console.log(str);   //welcome,to,China,!
console.log(str1);   //welcome,to,China,!
console.log(str2);   //welcome-to-China-!
console.log(str3);   //welcometoChina!
console.log(arr);   //[ ‘welcome‘, ‘to‘, ‘China‘, ‘!‘ ]数组不会改变

14.2 split(),将字符串分割为字符串数组

stringObject.split(separator,howmany)

字符串.split(“字符串的分隔符”，[最大长度]);

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

howmany 可选。该参数可指定返回的数组的最大长度

14.3 将伪数组转化为真数组

伪数组无法使用数组的操作方法，因为伪数组就是一个带length的JSON对象

技术分享

15. 阻止浏览器默认行为event.preventDefault()

当特定事件发生的时候，浏览器会有一些默认的行为作为反应。最常见的事件不过于link被点击。当一个click事件在一个<a>元素上被触发时，它会向上冒泡直到DOM结构的最外层document，浏览器会解释href属性，并且在窗口中加载新地址的内容。

在web应用中，开发人员经常希望能够自行管理导航（navigation）信息，而不是通过刷新页面。为了实现这个目的，我们需要阻止浏览器针对点击事件的默认行为，而使用我们自己的处理方式。这时，我们就需要调用event.preventDefault().

anchor.addEventListener(‘click‘, function(event) {

  event.preventDefault();

  // Do our own thing

});

我们可以阻止浏览器的很多其他默认行为。比如，我们可以在HTML5游戏中阻止敲击空格时的页面滚动行为，或者阻止文本选择框的点击行为。

调用event.stopPropagation()只会阻止传播链中后续的回调函数被触发。它不会阻止浏览器的自身的行为。

16. 怎样解决浏览器兼容性

17. 正则匹配邮箱

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var mail = "kingov@qq.com";
var a = regMail.test(mail);

console.log(a);   //true

17.1匹配座机号码

17.2 匹配手机号

匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}

验证手机号：/^((13[0-9])|(15[^4,\D])|(18[0,5-9]))\d{8}$/

18. 正则里的(){}[]

正则表达式的() [] {}有不同的意思。

() 是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。

(\s*)表示连续空格的字符串。

[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字。[\s*]表示空格或者*号。

{}一般用来表示匹配的长度，比如 \s{3} 表示匹配三个空格，\s[1,3]表示匹配一到三个空格。

(0-9) 匹配 ‘0-9′ 本身。 [0-9]* 匹配数字（注意后面有 *，可以为空）[0-9]+ 匹配数字（注意后面有 +，不可以为空）{1-9} 写法错误。

[0-9]{0,9} 表示长度为 0 到 9 的数字字符串。

19. $(this)和this

$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。

而this,则是html元素对象，能调用元素属性，例如this.id,this.value。
例如假设已经使得this和$(this)都指向了input对象了，若要获得input的值,可以this.value，但$(this)就得$(this).val()。

　　相信很多刚接触JQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

首先来看看JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($(‘#id‘));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了。

那么，我们再回过头来说$(this)，这个this是什么呢？假设我们有如下的代码：

$("#desktop a img").each(function(index){

alert($(this));

alert(this);

}

那么，这时候可以看出来：

alert($(this)); 弹出的结果是[object Object ]

alert(this); 弹出来的是[object HTMLImageElement]

也就是说，后者返回的是一个html对象(本例中是遍历HTML的img对象，所以为 HTMLImageElement)。很多人在使用jquery的时候，经常this.attr(‘src‘); 这时会报错“对象不支持此属性或方法”，这又是为什么呢？其实看明白上面的例子，就知道错在哪里了：

很简单，this操作的是HTML对象，那么，HTML对象中怎么会有val()方法了，所以，在使用中，我们不能直接用this来直接调用jquery的方法或者属性。

20. scrollWidth、clientWidth、offsetWidth

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

来自为知笔记(Wiz)

基础知识

标签：

原文地址：http://www.cnblogs.com/kingov/p/5582508.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

基础知识

1. 将“300px”转换成数字300 . 用parseInt();

2. a instanceof b (判断a是否是b的一个实例)

3.arguements

4.字符串操作

4.1数组转化成字符串

4.2用string构造函数，将数字转换为字符串

4.3toString(),转换成字符串

4.4进制之间的转换

4.5charAt(),根据字符的位置来获取该字符，charCodeAt()返回对应字符的编码

4.6 indexOf，从前向后索引字符串位置（参数： 索引字符串）

4.7 concat连接字符串

4.8 slice() ， 截取字符串

4.9 substr（参数1，参数2）,截取字符串

4.10 toUpperCase(),转换大写(没有参数)

4.11 toLowerCase(),转换为小写（没有参数）

4.12 查看上传图片的格式

5. 获取页面所有的checkbox

6.用addEventListener

7.描述浏览器在输入网址的所有过程

8. JavaScript怎样访问cookies

9. 清除浮动

10. ajax请求的安全性，get还是post

11. 移动端的事件

12. DOM事件介绍

12.1 HTML5的新特性，写出至少5个

什么是HTML5

HTML

视频

多媒体标签属性

方法

全屏 API

13. 判断true/false

14. 数组的常用操作

14.1 join(),将数组转化为字符串

14.2 split(),将字符串分割为字符串数组

14.3 将伪数组转化为真数组

15. 阻止浏览器默认行为event.preventDefault()

16. 怎样解决浏览器兼容性

17. 正则匹配邮箱

17.1匹配座机号码

17.2 匹配手机号

18. 正则里的(){}[]

19. $(this)和this

20. scrollWidth、clientWidth、offsetWidth

4.6 indexOf，从前向后索引字符串位置（参数：索引字符串）

4.8 slice() ，截取字符串