數據類型
基本數據類型：
- number數值類型，在js中，只有浮點型一種
- string字符串類型，在js中，屬於基本數據類型，可以用單引號或者雙引號
- boolean布爾類型
- undefined未定義，在js中，如果聲明一個變量，沒有賦值，那該變量就是undefined
- null表示空值，可以作爲函數的返回值，表示函數返回一個空對象
複雜數據類型：
- 在js中，函數和數組，也是對象的一種，可以說複雜數據類型就是對象
變量和運算符
- 在js中，變量不區分類型，可以指向任意的數據類型
- 在js中，運算符和java基本一致
數組
通過Array構造函數創建數組
在js中聲明數組，可以指定也可以不指定長度
- var arr1=new Array(); //空數組
- var arr2=new Array(1,2,3,4,5);
函數
函數和java中的方法作用相同，可以反覆執行調用
- function 函數名(參數){}
- var 變量名/函數名=function(參數){}
JQuery 選擇器
- $符是一個常用符號，等價於jQuery，調用$()等價於調用jQuery()，它會返回一個jQuery對象（集合），比如：$("div")返回的是一個jQuery對象，其中包含了當前文檔中所有div元素（以JS對象的形式放在jQuery對象中）
導入方式
<script src="../js/jquery-3.5.1.min.js"></script>
就緒事件函數
這個函數將會在最後一個html元素加載完以後立即執行，也叫文檔就緒事件函數
$(function(){});
比如可以在該方法中獲取元素
$(function(){
var h1=document.getElementById("h1");
alert(h1.innerHTML);
});
上面的方法等價於 $document.ready(function(){});
所以我們把js選擇器放在就緒事件函數中
選擇器
基礎選擇器
//根據id，修改把所有div元素背景
$("#b1").click(function () {
$("div").css("background","#ff69b4");
});
//根據id，修改id爲one的元素背景
$("#b2").click(function(){
$("#one").css("background","#9acd32");
});
//根據id，修改class爲two元素背景
$("#b3").click(function(){
$(".two").css("background","#ff6347");
});
層級選擇器
//根據id，修改div元素下所有子孫元素背景
$("#b4").click(function(){
$("div span").css("background","#ff0000");
});
//根據id，修改div元素下所有子元素背景
$("#b5").click(function(){
$("div>span").css("background","#ffff00");
});
//根據id，修改根據id獲取到的元素後面相鄰的一個元素的背景，也可以寫成註釋的寫法，必須是挨着
$("#b6").click(function(){
// $("#one+").css("background","#0000ff");
$("#one").next().css("background", "#0000ff");
// $("#one+div").css("background","#0000ff");//這個是指定後面相鄰的div元素，必須是挨着
});
//根據id，修改根據id獲取到的元素後面所有元素的背景，也可以寫成註釋的寫法
$("#b7").click(function () {
$("#one~").css("background","#0000ff");
// $("#one").nextAll().css("background", "#76aa0f");
$("#one").nextAll("div").css("background", "#76aa4f");//根據id，修改根據id獲取到的元素後面所有div元素的背景
});
//根據id，修改除了該元素之外的所有元素的背景
$("#b8").click(function () {
$("#one").siblings().css("background", "#76aa4f");
});
基本過濾選擇器
//所有div元素中的第一個
$("#b10").click(function () {
$("div:first").css("background", "#76aa4f");
});
//所有div元素中的最後一個
$("#b11").click(function () {
$("div:last").css("background", "#76aa4f");
});
//所有div元素中的第i+1個元素，假如div:eq(n)，就是第n+1個元素
$("#b12").click(function () {
$("div:eq(1)").css("background", "#76aa4f");
});