1. 程式人生 > >web前端(六)——jquery進階

web前端(六)——jquery進階

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

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

    });

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

 

 

 

jquery鏈式呼叫

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

 

 

 

jquery屬性操作

// 取出html內容

var
$htm = $('#div1').html(); // 設定html內容 $('#div1').html('<span>新增文字</span>');
// 取出圖片的地址

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

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

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

 

 

 

jquery迴圈

$(function(){
    $('.list li').each(function(){
        $(
this).html( $(this).index() ); }) }) ...... <ul class="list"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

 

 

 

jquery事件

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

 

 

 

正則表示式

正則表示式的寫法:

  var re=new RegExp('規則', '可選引數');
  var re=/規則/引數;

 

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

修飾引數:
g: global,全文搜尋,預設搜尋到第一個結果接停止
i: ingore case,忽略大小寫,預設大小寫敏感