位置: IT常识 - 正文

Educoder/头歌JAVA——jQuery基础(头歌java入门运算符和表达式答案)

编辑:rootadmin
Educoder/头歌JAVA——jQuery基础

目录

第1关:jQuery入门

相关知识

环境安装

第一个程序

id选择器

 第2关:jQuery基本选择器

相关知识

类选择器

元素选择器

编程要求

 第3关:过滤选择器 (一)

相关知识

设置css属性

编程要求

第4关:过滤选择器 (二)

相关知识

:not 选择器

编程要求

 第5关:tab选项卡

相关知识

层次选择器

show()和hide()

类的添加和删除

编程要求


第1关:jQuery入门相关知识环境安装

推荐整理分享Educoder/头歌JAVA——jQuery基础(头歌java入门运算符和表达式答案),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:educoder 头歌,头歌java中的异常答案,头歌educoder实训怎么用,头歌java第一课,头歌educoder答案java,头歌educoder实训怎么用,头歌java第一课,头歌educoder答案java,内容如对您有帮助,希望把文章链接给更多的朋友!

安装环境是使用jQuery的第一步,若需要在本地运行jQuery,可以查看背景知识来安装jQuery库。

第一个程序

在<div id="box"></div>里填充内容hello,jquery。实现的效果如下:

                

这里用javascript先实现一下:

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

用jQuery实现会更简单,下面每一步都和上面的相对应,实现如下:

var box = $("#box");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 实现如下:

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

效果如下:

         

从上面可以看出:

类选择器语法: $(". + className")

元素选择器

对于上面 <span></span>,如何填充内容 我是元素选择器呢? 用jQuery实现如下:

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

           

编程要求

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属性

设置单个属性

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

如果给上面的div标签添加css属性:background:orange; ,应该怎么实现呢?

对于div标签,用jQuery可以这样写:

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

效果如下:

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

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

设置多个属性

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

如果给上面的p标签添加css属性:

"background":"#ccc";"text-align":"center";"line-height":"40px";

应该怎么办呢?

对于p标签,用上面的方法一条一条的写,也是可以的,但是比较麻烦,下面是设置多个css属性的方法:

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

效果如下:

可以看出,设置多个css属性是用对象的方式来实现的。语法总结如下:

$(selector).css({attr1: value1,attr2: value2,...})

过滤选择器(重点)

<ul><li>第一个li</li><li>第二个li</li><li>第三个li</li><li>第四个li</li><li>第五个li</li><li>第六个li</li></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")。 效果图如下:

Educoder/头歌JAVA——jQuery基础(头歌java入门运算符和表达式答案)

注:下标是从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结构如下:

<ul><li>第一个li</li><li>第二个li</li><li>第三个li</li></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`结构:

<ul class="box"><li>第一个li</li><li>第二个li</li><li>第三个li</li><li>第四个li右边没有外边距</li></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类的方法。

层次选择器<div class="container"><p><span>第一个p标签下的span</span><span>第一个p标签下的第二个span</span></p><p><i>i标签</i><span>第二个p标签下的span</span></p></div>

如何获取到上面第一个p标签下所有的span标签? 这里主要用层次选择器获取一下:

第一步:获取到类container:$(".container");

第二步:获取到container下第一个p标签:$(".container p:first");

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

从上面可以看出来,层次选择器和Dom结构是相匹配的,

show()和hide()<p class="toggle">错误提醒</p><p>展示的内容</p>

对于类toggle,有错误时需要出现,解决了错误需要隐藏。这个功能怎么实现呢?这里用show()和hide():

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

show()的原理相当于css中的 display:block; hide()的原理相当于css中的 display:none;

类的添加和删除<div id="box"></div>.active{ background: orange;}.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>
本文链接地址:https://www.jiuchutong.com/zhishi/288869.html 转载请保留说明!

上一篇:docker部署chat-web,实现自己的ChatGPT(Docker部署nginx)

下一篇:vue3在运行时路由可以正常跳转,但是页面空白,刷新页面恢复正常[已解决](vue程序运行过程)

  • 博客推广流程(博客推广要钱吗)

    博客推广流程(博客推广要钱吗)

  • 学习通怎么退出班级

    学习通怎么退出班级

  • 抖音粉丝团灭了怎么重新点亮(抖音粉丝团灭了会掉亲密度吗)

    抖音粉丝团灭了怎么重新点亮(抖音粉丝团灭了会掉亲密度吗)

  • 微博年度回忆怎么看(微博年度回忆怎么取消)

    微博年度回忆怎么看(微博年度回忆怎么取消)

  • 三星手机怎么录屏(三星手机怎么录入门禁卡)

    三星手机怎么录屏(三星手机怎么录入门禁卡)

  • vivox23和幻彩版区别(vivox23幻彩版对比vivox23)

    vivox23和幻彩版区别(vivox23幻彩版对比vivox23)

  • Word怎么把一页分成两页(word怎么把一页分成左右两部分)

    Word怎么把一页分成两页(word怎么把一页分成左右两部分)

  • 宽带路由器和光纤路由器一样吗(宽带路由器和光猫图片)

    宽带路由器和光纤路由器一样吗(宽带路由器和光猫图片)

  • qq收藏保存多长时间(qq收藏保存多长时间最好)

    qq收藏保存多长时间(qq收藏保存多长时间最好)

  • 华为屏幕右移了怎么复原(华为屏幕桌面偏右)

    华为屏幕右移了怎么复原(华为屏幕桌面偏右)

  • 华为微信怎么是黑色的(华为微信怎么是黑色的了怎么办)

    华为微信怎么是黑色的(华为微信怎么是黑色的了怎么办)

  • 为什么小红书发布的内容别人看不到(为什么小红书发不了评论)

    为什么小红书发布的内容别人看不到(为什么小红书发不了评论)

  • 荣耀20停产原因(荣耀20停产了还能买吗)

    荣耀20停产原因(荣耀20停产了还能买吗)

  • 火山直播怎么解除公会(火山直播怎么解绑手机号)

    火山直播怎么解除公会(火山直播怎么解绑手机号)

  • 手机屏幕内爆了能修吗(手机屏内爆了怎么办)

    手机屏幕内爆了能修吗(手机屏内爆了怎么办)

  • 抖音互相关注会怎样(抖音互相关注会影响流量吗)

    抖音互相关注会怎样(抖音互相关注会影响流量吗)

  • 备忘录的爱心怎么弄(备忘录爱心啥意思)

    备忘录的爱心怎么弄(备忘录爱心啥意思)

  • iphone电池多少算健康(iphone电池健康多少是正常)

    iphone电池多少算健康(iphone电池健康多少是正常)

  • 手机扩容的好处和坏处(手机扩容有什么好处)

    手机扩容的好处和坏处(手机扩容有什么好处)

  • 佳能80d连拍怎么设置(佳能80d连拍怎么调)

    佳能80d连拍怎么设置(佳能80d连拍怎么调)

  • cx是什么(cx是什么寄存器)

    cx是什么(cx是什么寄存器)

  • 抖音系统消息怎么删除(抖音系统消息怎样打开)

    抖音系统消息怎么删除(抖音系统消息怎样打开)

  • 小米9有耳机孔吗(小米9耳机孔进水)

    小米9有耳机孔吗(小米9耳机孔进水)

  • 魅族pay怎么卸载(魅族pay怎么彻底卸载)

    魅族pay怎么卸载(魅族pay怎么彻底卸载)

  • 抖音上如何制作三格视频(抖音上如何制作长视频)

    抖音上如何制作三格视频(抖音上如何制作长视频)

  • 最右玩不了了(最右怎么不能刷新了)

    最右玩不了了(最右怎么不能刷新了)

  • 在Linux系统中安装web端的远程连接工具Wetty(在Linux系统中安装了一块虚拟磁盘大小的2G)

    在Linux系统中安装web端的远程连接工具Wetty(在Linux系统中安装了一块虚拟磁盘大小的2G)

  • 收到退税款怎么入账
  • 未核销fyc
  • 账面成本包含增值税吗
  • 公司车辆过户给个人需要交多少税
  • 固定资产投资额包括哪些会计科目
  • 酒类许可证过期了去哪里换证
  • 境内公司没有收购的股票
  • 自产自用应税消费品的消费税,其纳税环节
  • 股东借款超过一年个人所得税
  • 小微企业增值税优惠政策最新2023
  • 公司员工的车外地的停车费怎么做分录
  • 简易征收的增值税可以在税前列支吗
  • 营业账簿印花税怎么算
  • 30万以下免征附加税包含30万吗
  • 已经销售但是没货怎么办
  • 免税店购物需要满足什么条件
  • 可转换债券赎回和回售如何理解
  • 二手电脑怎么激活windows10
  • 去年的费用今年报销如何记账
  • 固定资产清理净值是什么意思
  • 出口货物做内销处理
  • 编译安装php7
  • win11发布时间正式确定
  • 应收账款 预收账款合并
  • 住房贷款利息支出专项附加抵扣
  • 净资产收益率怎么求
  • lnmgr.exe是什么
  • 注册资本增加了
  • 换股的具体方式是什么
  • zend框架教程
  • php缓存技术和静态化
  • windows pythonpath
  • 图像边缘检测的基本原理
  • 图像分割csdn
  • sosreport命令收集详细信息
  • 游戏公司的主营业务是什么
  • 房屋发票备注栏怎么填
  • 汇算清缴期间费用保险费是什么
  • phpcms怎么样
  • 帝国cms如何使用
  • mongodb服务端默认的端口号是多少?
  • 固定资产处置时的清理费用计入哪里
  • 发票已经勾选却统计不出来
  • 印花税报少了交税了怎么办
  • 股东分红是否必须由公司代扣
  • 员工辞退补偿金计算
  • 个人工资薪金如何零申报
  • 企业减少注册资本
  • 计入资本公积的固定资产转出
  • 退付现金什么意思
  • 如何办理出口收款凭证
  • 捐赠 赞助 区别
  • 事业单位之间调动难吗
  • 在职职工在单位应享受哪些待遇
  • 记账凭证后面附发票第几联
  • 收款人是否应当承担还款责任
  • 施工单位购买材料能直接进成本吗
  • 生产车间的保险有哪些
  • 核销预收账款是否需要计提增值税
  • 累计折旧可以作为利润分配吗
  • 三证合一之前
  • sql server的 update from 语句的深究
  • windows没有无线网络
  • win10玩魔兽争霸卡顿
  • windows7文件夹选项在哪里
  • xp系统怎么设置网络传输文件
  • 更新win8
  • 网卡破解
  • bootstrap内容
  • css制作排行榜
  • jquery鼠标点击事件怎么写
  • JQuery给select添加/删除节点的实现代码
  • javascript总结笔记
  • 税务登记没去登记会怎么处罚
  • 水电费收税
  • e福州怎么帮家人登记
  • 泗洪临淮公交车运行时间表
  • 国家税务总局上海税务局(个人)
  • 个人工资所得税缴纳标准2023年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设