一、選擇器

css語法選擇器

$(‘css3 選擇器位‘）

索引匹配

$(‘div:eq(0)‘)
$(‘div‘).eq(0)

內容

$(‘div:contains(標簽文本內容)‘)
// 註：采用模糊匹配

2.屬性操作

文本

// 賦值：有參數
$(‘.box‘).html(‘<I>beat box</I>‘);
// 取值：無參數
console.log($(‘.box‘)text());
// 表單內容
// $(‘.inp‘).val(‘input 內容 為 value‘);
console.log($(‘.inp‘).val());

屬性

// 取
console.log($(‘img‘).attr(‘alt‘));
 
// 設
$(‘img‘).attr(‘src‘,
‘‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg‘)
// 增
$(‘img‘).attr(‘abc‘,function(){
    return "ABC";
})

類名

$(this).addClass(‘active‘); // 添加
$(this).removeClass(‘box‘); // 刪除
// 如果有active 刪除，反之添加
$(this).toggleClass(‘active‘); //切換

3.css樣式設置

// 取值
console.log($(‘.box‘).css(‘font-size‘));

// 設值
$(‘.box‘).css(‘color‘,‘deeppink‘) //單一屬性設值
    .css{    //設置多個屬性值
        // 1.及時給css()函數賦值一個js對象
        // 2.key為字符串類型，可以省略“”，前提要使用js語法，小駝峰命名
        // 3.屬性值為數值+單位方式，可以省略單位，盡量全部用字符串數據賦值
        width:‘300px‘,
        ‘height‘:300,
        ‘background-color:‘cyan‘,
        borderRadius:
 
‘30px‘
})
    .css(‘width‘, function(index, oldWidth) {  // 邏輯單一屬性設值
        if (index == 0) {
            // 延遲1s
            // var b_time = new Date().getTime();
            // while (new Date().getTime() - b_time < 1000){}
            return 1.5 * parseInt(oldWidth);
        }
        return oldWidth;
    })

4事件

綁定方式

// 第一種 on
// 四個參數：事件名，派遣的子級別，{key-value傳入的數據}
$(‘.box‘).on(‘click‘,‘span‘,{name:‘hehe‘},function(ev){})

// 第二種
// 兩個參數:{key-value傳入的數據}, 事件回調函數
$(‘.box‘).click({name:‘hehe‘},function(ev){})

事件對象

// 為jq事件對象，兼容js事件對象
// 坐標：ev.clientX | ev.clientY
// 按鍵：ev.keyCode
// 數據：ev.date.key名 =》eg:ev.data.name

冒泡與默認動作

// 冒泡：ev.stopPropagation();
// 默認動作：ev.preventDefault():

委派

$(‘.box‘).on(‘click‘,‘span‘,{name:‘hehe‘},function(ev){})
// 註:通過父級box來綁定點擊事件，其實將事件委派給其子級span標簽

5.東湖

系統東湖

// time_num: 動畫持續的時間
// finish_fn: 動畫結束後的回調函數

// 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle()  參數同上
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle()    參數同上

自定義動畫

// 參數: 做動畫的樣式們 {}, 動畫持續時間, 運動曲線, 動畫結束後的回調函數
animate({
    width: 300,
    height: 500
}, 300, ‘linear‘, function() {
    // 動畫結束後回調
})
// 動畫本體采用的是css動畫

第七十一天 JQ高級