高级网页设计Class-jQuery
2019.2.27
1.初识jQuery ，2019-2月使用的是jQuery3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<script>
$(function () {
alert("hello,jquery!");
$("body").css("background","#bfa");
});
</script>
</body>
</html>
效果：
点击确定之后，body获取背景色
2.标志-等待DOM文档载入后执行类似于window.onload
$(document).ready(function(){
...
});
以上 简写为：
<script>
在body后不用写开始的结构
$(function () {
});
</script>
是在页面DOM加载完成后执行的代码，而window.onload需要页面DOM和图片都加载完成后才执行，所以前者效率更高 。
$(document).ready() 里的代码是在页面DOM都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者DOM，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。
3.获得 jQuery 库（http://jquery.com）
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
jquery.js（无压缩版, 用于测试、学习）
jquery.min.js（压缩版, 用于产品、项目)
4.选择器
$("li:eq(1)") 第二个li元素
$("li:lt(5)") index索引号小于5的li$("li:gt(1)") index索引号大于1的li- 在ID、Class或者元素名称的后面可以添加条件，条件在冒号的后面
- odd、 even、 gt、eq、lt都是从第0个开始的
.html( ) //内容 .css( ) //样式 .attr( ) //样式 都可以对元素进行修改和获取的操作- odd是奇数，even是偶数
范例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>沈阳</li>
<li>天津</li>
<li>大连</li>
<li>青岛</li>
</ul>
<script>
$(function(){
$("li:odd").css("background","#bfa");//所有奇数个（从0开始）
$("li:eq(2)").css("background","#eee");//第三个
$("li").html("沈阳");
})
</script>
</body>
</html>
-
$("li:nth-child(odd)") 从1开始计数 $("li:nth-child(even)") 同一个父元素下的所有的第偶数个li$("li:nth-child(2)") 同一个父元素下的 第二个li$("ul li a") ul下的li下的a$("#box li a") #box里的li里的a$(“ul li”) 或 $(“ul>li") ul里的li，li是ul的后代$("li:has(a)") li元素，其后代中包括a$(“ul.listUL") ul，且该ul上应用了listUL这个类（类名为这个的ul）$("span, #one") span和#one$("a[title]") 有title属性的a$("li.yellow") li，且该li上应用了yellow这个类
完整示例-1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
#jq{
/* display: flex; */
}
.box,span{
width: 250px;
height: 250px;
border: 1px solid #cccccc;
margin: 10px;
float: left;
}
.son{
width: 40%;
margin: 3%;
height: 100px;
border: 1px solid #eee;
background-color: cornflowerblue;
float: left;
}
.cur{
border-style: dotted;
border-radius: 50%;
}
</style>
</head>
<body>
<button>改变所有box</button>
<button>改变所有小盒子</button>
<button>改变第二个大盒子的里面的所有小盒子</button>
<button>改变所有小盒子里的文字的内容</button>
<button>改变所有的大盒子里的第二个小盒子</button>
<button>改变第三个大盒子里的第二个小盒子的内容</button>
<button>改变所有大盒子里的第一个和第三个小盒子</button>
<button>改变span</button>
<button>9</button>
<button>10</button>
<div id="jq">
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
<span>span</span>
</div>
<script>
$(function(){
// 点击事件
//click点击 里面是匿名事件,匿名函数
$("button:first").click(function(){
// location.reload();//刷新，按钮恢复初始状态
//$(".box").等于$("#jq>div").
// $(".box").addClass("cur");
$(".box").css("background","#fe0");
});
})
</script>
<!-- alt+b自动打开谷歌浏览器 -->
<script>
$("button:eq(1)").click(function(){
// $(".son")==$(".box>div")
$(".son").addClass("cur");
})
</script>
<script>
$("button:nth-child(3)").click(function(){
// $(".box:eq(1)>.son").addClass("cur");
$(".box:eq(1) .son").addClass("cur");
})
</script>
<script>
// 改变所有小盒子里的文字的内容——按钮4
$("button:nth-child(4)").click(function(){
$(".son").html("wsw");
})
</script>
<script>
// 改变所有的大盒子里的第二个小盒子——按钮5
$("button:nth-child(5)").click(function(){
// $(".box>nth-child(1)").addClass("cur");
$(".box .son:nth-child(2)").css("background","#fe0");
// $(".box .son:eq(1)").addClass("cur");只是第一个大盒子里的第二个小盒子不是所有
})
</script>
<script>
// 改变第三个大盒子里的第二个小盒子的内容——按钮6
$("button:nth-child(6)").click(function(){
$(".box:eq(2) .son:eq(1)").html("wsw is beautiful!!");
})
</script>
<script>
// 改变所有大盒子里的第一个和第三个小盒子——按钮7
$("button:nth-child(7)").click(function(){
$(".box .son:nth-child(1)").addClass("cur");
$(".box .son:nth-child(3)").addClass("cur");
})
</script>
<script>
// 改变span——按钮8
$("button:nth-child(8)").click(function(){
$("span").css("color","red");
})
</script>
</body>
</html>
按钮一
按钮二
按钮三
按钮四
按钮五
按钮六
按钮七
按钮八
完整示例-2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lasters News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul class="myHide">
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
<script>
$(function () {
// 改变所有的菜单
$("a").css("background","#bfa");
// 只改变一级菜单
$("#listUL>li>a").css("background","#bfa");
// 只改变二级菜单
$("li li a").css("background","#bfa");
// 改变第二个 一级菜单
$("#listUL>li:eq(1)>a").css("background","#bfa");
//改变所有的二级菜单的第一项
$("li li:nth-child(1)>a").css("background","#bfa");
})
</script>
</body>
</html>
2019-3-4
1.点击之后span标签的内的0数字跟随变化，并且每次点击出现一个div并展示其中到达的次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid #c00;
text-align: center;
line-height: 150px;
font-size: 50px;
margin: 8px;
float: left;
}
body{
height: 3000px;
}
</style>
</head>
<body>
<h1>网页中一个有 <span>0</span>个盒子</h1>
<script>
// ready缩写
$(function(){
// 事件响应，点击网页发生
// alert("111");//判断jq是否引入成功
// 点击之后span标签的内的0数字跟随变化
$("body").click(function(){
var n=$(".box").length+1;
// var str ="<div class='box'>"+"1"+"</div>">";
var str ="<div class='box'>"+($(".box").length+1)+"</div>"
$("body").append(str);//append append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
$("span").html(n);// 点击之后span标签的内的0数字跟随变化
$("span").text(n);
})
});
</script>
</body>
</html>
2.链式操作
要求：判断文本框的内容是否为空；空不添加，不空添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>属性选择器</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("#button").click(function(){
var sr=$("#dishname").val();//没有参数是get，有参数是set
if(sr!=""){
$("ul").append("<li>"+sr+"</li");
$("#dishname").val("").focus();//链式操作
}
})
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="dishname" type="text" id="dishname" />
<input type="button" name="button" id="button" value="添加菜单" />
</form>
<ul>
<li>糖醋排骨</li>
<li>圆笼粉蒸肉</li>
<li>泡菜鱼</li>
<li>板栗烧鸡</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>
3.addClass removeClass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery hello world</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$(".datalist li").click(function() {
// alert("ddd");
$(this).siblings('li').removeClass('yellow');
$(this).addClass('yellow');
});
});
</script>
<style type="text/css">
.yellow{
background-color: #FF0;
color:blue;
}
.yellow:hover{
background-color: palevioletred;
color:#fff;
}
li {
font-size: 14px;
line-height: 30px;
background-color: #0FF;
height: 30px;
width: 100px;
border: 1px solid #033;
text-align: center;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="datalist">
<li>北京</li>
<li>太原</li>
<li>沈阳</li>
<li>苏州</li>
<li>大连</li>
<li>青岛</li>
<li>济南</li>
<li>西安</li>
</ul>
</body>
</html>
4.实现 列表内容的下拉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
a {
color: #12438E;
font-size: 12px;
text-decoration: none;
}
ul {
height: 582px;
overflow: hidden;
list-style-type: none;
}
.none {
display: none;
}
#box {
border: 1px solid #C3E1FF;
height: 582px;
overflow: hidden;
width: 238px;
margin: 20px;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
li {
border-bottom: 1px solid #C3E1FF;
height: 35px;
overflow: hidden;
padding-left: 8px;
width: 230px;
line-height: 36px;
clear: both;
}
.price_d {
color: #CC3300;
float: right;
font: bold 14px Arial;
margin-top: 10px;
text-align: left;
width: 74px;
}
.now {
height: 238px;
line-height: 18px;
padding-top: 20px;
position: relative;
}
.pic {
display: block;
height: 150px;
margin: 0 auto;
overflow: hidden;
width: 150px;
}
.number {
background: url("pic/title_shuma.png") no-repeat scroll -154px -105px transparent;
color: #FFFFFF;
display: block;
height: 14px;
left: 11px;
overflow: hidden;
position: absolute;
text-align: center;
top: 20px;
width: 14px;
font-size: 10px;
line-height: 14px;
font-weight: bold;
}
.name {
display: block;
height: 36px;
margin: 10px auto 3px;
overflow: hidden;
width: 200px;
}
.price {
color: #CC3300;
display: block;
font: bold 26px/26px "宋体";
margin: 0 auto;
width: 200px;
}
.price_m {
background: url("pic/bg_del.png") repeat-x scroll 0 9px transparent;
color: #9C9C9C;
font: 12px Arial;
margin-left: 8px;
}
.price_d {
color: #CC3300;
float: right;
text-align: left;
width: 74px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function () {
/* 链式操作 */
$("#box li:odd").mouseover(function () {
$("#box li:odd").show().prev().hide().removeClass("now");
$(this).hide().prev().show().addClass("now");
});
});
</script>
</head>
<body>
<div id="box">
<ul>
<li class="now">
<span class="number">1</span>
<span class="pic"><a href="#"><img width="150" height="150" src="pic/1.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li class="none"><span class="price_d"><b>¥</b>68.00</span>1、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">2</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/2.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥69.00</span>2、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">3</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/3.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>3、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">4</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/4.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>4、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">5</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/5.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>5、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">6</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/6.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>6、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">7</span>
<span class="pic"><a href="#"><img width="150" height="150" src="pic/7.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>7、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">8</span><span class="pic"><a href="#"><img width="150px" height="150px"
src="pic/8.jpg"/></a></span><span
class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>8、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">9</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/9.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>9、<a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number">10</span>
<span class="pic"><a href="#"><img width="150px" height="150px" src="pic/10.jpg"></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 皮质保护套 超薄皮套带智能休眠</a></span>
<span class="price">¥68.00<span class="price_m">¥158.00</span></span>
</li>
<li><span class="price_d">¥68.00</span>10、<a href="#">（秒杀）SEENDA new i</a></li>
</ul>
</div>
</body>
</html>
5.鼠标放上显示文字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hover</title>
<style type="text/css">
<!--
a {
color: #06346F;
font-size: 12px;
text-decoration: none;
}
.box p {
background-color: #FFF;
bottom: 0px;
color: #303537;
font-size: 18px;
font-weight: bold;
height: 37px;
line-height: 37px;
text-align: center;
width: 100%;
position: absolute;
left: 0px;
filter:alpha(opacity=50); /*ie透明度*/
opacity:0.5; /*firefox透明度*/
margin: 0px;
padding: 0px;
display: none;
}
.box {
height: 200px;
width: 200px;
position: relative;
z-index: 100;
padding: 3px;
border: 1px solid #CCC;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$(".box").mouseover(function(){
/* 鼠标放上显示文字 */
$(".box>p").show();
/* $("this>p").show(); */
});
$(".box").mouseout(function(){
/* $("this>p").hide(); */
$(".box>p").hide();
});
});
</script>
</head>
<body>
<div class="box"><img src="img/1.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
</body>
</html>
鼠标放上
6.扩展
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a {
color: #06346F;
font-size: 12px;
text-decoration: none;
}
.box p {
background-color: #FFF;
bottom: 0px;
color: #303537;
font-size: 18px;
font-weight: bold;
height: 37;
line-height: 37px;
text-align: center;
width: 100%;
z-index: 10;
position: absolute;
left: 0px;
filter:alpha(opacity=50); /*ie透明度*/
opacity:0.5; /*firefox透明度*/
margin: 0px;
padding: 0px;
display: none;
}
.box {
height: 200px;
width: 200px;
position: relative;
z-index: 100;
float: left;
margin: 10px;
border: 1px solid #CCC;
padding: 4px;
}
.container {
width: 1200px;
margin-right: auto;
margin-left: auto;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
/* $(".box").hover(function(){},function(){}) */
$(".box").hover(function(){
/* museover */
$(".box>p").show();
},function(){
$(".box>p").hide();
})
});
</script>
</head>
<body>
<div class="container">
<div class="box"><img src="img/1.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/2.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/3.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/4.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/5.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/6.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/7.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/8.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/9.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/10.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
</div>
</body>
</html>
鼠标放在任意图片上都显示文字，鼠标移开文字都消失
7.这次随机，鼠标放到任意图片上只在当前图片上显示文字，移开只是当前图片上文字消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
a {
color: #06346F;
font-size: 12px;
text-decoration: none;
}
.box p {
background-color: #FFF;
bottom: 0px;
color: #303537;
font-size: 18px;
font-weight: bold;
height: 37;
line-height: 37px;
text-align: center;
width: 100%;
z-index: 10;
position: absolute;
left: 0px;
filter:alpha(opacity=50); /*ie透明度*/
opacity:0.5; /*firefox透明度*/
margin: 0px;
padding: 0px;
display: none;
}
.box {
height: 200px;
width: 200px;
position: relative;
z-index: 100;
float: left;
margin: 10px;
border: 1px solid #CCC;
padding: 4px;
}
.container {
width: 1200px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
/* $(".box").hover(function(){},function(){}) */
$(".box").hover(function(){
/* museover当前 */
$(this).children("p").show();
},function(){
$(this).find("p").hide();
})
});
</script>
</head>
<body>
<div class="container">
<div class="box"><img src="img/1.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/2.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/3.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/4.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/5.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/6.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/7.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/8.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/9.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
<div class="box"><img src="img/10.jpg" width="200" height="200" />
<p><a href="#">北京新签证制度落挪威</a></p>
</div>
</div>
</body>
</html>
8.tab选项卡-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
li {
line-height: 30px;
text-align: center;
float: left;
height: 30px;
width: 100px;
list-style-type: none;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #036;
border-left-color: #036;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px;
}
.rightborder {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #036;
}
.none {
display: none;
}
.box{
height: 200px;
width: 302px;
border: 1px solid #006;
background-color: #eee;
clear: both;
text-align: center;
padding-top: 50px;
font-size:150px;
}
ul {
margin: 0px;
padding: 0px;
}
.cur{
border-bottom: none;
color: blue;
font-weight: bold;
}
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li").mouseover(function(){
/* index从0开始索引 */
var index = $("li").index(this);
/* eq等于，当前显示，其他隐藏（兄弟） */
$(".box").eq(index).show().siblings(".box").hide();
$(".box").hide().eq(index).show();
$("li").removeClass("cur").eq(index).addClass("cur");
});
});
</script>
</head>
<body>
<ul>
<li>国内</li>
<li>国际</li>
<li class="rightborder">综合</li>
</ul>
<div class="box">1</div>
<div class="box none">2</div>
<div class="box none">3</div>
</body>
</html>
9.tab选项卡-2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
li {
line-height: 30px;
text-align: center;
float: left;
height: 30px;
width: 100px;
list-style-type: none;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #036;
border-left-color: #036;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px;
}
.rightborder {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #036;
}
.none {
display: none;
}
.box{
height: 200px;
width: 302px;
border: 1px solid #006;
background-color: #eee;
clear: both;
text-align: center;
padding-top: 50px;
font-size:150px;
}
ul {
margin: 0px;
padding: 0px;
}
.cur{
border-bottom: none;
color: blue;
font-weight: bold;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li").mouseover(function(){
/* index从0开始索引 */
var index = $("li").index(this);
/* eq等于，当前显示，其他隐藏（兄弟） */
$(".box").eq(index).show().siblings(".box").hide();
/* 点击哪里哪里变化 */
$(this).addClass("cur").siblings().removeClass("cur");
});
});
</script>
</head>
<body>
<ul>
<li>国内</li>
<li>国际</li>
<li class="rightborder">综合</li>
</ul>
<div class="box">1</div>
<div class="box none">2</div>
<div class="box none">3</div>
</body>
</html>
10.点击的时候不断切换toggleClass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toggleClass()方法</title>
<style type="text/css">
<!--
li{
color:blue;
font-size:16px;
margin:0px;
padding:5px;
height: 30px;
width: 100px;
text-align: center;
line-height: 30px;
list-style-type: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #009;
border-right-color: #009;
border-bottom-color: #009;
border-left-color: #009;
}
.top {
border: 1px solid #006;
}
.highlight{
background-color:#FFFF00;
font-weight: bold;
color: #906;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li").click(function(){
/* //点击的时候不断切换 */
/* 点击该块 可以变化 */
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<ul>
<li class="top">新闻</li>
<li>娱乐</li>
<li>体育</li>
<li>理财</li>
<li>育儿</li>
<li>汽车</li>
</ul>
</body>
</html>
点击之后：
再次点击样式将消失
11.toString字符串形式，字符0可以处理
点击哪个模块显示对应的编码数字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>index(element)方法</title>
<style type="text/css">
<!--
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
div{
border:1px solid #003a75;
background:#fcff9f;
margin:5px;
text-align:center;
height:100px; width:100px;
float:left;
font-size:20px;
font-weight:bold;
text-align:center;
line-height:100px;
}
p{ clear:both;
font-size:28px;
color:blue;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//click()添加点击事件
$("div").click(function(){
//将块本身用this关键字传入，从而获取自身的序号
var index = $("div").index(this);
/* toString字符串形式，字符0可以处理 */
$("span").html(index.toString());
});
});
</script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<p>点击的div块序号为：<span></span></p>
</body>
</html>
2019-3.18
1.according
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>特效16</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="">
$(function () {
$(".tupian .texiao").mouseover(function () {
var index=$(this).index()
console.log(index)
$('.word').eq(index).hide()
$('.hot').eq(index).show()
});
$(".tupian .texiao").mouseleave(function () {
var index=$(this).index()
console.log(index)
$('.word').eq(index).show()
$('.hot').eq(index).hide()
});
});
</script>
</head>
<body>
<div id="ranking"> <strong class="changjian">一周销量排行榜</strong>
<div class="tupian">
<!--1-->
<div class="texiao">
<div class="word" style="display:none"><i class="now">1</i><a href="http://www.ranking.com/pic/2496.html" class="wql">苹果（Apple） iPad mini MD</a></div>
<div class="hot" ><i class="hover">1</i><a href="http://item.jd.com/761146.html" class="anli_tu" target="_blank"><img src="images/ranking1.jpg" width="71" height="57"/></a>
<div class="info"> <p class="detail">苹果（Apple） iPad mini MD528CH </p>
<p class="detail"><span style="color:#FF0000">￥2098.00</span> </p>
</div>
</div>
</div>
<!--1-->
<div class="texiao">
<div class="word" ><i class="now">2</i><a href="http://item.jd.com/996957.html" class="wql" target="_blank">
苹果（Apple）iPad Air MD78</a></div>
<div class="hot" style="display:none"><i class="hover">2</i><a href="http://item.jd.com/996957.html" target="_blank" class="anli_tu"><img src="images/ranking2.jpg" width="71" height="57"/></a>
<div class="info">
<p class="detail">苹果（Apple）iPad Air MD785CH/A</a></p>
<p class="detail"><span style="color:#FF0000">￥3588.00
</span> </p>
</div>
</div>
</div>
<!--1-->
<div class="texiao">
<div class="word" ><i class="now">3</i><a target="_blank" href="http://item.jd.com/984225.html" class="wql">七彩虹
（Colorfly） E708 Q2</a></div>
<div class="hot" style="display:none"><i class="hover">3</i><a target="_blank" href="http://item.jd.com/984225.html" class="anli_tu"><img src="images/ranking3.jpg" width="71" height="57"/></a>
<div class="info">
<p class="detail">
七彩虹
（Colorfly） E708 Q2 </p>
<p class="detail"><span style="color:#FF0000">￥499.00
</span> </p>
</div>
</div>
</div>
<!--1-->
<div class="texiao">
<div class="word" ><i class="now">4</i><a target="_blank"
href="http://item.jd.com/959457.html" class="wql">昂达（ONDA） V819 mini 7.9</a></div>
<div class="hot" style="display:none"><i class="hover">4</i><a target="_blank"
href="http://item.jd.com/959457.html" class="anli_tu"><img src="images/ranking4.jpg" width="71" height="57"/></a>
<div class="info">
<p class="detail">昂达（ONDA） V819 mini 7.9</p>
<p class="detail"><span style="color:#FF0000">￥699.00
</span> </p>
</div>
</div>
</div>
<!--1-->
<div class="texiao">
<div class="word" ><i class="now">5</i><a target="_blank" href="http://item.jd.com/932121.html" class="wql">爱国者(aigo)PAD707 双核 7</a></div>
<div class="hot" style="display:none"><i class="hover">5</i><a target="_blank" href="http://item.jd.com/932121.html" class="anli_tu"><img src="images/ranking5.jpg" width="71" height="57"/></a>
<div class="info">
<p class="detail"> 爱国者(aigo)PAD707 双核 7英寸</p>
<p class="detail"><span style="color:#FF0000">￥299.00</span>
</p>
</div>
</div>
</div>
<!--1-->
<div class="texiao">
<div class="word" ><i class="now">6</i><a target="_blank" href="http://item.jd.com/723171.html" class="wql">华为MediaPad
10 FHD 101u </a></div>
<div class="hot" style="display:none"><i class="hover">6</i><a target="_blank" href="http://item.jd.com/723171.html" class="anli_tu"><img src="images/ranking6.jpg" width="71" height="57"/></a>
<div class="info"> <strong class="name">
<p class="detail">华为MediaPad
10 FHD 101u 10英寸平板电脑</p>
<p class="detail"><span style="color:#FF0000">￥2599.00</span></p>
</div>
</div>
</div>
</div>
</div>
<script language="javascript">
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
a {
color: #12438E;
font-size: 12px;
text-decoration: none;
}
ul {
height: 350px;
overflow: hidden;
list-style-type: none;
}
.none {
display: none;
}
#box {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: none;
height: 350px;
overflow: hidden;
width: 238px;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
li {
border-bottom: 1px solid #ccc;
height: 35px;
overflow: hidden;
text-align: center;
padding-left: 8px;
width: 230px;
line-height: 36px;
clear: both;
}
.price_d {
color: #CC3300;
float: right;
font: bold 14px Arial;
margin-top: 10px;
text-align: left;
width: 74px;
}
.now {
height: 78px;
line-height: 18px;
padding-top: 20px;
position: relative;
}
.pic {
display: block;
height: 60px;
margin-left: 30px;
overflow: hidden;
width: 60px;
}
.number {
background: url("../javascript/常见效果/according/pic/title_shuma.png") no-repeat scroll -154px -105px transparent;
color: #FFFFFF;
display: block;
height: 25px;
left: 11px;
overflow: hidden;
position: absolute;
text-align: center;
top: 20px;
width: 25px;
font-size: 10px;
line-height: 14px;
font-weight: bold;
}
.name {
display: block;
height: 36px;
overflow: hidden;
margin-left: 90px;
margin-top: -60px;
width: 120px;
}
.price {
color: #CC3300;
display: block;
font: bold 14px/14px "宋体";
width: 100px;
margin-left: 90px;
}
.price_m {
background: url("../javascript/常见效果/according/pic/bg_del.png") repeat-x scroll 0 9px transparent;
color: #9C9C9C;
font: 12px Arial;
margin-left: 8px;
}
.price_d {
color: #CC3300;
float: right;
text-align: left;
width: 74px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.top {
width: 228px;
height: 30px;
text-align: left;
line-height: 30px;
color: #000;
font-size: 14px;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
font-weight: bold;
background-image: url(16/img/back.png);
background-repeat: repeat;
padding-left: 10px;
}
.none a:hover {
text-decoration: underline;
color: #F00;
}
.now a:hover {
text-decoration: underline;
color: #F00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function () {
$("#box li:odd").mouseover(function () {
$("#box li:odd").show().prev().hide().removeClass("now");
$(this).hide().prev().show().addClass("now");
});
});
</script>
</head>
<body>
<div class="top">
本周排行
</div>
<div id="box">
<ul>
<li class="now">
<span class="number"><img src="16/img/1r.png" width="27" height="28"/></span>
<span class="pic"><a href="#"><img src="16/img/1.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥1998.00</span>
</li>
<li class="none"><img src="16/img/1r.png" width="27" height="28"/><span
class="price_d"><b>¥</b>1998.00</span><span class="n"></span><a href="#">（秒杀）SEENDA new i</a></li>
<li class="none">
<span class="number"><img src="16/img/2.png" width="26" height="29"/></span>
<span class="pic"><a href="#"><img src="16/img/2.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥1268.00</span>
</li>
<li><span class="price_d">¥1268.00</span><img src="16/img/2.png" width="26" height="29"/><a href="#">（秒杀）SEENDA
new i</a></li>
<li class="none">
<span class="number"><img src="16/img/3.png" width="27" height="25"/></span>
<span class="pic"><a href="#"><img src="16/img/3.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥1368.00</span>
</li>
<li><span class="price_d">¥1368.00</span><img src="16/img/3.png" width="27" height="25"/><a href="#">（秒杀）SEENDA
new i</a></li>
<li class="none">
<span class="number"><img src="16/img/4.png" width="26" height="28"/></span>
<span class="pic"><a href="#"><img src="16/img/4.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥1468.00</span>
</li>
<li><span class="price_d">¥1468.00</span><img src="16/img/4.png" width="26" height="28"/><a href="#">（秒杀）SEENDA
new i</a></li>
<li class="none">
<span class="number"><img src="16/img/5.png" width="26" height="26"/></span>
<span class="pic"><a href="#"><img src="16/img/5.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥1968.00</span>
</li>
<li><span class="price_d">¥1968.00</span><img src="16/img/5.png" width="26" height="26"/><a href="#">（秒杀）SEENDA
new i</a></li>
<li class="none">
<span class="number"><img src="16/img/6.png" width="23" height="25"/></span>
<span class="pic"><a href="#"><img src="16/img/6.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2 </a></span>
<span class="price">¥2068.00</span>
</li>
<li><span class="price_d">¥2068.00</span><img src="16/img/6.png" width="23" height="25"/><a href="#">（秒杀）SEENDA
new i</a></li>
<li class="none">
<span class="number"><img src="16/img/7.png" width="25" height="25"/></span>
<span class="pic"><a href="#"><img src="16/img/7.jpg" width="50" height="50"/></a></span>
<span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥2128.00</span>
</li>
<li><span class="price_d">¥2168.00</span><img src="16/img/7.png" width="25" height="25"/><a href="#">（秒杀）SEENDA
new i</a></li>
<li class="none">
<span class="number"><img src="16/img/8.png" width="25" height="25"/></span><span class="pic"><a
href="#"><img src="16/img/8.jpg" width="50" height="50"/></a></span><span class="name"><a href="#">（秒杀）SEENDA new ipad3 ipad2</a></span>
<span class="price">¥2168.00</span>
</li>
<li><span class="price_d">¥2168.00</span><img src="16/img/8.png" width="25" height="25"/><a href="#">（秒杀）SEENDA
new i</a></li>
</ul>
</div>
</body>
</html>