目录
第1关:jQuery入门
相关知识
环境安装
第一个程序
id选择器
第2关:jQuery基本选择器
相关知识
类选择器
元素选择器
编程要求
第3关:过滤选择器 (一)
相关知识
设置css属性
编程要求
第4关:过滤选择器 (二)
相关知识
:not 选择器
编程要求
第5关:tab选项卡
相关知识
层次选择器
show()和hide()
类的添加和删除
编程要求
第1关:jQuery入门
相关知识
环境安装
安装环境是使用jQuery的第一步,若需要在本地运行jQuery,可以查看背景知识来安装jQuery库。
第一个程序
在
里填充内容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表示要执行的操作。
//------------begin---------
var box = $("#content");
box.html("这是我的第一个jquery程序");
//-----------end------------
#content{
width: 300px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 30px auto;
font-size: 20px;
border: 2px solid #000;
}
第2关:jQuery基本选择器 相关知识 为了完成本关任务,你需要掌握:1.id选择器,2.类选择器, 3.元素选择器。
从上面可以看出:
id选择器语法: $("# + idName")
这里再提醒一下:
html(): ()里有内容,表示往该元素添加内容,没有内容,表示获取内容。
类选择器
对于上面 class="box2"的 p,如何填充内容 我是类选择器呢? 用jQuery 实现如下:
var box2 = $(".box2");box2.html("我是类选择器");
效果如下:
从上面可以看出:
类选择器语法: $(". + className")
元素选择器
对于上面 ,如何填充内容 我是元素选择器呢? 用jQuery实现如下:
var box3 = $("span");box3.html("我是元素选择器");
编程要求
jQuery 已经引入,在右侧编辑器补充begin至end间的代码,实现点击按钮,添加相应内容的功能。要求如下:
用id选择器,获取id="box"的div,添加内容为我是id选择器添加的内容; 用类选择器,获取class="box"的div,添加内容为我是类选择器添加的内容; 用元素选择器,获取 p 标签,添加内容为我是元素选择器添加的内容。
提示:
$(this)指的是当前操作的DOM元素。
注意:为了方便评测,这里统一用双引号 "" 来表示字符串,切记。
$(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------------
}
})
})
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;
}
第3关:过滤选择器 (一)
相关知识
为了完成本关任务,你需要掌握:1.设置css属性,2.基础的过滤选择器。
设置css属性
设置单个属性
如果给上面的div标签添加css属性:background:orange; ,应该怎么实现呢?
对于div标签,用jQuery可以这样写:
$("#single").css("background","orange");
效果如下:
这是设置单个属性常用的方法。语法总结如下:
$(selector).css(attr,value);
设置多个属性
设置多个属性
如果给上面的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,...})
过滤选择器(重点)
- 第一个li
- 第二个li
- 第三个li
- 第四个li
- 第五个li
- 第六个li
基础效果图如下:
现在分别获取获取指定的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。
注意:为了方便评测,这里统一用双引号 "" 来表示字符串,切记。
效果图如下:
姓名 | 性别 | 年龄 | 住址 |
---|---|---|---|
张三 | 男 | 20 | 北京 |
李四 | 男 | 30 | 洛杉矶 |
丽丽 | 女 | 24 | 上海 |
王五 | 男 | 26 | 河南 |
//-----------begin-----------
$("tr:even").css("background","lavenderblush")//偶数
$("tr:odd").css("background","lightyellow")//奇数
$("tr:first").css("background","yellowgreen")//第0行(表头)
//------------end------------
第4关:过滤选择器 (二)
相关知识
为了完成本关任务,你需要掌握:1.:eq选择器,2.:not选择器。
获取指定序号的元素
基本的HTML结构如下:
- 第一个li
- 第二个li
- 第三个li
效果图如下:
如何获取上面的第二个li标签,并设置背景色为红色呢?
先用过滤选择器实现,这里用到的是 :eq 选择器,添加如下代码:
$("li:eq(1)").css("background","red")
效果图如下:
为什么这里是eq(1)呢? 因为 eq 选择器的下标是从0开始的。
另一种方法:eq()
eq()也是获取指定序号的元素的,使用方法如下:
$("li").eq(1).css("background","red")
和上面的效果是一样的,这里 eq()的下标也是从0开始的。
:not 选择器
这里要实现的效果图如下:
下面是基本的`HTML`结构:
- 第一个li
- 第二个li
- 第三个li
- 第四个li右边没有外边距
效果图如下:
这里第四个li标签的右侧没有外边距,该怎么实现呢?
这里用:not选择器,它选取除了指定元素以外的所有元素,代码如下:
$("li:not(:last)").css("margin-right","20px")
效果图如下:
编程要求
jQuery 已经引入,在右侧编辑器补充begin至end间的代码,实现下面的效果。要求如下:
用选择器实现下面的效果,相应的方法可以在平台上自行调试; 选取第三行,填充背景色为"#eee"; 除了最后一行,其他都要底边边框,边框样式为:1px dashed #ccc。
注:
这里用类来获取li元素,不用li标签; 背景色用 background, 不用 background-color; 提供的代码不允许修改,只允许填充begin至end中间的代码。
注意:为了方便评测,这里统一用双引号 "" 来表示字符串,切记。
效果图如下:
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
点赞!中国自主卫星电话正式放号,从此告别“不在服务
$(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 ---------------
})
*{
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;
}*/
第5关:tab选项卡
相关知识
为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法。
层次选择器
第一个p标签下的span第一个p标签下的第二个span
i标签第二个p标签下的span
如何获取到上面第一个p标签下所有的span标签? 这里主要用层次选择器获取一下:
第一步:获取到类container:$(".container"); 第二步:获取到container下第一个p标签:$(".container p:first"); 第三步:获取到第一个p标签下所有的span标签:$(".container p:first span")。
从上面可以看出来,层次选择器和Dom结构是相匹配的,
show()和hide()
错误提醒
展示的内容
对于类toggle,有错误时需要出现,解决了错误需要隐藏。这个功能怎么实现呢?这里用show()和hide():
出现:$(".toggle").show()隐藏:$(".toggle").hide()
show()的原理相当于css中的 display:block; hide()的原理相当于css中的 display:none;
类的添加和删除
.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中间的代码。
注意:为了方便评测,这里统一用双引号 "" 来表示字符串,切记。
效果图如下:
- 全部实训
- 实训路径
- 在线课堂
- 讨论区
$(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------------
})
})
.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;
}
文章链接
发表评论