03的开发日志
0%

jQuery学习笔记（1） 初识jQuery

发表于 更新于 分类于
本文字数： 2.4k 阅读时长 ≈ 2 分钟
  1. 引用
  2. 全局对象 $
  3. Hello World！
  4. jQuery对象和DOM对象
  5. 冲突的解决

引用

本地文件引用：

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

url引用：

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

全局对象 $

  • jQuery 把所有的属性、操作封装在jQuery对象中，因此每次调用jQuery的功能时，都类似于对象调用或函数使用;
  • jQuery为自己创建了一个快捷方式等价于jQuery，即:
1
2
3
4
5
$("#foo");
jQuery("#foo");

$.ajax();
jQuery.ajax();

Hello World！

1
2
3
4
5
6
7
8
9
<script>
    $(document).ready(function () {
        alert("Hello World!");
    });
    //可简写为：
    $(function () {
        alert("Hello World!");
    })
</script>

jQuery对象和DOM对象

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

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

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

1
2
3
4
5
6
//jQuery 👉 DOM
var tVar1 = $variable[0];
var tVar2 = $variable.get(0);

//DOM 👉 jQuery
var $tVar = $(variable);

冲突的解决

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

jQuery 为了解决这种冲突，采用了noConflict方法：

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

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

一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//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>
1
2
3
4
5
6
7
8
9
10
11
12
//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>