web前端(六)——jquery進階
阿新 • • 發佈:2018-12-16
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,忽略大小寫,預設大小寫敏感