【jQuery】常用點

sgosky發表於2017-07-07
jQuery

包裝

  • wrap() 包裝

  • wrapAll() 整體包裝

  • wrapInner() 內部包裝

  • unwrap() 刪除包裝（不包括body）

$(function(){
    $(`span`).wrap(`<div>`);
})

主動觸發trigger

$(function(){
    $(`span`).on(`click`,function(){
        alert(123);
    })
    $(`span`).trigger(`click`);
    //主動觸發點選事件
})

jQuery中的事件委託delegate

//一般寫法 直接給li加事件
$(function(){
    $(`li`).on(`click`,function(){
        $(this).style.background = `red`;
    })
})

//事件委託
$(function(){
    $(`ul`).delegate(`li`,`click`,function(){
        $(this).css(`background`, `red`).siblings().css(`background`, `#fff`);
    })
})
//阻止事件委託
$(function(){
    $(`ul`).delegate(`li`,`click`,function(){
        $(this).css(`background`, `red`).siblings().css(`background`, `#fff`);
        $(`ul`).undelegate();
    })
})

event物件屬性

  • event.data 事件中的資料

  • event.target 事件源

  • event.type 事件型別

<script type="text/javascript">
    $("#div1").on(`click`, {name:`hello`}, function(event) {
        alert(event.data.name);
    });
</script>

jQuery工具方法 $.xxx();

  • $.type() 判斷型別

  • $.trim(str) 去空格

  • $.inArray(`a`,arr) 返回a所在陣列中的位置，沒有則返回-1 類似indexOf

  • $.proxy() 改變this的指向

  • $.noConflict() 防止衝突

  • $.type() 判斷型別

<script type="text/javascript">
    //$.type()    判斷型別
    var a = [];
    //alert( typeof a );//js 返回型別為object
    alert( $.type(a) );// 返回型別為array 更具體
    
    //$.trim(str)    去空格
    var str = "   hello    ";
    //alert( `(`+ str+`)` );
    alert( `(`+ $.trim(str) +`)` );
    
    //$.inArray(`a`,arr)
    var arr = [`a`,`b`,`c`,``d];
    alert( $.inArray(`a`,arr) ); //返回0 如果沒有返回-1
    
    //$.proxy()    改變this的指向
    function show(a,b){
        alert(this);
    }
    show(); //this指向window
    $.proxy(show,document,1,2)(); //show函式的this，指向了document, 1,2是引數 ()是執行show
    
    //$.noConflict()    防止衝突
    var ht = $.noConflict();
    ht(function(){
        alert(123);
    })
    
    //$.parseJSON 把字串解析成JSON物件
    var str = `{"name":"hello"}`;
    alert( $.parseJSON(str).name );
    
</script>

相關文章