jQuery一-初步了解

共计 4660 个字符，预计需要花费 12 分钟才能阅读完成。

由 John Resig 创建于 2006 年一月的开源项目，jQuery 凭借着跨平台的兼容性，简洁的语法，极大的简化了 JavaScript 人员遍历 HTML 文档，操作 DOM，处理事件，执行动画，和开发 Ajax 的操作。

轻量级。采用 Uglifys 压缩后保持再 30kb 左右。
拥有强大的选择器。jQuery 允许开发者使用 CSS1 到 CSS3 几乎所有选择器，以及 jQuery 独创的高级而复杂的选择器。
出色的 DOM 封装操作。jQuery 封装了大量常用的 DOM 操作，使开发者再编写 DOM 操作相关程序的时候能够得心应手。
可靠的事件处理机制。jQuery 的事件处理机制吸收了 Javascript 专家编写的 Dean Edwards 编写的事件处理函数的精华，使得 jQuery 再处理事件绑定的时候相当可靠。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方面，jQuery 也做得非常不错。
完善的 Ajax。jQuery 将所有的 ajax 操作封装到一个函数 $.ajax() 里，使得开发者处理 Ajax 的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和 XMLHttpRequest 对象的创建和使用问题。
不污染顶级变量。jQuery 只建立一个名为 jQuery 的对象。其所有的函数方法都在这个对象之下。其别名 $ 也可以随时交出控制权，绝对不会污染其他的对象。使得 jQuery 库可以与其他 Js 库共存
出色的浏览器兼容性
链式操作方式。对发生在同一个 jQuery 对象上的一组动作，可以直接连写无需重复获取对象。
隐式迭代。当用 jQuery 找到带有 .myClass 类的全部元素时，无需循环遍历每一个返回的元素。
行为层与结构层的分离。开发者可以使用 jQuery 选择器选中元素，然后直接给元素添加事件。简单的来说就是可以在 js 中操作 html。
丰富的插件支持。
完善的文档。
开源

下载

可以通过 node.js 自带的包管理器 npm 或者 bower 等包管理器下载，也可以通过官网下载

npm 下载 /cnpm 下载 /bower 下载

npm i jquery/cnpm i jquery/bower i jquery

官网下载

https://code.jquery.com/jquery-3.4.1.min.js，另存为 Js 文件即可，也可以在线引用

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

第一个 jQuery 程序

开始之前需要知道一点，在 jQuery 库中，$就是 jQuery 的一个简写形式，例如 $("#foo") 和jQuery("#foo")是等价的，$.ajax和 jQuery.ajax 是等价的。

// 引入 jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function(){    // 等待 DOM 元素加载完毕
           alert("hello world"); 
});    
</script>

其中 $(document).ready(); 这段代码类似于 window.onload 的作用，但是其中有些差别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片）才能执行	网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数	不能同时编写多个，以下代码无法正确执行：`window.onload = function(){alert("test")};window.onload = function(){alert("test2");}`结果只会输出“test2”	能同时编写多个，以下代码能够正确执行：`$(document).ready(function(){alert("hello world");}) $(document).ready(function(){alert("hello again")};);`结果两次都输出
简化写法	无	`$(document).ready(function(){//....};)`可以简写为`$(function(){});`

链式代码风格

我的理解是通过 . 运算符来链接层级操作，类似于 Js 原生的 document.getElementById('#app').value 这样的。

代码规范

（1）对于同一个对象不超过三个操作的，可以直接写成一行。

“$(‘li’).show().unbind(‘click’);

（2）对于同一个对象不超过三个操作的，建议每行写一个操作

$(this).removeClass('mouseout')
       .addClass('mouseout')
       .stop()
       .fadeTo('fast',0.6)
       .fadeTo('fast',1)
       .unbind('click')

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进，例如上面提到的代码。

$(this).addClass('highlight').children('li').show().end()
---------------------------------------------------------
$(this).addClass('highlight')
       .children('li').shiw().end()

注释的重要性

$('#table > tbody > tr:has(td:has(:checkbox:enabled))').css('background','red');

这一行代码就算是精通 jQuery 的人也不一定能一眼就看出作用，通过有意义的注释可以提高开发效率

// 在一个 id 为 table 的表格的 tbody 中，如果每行的一列中的 checkbox 没有被禁用，则把这行的背景设为红色
$('#table > tbody > tr:has(td:has(:checkbox:enabled))').css('background','red');

DOM 对象（Document Object Model，文档对象模型）

每一份 DOM 都可以表示成一颗树，树的内容为 html 代码的标签元素，按层级表示

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table>
             //...   
        </table>
        <p>
            //...
        </p>。。。</body>
</html>

jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。

// 通过获取 id 为 foo 的元素内的 html 代码。.html()是 jQuery 里的方法

DOM 对象操作	jQuery 对象操作
document.getElementById(‘foo’).innerHTML	$(‘#foo’).html()

注意：

在 jQuery 对象中无法使用 DOM 对象的任何方法。，DOM 对象中也不能使用任何 jQuery 方法。

像 DOM 对象有 innerHTML 方法，但是 jQuery 中没有；jQuery 对象中有 html() 方法，但是 DOM 中没有。

在讨论此之前规定好代码规范：

如果获取的是 jQuery 对象，那么在变量前面加上$

var $variable = jquery 对象

如果获取的是 DOM 对象，

var variable = DOM 对象

jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法，但如果对 jQuery 对象所提供的方法不熟悉，或者 jQuery 没有封装想要的方法，不得不使用 DOM 对象的时候，有以下两种处理方法。

jQuery 提供了两种方法将一个 jQuery 对象转换成 DOM 对象，即 [index] 和get(index)

案例 html 代码：

<input name="Checkbox" type="checkbox" id="cr">

（1）jQuery 对象是一个类似于数组的对象，可以通过 [index] 的方法得到相应的DOM 对象

var $cr = $('#cr');   //jquery 对象
var cr = $cr[0];      //DOM 对象

alert(cr.checked);    // 检测这个 checkbox 是否被选中

（2）另一种方法是 jQuery 本身提供的，通过 get(index) 方法得到相应的 DOM 对象

var $cr = $('#cr');   //jquery 对象
var cr = $cr.get(0);      //DOM 对象

alert(cr.checked);    // 检测这个 checkbox 是否被选中

DOM 对象转成 jQuery 对象

对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。方式为$(DOM 对象)

var cr = document.getElemntById('cr');   //DOM 对象
var $cr = $(cr);                         //jQuery 对象

转换后，可以任意使用 jQuery 中的方法。

通过以上方法，可以任意相互转换 jQuery 兑现和 DOM 对象。

范例代码)

在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里 — jQuery。通常，全局对象都被很厚地储存在 jQuery 命名空间里，因此当 jQuery 库和其他 JavaScript 库一起使用时不会引起冲突。

默认情况下，jQuery 用 — $作为快捷方式。

一共有三种方式，其中第三种有两种方法

方式一：移交“$”使用权

jQuery.noConflict();    // 将变量 $ 的控制权交给 prototype.js

/**
                 * 在该函数内就可以用“jQuery”代替字符“$”使用 jquery
                 */
jQuery(function(){// 使用 jQuery
    jQuery("p").click(function(){alert(jQuery(this).text());
    })
})
$('pp').style.display = 'none'; // 使用 pototype.js 隐藏元素

方式二：起别名

var $J = jQuery.noConflict();    // 自定义快捷方式
            
            /**
             * 同样的，在这里可以使用“$J”代替字符“$”使用 jquery
             */
            $J(function(){$J('p').click(function(){alert($J(this).text());
                })
            })
            $('pp').style.display = 'none';

方式三：既可以使用字符$，又不用起别名

其一：移交使用权时传参，之后就可以在 jQuery 方法内使用字符 $ 而不用别名

jQuery.noConflict();
// 使用 jQuery 设定页面加载时执行的函数传参
jQuery(function($){$("p").click(function(){alert($(this).text());
    })
});
$('pp').style.display = 'none';

其二：类似于一，不过是使用匿名函数

jQuery.noConflict();
// 匿名函数内部的 $ 均为 jQuery
(function($){$("p").click(function(){alert($(this).text());
    })
})
$('pp').style.display = 'none';