案例"/>
jqery的学习案例
关于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>
更多推荐
jqery的学习案例
发布评论