JavaScript & jQuery

1. JavaScript

1.1 数据类型

• 字符串String
  单引号或者双引号包围

• 数字Number

• 布尔类型
  true 和 false

1.2 打印输出

• 控制台打印输出

console.log('bacon', 'pesto')

利用反斜杠“\”进行转义

1.3 数学计算

加 Add：+
减 Subtract：-
乘 Multiply：*
除 Divide：/
模 Modulus：%

随机数 Math.random()
取整运算 Math.floor() 【取最接近的整数】

1.4 注释

单行注释 //
多行注释 /*...*/

1.5 变量

声明变量

var myName = 'JasonJe';

console.log('利用' + '连接变量');【不含空格】
利用“,”时候，存在空格。

1.6 控制流

• if/else 结构，if (...) {...} else {...}

比较运算符，>,<,>=,<=;
比较两个变量是否相等，===;
不想等，!==.

• if/else if/else 结构，if (...) {...} else if (...) {...} ... else{...}

逻辑运算

• && 与

• || 或

• ! 非

• switch结构， switch (...) {case ...: ... ; break;...;default: ...; break;}

1.7 函数

function functionName(inpuVar) {...}

return返回函数结果

function 思想：分而治之

1.8 变量作用域

Scope全局变量，所有部分可以访问；Global Scope局部变量，存在部分可以访问。

• function 内进行定义的变量，作用域为functions内部；

• 嵌套的function，内部函数可以访问外部函数的变量；

• 嵌套的function中，变量同名，从内向外查找，内部函数屏蔽外部函数变量。

• 变量提升
  变量首先undefined --> 后声明有值 --> 实际存在，有意义。

1.9 数组

• 定义 var bucketList = ['123', '456', '789'];
• 调用元素 bucketList[0]，下标从0开始;
• 获取数组长度，bucketList.length;
• 从尾部添加元素，bucketList.push('101112', '131415');
• 从尾部去除元素，bucketList.pop().

1.10 循环

• for 循环，for(初始条件;判断条件;迭代条件){...};

e.g.

var i;
for (i = 1; i<=10000; i++){
  x = x + i;
}
x;

• 由前往后遍历，初始条件为0；
• 由后往前遍历，初始条件为数组长度，判断条件为数组最小值，迭代条件为递减。

循环嵌套：外层循环遍历一次，内层循环全部遍历。

• while 循环，while(...){...}

2. JavaScript & the DOM

2.1 JS文件链接HTML

，【标签之中】

2.2 DOM The Document Object Model

• 获取html中元素
  var skillset = document.getElementsByClassName('skillset');
alert(...)，弹窗提示信息

2.2 jQuery初探

，【标签之中】

• 在文档加载后激活函数：$(document).ready(main);

• 利用$('.skillset');选择CSS中的元素，等价于document.getElementsByClassName('skillset');

• 利用美元符号来定义jQuery内的变量，如var $skillset = $('.skillset');

• $('.my-selector').hide();，隐藏CSS指定元素内容;

• $('.example-class').fadeIn(400);，淡出淡入内容;

• $('.example-class').on('click', function() { // execute the code here when .example-class is clicked.});，等待一个功能的实现后执行相应的动作;

• $('.example-class').show();，显示CSS指定元素内容;

• $('example-class').toggle();，切换选择元素的显示状态;

• $('.projects-button').toggleClass('active');，切换CSS类;

• $('.projects-button').on('click', function() {
    $('.projects').toggle();
    $(this).toggleClass('active');
  });
  

  this为JS的关键字，上述操作中，只针对点击了的元素进行'active'，其它元素不进行;

• $('.item-one').next().hide();，调用下一个的元素;

• $('.my-selector').text('Hello world!');，替换文本;

• $('.example-class').slideToggle(400);，滑动元素;

3. jQuery

3.1 jQuery介绍

利用$('.button').someAction来指定CSS中的元素，并进行相应的动作。

可以直接指定ID来确定元素。

，【标签之中】

$(document).ready(something);，当document是ready()，做一些事情(somthing)。

利用"{"和"}"来包括jQuery语句：

function(){
    jQuery magic;
}

$(document).ready(function() {
    jQuery magic;
});

jQuery magic语句范例:$('div').slideDown('slow');

• mouseenter()，鼠标进入元素后进行的相应动作;

• mouseleave()，鼠标离开元素后进行的相应动作;

• fadeTo()，元素淡入，两个参数，第一个为淡入速度，第二个为透明度;

  $(document).ready(function() {
    $('div').mouseenter(function() {
        $('div').fadeTo('fast', 1);
    });
    $('div').mouseleave(function() {
        $('div').fadeTo('fast', 0.5);
    })
  });
  

3.2 jQuery函数

• 函数定义

  $(document).ready(function() {
    Do somthing
  });
  

• 变量

  var lucky = 1;
  var name = "Codecademy";
  var $p = $('p');
  

父子元素操作，使用:nth-child()进行选择，参数为第几个元素；
最后一个子元素的定义为：:last-child。

• 选择Class对象

  $(document).ready(function() {
    $('button').click(function() {
        $('.vanish').fadeOut('slow');
    });
  });
  

• 注意“button”标签的调用。 *

• 选择ID对象

  $(document).ready(function() {
    $('button').click(function() {
        //$('div').fadeOut('slow');
        $('#blue').fadeOut();
    });
  });
  

• 选择多个对象

  $(document).ready(function() {
    $('.pink, .red').fadeTo('slow', 0);
  });
  

• this 关键字

只针对当前对象进行操作，并非所有对象。

• ready()函数

$(document).ready()，文档加载时，函数激活。

• .click()函数

• .slideToggle()函数

  $(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
  })
  

3.3 HTML 操作

• 创建一个HTML对象
  ·$h1 = $("

  Hello

  ");

• 在HTML文件中添加一段话

  $(document).ready(function() {
    $('body').append("
  I'm a paragraph!
  ")
  });
  

• .before()和.after()函数

  在“one”ID后面添加一段话

  $(document).ready(function() {
    $('#one').after("
  123
  ")
  })
  

  移动元素

  $(document).ready(function() {
    $('#one').after("
  123
  ");
    var $p = $('p')
    $('#one').after($p);
    $div = $('#two');
    $div.after($p)
  })
  

• empty()和remove()函数
  empty()删除元素本身内容和其子元素；
  remove()删除元素本身。

• addClass()和removeClass()函数
  addClass()添加元素，不需要#和.；
  removeClass()删除元素。

  $(document).ready(function() {
     $('#text').click(function() {
       $(this).addClass('highlighted'); 
    })
  });
  

• .toggleClass()
  切换CSS类。

• 改变CSS属性值

  $("div").height("100px");
  $("div").width("50px");
  $("div").css("background-color","#008800");
  

• .html()和.val()函数
  .html()更改指定元素的内容；
  .val()获取指定表单的内容。

• 相应按钮操作，存储输入表单的值

  $(document).ready(function() {
    $('#button').click(function() {
        var toAdd = $('input[name=checkListItem]').val();
    });
  });
  

• 添加表单存储内容至HTML

  $(document).ready(function() {
    $('#button').click(function() {
        var toAdd = $('input[name=checkListItem]').val();
    });
    $('list').append('
  ' + toAdd + '
  ')
  });
  

• 删除已经点击的内容

  $(document).on('click', '.item', function() {
    $(this).remove();
  })
  

3.4 jQuery 事件

• 切出

  $(document).ready(function() {
    $('element').fadeOut('speed');
  });
  

• 事件处理程序

  $(document).ready(function() {
    $('element').event(function() {
        $(this).fadeOut('fast');
    });
  });
  

• .click()事件和.hover()事件组合

  .hover()，鼠标指针悬停后进行的元素事件

  $(document).ready(function() {
    $('div').click(function() {
        $(this).fadeOut('fast');
    });
    $('div').hover(function() {
        $(this).addClass('red');
    });
  });
  

• .dblclick()双击事件

• hover()事件

  鼠标指针悬停后进行的元素事件

• .focus()事件

  当元素获得焦点时，发生 focus 事件

  $(document).ready(function() {
    $('elem').event(function() {
        $(this).func('css','color');
    });
  });
  

• .animate()事件

  通过CSS样式将元素从一个状态改变为另一个状态

• .keydown()事件

  当按下键盘时候激发事件

  $(document).ready(function() {
    $(document).keydown(function() {
        $('div').animate({left:'+=10px'}, 500);
    });
  });
  

• 移动元素

  $(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 39:
                $('img').animate({left:"+=10px"}, 'fast');
                break;
            // Right Arrow Pressed
            case 38:
                $('img').animate({top:"-=10px"}, 'fast');
                break;
            // Down Arrow Pressed
            case 40:
                $('img').animate({top:"+=10px"}, 'fast');
                break;
        }
    });
  });
  

• .hide()事件

  隐藏元素

3.5 jQuery 效果

$(document).ready(function() {
    $('img').effect(anim, speed);
});

• explode 爆炸效果

  $(document).ready(function() {
    $('elem').event(function() {
        $(this).effect('explode');
    });
  });
  

• bounce 弹跳效果

  200毫秒内弹跳5次

  $(document).ready(function() {
    $('elem').event(function() {
        $(this).effect('bounce', {times:5}, 2000);
    });
  });
  

• slide 滑动效果

  $(document).ready(function() {
    $('elem').event(function() {
        $(this).effect('slide');
    });
  });
  

• .draggable() 拖动元素

  $(document).ready(function() {
    $('#car').draggable();
  });
  

• .resizable() 缩放元素

  $(document).ready(function() {
    $('div').resizable()
  });
  

• .selectable() 选择元素

  $(document).ready(function() {
    $('ol').selectable();
  ;});
  

• .sortable() 排序元素

  $(document).ready(function() {
    $('ol').sortable();
  ;});
  

• .accordion() 创建折叠菜单

  对ID为“menu”的div元素创建折叠菜单

  $(document).ready(function() {
    $('#menu').accordion();
  });