0
0

Educoder/头歌JAVA——jQuery基础

第1关：jQuery入门

相关知识

环境安装

安装环境是使用

jQuery

的第一步，若需要在本地运行

jQuery

，可以查看背景知识来安装

jQuery

库。

第一个程序

在

<div id="box"></div>

里填充内容

hello,jquery

。实现的效果如下：

\Rightarrow

这里用

javascript

先实现一下：

  1. var box = document.getElementById("box");
  2. box.innerHTML = "hello,jquery";

用

jQuery

实现会更简单，下面每一步都和上面的相对应，实现如下：

  1. var box = $("#box");
  2. box.html("hello,jquery");

从上面可以看出：

  • $("#box")是获取到id="box"的div；
  • html()方法是获取元素的内容（包括HTML标记）， ()里面没有内容表示获取，有内容表示赋值。

**基本语法： 

$(selector).action()

**

说明:

  • jQuery用美元符号 $ 定义；

id选择器

对于上面 

id="box1"

的 

div

，如何获取它的内容呢？ 用

jquery

实现如下：

  • selector表示要操作的dom元素；
  • action表示要执行的操作。
  • <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body> <div id="content"></div> <script> //------------begin--------- var box = $("#content"); box.html("这是我的第一个jquery程序"); //-----------end------------ </script> <style> #content{ width: 300px; height: 60px; text-align: center; line-height: 60px; margin: 30px auto; font-size: 20px; border: 2px solid #000; } </style></body></html>## 第2关：jQuery基本选择器

  • 相关知识为了完成本关任务，你需要掌握：1.id选择器，2.类选择器， 3.元素选择器。

  • <div id="box1">我是id选择器</div>
  • <p class="box2"></p>
  • <span></span>
  • var box1 = $("#box1");
  • box1.html();

从上面可以看出：

**

id

选择器语法**： 

$("# + idName")

这里再提醒一下：

html()

： 

()

里有内容，表示往该元素添加内容，没有内容，表示获取内容。

类选择器

对于上面 

class="box2"

的 

p

，如何填充内容 

我是类选择器

呢？ 用

jQuery

实现如下：

  1. var box2 = $(".box2");
  2. box2.html("我是类选择器");

效果如下：

\Rightarrow

从上面可以看出：

类选择器语法：

 $(". + className")

元素选择器

对于上面 

<span></span>

，如何填充内容 

我是元素选择器

呢？ 用

jQuery

实现如下：

  1. var box3 = $("span");
  2. box3.html("我是元素选择器");

\Rightarrow

编程要求

jQuery

已经引入，在右侧编辑器补充

begin

至

end

间的代码，实现点击按钮，添加相应内容的功能。要求如下：

  • 用id选择器，获取id="box"的div，添加内容为我是id选择器添加的内容；
  • 用类选择器，获取class="box"的div，添加内容为我是类选择器添加的内容；
  • 用元素选择器，获取 p 标签，添加内容为我是元素选择器添加的内容。

提示：

  • $(this)指的是当前操作的DOM元素。

注意：为了方便评测，这里统一用双引号 

""

来表示字符串，切记。

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul class="container">
        <li class="item">
            <button>id</button>
            <div id="box"></div>
        </li>
        <li class="item">
            <button>类</button>
            <div class="box"></div>
        </li>
        <li class="item">
            <button>元素</button>
            <p></p>
        </li>
    </ul>
    <script>
    
    $(function(){
        
        $("button").click(function(){
            //inner是当前点击的button元素的内容
            var inner = $(this).html();
            if(inner == "id"){
                //----------begin----------

                var box1 = $("#box1");
                box1.html("我是id选择器添加的内容");
                //----------end------------
            }
            if(inner == "类"){
                //----------begin----------

                var box2 = $(".box2");
                box2.html("我是类选择器添加的内容");
                
                //----------end------------
            }
            if(inner == "元素"){
                //----------begin----------

                var box3 = $("p");
                box3.html("我是元素选择器添加的内容");

                //----------end------------
            }
        })
    })

    </script>  
    <style>
        ul,li{
            list-style-type: none;
        }
        .container{
            width: 400px;
            margin: 40px auto;
        }
        .container .item{
            height: 60px;
            line-height: 60px;
            margin: 0 20px 20px 0;
            overflow: hidden;
        }
        .container .item button{
            float:left;
            width: 60px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            margin-right: 20px;
        }
        .container .item div{
            width: 240px;
            height: 40px;
            line-height: 40px;
            border: 2px solid #ccc;
            text-align: center;
            float: left;
        }
        .container .item p{
            width: 240px;
            height: 40px;
            line-height: 40px;
            border: 2px solid #ccc;
            text-align: center;
            margin-top: 0px;
            float: left;
        }
    </style>
</body>
</html>

第3关：过滤选择器 （一）

相关知识

为了完成本关任务，你需要掌握：1.设置

css

属性，2.基础的过滤选择器。

设置css属性

设置单个属性

  1. <div id="single">设置单个属性</div>

如果给上面的

div

标签添加

css

属性：

background：orange;

，应该怎么实现呢？

对于

div

标签，用

jQuery

可以这样写：

$("#single").css("background","orange");

效果如下：

这是设置单个属性常用的方法。语法总结如下：

$(selector).css(attr,value);

设置多个属性

  1. <p class="more">设置多个属性</p>

如果给上面的

p

标签添加

css

属性：

  1. "background":"#ccc";
  2. "text-align":"center";
  3. "line-height":"40px";

应该怎么办呢？

对于

p

标签，用上面的方法一条一条的写，也是可以的，但是比较麻烦，下面是设置多个

css

属性的方法：

  1. $(".more").css({
  2. "background":"#ccc",
  3. "text-align":"center",
  4. "line-height":"40px"
  5. })

效果如下：

可以看出，设置多个

css

属性是用对象的方式来实现的。语法总结如下:

  1. $(selector).css({
  2. attr1: value1,
  3. attr2: value2,
  4. ...
  5. })

过滤选择器(重点)

  1. <ul>
  2. <li>第一个li</li>
  3. <li>第二个li</li>
  4. <li>第三个li</li>
  5. <li>第四个li</li>
  6. <li>第五个li</li>
  7. <li>第六个li</li>
  8. </ul>

基础效果图如下：

现在分别获取获取指定的

li

元素，并添加相应的背景色。

利用过滤选择器选择指定的

li

元素：

  • 获取第一个li标签，添加背景色orange, 代码如下： 获取第一个li标签：$("li:first") 添加背景色： $("li:first").css("background","orange")；

  • 获取最后一个li标签，添加背景色green, 代码如下： 获取最后一个li标签：$("li:last") 添加背景色： $("li:last").css("background","green")； 效果图如下：

  • 获取下标为偶数的li标签，添加背景色#ccc, 代码如下： 获取下标为偶数的li标签：$("li:even") 添加背景色： $("li:even").css("background","#eee")；

  • 获取下标为奇数的li标签，添加背景色#ccc, 代码如下： 获取下标为奇数的li标签：$("li:odd") 添加背景色： $("li:odd").css("background","#ccc")。 效果图如下：

**注：下标是从

0

开始的**，

li

标签第一个下标是

0

，是偶数，所以背景色是

"#eee"

。

编程要求

jQuery

已经引入，在右侧编辑器补充

begin

至

end

间的代码，实现一个色彩分明的表格。要求如下：

  • 用过滤选择器获取要操作的DOM元素；
  • 设置表头颜色为 yellowgreen；
  • 设置奇数行颜色为 lightyellow；
  • 设置偶数行颜色为 lavenderblush；
  • 提供的代码不允许修改，只允许填充begin至end中间的代码。

提示：

  • 要先设置奇数行和偶数行的颜色，最后设置表头的颜色，否则会被覆盖的；
  • 这里css的背景色用 background, 不用 background-color。

**注意：为了方便评测，这里统一用双引号 

""

来表示字符串，切记。**

效果图如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
   <table border="1" cellspacing="0"  cellpadding="10" align="center">
  <!--<caption>Monthly savings</caption>-->
  <tr id="tb-head">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
     <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td>洛杉矶</td>
  </tr>
  <tr>
     <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td>上海</td>
  </tr>
  <tr>
     <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td>河南</td>
  </tr>
</table>
    <script>
    //-----------begin-----------

    $("tr:even").css("background","lavenderblush")//偶数
    $("tr:odd").css("background","lightyellow")//奇数
    $("tr:first").css("background","yellowgreen")//第0行（表头）
      
    //------------end------------  
    </script>
    
</body>
</html>

第4关：过滤选择器 （二）

相关知识

为了完成本关任务，你需要掌握：1.

:eq

选择器，2.

:not

选择器。

获取指定序号的元素

基本的

HTML

结构如下：

  1. <ul>
  2. <li>第一个li</li>
  3. <li>第二个li</li>
  4. <li>第三个li</li>
  5. </ul>

效果图如下：

如何获取上面的第二个

li

标签，并设置背景色为红色呢？

先用过滤选择器实现，这里用到的是 

:eq

选择器，添加如下代码：

$("li:eq(1)").css("background","red")

效果图如下：

为什么这里是

eq(1)

呢？ 因为 

eq

选择器的下标是从

0

开始的。

另一种方法：

eq()

eq()

也是获取指定序号的元素的，使用方法如下：

$("li").eq(1).css("background","red")

和上面的效果是一样的，这里 

eq()

的下标也是从

0

开始的。

:not 选择器

这里要实现的效果图如下：

下面是基本的HTML结构：

  1. <ul class="box">
  2. <li>第一个li</li>
  3. <li>第二个li</li>
  4. <li>第三个li</li>
  5. <li>第四个li右边没有外边距</li>
  6. </ul>

效果图如下：

这里第四个

li

标签的右侧没有外边距，该怎么实现呢？

这里用：

not

选择器，它选取除了指定元素以外的所有元素，代码如下：

$("li:not(:last)").css("margin-right","20px")

效果图如下：

编程要求

jQuery

已经引入，在右侧编辑器补充

begin

至

end

间的代码，实现下面的效果。要求如下：

  • 用选择器实现下面的效果，相应的方法可以在平台上自行调试；
  • 选取第三行，填充背景色为"#eee"；
  • 除了最后一行，其他都要底边边框，边框样式为：1px dashed #ccc。

注：

  • 这里用类来获取li元素，不用li标签；
  • 背景色用 background， 不用 background-color；
  • 提供的代码不允许修改，只允许填充begin至end中间的代码。

**注意：为了方便评测，这里统一用双引号 

""

来表示字符串，切记。**

效果图如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul class="container">
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>
        <li class="item">
            点赞！中国自主卫星电话正式放号，从此告别“不在服务
        </li>    
        
    </ul>
    <script>
    
    $(function(){
         
        //-------------  begin  -------------

        //$("li").eq(2).css("background","#eee");
        //$("li:not(:last)").css("border-bottom","1px dashed #ccc");
        $(".item:eq(2)").css("background","#eee");
     $(".item:not(:last)").css("border-bottom","1px dashed #ccc");
        
        //------------  end  ---------------
    })

    </script>  
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 400px;
            margin: 40px auto;
            border: 2px solid #ccc;
            padding: 0 20px;
        }
        .container .item{
            height: 40px;
            line-height: 40px;
            padding: 0;
            overflow: hidden;
            
        }
        .container .item span{
            width: 30px;
            height: 40px;
            line-height: 40px;
            padding: 0;
            overflow: hidden;
            
        }
        /*.container .item:not(:last-child){
            border-bottom: 1px dashed #ccc;
        }*/
    
    </style>
</body>
</html>

第5关：tab选项卡

相关知识

为了完成本关任务，你需要掌握：1.层次选择器，2.方法

show

和

hide

， 3.操作

css

类的方法。

层次选择器

  1. <div class="container">
  2. <p>
  3. <span>第一个p标签下的span</span>
  4. <span>第一个p标签下的第二个span</span>
  5. </p>
  6. <p>
  7. <i>i标签</i>
  8. <span>第二个p标签下的span</span>
  9. </p>
  10. </div>

如何获取到上面第一个

p

标签下所有的

span

标签？ 这里主要用层次选择器获取一下：

  • 第一步：获取到类container：$(".container")；
  • 第二步：获取到container下第一个p标签：$(".container p:first")；
  • 第三步：获取到第一个p标签下所有的span标签：$(".container p:first span")。

从上面可以看出来，层次选择器和

Dom

结构是相匹配的，

show()和hide()

  1. <p class="toggle">错误提醒</p>
  2. <p>展示的内容</p>

对于类

toggle

，有错误时需要出现，解决了错误需要隐藏。这个功能怎么实现呢？这里用

show()

和

hide()

：

  • 出现：$(".toggle").show()
  • 隐藏：$(".toggle").hide()
show()

的原理相当于

css

中的 

display:block;

hide()

的原理相当于

css

中的 

display:none;

类的添加和删除

  1. <div id="box"></div>
  2. .active{ background: orange;}
  3. .btn{}

给上面的

div

添加类

active

和

btn

，该如何实现呢？这里用

addClass()

方法： 

$("#box").addClass("active btn");

现在要删除一个类

btn

，这里用

removeClass()

方法： 

$("#box").removeClass("btn");

编程要求

jQuery

已经引入，在右侧编辑器补充

begin

至

end

间的代码，实现

tab

切换的功能。要求如下：

  • 当点击上面的tab选项卡时，下面会显示对应的内容，添加的类为active；
  • tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；
  • 注： 提供的代码不允许修改，只允许填充begin至end中间的代码。

**注意：为了方便评测，这里统一用双引号 

""

来表示字符串，切记。**

效果图如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container">
        <ul class="head">
            <li>全部实训</li>
            <li>实训路径</li>
            <li>在线课堂</li>
            <li>讨论区</li>
        </ul>
        <div class="content">
            <div>我是全部实训的内容</div>
            <div>我是实训路径的内容</div>
            <div>我是在线课堂的内容</div>
            <div>我是讨论区的内容</div>
        </div>
    </div>    
    <script>
    
    $(function(){
         //tab的初始化
        $(".head li").removeClass('active').eq(0).addClass('active');
        $(".content div").hide().eq(0).show();        
        $(".head li").on('click', function(){
            // index是点击的li的索引
            var index = $(this).index();            
            //-----------begin-----------
            $(".head li").removeClass("active").eq(index).addClass("active");
            $(".content div").hide().eq(index).show(); 
            //------------end------------  
        })       
    })
    
    </script>
    
    <style>
        .container{
            width: 500px;
            margin: 40px auto;
        }
        ul,li{
          list-style-type: none;
        }
        .container ul{
            overflow: hidden;
            background: #000;
            color: #fff;
        }
        .container li{
            width: 100px;
            float: left;
            text-align: center;
            line-height: 60px;
            font-size: 18px;
            cursor: pointer;
        }
        .container li.active{
            color: orange;
        }        
        .container .content{
            width: 460px;
            height: 200px;
            padding: 20px;
            background: #ccc;
            font-size: 18px;
        }
    </style>
</body>
</html>
标签： jquery javascript 前端
本文转载自: https://blog.csdn.net/zhou2622/article/details/128262558
版权归原作者 陆小玖 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Educoder/头歌JAVA——jQuery基础”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航