jQuery学习笔记1

最新推荐文章于 2025-06-07 08:28:22 发布

Patrick_kafka

最新推荐文章于 2025-06-07 08:28:22 发布

阅读量260

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 学习笔记 javascript

本文链接：https://blog.csdn.net/2301_80318725/article/details/145844768

jquery 专栏收录该内容

1 篇文章

订阅专栏

1.jQuery基础铺垫

<!-- 1.下载和引入jQuery：

jQuery CDN的网址【https://releases.jquery.com/】

（1）代码直接引入：

<script

src="https://code.jquery.com/jquery-3.6.4.min.js"

integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="

crossorigin="anonymous"></script>

（2）打开这个网址，然后粘贴代码【https://code.jquery.com/jquery-3.6.4.min.js】

把全部的代码放到相同名字的jQuery的文件夹之下

-->

2.jquery的获取和引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里加一个script标签，然后在同级目录下写（因为已经提前放好了js文件），应该会出现提示 -->
    <!-- 这里的底层代码都是js结尾的，演变出了jQuery、vue等等 -->
    <!-- 这个是最简单的引入方式，引入外部库之后才能写jQuery-->
    <script src="jquery-3.6.4.min.js"></script>
</head>
<body>
    <div>隐藏这个div</div>
    <script>
        $('div').hide();// 这就是隐藏，代码量很短
        // $是jQuery特有标签，然后标签选择器选中，然后hide

        /*全局作用域下新增两个变量，$不需要实例化，是以类数组的方式存储，这里用的是jQuery对象，切记不能把$的jQuery对象和js的DOM对象混用。

        但是在实际开发中，其实这二者之间也可以转换：
        1.通过jQuery对象.[索引]或jQuery对象.get(索引)可把jQuery转dom对象
        2.而dom对象转换成jQuery对象的方法：$(DOM对象)
        */

        /*
        jQuery的选择器：
        格式：$(具体的选择器)--》通过选择器来获取元素：id 类 元素  如果同时获取多个元素，例如$(li,p,div)用，来分隔*/
    </script>
    
</body>
</html>

3.jquery的选择器的小案例和应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.4.min.js"></script>
</head>
<body>
    
    <div id="box">box</div>
    <div class="fruit">苹果</div>
    <div class="fruit">葡萄</div>
    <p>段落</p>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <script>
        /*
        jQuery的选择器：
        格式：$(具体的选择器)--》通过选择器来获取元素：id 类 元素  如果同时获取多个元素，例如$(li,p,div)用，来分隔*/
        
        $('#box').hide();//先用$（id选择器）获取，然后后面.hide隐藏  #加id名是id选择器
        $('.fruit').hide();//.类名-->类选择器
        $('p').hide();//这是标签选择器

        // 这里把上面隐藏的显示出来
        // $('div,p').show();


        $('#box,.fruit,p').show();
    </script>
</body>
</html>