JavaScript之jQuery够用即可（jQuery的引入、查找选择器、左侧菜单栏）

忘是亡心i 2023-03-13 15:24 1阅读 0赞

### 文章目录 ###

*   *   *   *  一、写在前面
             *  二、jQuery的引入
             *  二、各种查找选择器
             *  四、实例之左侧菜单栏

#### 一、写在前面 ####

JQuery世界上使用最广泛的一个库，它是一个轻量级的库，文件大小只有几十k，但是功能却相当强大。并且它可以兼容CSS的多个版本和各种浏览器，这也是它用途极为广泛的原因。接下来几篇将要介绍jQuery的相关用法。

#### 二、jQuery的引入 ####

**1、jQuery的下载**  
它在很多网站都可以下载到，这里推荐一个[jquery下载所有版本（实时更新）][jquery]。

下载完了后是一个压缩包，解压之后是一个js文件，我们把它复制到我们的项目文件夹里就可以使用了。

**2、jQuery的引入**  
![1][]  
然后在html文档里，用<script>标签引入jQuery的文件链接：

**3、jQuery的使用（$的用法）**  
例如：

$("#test").html()

这个$符号就是使用jQuery的标志，它是一个基本原则器，因此每次使用前都需要加上它，上述代码的意思是：  
获取ID为test的元素内的html代码。其中html()是jQuery里的方法

**4、jQuery的基础语法**

> $(selector).action()

selecto就是选择器方面，action就是我们需要的操作方面（各种方法）

#### 二、各种查找选择器 ####

**1、基本选择器（$符号）**

$("*")    $("#id")    $(".class")   $("element")    $(".class,p,div")

**2、层级选择器**

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

**3、基本选择器（：索引）**

$("li:first")  $("li:eq(4)")  $("li:even") $("li:gt(2)")

**4、属性选择器**

$('[id="div1"]')   $('["alex="sb"][id]')

**5、表单选择器**

$("[type='text']").css("width","200px");  //直接设置属性
    $(":text").css("width","500px");  //用简单方式

**6、练习代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery引入</title>
    </head>
    <body>
    <div class="div1">DIV标签一号</div>
    <div class="divv">DIV标签二号
        <p class="ppp" name="Zahuw" id="p1">P标签一号</p>
        <a href="">A标签</a>
        <div class="divv">DIV标签三号
            <div class="divv">DIV标签四号</div>
            <p name="Luffy" id="p2">P标签二号</p>
            <p name="Luffy" id="p3">P标签二号</p>
        </div>
    </div>
    
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
    </ul>
    
    <input type="text">
    <input type="checkbox">
    <input type="submit">
    
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        //层级选择器：只让div1和四号div变红
        // $(".div1, div .divv .divv").css("color","red"); //后半部分表示div标签中的class为divv里的divv
    
        //子代选择器：只让DIV四号变红
        // $(".divv>.divv>.divv").css("color","red");
    
        //基本筛选器：让列表的第三个元素变红（通过索引筛选）
        //$("li:eq(2)").css("color","red"); //让列表的第三个元素变红
        // $("li:even").css("color","red"); //让所有奇数行变红
        // $("li:odd").css("color","red"); //让所有偶数行变红
        // $("li:gt(2)").css("color","red"); //从第三个位置之后开始变红
        // $("li:lt(2)").css("color","red"); //从第三个位置之前开始变红
    
        //基本筛选器简洁写法
        // $("li:eq(2)").css("color","red"); //让列表的第三个元素变红
        // $("li").eq(4).css("color","red"); //让列表的第五个元素变红 //这种写法更灵活
        // $("li").first().css("color","red"); //第一个变红
        // $("li").last().css("color","red"); //最后一个变红
    
        //属性选择器：通过自定义的属性来查找
        $("[name='Zahuw']").css("color","red");
        //双重属性选择
        $("[name='Luffy'][id='p2']").css("color","red");
    
        //表单选择器
        $("[type='text']").css("width","200px");  //直接设置属性
        $(":text").css("width","500px");  //用简单方式
    </script>
    </body>
    </html>

![2][]

#### 四、实例之左侧菜单栏 ####

**1、测试效果**  
![3][]  
**2、测试代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>左侧菜单栏</title>
    
        <style>
            .outer{ 
                height: 1000px;
                width: 100%;
            }
    
              .menu{ 
                  height: 500px;
                  width: 30%;
                  background-color: beige;
                  float: left;
              }
    
              .content{ 
                  height: 500px;
                  width: 70%;
                  background-color: rebeccapurple;
                  float: left;
              }
    
             .title{ 
                 line-height: 50px;
                 background-color: #425a66;
                 color: yellow;}
    
    
             .hide{ 
                 display:none;
             }
    
    
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="show(this)">饮料</div>
                <div class="con hide">
                    <div>可乐</div>
                    <div>红茶</div>
                    <div>酸奶</div>
                </div>
            </div>
    
            <div class="item">
                <div class="title" onclick="show(this)">主食</div>
                <div class="con hide">
                    <div>套饭</div>
                    <div>披萨</div>
                    <div>汉堡</div>
                </div>
            </div>
    
            <div class="item">
                <div class="title" onclick="show(this)">配菜</div>
                <div class="con hide">
                    <div>鸡腿</div>
                    <div>鸡排</div>
                    <div>鸡米花</div>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        function show(self){ 
            $(self).next().removeClass("hide");  //移除hide这个class名，则显示出来
            $(self).parent().siblings().children(".con").addClass("hide");
            //从选中的标签self中找它的上一级，在它的上一级全部下一级内容中找非self标签（即另外两个标题），
            //然后在这些非self标签内找“.con”的标签（即下拉选项），最后给这些下拉选项添加一个hide隐藏效果
        }
    </script>
    
    </body>
    </html>

[jquery]: http://www.jq22.com/jquery-info122
[1]: /images/20230312/d077fb68331e4aa3a95cd44157b4f55f.png
[2]: /images/20230312/f73b1c8a3adb4f0d958e7d0950ed579c.png
[3]: /images/20230312/698b9b1cac3a4d3aa3e3c79fc6930dc2.png