jQuery進階

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 切換元素的可見狀態
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素

jquery鏈式調用

jquery對象的方法會在執行完後返回這個jquery對象，所有jquery對象的方法可以連起來寫：

$('#div1') // id爲div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id爲div1的元素
.siblings()  //跳到div1元素平級的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');  //高度實際高度變換到零來隱藏ul元素

jquery屬性操作

1、html() 取出或設置html內容

// 取出html內容

var $htm = $('#div1').html();

// 設置html內容

$('#div1').html('<span>添加文字</span>');

2、prop() 取出或設置某個屬性的值

// 取出圖片的地址

var $src = $('#img1').prop('src');

// 設置圖片的地址和alt屬性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

jquery事件

事件函數列表：

blur() 元素失去焦點
focus() 元素獲得焦點
click() 鼠標單擊
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
mouseenter() 鼠標進入（進入子元素不觸發）
mouseleave() 鼠標離開（離開子元素不觸發）
hover() 同時爲mouseenter和mouseleave事件指定處理函數
ready() DOM加載完成
submit() 用戶遞交表單

表單驗證

1、什麼是正則表達式：
能讓計算機讀懂的字符串匹配規則。

2、正則表達式的寫法：
var re=new RegExp(‘規則’, ‘可選參數’);
var re=/規則/參數;

3、規則中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）轉義字符匹配：
\d 匹配一個數字，即0-9
\D 匹配一個非數字，即除了0-9
\w 匹配一個單詞字符（字母、數字、下劃線）
\W 匹配任何非單詞字符。等價於[^A-Za-z0-9_]
\s 匹配一個空白符
\S 匹配一個非空白符
\b 匹配單詞邊界
\B 匹配非單詞邊界
. 匹配一個任意字符

var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配純數字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false

4、量詞：對左邊的匹配字符定義個數
? 出現零次或一次（最多出現一次）

• 出現一次或多次（至少出現一次）

• 出現零次或多次（任意次）
  {n} 出現n次
  {n,m} 出現n到m次
  {n,} 至少出現n次

5、任意一個或者範圍
[abc123] : 匹配‘abc123’中的任意一個字符
[a-z0-9] : 匹配a到z或者0到9中的任意一個字符

6、限制開頭結尾
^ 以緊挨的元素開頭
$ 以緊挨的元素結尾

7、修飾參數：
g： global，全文搜索，默認搜索到第一個結果接停止
i： ingore case，忽略大小寫，默認大小寫敏感

8、常用函數
test
用法：正則.test(字符串) 匹配成功，就返回真，否則就返回假

正則默認規則
匹配成功就結束，不會繼續匹配，區分大小寫

常用正則規則

//用戶名驗證：(數字字母或下劃線6到20位)
var reUser = /^\w{6,20}$/;

//郵箱驗證：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//密碼驗證：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

//手機號碼驗證：
var rePhone = /^1[34578]\d{9}$/;