可以看到， jquery-1.10.2.min.js 的文件大小只有91KB，这是里面的代码没有任何的格式，都堆积在一起，没有空格；而jquery-1.10.2.js 文件的大小虽然比较大些，但是它的代码逻辑都是比较清楚的，格式比较规范。

但是两个文件都可以使用，喜欢用体积大的或者体积小的就看个人习惯~

jQuery引用

下载Jquery库到本地后，引用本地文件，以下为引用方法

复制 jquery-1.10.2.min.js 文件，并粘贴到和即将使用的html文件的同目录下

二、jQuery语法和使用

1、jQuery语法

基础语法：$(selector).action()

$符号代表定义jQuery
选择符(selector)"查询"和“查找”HTML元素
jQuery的action()执行对元素的操作

2、jQuery使用

文件就绪事件

第一种写法

使用时所有jQuery函数位于document ready函数中
$(document).ready(function(){
   // 开始写 jQuery 代码...
});

第二种写法（简洁写法）


$(function(){
   // 开始写 jQuery 代码...
});

jQuery和JavaScript的对比


//JavaScript
window.onload = function () {
    //网页资源（dom结构，图片）都加载完之后才会执行这个里面的代码
    //在一个页面中只能写一次，后面的会把前面的内容覆盖掉
}
        
//jQuery
$(function () {
    //只用加载dom结构就会执行这个里面的代码
    //里面可以有多个
})

jQuery语法使用

语法示例

$(this).hide()--隐藏当前元素
$("p").hide()--隐藏所有元素
$(".test").hide()--隐藏所有class="test"的元素
$("#test").hide()--隐藏,id="test"的元素

代码演示：

通过引入js文件，然后通过 $("div").hide() 隐藏div元素

首先通过一个script标签引入js文件，这个script标签只是用来引入文件，如果要写代码的话要另起炉灶，重新建立一个script标签，在里面写代码

先运行，查看结果，可看到页面中出现div元素的内容

然后在第二个script标签中写入隐藏div标签的语句

刷新页面，查看结果，发现div元素已经被隐藏

附上原操作代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("div").hide();
        })
    </script>
</head>
<body>
    <div>
        这是div
    </div>
</body>
</html>

三、jQuery选择器

jQuery中分有三种选择器，分别为：

元素选择器
id选择器
class选择器

下面通过代码演示，分别对这三种选择器展开深入的了解

1、元素选择器

通过元素选择器实现鼠标点击后，隐藏内容的功能

首先，通过 <input type="button" value="点我隐藏"> 设置一个按钮，然后再写入一个p标签
接着在第二个script标签中写入一个文件就绪事件：$(function () {})，并在这一事件中通过元素选择器找到input元素
然后给input元素设置一个点击事件：$('input').click(function () {})
最后在这个点击事件中再次通过元素选择器找到p元素，给p元素设置一个隐藏功能：$('p').hide();

这就像是一个函数嵌套，当代码运行时，会等到其他元素加载完之后才会执行 $(function () {}) 内的代码，然后等鼠标点击按钮时（也就是执行了点击事件：$('input').click(function () {})），会运行到 $('p').hide(); 然后隐藏p标签的内容

附上原操作代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过元素选择器
            //找到input标签，click为点击事件
            $('input').click(function () {
                $('p').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p>
        这是内容
    </p>
</body>
</html>

2、id选择器

id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个id，比如：$('#div1').hide(); （#号表示获取的是id，#后的内容就是id的值）

附上原操作代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过id选择器
            //找到input标签，click为点击事件
            $('input').click(function () {
                $('#div1').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p id="div1">
        这是内容
    </p>
</body>
</html>

3、class选择器

id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个class，比如：$('.class').hide(); （. 表示获取的是class，. 后的内容就是class的值）

附上原操作代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过id选择器
            //找到input标签，click为点击事件
            $('input').click(function () {
                $('.cla1').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p class="cla1">
        这是内容
    </p>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/574217