1. 正則表示式

• 宣告

var regex = new RegExp(partten);

var regex2 = /^匹配規則$/;

  /../:模式符號

  ^:匹配開始

 $:匹配結束

 \d:數字[0-9]

 \w:字母數字下劃線[0-9A-Za-z_]

  .:除換行外所有字元

 {m}:出現m次

 {m,n}:出現最少m,最多n

 {m,}:最少出現m次

 +: 1-

*: 0-

?: 0-1

• 匹配

test()

var str = "13867656764";

           var regex = /^1[3-9]\d{9}$/;

          

      

           str = "
 
[email protected]";

           regex = /^\[email protected][a-zA-Z0-9]{2,}\.[a-zA-Z]{2,3}$/;

          

          

           str = "你好";

           regex = /^[\u4e00-\u9fa5]+$/;

           console.log(regex.test(str));

2. 什麼是jQuery

• Jquery就是js的函式庫。
• Query是一個快速，小巧，功能豐富的JavaScript庫。它通過易於使用的API
  在大量瀏覽器中執行，使得HTML文件遍歷和操作，事件處理，動畫和Ajax更加簡單。
• 優點

js封裝,簡化

相容性

3.jQuery的安裝

• 安裝方式:

          壓縮生產環境:   .min.js

     未壓縮開發環境:   .js

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

• cdn(內容分發網路)

     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
 

4.基本語法

$(selector).action();

$:核心 jQuery簡寫形式$

selector:選擇器   (jQuery物件)

action():操作

5.選擇器

dom物件和jQuery物件互轉

Dom物件:原生js獲取節點

jQuery物件:jQuery選擇器獲取的節點物件

dom物件和jQuery物件不要混用。

Dom物件轉換為jQuery物件:  $(dom物件)

jQuery物件轉換為dom物件:  jQuery物件[index] / jQuery物件.get(index)

基本選擇器

id選擇器:   $(#id值)

標籤選擇器:  $(標籤名稱)

類選擇器:  $(.class值)

• 組合選擇器

並集選擇器:  $(".red,p")

後代選擇器:  $("p span")

子代選擇器:  $(“p > span”)

• 屬性選擇器

[attr]

[attr=value]

• 基本篩選器   :關鍵字

console.log($("li:first"));

console.log($("li:last"));

console.log($("li:eq(1)"));

console.log($("li:lt(1)"));

console.log($("li:gt(1)"));

console.log($("li:even"));

console.log($("li:odd"));

• 表單選擇器

:input:所有input元素,textarea，select

:text:所有的type為text的元素

:password:密碼框

:Redio:單選框

:checkbox:多選框

:file:檔案

• 可見性

:hidden:選擇所有不可見元素

:visible:所有的可見的元素

獲取和修改文字7.節點操作

html()/text():

  不傳引數代表獲取；傳參代表賦值。

• 獲取和修改屬性

var src = $("img").attr("src");

console.log(src);

$("img").attr("src","img/p1.jpg");

//$("img").prop();



$("input").val("ls");  對value屬性進行值的獲取和設定



Eq(index):獲取指定索引的jQuery物件

• 獲取和修改樣式

Css(樣式名稱,樣式值)

$("div").css({"width":"200px","height":"200px","background":"red"});



$("div").addClass("red");

$("div").removeClass("red");

8.事件

• ui事件

      $(document).ready(); 頁面載入事件

      和window.onload的區別:

      1.觸發時機不一致 (x   3.x)

      $(document).ready()等待節點繪製則觸發；

      Window.onload等待所有的節點繪製載入渲染完畢才觸發。

      2.書寫次數不一樣。 Window.onload只出現一次

      3.簡寫。   $(func)

• 滑鼠  click()   dblclick()  mouseover()
• 鍵盤  keydown()   keyup()
• 焦點  focus()   blur()
• 事件繫結及解綁

      $("input").on("click mouseover",function(){

           alert(1);

      });

             

     $("input").off("mouseover");