• javaScript，給頁(yè)面添加動(dòng)態(tài)效果和內(nèi)容的
• 歷史：1995年由網(wǎng)景公司發(fā)布 LiveScript同年更名為JavaScript簡(jiǎn)稱JS，和java沒(méi)啥關(guān)系 為了蹭熱度。

一、JS特點(diǎn)

• js屬于腳本語(yǔ)言，不需要編譯，由瀏覽器解析執(zhí)行。
• js可以嵌入到html代碼中
• js基于面向?qū)ο?，屬于弱類型語(yǔ)言

二、JS優(yōu)點(diǎn)

• 交互性：可以直接和用戶進(jìn)行交互
• 安全性：js語(yǔ)言智能訪問(wèn)瀏覽器內(nèi)部的數(shù)據(jù)不能訪問(wèn)瀏覽器之外內(nèi)容（電腦磁盤(pán)中的各種數(shù)據(jù)）

三、如何引入JS代碼

3.1 在元素的事件中書(shū)寫(xiě)js代碼

• 樣例
  image.png
  
  
  image.png

• 代碼
  <input type="button" value="點(diǎn)我試試！" onclick="alert('試試就試試')">

3.2 通過(guò)<script>標(biāo)簽添加js代碼

<script type="text/javascript">
    alert("第二種引入方式"); 
</script>

3.3 把js代碼寫(xiě)在單獨(dú)的js文件中，通過(guò)<script>標(biāo)簽的src屬性 引入js文件。

<script type="text/javascript" src="first.js"></script>

四、JS數(shù)據(jù)類型

4.1 所有數(shù)據(jù)類型

• 數(shù)值類型 number
• 字符串類型 string
• 布爾值類型 boolean
• undefined
• 對(duì)象類型

4.2 變量的聲明和賦值

• var age = 18;
• var name = "小明";
• var isBoy = true/false;
• age="18";
• var x;

4.3 數(shù)值類型

• js中底層都是浮點(diǎn)型，在使用過(guò)程中會(huì)自動(dòng)轉(zhuǎn)換整數(shù)或小數(shù)

    int x = 5/2; //2 
    var x = 5/2; //2.5   
    var x = 4/2; //2
  

• NaN: not a number 不是一個(gè)數(shù)， 通過(guò)isNaN()函數(shù)進(jìn)行判斷

4.4 字符串類型

• 通過(guò)單引號(hào)或雙引號(hào)修飾字符串

    var s1 = "abc";
    var s2 = 'abc';
  

4.5 布爾值類型

var b1 = true;
var b2 = false;

五、數(shù)據(jù)類型轉(zhuǎn)換

var z = "abc"+18;

• 任何數(shù)字和NaN進(jìn)行運(yùn)算結(jié)果都為NaN

5.1 數(shù)值類型轉(zhuǎn)換

1. 轉(zhuǎn)字符串： 直接轉(zhuǎn) 18-->"18"，"abc"+18 = "abc18"
2. 轉(zhuǎn)布爾值： 0和NaN-->false，其它都轉(zhuǎn)true
3. 在if括號(hào)里面的類型如果不是布爾類型會(huì)自動(dòng)轉(zhuǎn)成布爾類型

5.2 字符串類型轉(zhuǎn)換

1. 轉(zhuǎn)數(shù)值： 能轉(zhuǎn)直接轉(zhuǎn),不能轉(zhuǎn)轉(zhuǎn)成NaN。比如："100"->100，"abc"->NaN
2. 轉(zhuǎn)布爾值： 空字符串轉(zhuǎn)成false 其它true,""->false，"abc"->true

5.3 布爾值轉(zhuǎn)換

1. 轉(zhuǎn)數(shù)值： true->1，false->0；20+true=21，20+false=20;
2. 轉(zhuǎn)字符串: true->"true"，false->"false"，"abc"+true="abctrue"

5.4 undefined轉(zhuǎn)換

1. 轉(zhuǎn)數(shù)值： undefined->NaN，20+undefined=NaN
2. 轉(zhuǎn)字符串： undefined->"undefined"，"abc"+undefined="abcundefined"
3. 轉(zhuǎn)布爾值： undefined->false

5.5 對(duì)象類型為null時(shí)的轉(zhuǎn)換

1. 轉(zhuǎn)數(shù)值： null->0
2. 轉(zhuǎn)字符串： null->"null"
3. 轉(zhuǎn)布爾值: null->false

六、JS的運(yùn)算符 + - * / typeof

1、和Java中的運(yùn)算符大體相同

2、==和===區(qū)別（重點(diǎn)）

• ==會(huì)先將等號(hào)兩邊的變量類型統(tǒng)一，統(tǒng)一完后再比較內(nèi)容
  • "66"==66 true
• ===會(huì)先比較類型是否相同，類型相同后再比較內(nèi)容
  • "66"===66 false

3、兩數(shù)相除會(huì)自動(dòng)轉(zhuǎn)換小數(shù)和整數(shù)

• 5/2=2.5
• 4/2=2

4、typeof: 獲取變量的類型

typeof 18  //number
typeof 66 + 6   //"number6"

七、JS語(yǔ)句 （請(qǐng)參考其他語(yǔ)言，比如 java，下面是注意點(diǎn)）

1、包括： if / else / if else / while / do while / for / switch case

• 具體語(yǔ)法與其他計(jì)算機(jī)語(yǔ)言基本一致，略有差別，參考java

2、需要布爾值的地方如果不是布爾值會(huì)自動(dòng)轉(zhuǎn)成布爾值

• for循環(huán)中 把 int改成var ,不支持增強(qiáng)for循環(huán)(for each)

八、函數(shù)

8.1 函數(shù)定義

• 第一種

    function 函數(shù)名(參數(shù)列表){
        return 返回值;
    }
  

• 第二種

    var 函數(shù)名 = function(參數(shù)列表){
        return 18;
    }
  

8.2 一些和頁(yè)面元素相關(guān)的常用函數(shù)

1. 獲取頁(yè)面中的元素對(duì)象

    var input = document.getElementById("id");
   

2. 給文本框賦值和取值

    input.value="abc";//賦值
    var s = input.value;//取值
   

3. 給元素添加文本內(nèi)容

    元素對(duì)象.innerText = "文本內(nèi)容";
   

4. 給元素添加html代碼

    元素對(duì)象.innerHTML="<h1>abc</h1>";
   

九、相關(guān)、重要的api和操作

9.1 String相關(guān)api

1、 創(chuàng)建String的兩種方式：

• 第一種

    var s1 = "abc";
  

• 第二種

    var s2 = new String("abc");
  

2、 轉(zhuǎn)大小寫(xiě)

"abC".toUpperCase();//轉(zhuǎn)大寫(xiě)
"NBA".toLowerCase();//轉(zhuǎn)小寫(xiě)

3、 獲取某個(gè)字符串在另外一個(gè)字符串中出現(xiàn)的位置 從0開(kāi)始

"java hello".indexOf("a"); //第一次出現(xiàn)的位置
"java hello".lastIndexOf("a");//最后一次出現(xiàn)的位置

4、 截取字符串

• 字符串.substring(開(kāi)始索引，結(jié)束索引)

    例如："java hello".substring(start,[end]);
  

• end可省略，只寫(xiě)start截取到最后

• 注意：前閉后開(kāi)，若寫(xiě)end 截取到end的位置且不包含end位置的字符

5、 替換字符串 【！并沒(méi)有把原字符串修改掉！】

• 字符串.replace(要被替換的內(nèi)容,替換為內(nèi)容)

    例如："java hello".replace("hello","helloworld"); //得到"java helloword"
  

• 替換后得到的字符串是原字符串復(fù)制一份并替換后得到的結(jié)果，所以【！并沒(méi)有把原字符串修改掉！】如果想完全替換原字符串變量：

    var s = "<h1>[c]</h1>"
    s = s.replace("[c]","lala"); 
  

6、 拆分字符串

• 字符串.split(拆分參照字符、字符串、正則)，得到的是字符串?dāng)?shù)組。

    var names = "劉德華,張學(xué)友,趙四兒,黎明".split(",");
    for(var i=0;i<names.length;i++){
        var name = names[i];
        alert(name);
    }
  

9.2 number相關(guān)常用函數(shù)

1、 四舍五入 toFixed(n)保留n位小數(shù)

var x = 3.1415926;
x.toFixed(3);//得到3.14

9.3 數(shù)組

1、 創(chuàng)建數(shù)組的兩種方式

• 第一種
  var arr1 = ["劉德華",18,true];
• 第二種
  var arr2 = new Array("劉德華",18,true);

2、 數(shù)組中添加數(shù)據(jù)

arr2.push("周杰倫");

3、 修改數(shù)組的長(zhǎng)度

arr2.length=2;

4、 數(shù)組中獲取數(shù)據(jù) [數(shù)組下標(biāo)] 沒(méi)有角標(biāo)越界

for(var i=0;i<arr2.length;i++){
     var x = arr2[i];
    alert(x);
}

5、 數(shù)組反轉(zhuǎn)

var arr3 = [1,2,3];
arr3.reverse();

6、 數(shù)組排序

var arr4 = [5,7,2,9,6];
arr4.sort();
var arr5 = [23,15,2,100,30,8];
arr5.sort();

• 默認(rèn)排序規(guī)則：以字符串的形式進(jìn)行排序通過(guò)unicode編碼比較第一個(gè)字符比較完比較第二個(gè)以此類推

• 自定義排序：

  //聲明自定義的排序函數(shù)
  function mysort(a,b){
      //升序
      return a-b;
      //降序
      //return b-a;
  }
  arr.sort(mysort);
  

• 如果數(shù)組中保存的是對(duì)象，通過(guò)以下方式進(jìn)行排序

  var persons = [p1,p2,p3,p4];
  function mysort(a,b){
      //升序
      return a.sal-b.sal;
      //降序
      //return b.age-a.age;
  } 
  

9.4 日期相關(guān)

1、 了解

• 服務(wù)器時(shí)間：服務(wù)器電腦的時(shí)間
• 客戶端時(shí)間：用戶電腦的時(shí)間

2、 獲取客戶端時(shí)間

var d1 = new Date();

3、 指定時(shí)間創(chuàng)建時(shí)間對(duì)象

• 通常時(shí)間來(lái)自服務(wù)器后手動(dòng)將該時(shí)間以指定時(shí)間的形式創(chuàng)建時(shí)間對(duì)象

    var d2 = new Date("2018/08/01 18:36:50");
  

4、 獲取和設(shè)置時(shí)間戳（距離1970年1月1日 08:00:00的毫秒數(shù)）

    d2.getTime();
    d2.setTime(1000);

5、 從date對(duì)象中獲取單獨(dú)的年月日時(shí)分秒 星期幾

    d1.getFullYear();//年
    d1.getMonth(); //月份需要+1 從0開(kāi)始
    d1.getDate();//號(hào)/日
    d1.getDay();//星期幾
    d1.getHours(); //時(shí)
    d1.getMinutes();//分
    d1.getSeconds();//秒

6、 從date獲取【年月日】和【時(shí)分秒】

    d1.toLocaleDateString();//年月日
    d1.toLocaleTimeString();//時(shí)分秒

9.5 正則表達(dá)式

1、 常用的一些匹配

• . ——匹配任意字符
• \w ——匹配任意字母、數(shù)字、下劃線
• \s ——匹配任意空白
• \d 等價(jià)[0,9] ——匹配任意數(shù)字
• ^ 開(kāi)始
• $ 結(jié)束
• [a,z]——匹配小寫(xiě)字母，中括號(hào)匹配內(nèi)容的范圍
• {n} ——匹配n次
• {n,} ——匹配至少n次
• {n,m} ——匹配n到m次

2、 創(chuàng)建正則的兩種方式

• 方式一：

    var reg1 = /規(guī)則/模式;
  

• 方式二：

    var reg2 = new RegExp(規(guī)則,模式); //沒(méi)有模式的話可以省略，反斜杠需要轉(zhuǎn)義
  

3、 正則相關(guān)的函數(shù)

• 查找內(nèi)容 如果模式為g全局查找 執(zhí)行一次查詢一個(gè)

    reg.exec(str); //在str字符串中查找符合reg正則表達(dá)式規(guī)則的內(nèi)容
  

• 校驗(yàn)文本

    reg.test(str); //校驗(yàn)文本str是否符合規(guī)則
  

4、 字符串和正則相關(guān)的函數(shù)

• 查找

    str.match(reg); //查找 找出str中所有符合規(guī)則的字符串，組成一個(gè)數(shù)組返回
  

• 替換

    str.replace(reg,替換的內(nèi)容); //查找str中符合規(guī)則的字符串并替換
  

十、 JS面向?qū)ο?/h2>

10.1 創(chuàng)建JS對(duì)象

方式一：聲明函數(shù)的形式創(chuàng)建對(duì)象

//定義
function Person(name,age){
    this.name=name;
    this.age=age;
    this.run = function(){
        alert("name:"+this.name+" age:"+this.age);
    }
}

//創(chuàng)建對(duì)象
var p = new Person("張三",18);
//調(diào)用對(duì)象的方法
p.run();  

方式二：聲明變量的形式創(chuàng)建對(duì)象

//定義并創(chuàng)建
var student = {
    "name":"曹操",
    "age":28,
    "run":function(){
        alert("name:"+this.name+" age:"+this.age);
    }
}
//調(diào)用
student.run();

十一、 DHTML

• 簡(jiǎn)介： Dynamic(動(dòng)態(tài))超文本標(biāo)記語(yǔ)言，這個(gè)不是新的技術(shù)，只是把所學(xué)的html,css,js結(jié)合到一起實(shí)現(xiàn)出來(lái)的內(nèi)容
• DHTML包括：BOM和DOM
• BOM： Browser(瀏覽器) Object(對(duì)象) Model(模型), 包含了一部分和瀏覽器相關(guān)的對(duì)象 可以獲取瀏覽器的請(qǐng)求地址，歷史記錄，瀏覽器窗口尺寸，瀏覽器版本。
• DOM： Document(文檔) Object(對(duì)象) Model(模型),包含了和頁(yè)面相關(guān)的內(nèi)容

11.1 BOM瀏覽器對(duì)象模型

11.1.1 window

• window里面的對(duì)象稱為全局對(duì)象 里面的方法稱為全局方法 。全局對(duì)象和方法可以省略掉window。

• window中 常用的全局方法：

    alert();//提示框
    confirm();//確認(rèn)框
    prompt();//彈出文本框
    parseInt()、parseFloat();//轉(zhuǎn)為整形、浮點(diǎn)型
    isNaN();//是否為非數(shù)字
  

11.1.2 window中 常用的對(duì)象

• location

    location //地址
    location.href //用于獲取和設(shè)置瀏覽器請(qǐng)求的地址  
    location.reload();  //刷新
  

• history 歷史

  • 當(dāng)前窗口的歷史記錄 窗口關(guān)閉后就沒(méi)有了

      history.length //得到歷史請(qǐng)求頁(yè)面的數(shù)量
      history.back()  //返回上一個(gè)頁(yè)面
      history.forward() //前往下一個(gè)頁(yè)面
      history.go(num) //前往某個(gè)頁(yè)面 0當(dāng)前頁(yè)面 1下一個(gè)頁(yè)面 2下兩個(gè)頁(yè)面-1上一個(gè)頁(yè)面
    

• screen 屏幕

    screen.width/height  //得到屏幕的寬高(像素)
    screen.availWidth/availHeight  //得到屏幕可用的寬高
  

• navigator 導(dǎo)航/幫助

    navigator.userAgent  //得到瀏覽器相關(guān)的版本信息
  

11.1.3 和window相關(guān)的事件

• window的點(diǎn)擊事件 onclick
• 頁(yè)面加載完成事件 onload
• 獲取焦點(diǎn)事件 onfocus
• 失去焦點(diǎn)事件 onblur

11.2 DOM文檔對(duì)象模型

• 學(xué)習(xí)DOM主要學(xué)習(xí)的就是對(duì)頁(yè)面當(dāng)中的元素進(jìn)行增刪改查操作

11.2.1 查找元素

• 通過(guò)id查找

    var input = document.getElementById("id");
  

• 通過(guò)標(biāo)簽名查找

    var divs = document.getElementsByTagName("div");
  

• 通過(guò)標(biāo)簽的name屬性值查找

    var arr = document.getElementsByName("gender");
  

• 通過(guò)標(biāo)簽的class屬性值查找

    var arr = document.getElementsByClassName("");
  

11.2.2 通過(guò)上下級(jí)關(guān)系獲得元素

• 獲取元素的上級(jí)元素

    元素對(duì)象.parentElement  //得到的是一個(gè)上級(jí)元素
  

• 獲取元素的下級(jí)元素們

    元素對(duì)象.childNodes //得到的是一個(gè)數(shù)組里面裝著多個(gè)元素和文本
  

11.2.3 創(chuàng)建元素

var div = document.createElement("div");

11.2.4 添加元素

• 添加到某個(gè)元素里面

    上級(jí)元素.appendChild(div);
  

• 添加到某個(gè)弟弟元素的上面

    上級(jí)元素.insertBefore(div,弟弟元素);
  

11.2.5 刪除元素

上級(jí)元素.removeChild(被刪除的元素);

11.2.6 修改元素的文本內(nèi)容

元素對(duì)象.innerText(改成什么內(nèi)容)

11.2.7 修改元素內(nèi)部的html內(nèi)容

元素對(duì)象.innerHTML(修改成什么內(nèi)容)

11.2.8 修改元素的樣式

元素對(duì)象.style.樣式名稱="樣式的值";

11.2.9 獲取文檔窗口的寬高

document.body.parentElement.clientWidth
document.body.parentElement.clientHeight

十二、 定時(shí)器和eval()

12.1 eval()函數(shù)

• 可以將字符串以js代碼的形式執(zhí)行

12.2 定時(shí)器

12.2.1 setInterval 每隔一定時(shí)間執(zhí)行（不停，直到手動(dòng)停止）

• setInterval(函數(shù)名/回調(diào)函數(shù),時(shí)間間隔);

    //用法1，執(zhí)行內(nèi)容直接寫(xiě)在內(nèi)部
    setInterval(function () {
        alert(111);
    },1000)
    
    //用法2，使用執(zhí)行函數(shù)
    setInterval(aaa,1000)
    
    function aaa(){
        alert(111);
    }
        
    //錯(cuò)誤用法?。?！可能導(dǎo)致不執(zhí)行，或只執(zhí)行一次
    setInterval(aaa(),1000)
    
    function aaa(){
        alert(111);
    }
  

  • 開(kāi)啟定時(shí)器 var timeId = setInterval(函數(shù),時(shí)間)
  • 停止定時(shí)器，手動(dòng)停止該定時(shí)器 clearInterval(timeId)

12.2.2 setTimeout 一定時(shí)間以后，執(zhí)行對(duì)應(yīng)函數(shù)（一次）

• setTimeout(函數(shù),時(shí)間)

    //用法1，執(zhí)行內(nèi)容直接寫(xiě)在內(nèi)部
    setTimeout(function () {
        alert(111);
    },1000)
        
    //用法2，使用執(zhí)行函數(shù)
    setTimeout(aaa,1000)
        
    function aaa(){
        alert(111);
    }
        
    //錯(cuò)誤用法！??！可能導(dǎo)致不執(zhí)行，或只執(zhí)行一次
    setTimeout(aaa(),1000)
        
    function aaa(){
        alert(111);
    }
  

十三、 事件

13.1 事么是事件

• 事件代表了某些特定的時(shí)間點(diǎn)，包括狀態(tài)改變事件，鼠標(biāo)事件，鍵盤(pán)事件
• 通俗理解：當(dāng)頁(yè)面元素發(fā)生交互、操作時(shí)候的事情，比如鼠標(biāo)點(diǎn)擊事件

13.2 常用事件

13.2.1 鼠標(biāo)相關(guān)事件：

• onclick鼠標(biāo)點(diǎn)擊事件
• onmouseover鼠標(biāo)移入事件
• onmouseout 鼠標(biāo)移出事件
• onmousedown鼠標(biāo)按下事件
• onmouseup鼠標(biāo)抬起事件
• onmousemove鼠標(biāo)移動(dòng)事件

13.2.2 鍵盤(pán)相關(guān)事件：

• onkeydown(鍵盤(pán)按下)
• onkeyup(鍵盤(pán)抬起)

13.2.3 狀態(tài)改變事件：

• onload（頁(yè)面加載完）
• onchange(值發(fā)生改變)
• onblur(失去焦點(diǎn))
• onfocus(獲取焦點(diǎn))
• onsubmit(提交)
• onresize(窗口尺寸發(fā)生改變事件)

13.3 事件綁定

方法一：在元素中添加事件屬性

• 例子：點(diǎn)擊的時(shí)候執(zhí)行fn1()函數(shù)

  • html部分

      <input type="button" value="元素綁定事件" onclick="fn1(this)">
      <!--這里的this是事件元對(duì)象也就是input按鈕-->
    

  • js部分

      function(ele){
          alert(ele);
          alert(this);  //this代表的是window對(duì)象
      }
    

方法二：通過(guò)js代碼動(dòng)態(tài)綁定事件。js代碼和html代碼分離 便于升級(jí)和維護(hù)

• 例子：mybtn點(diǎn)擊的時(shí)候執(zhí)行自定義的函數(shù)

  • js代碼

      mybtn.onclick = function(){
          alert(this);  //this代表事件元，也就是mybtn按鈕元素對(duì)象
      }
    

13.4 事件取消

• 通過(guò)給事件函數(shù)返回false，即可取消事件

    btn.onclick = function(){
        alert();
        return false;
    }
  

13.5 event對(duì)象

1. event對(duì)象中保存著和事件相關(guān)的信息

2. 通過(guò)event可以獲得鼠標(biāo)事件的坐標(biāo) event.clientX/Y

3. 通過(guò)event可以獲得鍵盤(pán)事件的字符編碼 event.keyCode

4. 通過(guò)event可以獲得事件源 不同瀏覽器存在兼容性問(wèn)題，支持兩種寫(xiě)法：

    var obj = event.target; 
    var obj = event.srcElement
   

5. 以下代碼可以解決兼容性問(wèn)題

    var obj = event.target||event.srcElement;
   

13.6 事件傳遞（事件冒泡）

• 如果在同一個(gè)區(qū)域內(nèi)有多個(gè)事件響應(yīng),比如，一個(gè)自帶點(diǎn)擊事件的div內(nèi)部還有一個(gè)帶點(diǎn)擊事件的div，響應(yīng)的順序是類似氣泡，從下往上，也就是從底層元素往上級(jí)元素執(zhí)行，這個(gè)過(guò)程稱為事件冒泡
• 如果某個(gè)元素里面有多個(gè)元素需要添加事件，則這個(gè)事件可以直接添加給此元素，通過(guò)事件源判斷到底做什么事兒

十四、 jQuery

jQuery是一個(gè)js語(yǔ)言的框架，作用是簡(jiǎn)化js代碼，本質(zhì)任然是js

14.1 jQuery優(yōu)勢(shì)

• 簡(jiǎn)化js代碼
• 可以像css一樣通過(guò)選擇器查找元素
• 可以直接修改元素的樣式
• 解決兼容性問(wèn)題

14.2 如何引入jQuery

• 因?yàn)榇丝蚣芫褪且粋€(gè)js文件 引入方式和一般js文件一樣

    <script type="text/javascript" src="jquery源碼或者min版本源碼文件路徑"></script>
  

  • 注意，可以將源碼下載到項(xiàng)目中引入，也可以直接填寫(xiě)可用的jquery的CDN鏈接地址，若采用CDN，寫(xiě)代碼測(cè)試的電腦需要聯(lián)網(wǎng)，因?yàn)槭菍?shí)時(shí)引用網(wǎng)上的jquery資源。

14.3 $符號(hào)和jQuery

• $等價(jià)于jQuery

    ($("#id") == jQuery("#id")) = ture;//以后全部采用簡(jiǎn)單一點(diǎn)的$符號(hào)
  

14.4 jquery對(duì)象與js對(duì)象轉(zhuǎn)換

• 由于jquery對(duì)js進(jìn)行了簡(jiǎn)化和改進(jìn)，所以兩者中的對(duì)象類型并不相同，比如同一個(gè)按鈕對(duì)應(yīng)的js中對(duì)象和jquery中的對(duì)象的方法也不同，所以實(shí)際使用時(shí)需要將兩者相互轉(zhuǎn)化。

    $("#id") //jq獲取id為id的對(duì)象
    var btn = document.getElementById("id");//js獲取id為id的對(duì)象
  

• 把js對(duì)象轉(zhuǎn)成jq對(duì)象，套上$()

    var jq = $(js);
  

• 把jq對(duì)象轉(zhuǎn)成js對(duì)象

    var js = jq[0] 或者 jq.get(0);
  

14.5選擇器（重點(diǎn)，用來(lái)獲取對(duì)象，得到的都是jquery對(duì)象）

14.5.1 基本選擇器 和css一樣

• 標(biāo)簽名選擇 $("div")
• id選擇器 $("#id")
• 類選擇器 $(".class"）
• 分組選擇器 $("#id,.class,div")
• 任意元素選擇器 $("*")

14.5.2 層級(jí)選擇器

• $("div span") 匹配div下所有的span子孫元素
• $("div>span") 匹配div下的span子元素
• $("div+span") 匹配div后面相鄰的span兄弟元素
• $("div~span") 匹配div后面所有的span兄弟元素

14.5.3 過(guò)濾選擇器

• $("div:first") 匹配所有div中的第一個(gè)
• $("div:last") 匹配所有div中的最后一個(gè)
• $("div:even") 匹配所有div中的偶數(shù)位的元素 從0開(kāi)始
• $("div:odd") 匹配所有div中的奇數(shù)位的元素 從0開(kāi)始
• $("div:eq(n)") 匹配所有div中的第n個(gè) 從0開(kāi)始
• $("div:lt(n)") 匹配所有div中小于n的所有元素 從0開(kāi)始
• $("div:gt(n)") 匹配所有div中大于n的所有元素 從0開(kāi)始
• $("div:not(.one)") 匹配所有div中 class不等于one的所有div元素

14.5.4 內(nèi)容選擇器

• $("div:has(p)") 匹配所有包含p標(biāo)簽的div
• $("div:empty") 匹配所有空的div
• $("div:parent") 匹配所有非空的div
• $("div:contains('abc')") 匹配所有包含文本abc的div

14.5.5 可見(jiàn)選擇器

• $("div:hidden") 匹配所有隱藏的div

• $("div:visible") 匹配所有可見(jiàn)的div

• 顯示隱藏相關(guān)的函數(shù)

    $("#abc").hide();//隱藏
    $("#abc").show();//顯示
    $("#abc").toggle();// 如果當(dāng)前隱藏則顯示，如果顯示則隱藏
  

14.5.6 屬性選擇器

• $("div[id]") 匹配有id屬性的div
• $("div[id='d1']") 匹配有id=d1屬性的div
• $("div[id!='d1']") 匹配有id不等于d1屬性的div

14.5.7 子元素選擇器

• $("div:nth-child(n)") n從1開(kāi)始 匹配div中第n個(gè)子元素
• $("div:first-child") 匹配div中第一個(gè)子元素
• $("div:last-child") 匹配div中最后一個(gè)子元素

14.5.8 表單選擇器

• $(":input") 匹配所有 文本框 密碼框 單選 復(fù)選 。。。
• $(":password") 匹配所有密碼框
• $(":radio") 匹配所有單選
• $(":checkbox")匹配所有復(fù)選框
• $(":checked") 匹配所有被選中的 單選、復(fù)選、下拉選
• $("input:checked") 匹配所有被選中的 單選、復(fù)選
• $(":selected") 匹配所有被選中的 下拉選

14.6 層級(jí)函數(shù)

• 獲取某個(gè)元素的所有兄弟元素（同級(jí)別元素）

   $("d1").siblings("div"); //參數(shù)可以不寫(xiě)，不寫(xiě)代表所有兄弟，寫(xiě)了指特定元素類型
  

• 獲取某個(gè)元素的哥哥元素（同級(jí)別在其上方最近的一個(gè)元素）

    $("d1").prev("div")；
  

• 獲取某個(gè)元素的哥哥們?cè)兀ㄍ?jí)別在其上方的所有元素）

    $("d1").prevAll("div")；
  

• 獲取某個(gè)元素的弟弟元素（同級(jí)別在其下方最近的一個(gè)元素）

    $("d1").next("div");
  

• 獲取某個(gè)元素的弟弟們?cè)兀ㄍ?jí)別在其下方的所有元素）

    $("d1").nextAll("div");
  

14.7 文檔操作

14.7.1 創(chuàng)建元素

var div = $("<div>abc</div>");

14.7.2 添加元素

父元素.append(div); //添加到最后面
父元素.prepend(div);//添加到最前面

14.7.3 插入元素

兄弟元素.after(div); //插入到兄弟元素的后面
兄弟元素.before(div); //插入到兄弟元素的前面

14.7.4 刪除元素

元素對(duì)象.remove(); 

14.7.5 樣式操作

• 更改元素的css樣式

  • 元素對(duì)象.css(樣式名，樣式值) 或 元素對(duì)象.css({樣式名1:樣式值,樣式名2:樣式值});

      如：
      元素對(duì)象.css("color","red");
      元素對(duì)象.css({"color":"red","width":"100px"});
    

• 獲取元素的css樣式

  • 對(duì)象.css(樣式名);

      如：
      元素對(duì)象.css("color");
    

14.7.6 屬性操作

對(duì)象.attr("id","a");//改、賦id值為a
對(duì)象.attr("id");//取id值

14.7.7 文本操作

對(duì)象.text("lala")；//對(duì)象內(nèi)加上lala文本
對(duì)象.text();//取得對(duì)象內(nèi)文本

14.7.8 html操作

對(duì)象.html("<h1>aaa</h1>");//在對(duì)象內(nèi)加上<h1>aaa</h1>內(nèi)容
對(duì)象.html();//取得對(duì)象內(nèi)html內(nèi)容

14.7.8 表單控件操作

input對(duì)象.val(3);//手動(dòng)給input賦值3
input對(duì)象.val();//取得input內(nèi)的值

14.8 jQuery事件

jq中事件名稱和js事件名稱相比較 就是去掉on

• 頁(yè)面加載完成事件：

    //方法一：
    $(function(){
        //頁(yè)面加載完要做的事情
    })
    //方法二：
    $(document).ready(function(){
        //頁(yè)面加載完要做的事情
    })
  

• 事件中獲取事件源的方式（參考上面js部分，一樣，這里只做簡(jiǎn)單概括）：

  • 如果是動(dòng)態(tài)綁定事件 this為事件源

  • 非動(dòng)態(tài)綁定 var obj = event.target||evet.srcElement;

  • 非動(dòng)態(tài)綁定時(shí) 在元素屬性中通過(guò)this

      <input type="button" onclick="myfn(this)">
    

• 事件模擬

  • 對(duì)象.trigger("事件名")

      setTimeout(function(){
          //模擬點(diǎn)擊事件
          $("input").trigger("click");
      },3000);
    

• 事件合并

  • hover事件相當(dāng)于 onmouseover+onmouseout

14.9 動(dòng)畫(huà)相關(guān)

jquery自帶幾種常用簡(jiǎn)單的動(dòng)畫(huà)

• 樣例代碼

    <script>
        function fn1() {
           $("img").hide(500);
        }//在500毫秒內(nèi)隱藏
        
        function fn2() {
           $("img").show(500);
        }//在500毫秒內(nèi)顯示
        
        function fn3() {
           $("img").slideUp(500);
        }//在500毫秒內(nèi)上滑消失
        
        function fn4() {
           $("img").slideDown(500);
        }//在500毫秒內(nèi)下滑出現(xiàn)
        
        function fn5() {
           $("img").fadeIn(500);
        }//在500毫秒內(nèi)淡入顯示
        
        function fn6() {
           $("img").fadeOut(500);
        }//在500毫秒內(nèi)淡出消失
        
        function fn7() {
            $("img").animate({"left": "250px"}, 500).animate({"left": "0px"}, 500);
        }//在500毫秒內(nèi)吧css 的left屬性變成250px，再在下一個(gè)500毫秒內(nèi)變?yōu)?px
    </script>
  
    <input type="button" value="隱藏" onclick="fn1()">
    <input type="button" value="顯示" onclick="fn2()">
    <input type="button" value="上滑" onclick="fn3()">
    <input type="button" value="下滑" onclick="fn4()">
    <input type="button" value="淡入" onclick="fn5()">
    <input type="button" value="淡出" onclick="fn6()">
    <input type="button" value="自定義" onclick="fn7()">
    <hr>
    <img src="images/ajq.png" style="width: 150px;height: 100px;position:absolute;">
  

• 注意：animate()自定義動(dòng)畫(huà)支持多重，比如上面就多重定義了兩個(gè)動(dòng)畫(huà)

音視頻播放

• 音頻

    <audio src="music.mp3" preload="auto" autoplay="autoplay" loop="loop" controls="controls">  
    
    </audio>
    <!-- loop循環(huán)播放  autoplay自動(dòng)播放  preload預(yù)加載(提前加載) controls是否顯示控制面板 -->
  

• 視頻

    <video poster="../imgs/a.jpg" controls="controls">
        <source src="hero.mp4">
    </video>
    <!-- poster 視頻的封面-->