jQuery学习笔记（1） 初识jQuery

目录

• 目录
• 引用
• 注意
• HelloWorld$HelloWorld$！
• jQuery$jQuery$对象和DOM$DOM$对象的相互转换
• 冲突的解决

引用

本地文件引用：

<script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>

url引用：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

注意

• jQuery$jQuery$把所有的属性、操作封装在jQuery$jQuery$对象中，因此每次调用jQuery$jQuery$的功能时，都类似于对象调用或函数使用。

• jQuery$jQuery$为自己创建了一个快捷方式$$\mathrm{\$}$，$$\mathrm{\$}$等价于jQuery$jQuery$，即:

$("#foo");
jQuery("#foo");

$.ajax;
jQuery.ajax;

HelloWorld$HelloWorld$！

<script>
    $(document).ready(function () {
        alert("Hello World!");
    });
    //可简写为：
    $(function () {
        alert("Hello World!");
    })
</script>

jQuery$jQuery$对象和DOM$DOM$对象的相互转换

• jQuery$jQuery$对象和DOM$DOM$对象获取的不同方式

    var $variable = $("#foo");//获取jQuery对象
    var variable = document.getElementById("foo");//获取DOM对象

• jQuery$jQuery$对象和DOM$DOM$对象之间的相互转换

    //jQuery对象转换成DOM对象
    var tVar1 = $variable[0];
    var tVar2 = $variable.get(0);

    //DOM对象转换成jQuery对象
    var $tVar = $(variable);

冲突的解决

基于jQuery$jQuery$的原理，它为了保持良好的独立性和完整性，将所有的内容封装在了jQuery$jQuery$对象中，这个对象的快捷方式是$$\mathrm{\$}$。因此，在调用jQuery$jQuery$库的时候，会更新jQuery$jQuery$和$$\mathrm{\$}$的定义，此时，若原先的代码中已经存在jQuery或$的定义（有可能是直接定义，也有可能是之前加载的库中的定义），相关的定义就会被覆盖，从而导致冲突。
jQuery$jQuery$为了解决这种冲突，采用了noConflict方法。

• 调用

    jQuery.noConflict(true);//恢复对jQuery和$的引用

    jQuery.noConflict(false);//只恢复对$的引用
    jQuery.noConflict();//默认参数为false

一般都使用默认参数，jQuery一般不会被引用。

• 举例

    //jQuery库在prototype后调用（prototype.js也用到了$的快捷方式）
    <script src="lib/prototype.js" type="text/javascript"></script>
    <script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script language=JavaScript>
        jQuery.noConflict();
        //将$作为function的参数传入，可以在函数内使用快捷方式$，这是目前较为常用的方法。
        jQuery(function ($) {
            $("p").click(function () {
                alert($(this).text());
            })
        }); 
        //如果不需要快捷方式，直接使用如下
        jQuery(function () {
            jQuery("p").click(function () {
                alert(jQuery(this).text());
            })
        }); 
        $("pp").style.display = 'none'; //调用prototype
    </script>

    //jQuery库在prototype前调用（这时候jQuery的$被覆盖，但还能通过'jQuery'调用它的方法）
    <script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="lib/prototype.js" type="text/javascript"></script>
    <script language=JavaScript>
        //不需要使用noConflict方法
        jQuery(function () {
            jQuery("p").click(function () {
                alert(jQuery(this).text());
            })
        }); 
        $("pp").style.display = 'none'; //调用prototype
    </script>