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();