jQuery简介

什么是jQuery

jQuery是一个javascript的库,提供了很多方便的选择器可以快速定位到需要操作的元素上面。其实jQuery是在javascript的基础上进行了封装,提供了很多便捷的方法方便开发者使用,可以提高开发效率,在实际应用中基本上会直接使用jQuery来代替原生的javascript。jQuery优化了HTML文档操作、事件处理、动画设计和Ajax交互等内容。另外,jQuery还兼容各种主流浏览器。

jQuery版本说明:

1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
     功能不再新增。因此一般项目来说,使用1.x版本就可以了,
     最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
     功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
     最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
     一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
     目前该版本是官方主要更新维护的版本。

jquery-xxx.js(Compressed解压版) 与 jquery-xxx.min.js(uncompressed压缩版)区别:

jquery-xxx.js:开发版本。给程序员看的,开发中使用,有良好的缩进和注释。体积大一些
jquery-xxx.min.js:生产版本。生产环境的程序中使用,没有缩进。体积小一些。程序加载更快

上面两个版本的源码内容是一样的。

因为jQuery是一个javascript的库,所以要想使用它的话,需要先下载这个库文件,下载地址:
https://jquery.com/

使用let声明变量

为了后续的学习,这里先介绍一个关键字let,注意该关键字跟jQuery没有关系,是javascript中的,确切的说是在ES6中新增的关键字,关于他们之间的关系在后面会进行介绍。

通过这个let关键字可以声明变量,声明的变量只对其所在的代码块内有效,而我们之前使用var声明的变量可以在全局中使用,这样会有一些问题。如果与java来做对比的话,let相当于是局部变量,var相当于是成员变量。在后面的代码中,如果不需要定义全局变量的话,建议使用let声明。

如果在idea中使用let报错的话,需要设置一下idea中的javascript版本。

1.打开设置,快捷键:ctrl shift alt s

2.找到language & frameworks

3.打开里面的javascript,将javascript language version的下拉框修改为:ECMAScript6

图一

第一个jQuery程序

jQuery对象:jQuery对象是对 DOM 对象进行二次封装后的对象,是 jQuery 所特有的对象。其命名一
般以$开头。jquery对象实际上就是一个【数组对象】。在这个数组对象存储本次定位的所有DOM对象。jquery对象内置了很多功能函数,开发人员可以使用功能函数对jquery对象中的DOM对象进行统一操作。

使用jQuery获取div中的内容。

将下载的库文件拷贝到项目中,然后创建html,并引入jQuery的库文件注意路径不要写错:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<!--   引入本地js -->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
    <div id="hello">hello jQuery</div>
</body>
<script>
    let content = $("#hello").html();
    console.log(content);
</script>
</html>

DOM对象加载完毕之后马上执行的函数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
    //页面加载后在控制台打印

    //第一种写法
    jQuery(document).ready(function () {
        console.log("jQuery1")
    });

    //第二种写法
    $(document).ready(function () {
        console.log("jQuery2")
    });

    //第三种写法
    $(function() {
        console.log( "jQuery3" );
    });


</script>
</html>

上面的jQuery函数的写法是等价的,会在dom加载完毕之后执行里面的内容。而原生的javascript的window.onload会在整个页面加载完毕之后运行里面的内容(比如图片),也就是说$()比window.onload先执行,不过有的浏览器是相反的。另外window.onload只能定义一次,如果定义多次的话,后面的会将前面的覆盖掉,$()可以定义多个。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="https://tomcat.apache.org/res/images/tomcat.png">
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
    window.onload = function () {
        alert("javascript");
    }

    //jQuery的写法 
    $(function() {
        alert("jQuery");
    });


</script>
</html>

jQuery对象和javascript对象

获取对象的方式

使用javascript     document.getElementById("id");
使用jQuery         $("#id");

这两种对象是可以相互转换的。

DOM对象转化为jQuery对象

使用$(DOM对象)方式,可以 DOM 对象转换为 jQuery 对象,例如:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="button" value="提交" id="btn">
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>

    $(document).ready(function () {
        //使用JavaScript原生写法获取DOM对象
        let btn = document.getElementById("btn");
        console.log(btn.value);

        //将btn转成jQuery对象
        let btnJQ = $(btn);
        console.log(btnJQ.val())
    });

</script>
</html>

jQuery对象转化为DOM对象

jQuery 对象本身为数组对象,该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象: get(0)方式与下标[0]方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="text" id="name">
    <input type="button" value="提交" id="btn">
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>

    $(document).ready(function () {
       let name = $("#name");
       let btn = $("#btn");

       //click是jQuery中的单击响应事件
       btn.click(function () {
           console.log(name.val());

           //将jQuery对象转化为DOM
           console.log(name.get(0).value);
           console.log(name[0].value);

       });
    });

</script>
</html>