综合

深入理解JS中声明提升、作用域（链）和this关键字
从proto和prototype来深入理解JS对象和原型链

• 继承

• 原型链

• 构造函数

• 闭包

• BOM

• DOM

• Node节点

数组操作

//数组操作
var array = [1,2,3,4,5];
var ar1 = ['a','b'];
array.pop();//尾部出栈,返回新长度
array.push(6);//尾部入栈
array.push(...ar1);//入栈整个数组ar1到尾部，而不是 array.push(ar1) --> Array[2]
array.shift();//头部出栈
array.unshift(0);//头部入栈
array.sort();//默认按照字符串排序
array.sort((a,b) => a - b);//a - b 递增, b - a 递减
array.join('-');//数组元素连接成字符串，默认是,分割
array.concat(...ar1);//对原数组没有影响,...加与否都ok
//切数组,不影响原数组
array.slice(2,4);// 起点和结束位置截取  [3,4,5] 整数从0开始
array.slice(-3,-1);//[3,4,5] 负数从-1开始,从后面往前截取
//拼接原数组,影响原数组 -- 删除或者添加元素来更改数组
array.splice(1,0,'6');//在1的位置插入'6' [1,'6',2,3,4,5]
array.splice(1,1,'a')//删出1位置的'6'，用'a'代替 [1,'a',2,3,4,5]
array.splice(1,1)//删出1位置的'6', [1,2,3,4,5]

BOM&DOM结构图

�

CSS备注

选择器

• 通配符选择器

• {属性:值;} — 优先级最高,会覆盖其他相同的属性

• 标签选择器

p {color: red;} — 将p标签颜色设置为红色

• ID选择器

  #id名 {color:red;}  --- 某个唯一id的名字,前面加上#号标记

• 类选择器

  .className {color:red;}  -- 定义一个class,用.开头,使用在 <p class="className">

• 复合选择器

  • 标签指定式选择(既…又) — 有两个选择器构成,第一个为标签选择器,第二个为class或者id选择器,中间不能有空格

如: h3.className 或者 h3#idName {color:red;}

• 后代选择器 — 用来选择元素或者原数组的后代,外层标记写在前面,内层标签写在后面,中间用空格分开

如: .className h3 {color:red;} 表示className类选择器使用方子节点中的h3标签 对应的颜色设置

• 并集选择器 — 合并任意两种选择器,用,号分开

如 .className,h3 {color:red;}

• 子元素选择器 — 让css智能选择器子辈的元素 用 > 号分开
  h1 > strong {color:red;} h1标签下面的 strong的css样式设定

• 属性选择器

  • 选择所有的文本框标签

   input[type="textbox"]{color:red; }

• 选择包含aside类的所有div标签

  div[class~="aside"]{color:red; }

• 选择拥有id和class属性的p标签

  p[id][class]{ color:red; }

继承性

• a标签不继承父容器的字体颜色。

• 所有字相关的都可以继承，比如：color、text-系列、font-系列、line-系列、cursor

• 并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。

• 所有盒子相关的属性都不能继承。

优先级

• 内联样式最大，内联样式的优先级最高。 — style=”color:red”

• ID选择器的优先级，仅次于内联样式。 — #id名字 {}

• 类选择器优先级低于ID选择器 —.class名字 {}

• 标签选择器低于类选择器。 — 标签名字 {}

标签模式

块元素

• 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性

• 块级元素容器可以容纳多个嵌套的块级标签或者行内标签。

• 常见的块元素有

  ~

  、

  、

  、

  、
  、
  1. 等，其中
     标记是最典型的块元素。

  行内元素

  • 行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

  • 行内元素不能嵌套块级标签，只能嵌套其他的行内标签。

  • 常见的行内元素有、、、、、、、、、等，其中标记最典型的行内元素。

  WEB安全色

  不同的平台（Mac、PC等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在Mac上的Web浏览器中的图像，与它在PC上相同浏览器中显示的效果可能差别很大。
  选择特定的颜色时，浏览器会尽量使用本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色，就会通过抖动或者混合自身的颜色来尝试重新产生该颜色

  行高原理

  

  Overflow

  当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式

  • visible

    内容不会被修剪，会呈现在元素框之外（默认值）
  

  • hidden

    溢出内容会被修剪，并且被修剪的内容是不可见的
  

  • auto

    在需要时产生滚动条，即自适应所要显示的内容
  

  • scroll

    溢出内容会被修剪，且浏览器会始终显示滚动条
  

  JQuery

  JQuery包装对象和选择器

  JQuery接收一个回调函数，表示页面加载完成后执行

   $(function () {
        //页面加载完成后的回调
        var $btn = $('#btn'); //通过id选择器,返回jquery包装对象
        var btn = $btn[0]; //jquery对象转成dom对象
        var $btn1 = $(btn) //dom对象转换成jquery对象
      })
  

  DOM对象转换成了jQuery对象后，就拥有了jQuery.fn (构造函数的原型对象)所具有的所有方法

  简单选择器

  ID选择器	$("#id");	获取指定ID的元素
  全选选择器	$('*');	匹配所有元素
  类选择器	$(".class");	获取同一类class的元素
  标签选择器	$("div");	获取同一类标签的所有元素
  并集选择器	$("div,p,li");	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
  交集选择器标签指定式选择器	$("div.redClass");	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

  层级选择器

  子代选择器	$("ul>li");	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
  后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

  过滤选择器

  :first	$('li:first');	获取第一个元素
  :last	$('li:last');	获取最后个元素
  :contains(text)	$("div:contains('John')")	匹配包含给定文本的元素
  :not(selector)	$("input:not(:checked)")	去除所有与给定选择器匹配的元素
  :eq(index)	$("li:eq(2)").css("color", "red");	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
  :odd	$("li:odd").css("color", "red");	获取到的li元素中，选择索引号为奇数的元素
  :even	$("li:even").css("color", "red");	获取到的li元素中，选择索引号为偶数的元素

  设置样式

  jQuery设置dom的元素样式，提供了方法css(‘styleName’, ‘value’), 一个参数表示获取属性值，两个参数表示设置对应的属性值

  //基数行 背景设置 
  $("tr:odd").css('backgroundColor', '#eee')
  

  属性选择器

  $("p[attr]")	选取所有该p标签且具有attr属性的节点
  $("p[attr=a_value]")	选取所有p标签且具有attr属性并满足属性值为a_value的节点
  $("p[attr^=a_value_head]")	选取所有p标签且attr属性的属性值是以a_value_head开头的
  $("p[attr$=a_value_end]")	选取所有p标签且attr属性的属性值是以a_value_end结尾的
  $("p[attr*=a_value")	选取所有p标签且attr属性的属性值中包含a_value

  筛选方法

  parent()	$("#first").parent();	查找父亲
  children(selector)	$("ul").children("li")	相当于$("ul>li")，子类选择器
  find(selector)	$("ul").find("li");	相当于$(“ul li”),后代选择器
  siblings(selector)	$("#first").siblings("li");	查找兄弟节点，不包括自己本身。
  nextAll([expr])	$("div:first").nextAll()	查找当前元素之后所有的同辈元素。
  prevtAll([expr])	$("div:first").prevAll()	查找当前元素之前所有的同辈元素
  hasClass(class)	$('div').hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true。
  eq(index)	$("li").eq(2);	相当于$("li:eq(2)"),index从0开始
  not(exp)	$("p").not("#selected")	删除与指定表达式匹配的元素

  例子

  $(function () {
    // 点击了当前行， 那么让当前行 背景高亮，让其他的兄弟节点背景不高亮。
    // 选择到了所有的tr
    $('tr').click(function (e) {// 隐式迭代
      // jQuery的事件处理程序中。 this依然指向 绑定事件dom对象。
      $(this).css('backgroundColor', '#c1c');
      // 拿到多个兄弟节点，隐式迭代全部设置背景为白色。
      $(this).siblings().css('backgroundColor','#fff');
    })
  })
  

  �jQuery事件

  bind

  为每个匹配元素的特定事件绑定事件处理函数。在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。

  参数:

  • type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如”click”或”submit”，还可以是自定义事件名。

  • data:作为event.data属性值传递给事件对象的额外数据对象

  • fn:绑定到每个匹配元素的事件上面的处理函数

  $("form").bind("submit", function() {
    return false; // 取消默认操作。
  })
  
  // 同时绑定多个事件
  $('#foo').bind('mouseenter mouseleave', function() {
    $(this).toggleClass('entered');
  });
  
  //同时绑定多个事件类型/处理程序
  $("button").bind({
    click: function(){
      $("p").slideToggle();
    },
    mouseover: function(){
      $("body").css("background-color","red");
    },
    mouseout: function(){
      $("body").css("background-color","#FFFFFF");
    }
  })
  

  one

  语法：$dom.one(type,[data],fn)
  一次性执行的事件，参数和bind相同

  // 当所有段落被第一次点击的时候，显示所有其文本。
  $("p").one("click", function(){
    alert( $(this).text() );
  });
  

  live

  语法： $dom.live(type, [data], fn)
  jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

  // 先绑定事件
  $('.clickme').live('click', function() {
    alert("Live handler called."); 
  });
  // 然后再添加一个新元素：此时click也有效
  $('body').append('<div class="clickme">Another target</div>');
  

  delegate

  语法： $dom.delegate(selector,[type],[data],fn)
  说明：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

  • selector:选择器字符串，用于过滤器触发事件的元素。

  • type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

  • data:传递到函数的额外数据

  • fn:当事件发生时运行的函数

  // jQuery 代码:
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
  

  on

  语法： $dom.on(events,[selector],[data],fn)

  说明：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

  参数:

  • events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。

  • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

  • data:当一个事件被触发时要传递event.data给事件处理函数。

  • fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
    

  // bind绑定事件
  $("p").on("click", function(){
    alert( $(this).text() );
  });
  
  // 事件委托
  $('div').on('click', 'p', function(e){
    console.log(this.innerHTML);
  })
  

  事件解绑 & 自定义事件

  JQuery动画

  JQuery高级特性