javascript知识点汇总

介绍JS中的let变量:

• let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。
• let 声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 不同的变量    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}

数组有四种方式：

var arr1 = new Array('a', 'b', 'c');    //这是一个预定义的数组，在创建时初始化
var arr2 = ['a', 'b', 'c' ];       //同样是在创建时初始化，但是这种创建更为简洁直观
var arr3 = new Array( );   var arr4 = [ ];     //这两种是创建空的数组

最常用的对象创建方式:

function Demo(){
    var obj=new Object();
    obj.name="张思";
    obj.age=12;
    obj.firstF=function(){
    }
    obj.secondF=function(){
    }
    return obj;
}

var one=Demo();
// 调用输出
document.write(one.age);

function Demo(){
    this.name="张思";
    this.age=12;
    this.firstF=function(){
    }
    this.secondF=function(){
    }
}

var one=new Demo

// 调用输出
document.write(one.age);

JavaScript 变量生命周期

• JavaScript 变量生命周期在它声明时初始化。

  局部变量在函数执行完毕后销毁。

  全局变量在页面关闭后销毁。

JavaScript == 与 === 区别

• 1、对于 string、number 等基础类型，== 和 === 是有区别的

• a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
•  b）同类型比较，直接进行 "值" 比较，两者结果一样。

• 2、对于 Array,Object 等高级类型，== 和 === 是没有区别的

  进行 "指针地址" 比较

  3、基础类型与高级类型，== 和 === 是有区别的

• a）对于 ==，将高级转化为基础类型，进行 "值" 比较
• b）因为类型不同，=== 结果为 false

JavaScript 数据类型

• 在 JavaScript 中有 5 种不同的数据类型：

• string
• number
• boolean
• object
• function

• 3 种对象类型：

• Object
• Date
• Array

• 2 个不包含任何值的数据类型：

• null
• undefined

typeof 用以获取一个变量或者表达式的类型，typeof 一般只能返回如下几个结果：

• number,boolean,string,function（函数）,object（NULL,数组，对象）,undefined。

JavaScript 严格模式(use strict)

• 消除代码运行的一些不安全之处，保证代码运行的安全；
• 提高编译器效率，增加运行速度；
• 为未来新版本的Javascript做好铺垫。

javascript:void(0) 含义

• javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

jQuery 选择器

$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线实例

 

attr 和 prop 的区别介绍：

• 对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
• 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

append/prepend和after/before有什么区别呢？

append

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script> 结果是这样的:
<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>
after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
结果是这样的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>
总结：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。