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

<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();
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,636评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,890评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,680评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,766评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,665评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,045评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,515评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,182评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,334评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,002评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,599评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2赞 341

推荐阅读更多精彩内容

  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,316评论 0赞 2
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,155评论 0赞 1
  • JQuery
    //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 698评论 0赞 9
  • JQuery
    选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 467评论 0赞 1
  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 648评论 0赞 3