jq基本使用（学习&&总结一）

轻风拂平平

已于 2024-07-19 08:57:59 修改

阅读量884

点赞数 11

文章标签： jquery css

于 2024-07-18 20:17:40 首次发布

本文链接：https://blog.csdn.net/q2728137172/article/details/140529262

版权

在学习总结之前，我们需了解一下jQruery的概念与本质。

jQruery本质就是一个javaScript的数据库，把js的一些原生代码在其中进行了封装，学习使用jQruery就是学习使用和调用这个库中的函数。

而每次想要使用jq时，我们都需要在html先引入jq库,引入之后我们才能对其进行调用(注:我使用的编辑软件为Visual Studio Code)。引入方法：

<script src="./jq.min.js"></script>

在jq中 $ 为jQruery的缩写，它的作用相当于js中的window对象，用$来包装对象，就能够实现对jq中方法的调用。

jq的另一个本质是数组,使用jq获取过来的对象，通过$进行包装(是以伪数组的形式进行存储)。

<!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="./jq.min.js"></script>
</head>
<body>
    <div id="d1"></div>
    <script>
        // jq本质是数组,
        // 使用jq获取过来的对象，通过$进行包装(以伪数组的形式存储)

        var $myDiv=$('#d1')
        $myDiv.html('jq')
        console.log($myDiv);

    </script>
</body>
</html>

运行结果

**运行结果图1**

看到这里，我们已经对jq有了基本的了解，那我们这时来插入一则广告...阿不！一个知识，我们所知html js的代码执行都是从上到下依次执行，以普遍理论性而言，两行执行同样操作的代码，在下面的会把上级代码覆盖掉，但在jq中有一个有趣例子.

执行同样操作的代码，在js里的window中只会执行alert（2），alert（1）会被覆盖掉，而使用jq方法alert（1），alert（2）会依次执行。（哇!有用的知识又增加了）

<!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="./jq.min.js"></script>
</head>
<body>
    <script>
        // window引入会覆盖
        window.onload=function(){
            alert(1);
        }
        window.onload=function(){
            alert(2);
        }



        // jq引入会依次都执行
         $(function(){
             alert(1);
         })
         $(function(){
             alert(2);
         })
    </script>
</body>
</html>

小知识2

js中的dom对象和jq对象是可以进行相互转换的（哪一个才是真正的我）

dom对象转换成jq对象格式为 $(dom对象);

  var myDiv=document.querySelector('div');
        var $mm=$(myDiv)
        console.log($mm);

jq对象转换成dom对象格式为 $jq对象[索引值]

(注：因为jq是以伪数组形式存储的，所以我们需要获取索引值来进行转换，具体jq伪数组的输出格式可返回上文看运行结果图1)

       var $myDiv=$('#d1')
        var mm=$myDiv[0];
        console.log($myDiv[0]);

接下来，让我们来了解jq选择器(以下为枯燥的知识，耐心看完吧)

$('#id') 指定的id元素

$('*')所有元素

$('.class')指定的class元素

$('div')根据标签获取元素

$('div,p,li')获取多个

$('li.class')交集获取

$('ul>li')子代

$('ul li')后代

jq筛选选择器

$('li:first'):第一个元素

$('li:last'):最后一个元素

$('li:eq(2)'):索引为2[查找指定索引的元素]

$('li:first'):索引为奇数

$('li:event'):索引为偶数

jq筛选方法

$('li').parent() 父级

$('ul').children('ol') // 子集，不加参数获取所有，添加元素获取指定元素

$('ul').find('li') // find 后代可以是孙子元素

$('li').siblings('li') //兄弟

$('li').nexAll() 输出目标后面的

$('li').prevAll() //输出目标前面的输出数组倒叙排列

$('li').hasClass('b2') //判断是否具有某个类名 true或false

$('div').eq(index); 指定索引方法

jq里面的排他思想

因为jq是以伪数组的形式进行存储的，所以想要达到一个多选一的效果，需要用到排他思想。

排他思想：输出自己当前的样式，让其他的兄弟样式不显示，只留下自己。

$(this).css('color','red');
$(this).siblings().css('color','');

终于到最后了，让我们做一个小案例来结束这痛苦的一天吧。

鼠标移入微博时，显示下面的框,每次移入不同的微博，都显示相应的框,框不能同时出现.

整体运行代码如下:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            list-style: none
        }

        a {
            text-decoration: none;
        }

        .nav>li {
            height: 41px;
            text-align: center;
            float: left;
            width: 100px;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a>:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            padding: 0;
            width: 100%;
            border-left: 1px solid #feecc5;
            border-right: 1px solid #feecc5;
        }

        .nav ul li {
            border-bottom: 1px solid #feecc5;
            list-style: none
        }

        .nav ul li a:hover {
            background-color: #fff5da;
        }
    </style>

        //由此引入jq库
    <script src="./jq.min.js"></script>


</head>
<body>

    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <br>

    <script>
        //首先我们获取微博元素
        var $a=$('.nav>li>a');
        //对它执行一个鼠标移入方法，（mouseover(function(){})鼠标移入时显示效果）
        $a.mouseover(function(){
            //通过this 来找到我们的兄弟节点，对他进行显示(show()显示)
            $(this).siblings().show();
        })
        //鼠标移出时(mouseout(function(){})鼠标移出)
        $a.mouseout(function(){
            //通过this 来找到我们的兄弟节点，对他进行隐藏(hide()隐藏)
            $(this).siblings().hide();
        })

    </script>

</body>

</html>

jq单独代码