JavaScript & jQuery

2017-07-06 本文已影响69人 JasonJe

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

<script src='js/main.js'></script>，【<head>标签之中】

2.2 DOM The Document Object Model

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

2.2 jQuery初探

<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>，【<head>标签之中】

在文档加载后激活函数：$(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来确定元素。

<script type="text/javascript" src="script.js"></script>，【<head>标签之中】

$(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 = $("<h1>Hello</h1>");

在HTML文件中添加一段话

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

.before()和.after()函数

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

$(document).ready(function() {
  $('#one').after("<p>123</p>")
})

移动元素

$(document).ready(function() {
  $('#one').after("<p>123</p>");
  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('<div class = "item">' + toAdd + '</div>')
});

删除已经点击的内容

$(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();
});
```