1. JavaScript

1.1 數(shù)據(jù)類型

字符串String
單引號或者雙引號包圍
數(shù)字Number
布爾類型
true 和 false

1.2 打印輸出

控制臺打印輸出

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

利用反斜杠“\”進(jìn)行轉(zhuǎn)義

1.3 數(shù)學(xué)計算

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

隨機(jī)數(shù) Math.random()
取整運(yùn)算 Math.floor() 【取最接近的整數(shù)】

1.4 注釋

單行注釋 //
多行注釋 /*...*/

1.5 變量

聲明變量

var myName = 'JasonJe';

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

1.6 控制流

if/else 結(jié)構(gòu)，if (...) {...} else {...}

比較運(yùn)算符，>,<,>=,<=;
比較兩個變量是否相等，===;
不想等，!==.

if/else if/else 結(jié)構(gòu)，if (...) {...} else if (...) {...} ... else{...}

邏輯運(yùn)算

&& 與
|| 或
! 非
switch結(jié)構(gòu)， switch (...) {case ...: ... ; break;...;default: ...; break;}

1.7 函數(shù)

function functionName(inpuVar) {...}

return返回函數(shù)結(jié)果

function 思想：分而治之

1.8 變量作用域

Scope全局變量，所有部分可以訪問；Global Scope局部變量，存在部分可以訪問。

function 內(nèi)進(jìn)行定義的變量，作用域為functions內(nèi)部；
嵌套的function，內(nèi)部函數(shù)可以訪問外部函數(shù)的變量；
嵌套的function中，變量同名，從內(nèi)向外查找，內(nèi)部函數(shù)屏蔽外部函數(shù)變量。
變量提升
變量首先undefined --> 后聲明有值 --> 實(shí)際存在，有意義。

1.9 數(shù)組

定義 var bucketList = ['123', '456', '789'];
調(diào)用元素 bucketList[0]，下標(biāo)從0開始;
獲取數(shù)組長度，bucketList.length;
從尾部添加元素，bucketList.push('101112', '131415');
從尾部去除元素，bucketList.pop().

1.10 循環(huán)

for 循環(huán)，for(初始條件;判斷條件;迭代條件){...};

e.g.

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

由前往后遍歷，初始條件為0；
由后往前遍歷，初始條件為數(shù)組長度，判斷條件為數(shù)組最小值，迭代條件為遞減。

循環(huán)嵌套：外層循環(huán)遍歷一次，內(nèi)層循環(huán)全部遍歷。

while 循環(huán)，while(...){...}

2. JavaScript & the DOM

2.1 JS文件鏈接HTML

<script src='js/main.js'></script>，【<head>標(biāo)簽之中】

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>標(biāo)簽之中】

在文檔加載后激活函數(shù)：$(document).ready(main);
利用$('.skillset');選擇CSS中的元素，等價于document.getElementsByClassName('skillset');
利用美元符號來定義jQuery內(nèi)的變量，如var $skillset = $('.skillset');
$('.my-selector').hide();，隱藏CSS指定元素內(nèi)容;
$('.example-class').fadeIn(400);，淡出淡入內(nèi)容;
$('.example-class').on('click', function() { // execute the code here when .example-class is clicked.});，等待一個功能的實(shí)現(xiàn)后執(zhí)行相應(yīng)的動作;
$('.example-class').show();，顯示CSS指定元素內(nèi)容;
$('example-class').toggle();，切換選擇元素的顯示狀態(tài);
$('.projects-button').toggleClass('active');，切換CSS類;
```
$('.projects-button').on('click', function() {
  $('.projects').toggle();
  $(this).toggleClass('active');
});
```
this為JS的關(guān)鍵字，上述操作中，只針對點(diǎn)擊了的元素進(jìn)行'active'，其它元素不進(jìn)行;
$('.item-one').next().hide();，調(diào)用下一個的元素;
$('.my-selector').text('Hello world!');，替換文本;
$('.example-class').slideToggle(400);，滑動元素;

3. jQuery

3.1 jQuery介紹

利用$('.button').someAction來指定CSS中的元素，并進(jìn)行相應(yīng)的動作。

可以直接指定ID來確定元素。

<script type="text/javascript" src="script.js"></script>，【<head>標(biāo)簽之中】

$(document).ready(something);，當(dāng)document是ready()，做一些事情(somthing)。

利用"{"和"}"來包括jQuery語句：

function(){
    jQuery magic;
}

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

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

mouseenter()，鼠標(biāo)進(jìn)入元素后進(jìn)行的相應(yīng)動作;
mouseleave()，鼠標(biāo)離開元素后進(jìn)行的相應(yīng)動作;

fadeTo()，元素淡入，兩個參數(shù)，第一個為淡入速度，第二個為透明度;

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

3.2 jQuery函數(shù)

函數(shù)定義

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

變量

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

父子元素操作，使用:nth-child()進(jìn)行選擇，參數(shù)為第幾個元素；
最后一個子元素的定義為：:last-child。

選擇Class對象

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

注意“button”標(biāo)簽的調(diào)用。 *

選擇ID對象

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

選擇多個對象

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

this 關(guān)鍵字

只針對當(dāng)前對象進(jìn)行操作，并非所有對象。

ready()函數(shù)

$(document).ready()，文檔加載時，函數(shù)激活。

.click()函數(shù)

.slideToggle()函數(shù)

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

3.3 HTML 操作

創(chuàng)建一個HTML對象
·$h1 = $("<h1>Hello</h1>");

在HTML文件中添加一段話

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

.before()和.after()函數(shù)

在“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()函數(shù)
empty()刪除元素本身內(nèi)容和其子元素；
remove()刪除元素本身。
addClass()和removeClass()函數(shù)
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()函數(shù)
.html()更改指定元素的內(nèi)容；
.val()獲取指定表單的內(nèi)容。

相應(yīng)按鈕操作，存儲輸入表單的值

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

添加表單存儲內(nèi)容至HTML

$(document).ready(function() {
  $('#button').click(function() {
      var toAdd = $('input[name=checkListItem]').val();
  });
  $('list').append('<div class = "item">' + toAdd + '</div>')
});

刪除已經(jīng)點(diǎn)擊的內(nèi)容

$(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()，鼠標(biāo)指針懸停后進(jìn)行的元素事件

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

.dblclick()雙擊事件
hover()事件

鼠標(biāo)指針懸停后進(jìn)行的元素事件

.focus()事件

當(dāng)元素獲得焦點(diǎn)時，發(fā)生 focus 事件

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

.animate()事件

通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)

.keydown()事件

當(dāng)按下鍵盤時候激發(fā)事件

$(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毫秒內(nèi)彈跳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() 創(chuàng)建折疊菜單

對ID為“menu”的div元素創(chuàng)建折疊菜單
```
$(document).ready(function() {
  $('#menu').accordion();
});
```

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaScript & jQuery

JavaScript & jQuery

1. JavaScript

1.1 數(shù)據(jù)類型

1.2 打印輸出

1.3 數(shù)學(xué)計算

1.4 注釋

1.5 變量

1.6 控制流

1.7 函數(shù)

1.8 變量作用域

1.9 數(shù)組

1.10 循環(huán)

2. JavaScript & the DOM

2.1 JS文件鏈接HTML

2.2 DOM The Document Object Model

2.2 jQuery初探

3. jQuery

3.1 jQuery介紹

3.2 jQuery函數(shù)

3.3 HTML 操作

3.4 jQuery 事件

3.5 jQuery 效果

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript & jQuery

1. JavaScript

1.1 數(shù)據(jù)類型

1.2 打印輸出

1.3 數(shù)學(xué)計算

1.4 注釋

1.5 變量

1.6 控制流

1.7 函數(shù)

1.8 變量作用域

1.9 數(shù)組

1.10 循環(huán)

2. JavaScript & the DOM

2.1 JS文件鏈接HTML

2.2 DOM The Document Object Model

2.2 jQuery初探

3. jQuery

3.1 jQuery介紹

3.2 jQuery函數(shù)

3.3 HTML 操作

3.4 jQuery 事件

3.5 jQuery 效果

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av