文章目录

一、写在前面

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

二、jQuery的引入

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

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

2、jQuery的引入

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


然后在html文档里，用<script>标签引入jQuery的文件链接：

<script src="jquery-3.4.1.js"></script>

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>

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

四、实例之左侧菜单栏

1、测试效果

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


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>