jquery簡單筆記(1) - 基礎記錄

一、dom對象及jquery對象互相轉換

　　jquery對象轉換成dom對象，即 [index] 和 get(index)　

第一種方式：
var $j = $('#id');    // jquery對象
var j =  $j[0];        // dom對象

第二種方式：
var $j = $('#id');　　// jquery對象
var j = $j.get(0);   // dom對象      

二、jquery庫與其他庫的沖突

　　1. jquery庫在其他庫之後導入

第一種：使用 jQuery.noConflict() 函數

<script type="text/javascript"  src = "prototype.js"></script>
<script type="text/javascript"  src = "jquery.js"></script>
<script type="text/javascript">
    jQuery.noConflict(); // 将 變量 $ 的控制權，轉移給其他js庫
    jQuery(function(){
        jQuery("#uid").show();   // 使用 jQuery
    })

    $('id').style.display = 'none'; // 使用其他js庫
</script>


第二種： 使用 自定義變量

    var $j = jQuery.noConfilct();
    $j(fucntion(){
       $j('#uid').hide();  // 使用jquery  
    })

    $('id').style.display = 'none'; // 使用其他js庫
    

第三種： 依舊使用 $ 變量

    jQuery.noConflict(); // 将 變量 $ 的控制權，轉移給其他js庫
    jQuery(function($){ // 使用 jquery 設定頁面加載時執行的函數
        $('#uid').show(); // 依舊使用 $ 變量
    })

    $('id').style.display = 'none'; // 使用其他js庫

第四種：依舊使用 $ 變量,匿名函數

    jQuery.noConflict(); // 将 變量 $ 的控制權，轉移給其他js庫
    (function($){ // 定義匿名函數，并設定形參為 $
        
        $(function(){ // 匿名函數内部的 $ 均為 jQuery
             $('#uid').show(); // 依舊使用 $ 變量
        })

    })(jQuery); //  執行匿名函數，且傳遞實參 jQuery

    $('id').style.display = 'none'; // 使用其他js庫      

　　2.jquery庫在其他庫之前導入

可直接使用 jQuery，無需 jQuery.noConflict()函數，其他js庫，可直接使用 $ 變量

<script type="text/javascript" src = 'jquery.js'></script>
<script type="text/javascript" src = 'prototype.js'></script>
<script type="text/javascript">

    jQuery(function(){    // 直接使用 jQuery.無需 jQuery.noConflict()函數
        jQuery('#uid').show(); 
    })

    $('id').style.display = none ;  // 其他js庫

</script>
      

三、選擇器的注意事項

在遇到含有 "*" "#" "(" "[" 等特殊字元時，要注意轉義

<div id = "id#4"></div>
<div id = "id[4]"></div>

$('#id#4').show(); // 不對
$('#id[4]').show(); // 不對

對特殊字元要注意轉義

$('#id\\#4').show();
$('#id\\[4\\]').show();