jQuery学习笔记(1) 初识jQuery

目录

引用

本地文件引用:

<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 j Q u e r y 把所有的属性、操作封装在 jQuery j Q u e r y 对象中,因此每次调用 jQuery j Q u e r y 的功能时,都类似于对象调用或函数使用。

  • jQuery j Q u e r y 为自己创建了一个快捷方式 $ $ $ $ 等价于 jQuery j Q u e r y ,即:

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

$.ajax;
jQuery.ajax;

HelloWorld H e l l o W o r l d

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

jQuery j Q u e r y 对象和 DOM D O M 对象的相互转换

  • jQuery j Q u e r y 对象和 DOM D O M 对象获取的不同方式
    var $variable = $("#foo");//获取jQuery对象
    var variable = document.getElementById("foo");//获取DOM对象
  • jQuery j Q u e r y 对象和 DOM D O M 对象之间的相互转换
    //jQuery对象转换成DOM对象
    var tVar1 = $variable[0];
    var tVar2 = $variable.get(0);

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

冲突的解决

基于 jQuery j Q u e r y 的原理,它为了保持良好的独立性和完整性,将所有的内容封装在了 jQuery j Q u e r y 对象中,这个对象的快捷方式是 $ $ 。因此,在调用 jQuery j Q u e r y 库的时候,会更新 jQuery j Q u e r y $ $ 的定义,此时,若原先的代码中已经存在jQuery或$的定义(有可能是直接定义,也有可能是之前加载的库中的定义),相关的定义就会被覆盖,从而导致冲突。
jQuery j Q u e r y 为了解决这种冲突,采用了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>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页