版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TopWilling/article/details/62109703
关于jqery的学习
案例1
//.js对象转jqery对象
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<span id="spanId" style="size: a5;width: 30px;height: 20px;"></span>
<br />
<input type="button" id="inputId" onclick="showInput()" value="展示"/>
<script>
function showInput()
{
var sId = document.getElementById("spanId");
var $inId = $(sId);
// $inId.html("this is L");//这是js的做法
var id = $inId[0];
id.innerHTML = "hello L";
}
</script>
</body>
</html>
//.jqery对象转为js对象
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<span id="spanId"></span><br />
<input type="button" id="inputId" value="点击转换" onclick="showSpan()"/>
<script>
function showSpan()
{
var spaId = document.getElementById("spanId");
$(spaId).html("<font color='red'size='7'>Hello!</font>");
}
</script>
</body>
</html>1.1图片延时三秒弹出,存在3秒后退出界面;部分代码
<!--1.创建setTimeout('showAd()',3000),
2.在showAd()函数里面,得到广告区域对象,调用show()方法. 创建setTimeout('hideAd()',3000)
3.在hideAd()调用广告区域对象的hide()方法-->
<script>
setTimeout('showAd()',3000);
function showAd()
{
$adObj = $("#adDiv");//得到addiv的jqery的对象
$adObj.fadeIn();
setTimeout('hideAd()',3000);
}
function hideAd()
{
$adObj = $("#adDiv");//得到adDiv的jqery对象
$adObj.fadeOut();
}
</script>1.2点击事件
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<span id="spanId"></span>
<br />
<input type="button" value="响应"width="30px" id="inputId"/>
<script>
var $inId = $("#inputId");
$inId.click(function(){
$("#spanId").html("jqery的响应方法");
});
</script>
</body>
</html>
1.3获得焦点和失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="width: 100px;">
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<input type="text" align="center"id="inputId"/>
<br />
<script>
$("#inputId").focus(function(){
console.log("输入框获得了焦点");
$("#inputId").backgroundColor = "red";
});
$("#inputId").blur(function(){
console.log("输入框失去了焦点");
});
</script>
</body>
</html>
1.5内容改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<select id="selectId">
<option>拿破仑</option>
<option>刘彻</option>
<option>孙正义</option>
<option>乔布斯</option>
<option>李开复</option>
</select>
<script>
$("#selectId").change(function(){
console.log("这个时代现在涌现的伟人是:"+this.value);
});
</script>
</body>
</html>
案例2表格隔行换颜色以及实现全选和全不选的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<style>
.odd
{
background-color: green;
}
.even
{
background-color: yellow;
}
</style>
</head>
<body>
<table align="center"width="500px" align="center"border="1px">
<tr>
<td>
<input type="checkbox"id="allId"/>
</td>
<td>
<input type="text"value="战役类型"/>
</td>
<td>
<input type="text"value="时间" />
</td>
<td>
<input type="text"value="战役"/>
</td>
<td>
<input type="text"value="战果" />
</td>
</tr>
<tr>
<td>
<input type="checkbox"id="Id"class="one"/>
</td>
<td>
<input type="text"value="陆军对抗"/>
</td>
<td>
<input type="text"value="1782年" />
</td>
<td>
<input type="text"value="瓦格拉姆"/>
</td>
<td>
<input type="text"value="纵横6国" />
</td>
</tr>
<tr>
<td>
<input type="checkbox"id="Id"class="one"/>
</td>
<td>
<input type="text"value="陆军对抗"/>
</td>
<td>
<input type="text"value="1782年" />
</td>
<td>
<input type="text"value="瓦格拉姆"/>
</td>
<td>
<input type="text"value="纵横6国" />
</td>
</tr>
<tr>
<td>
<input type="checkbox"id="IId"class="one"/>
</td>
<td>
<input type="text"value="海军对抗"/>
</td>
<td>
<input type="text"value="1809年" />
</td>
<td>
<input type="text"value="埃及海战"/>
</td>
<td>
<input type="text"value="大不列颠~" />
</td>
</tr>
<tr>
<td>
<input type="checkbox"id="IId"class="one"/>
</td>
<td>
<input type="text"value="空军对抗"/>
</td>
<td>
<input type="text"value="1946年" />
</td>
<td>
<input type="text"value="xx海战"/>
</td>
<td>
<input type="text"value="美利坚碾压倭寇" />
</td>
</tr>
</table>
<script>
$("tr:odd").css("background-color",'red');
$("tr:even").css("background-color",'green');
$("#allId").click(function(){
//这里的类需要用 . 再加 类名,为什么呢
$(".one").attr("checked",this.checked)
})
</script>
</body>
</html>2.1添加属性和移除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<div style="width: 300px;height: 300px;">
<img img width="300px",height="300px" align="center" id="imgId"/>
</div>
<input type="button"value="添加属性"id="btn1"/>
<input type="button"value="去除属性"id="btn2"/>
</body>
<script>
$("#btn1").click(function(){
$("#imgId").attr("src","../img/2.jpg");
});
$("#btn2").click(function(){
$("#imgId").removeAttr("src");
});
</script>
</html>
案例3,实现二级下拉表的联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<table width="100%">
<!--logo-->
<tr>
<td>
<table width="100%" height="80px">
<tr>
<td><img src="../img/logo2.png" /></td>
<td><img src="../image/header.jpg" /></td>
<td>
<a href="#">首页</a>
<a href="#">登录</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--菜单-->
<tr>
<td width="100%" height="80px" bgcolor="black">
<a href="#">
<font color="white">首页</font>
</a>
<a href="#">
<font color="white">首页</font>
</a>
<a href="#">
<font color="white">首页</font>
</a>
<a href="#">
<font color="white">首页</font>
</a>
<a href="#">
<font color="white">首页</font>
</a>
</td>
</tr>
<!--
2.第三行(注册部分):设置背景图片,嵌套一个表格,设置白色背景,居中显示
3.创建一个表单,在这个表单里面嵌套一个9行2列的表格-->
<!--注册部分-->
<tr>
<td width="100%" height="550px" background="../image/regist_bg.jpg">
<table width="70%" height="80%" bgcolor="white" align="center">
<tr>
<td>
<form action="#" method="post">
<table width="80%" height="60%" align="center">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" placeholder="请输入用户名" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" /></td>
</tr>
<tr>
<td>Eamil:</td>
<td><input type="email" name="email" /></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select id="province">
<option value="-1">-请选择-</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />看电影
<input type="checkbox" name="hobby" />敲代码
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<input type="date" name="birth" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
<!--底部图片-->
<tr>
<td width="100%" height="80px">
<img src="../image/footer.jpg" width="100%" height="100%" />
</td>
</tr>
<!--底部信息:设置居中,定义超链接,文字-->
<tr>
<td width="100%" align="center">
<!--关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明
Copyright © 2005-2016 传智商城 版权所有-->
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">关于我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br /> Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
<!--1.给省份的下拉菜单设置内容改变事件,创建一个匿名函数响应这个事件
2.在这个函数体里,得到省份的值,根据省份的值,更新城市的数据
3.根据城市的数据,把城市添加到右边的城市下拉菜单里面-->
<script>
//初始化数据
var attr = new Array(3);
attr[0] = ["深圳", "广州", "东莞", "惠州"];
attr[1] = ["武汉", "黄冈", "鄂州", "黄石"];
attr[2] = ["济南", "青岛", "烟台"];
$("#province").change(function(){
var $cityNode = $("#city");
$cityNode.html("<option>-请选择-</option>")
var provinceObj = this.value;
if(provinceObj>=0)
{
var cities = attr[provinceObj];
$(cities).each(function(i,j){
$cityNode.append("<option>"+j+"</option>");
});
}
});
</script>
</body>
</html>3.1遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<span id="spanId"></span>
<script>
var arrays = [1,3,5,7,9,11,"great"];
$(arrays).each(function(i,n){
$("#spanId").append(n+" ");
});
</script>
</body>
</html>
3.1遍历二维数组
3.2遍历2维数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
</body>
<script>
var arrays = new Array(3);
arrays[0] = ["天安门","三里屯","人民大会堂"];
arrays[1] = ["于谦祠","花港观鱼","雷峰夕照"];
arrays[2] = ["南湖公园","重庆路","红旗街"];
$(arrays).each(function(i,attrs){//attrs也是一个数组!
console.log(i+":"+attrs);
$(attrs).each(function(j,m){
console.log(j+" : "+m);
});
});
</script>
</html>
案例4,左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<table width="500px">
<tr>
<td>
<select id="left" multiple="multiple">
<option>Iphone7</option>
<option>Iphone6s</option>
<option>Iphone6</option>
<option>Iphone5s</option>
<option>Iphone5</option>
<option>Iphone4s</option>
</select>
</td>
<td>
<input type="button" value="---->" id="btn1"/><br />
<input type="button" value="==>" id="btn2"/><br />
<input type="button" value="<----"id="btn3" /><br />
<input type="button" value="<==" id="btn4"/>
</td>
<td>
<select id="right" multiple="multiple">
</select>
</td>
</tr>
</table>
<!--1.给按钮设置点击事件,创建一个函数响应这个事件
2.在函数体里,匹配到选中的option对象,
3.把选中的option对象添加到右边的下拉菜单里面-->
<script>
$("#btn1").click(function(){
$("#left option:selected").appendTo("#right");
});
$("#btn2").click(function(){
$("#left option").appendTo("#right");
});
$("#btn3").click(function(){
$("#right option").appendTo("#left");
});
$("#btn4").click(function(){
$("#right option").appendTo("#left");
});
</script>
</body>
</html>案例5,注册表的校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
</head>
<body>
<table width="500px">
<tr>
<td>
<select id="left" multiple="multiple">
<option>Iphone7</option>
<option>Iphone6s</option>
<option>Iphone6</option>
<option>Iphone5s</option>
<option>Iphone5</option>
<option>Iphone4s</option>
</select>
</td>
<td>
<input type="button" value="---->" id="btn1"/><br />
<input type="button" value="==>" id="btn2"/><br />
<input type="button" value="<----"id="btn3" /><br />
<input type="button" value="<==" id="btn4"/>
</td>
<td>
<select id="right" multiple="multiple">
</select>
</td>
</tr>
</table>
<!--1.给按钮设置点击事件,创建一个函数响应这个事件
2.在函数体里,匹配到选中的option对象,
3.把选中的option对象添加到右边的下拉菜单里面-->
<script>
$("#btn1").click(function(){
$("#left option:selected").appendTo("#right");
});
$("#btn2").click(function(){
$("#left option").appendTo("#right");
});
$("#btn3").click(function(){
$("#right option").appendTo("#left");
});
$("#btn4").click(function(){
$("#right option").appendTo("#left");
});
</script>
</body>
</html>网页首页代码!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
作者：offline
时间：2017-03-10
描述：
思路:
1.九个 div
-->
<div style="width: 100%;">
<div style="width: 100%;height: 80px;">
<!--logo-->
<div style="width: 33%;float: left;"><img src="img/logo2.png"/></div>
<div style="width: 33%;float: left;"><img src="img/header.jpg"/></div>
<div style="width: 33%;float: left;padding-top: 30px;">
<a href="#">梦想</a>
<a href="#">汗水</a>
<a href="#">艰辛</a>
</div>
</div >
<!--
作者：offline
时间：2017-03-10
描述：首页
-->
<div style="width: 100%;height: 50px;background: black;padding-top: 20px;">
<a href="#"><font color="white" size="5"></font>未来之门</a>
<a href="#"><font color="white" size="5"></font>未来之门</a>
<a href="#"><font color="white" size="5"></font>未来之门</a>
</div>
<!--
作者：offline
时间：2017-03-10
描述：轮播页面
-->
<div style="width: 100%;height: 550px;">
<img src="img/1.jpg" width="100%" height="100%" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：商品
-->
<div style="width: 100%;height: 550px;">
<div style="width: 100%;">
<font size="6">热门商品</font>
<img src="img/title2.jpg" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：大图部分
-->
<div style="width: 14%;height: 500px;float: left;">
<img src="img/b.jpg"width="100%"height="100%" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：中图部分
-->
<div style="width: 42%;height: 250px;float: left;">
<img src="img/emancipation.jpg"width="100%"height="100%" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：小图部分
-->
<div style="width: 14%;height: 180px;float: left;" align="center">
<img src="img/b.jpg"width="100%"height="100%"align="center" />
<p>选择</p>
<p><font color="red">100%努力</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
</div>
<!--
作者：offline
时间：2017-03-10
描述：footer
-->
<div style="width: 100%;">
<img src="img/footer.jpg" width="100%"height="100%"/>
</div>
<!--
作者：offline
时间：2017-03-10
描述：商品
-->
<div style="width: 100%;height: 550px;">
<div style="width: 100%;">
<font size="6">热门商品</font>
<img src="img/title2.jpg" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：大图部分
-->
<div style="width: 14%;height: 500px;float: left;">
<img src="img/b.jpg"width="100%"height="100%" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：中图部分
-->
<div style="width: 42%;height: 250px;float: left;">
<img src="img/emancipation.jpg"width="100%"height="100%" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：小图部分
-->
<div style="width: 14%;height: 180px;float: left;" align="center">
<img src="img/b.jpg"width="100%"height="100%"align="center" />
<p>选择</p>
<p><font color="red">100%努力</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
<div style="width: 14%;height: 250px;float: left;"align="center">
<img src="img/HBuilder.png" />
<p>箴言</p>
<p><font color="red">100分</font></p>
</div>
</div>
<!--
作者：offline
时间：2017-03-10
描述：footer
-->
<div style="width:100%;height: 50px;">
<img src="img/footer.jpg"width="100%"height="100%" />
</div>
<!--
作者：offline
时间：2017-03-10
描述：文字
-->
<div style="width: 100%;" align="center">
<p align="center"><font color="red"size="5">You are here for a reason!</font></p>
<a href="#"><font color="red"size="4">believe in myself</font></a>
</div>
<div></div>
</div>
</body>
</html>