首页 > 代码库 > jquery做一些小的特效
jquery做一些小的特效
在文本框里输入内容到添加到下拉列表里,移除下拉里的内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表</title> 6 <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script> 7 </head> 8 <body> 9 <select id="sel"> 10 <!--文本框--> 11 </select> 12 <input type="text" id="shuru" /> 13 <input type="button" value="http://www.mamicode.com/添加" id="btn" /> 14 <input type="button" value="http://www.mamicode.com/移除" id="yichu" /> 15 </body> 16 <script type="text/javascript"> 17 $("#btn").click(function(){ 18 var v = $("#shuru").val(); 19 var str = "<option value=http://www.mamicode.com/‘"+v+"‘>"+v+"</option>"; 20 $("#sel").append(str);//append追加意思 21 }) 22 23 $("#yichu").click(function(){ 24 var v = $("#shuru").val(); 25 26 $("[value=http://www.mamicode.com/‘"+v+"‘]").remove(); //移除 27 }) 28 </script> 29 </html>
开关灯效果,遮罩层
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表</title> 6 <script src="http://www.mamicode.com/jquery-1.11.2.min.js"></script> 7 <style type="text/css"> 8 #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50); 9 -moz-opacity:0.5; 10 -khtml-opacity: 0.5; 11 opacity: 0.5;} 12 </style> 13 14 </head> 15 <body> 16 <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;"> 17 <input type="button" value="http://www.mamicode.com/关灯" id="guan" /> 18 <input type="button" value="http://www.mamicode.com/开灯" id="kai" /> 19 </div> 20 </body> 21 22 <script type="text/javascript"> 23 $("#guan").click(function(){ 24 var str = "<div id=‘zz‘></div>"; 25 $("body").append(str); 26 $(this).css("display","none"); 27 $("#kai").css("display","block"); 28 }) 29 $("#kai").click(function(){ 30 $("#zz").remove(); 31 $("#guan").css("display","block"); 32 $(this).css("display","none"); 33 }) 34 35 </script> 36 </html>
jquery做一些小的特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。