jQuery练习下拉更换背景+百度音乐盒

下拉更换背景


<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}body, html {height: 100%;}body {background-image: url(../img/bg-img/1.jpg);background-size: cover;background-position: center;}</style>
</head>
<body>
<select name="image" id="select"><option value="0">春意绵绵</option><option value="1">夏日炎炎</option><option value="2">秋声瑟瑟</option><option value="3">冬雪凯凯</option>
</select>
<script src="../js/jquery.min.js"></script>
<script>$("#select").change(function(){//获取选中的opotion的value---this.value //jQuery对象只能调用jQuery对象的方法或属性var value= $(this).val();var num=  parseInt(value)+1;$("body").css("background-image","url(../img/bg-img/"+num+".jpg)");});
</script>
</body>
</html>

百度音乐盒


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div style="width:600px;height:500px;border:1px solid gray;margin: 0px auto"><h2>百度音乐盒</h2><input type="button" id="btn1" value="全选" /><input type="button" id="btn2" value="全否" /><input type="button" id="btn3"  value="反选" /><input type="button" id="btn4"  value="播放" /><hr><input type="checkbox" name="song" value="爱你一万年"  />爱你一万年<br><input type="checkbox" name="song" value="海阔天空" />海阔天空<br><input type="checkbox" name="song" value="蓝精灵之歌" />蓝精灵之歌<br><input type="checkbox" name="song" value="因为爱情" />因为爱情<br></div><script src="../js/jquery.min.js"></script><script>$("#btn1").click(function(){//选中所有的checkbox$("input:checkbox").prop("checked",true);})$("#btn2").click(function(){//选中所有的checkbox$("input:checkbox").prop("checked",false);})$("#btn3").click(function(){//获取所有的checkbox，是一个DOM对象// var checkboxes=document.getElementsByName('song'); //遍历所有checkbox，它是DOM对象/* for(var i=0;i<checkboxes.length;i++){//将DOM对象转换为jQuery对象，并获取它现在的选中状态var flag=  $(checkboxes[i]).prop("checked");//设置checkbox选中状态$(checkboxes[i]).prop("checked",!flag);}*///使用jQuery的each方法遍历所有checbox$.each($("input:checkbox"),function(index,value){//此处 value是当前的DOM对象(checkbox)，等价于this//获取当前checkbox的选中状态var flag=  $(this).prop("checked");//设置checkbox选中状态$(this).prop("checked",!flag);  });})$("#btn4").click(function(){//获取所有的checkbox，是一个DOM对象//  var checkboxes=document.getElementsByName('song'); //数组，保存所有选中的歌曲var songs=[];//遍历所有checkbox，它是DOM对象/* for(var i=0;i<checkboxes.length;i++){var flag=  $(checkboxes[i]).prop("checked");if(flag){//获取选中的歌曲var song=  $(checkboxes[i]).val(); songs.push(song);}}*///获取所有选中的checkboxvar  $chks=$("input[name=song]:checked");$.each($chks,function(index,element){//获取选中的歌曲,this等价于elementvar song= $(this).val();songs.push(song);} )var str=  songs.join(",");alert(str);});</script></body></html>

jQuery练习下拉更换背景+百度音乐盒相关推荐

jQuery获取下拉菜单列表的值
在表单提交的网页中,我们经常使用下拉菜单列表,这篇文章解释了如何获取下拉列表选择的值. 在jQuery中,我们通过使用.val()方法获得下拉列表的选定值. .val()方法主要用于获取表单元素的值, ...
一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览源码下载实现的代码. html代码: <a ...
jquery对下拉框的操作
<script type="text/javascript"></script> jQuery对下拉框的操作 /获取第一个option的值 $('#test ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
使用jQuery完成下拉菜单
开发工具与关键技术:Adobe Dreamweaver CC 2017 jQuery 作者:孙水兵撰写时间:2019年2月21 用jQuery实现下拉菜单是一件很简单的事,主要是进行css的编写,将 ...
jquery php下拉列表,JQuery三级下拉菜单
摘要: jQuery三级下拉菜单首页内容动画动画2 3级菜单→ 我是3级菜单我是3级菜单我是3级菜单动画2 3级菜单→ 我是3级菜单我是3级菜单 4级菜单→ 我是4级菜单我是4级菜单 ...
html下拉菜单插件,简单的jQuery大型下拉菜单插件
booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法在页面中引入jquery和boo ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...

jQuery练习下拉更换背景+百度音乐盒

下拉更换背景

百度音乐盒

jQuery练习下拉更换背景+百度音乐盒相关推荐

最新文章

热门文章

jQuery练习 下拉更换背景+百度音乐盒

下拉更换背景

百度音乐盒

jQuery练习 下拉更换背景+百度音乐盒相关推荐

最新文章

热门文章

jQuery练习下拉更换背景+百度音乐盒

jQuery练习下拉更换背景+百度音乐盒相关推荐