jQuery学习笔记，1 初识jQuery

• 目录
• 引用
• 注意
• HelloWorld！
• 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，即:

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

$.ajax;
jQuery.ajax;

HelloWorld！

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

DOM对象的相互转换

• DOM对象获取的不同方式

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

• DOM对象之间的相互转换

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

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

冲突的解决

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