JavaScript 库

JavaScript 库就是一个 JavaScript 文件，里面存放了许多函数，这些函数都是使用 JavaScript 实现的。

有很多功能函数，如动画 animate、hide、show、获取元素等。

常见的 Javascript 库：

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • 移动端的 zepto

这些库都是对原生 Javacript 的封装，内部都是使用 JavaScript 实现的，我们主要学习的是 jQuery。

jQuery

主要作用：操作 DOM 。

效果：开发更简单、高效。

jQuery 是一个快速、简洁的 JavaScript 库，其设计宗旨是“write less, do more”，即倡导写更少的代码，做更多的事情。

j 就是 JavaScript；Query 查询。

意思就是查询 js，把 js 中的 DOM 操作作了封装，我们可以快速的查询使用里面的功能。

学习 jQuery 的本质：就是学习调用这些函数。

jQuery 出现的目的就是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery 的优点

  • 轻量级。核心文件才几十 kb，不会影响页面的加载速度
  • 跨浏览器兼容。基本兼容了现在主流的浏览器
  • 链式编程、隐式迭代
  • 对事件、样式、动画支持，大大简化了 DOM 操作
  • 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
  • 免费、开源

jQuery 的顶级对象 $

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 1. $ 是jQuery的别称（另外的名字）
        // $(function() {
        //     alert(11)
        // });
        jQuery(function() {
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        });
        // 2. $同时也是jQuery的 顶级对象
    </script>
</body>

</html>

jQuery 对象和 DOM 对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>
</body>

</html>

jQuery 常用 API

选择器：$("选择器")
隐式迭代：$("div").css("background", "pink");
筛选选择器：$("ul li:first").css("color", "red");
……