jQuery学习笔记（1） 初识jQuery

目录

• 目录
• 引用
• 注意
• HelloWorldHelloWorld！
• jQueryjQuery对象和DOMDOM对象的相互转换
• 冲突的解决

引用

本地文件引用：

<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>

注意

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

• jQueryjQuery为自己创建了一个快捷方式$$，$$等价于jQueryjQuery，即:

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

$.ajax;
jQuery.ajax;

HelloWorldHelloWorld！

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

jQueryjQuery对象和DOMDOM对象的相互转换

• jQueryjQuery对象和DOMDOM对象获取的不同方式

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

• jQueryjQuery对象和DOMDOM对象之间的相互转换

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

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

冲突的解决

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

jQueryjQuery为了解决这种冲突，采用了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>