jquery做一些小的特效
Posted 黄力军
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery做一些小的特效相关的知识，希望对你有一定的参考价值。
在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表</title> 6 <script src="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="添加" id="btn" /> 14 <input type="button" value="移除" id="yichu" /> 15 </body> 16 <script type="text/javascript"> 17 $("#btn").click(function(){ 18 var v = $("#shuru").val(); 19 var str = "<option value=\'"+v+"\'>"+v+"</option>"; 20 $("#sel").append(str);//append追加意思 21 }) 22 23 $("#yichu").click(function(){ 24 var v = $("#shuru").val(); 25 26 $("[value=\'"+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="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="关灯" id="guan" /> 18 <input type="button" value="开灯" 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做一些小的特效的主要内容，如果未能解决你的问题，请参考以下文章
jQuery设置checkbox全选（区别jQuery版本）