在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
 1 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉列表</title>

         <script src="jquery-1.11.2.min.js"></script>

     </head>

     <body>

     <select id="sel">

         <!--文本框-->

     </select>

     <input type="text" id="shuru" />

     <input type="button" value="添加" id="btn" />

     <input type="button" value="移除" id="yichu" />

     </body>

     <script type="text/javascript">

         $("#btn").click(function(){

             var v = $("#shuru").val();

             var str = "<option value='"+v+"'>"+v+"</option>";

             $("#sel").append(str);//append追加意思

         })

     $("#yichu").click(function(){

         var v = $("#shuru").val(); 

         $("[value='"+v+"']").remove(); //移除

     })

     </script>

 </html>
开关灯效果，遮罩层
 1 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉列表</title>

         <script src="jquery-1.11.2.min.js"></script>

         <style type="text/css">

     #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50);

     -moz-opacity:0.5;

     -khtml-opacity: 0.5;

     opacity: 0.5;}

     </style>

     </head>

     <body>

     <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">

     <input type="button" value="关灯" id="guan" />

     <input type="button" value="开灯" id="kai" />

     </div>

     </body>

     <script type="text/javascript">

     $("#guan").click(function(){

         var str = "<div id='zz'></div>";

         $("body").append(str);

         $(this).css("display","none");

         $("#kai").css("display","block");

     })

     $("#kai").click(function(){

         $("#zz").remove();

         $("#guan").css("display","block");

         $(this).css("display","none");

     })

     </script>

 </html>



												


											
jquery做一些小的特效的更多相关文章
	

    
								
  1. jquery做一个小的轮播插件---有BUG，后续修改
		
    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
    
		
    2. 
						
  2. JQuery仿购物网站放大镜特效所遇问题及思考
		
    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...
    
		
    3. 
						
  3. jquery叠加页片自动切换特效
		
    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
    
		
    4. 
						
  4. 一款仿PBA官网首页jQuery焦点图的切换特效
		
    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
    
		
    5. 
						
  5. 一款非常炫酷的jQuery动态随机背景滚动特效
		
    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
    
		
    6. 
						
  6. jquery实现多条件筛选特效代码分享
		
    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...
    
		
    7. 
						
  7. jquery环形3D立体旋转特效
		
      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...
    
		
    8. 
						
  8. 一款jquery实现的整屏切换特效
		
    今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览   源码下载 html代码: < ...
    
		
    9. 
						
  9. jquery-1  jquery几个小实例
		
    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Android中轻松显示Gif图片
			
    android中现在没有直接显示gif的view,只能通过mediaplay来显示,且还常常不能正常显示出来,为此写了这个gifview,其用法和imageview一样使用方法:1-把GifView. ...
    
			
    2. 
						
  2. Java 正则表达式匹配模式[贪婪型、勉强型、占有型]
			
    Greediness(贪婪型):最大匹配 X?.X*.X+.X{n,} 是最大匹配.例如你要用 “<.+>” 去匹配 “a<tr>aava </tr>abb”,也许 ...
    
			
    3. 
						
  3. 2019年台积电进军AR芯片，将用于下一代iPhone
			
    近日,有报道表示台积电10nm 芯片可怜的收益率可能会对 2017 年多款高端移动设备的推出产生较大的影响,其中自然包括下一代 iPhone 和 iPad 机型.不过,台积电正式驳斥了这一说法,表明1 ...
    
			
    4. 
						
  4. python 编码问题
			
    参考原文:http://www.crifan.com/eclipse_pydev_console_messy_char_for_console_is_utf8/ 通用 rq = urllib.urlo ...
    
			
    5. 
						
  5. js中创建对象的三种方式
			
    1. 对象字面量 var obj={ name:"小小", age:3, car:{ brand:"baoma", } }; } 2.使用内置构造函数 var  ...
    
			
    6. 
						
  6. TreeSet
			
    一.TreeSet中的元素比较有两种方式 1.定义一个类,实现Comparable接口  复写的是comparato方法 2.定义一个类,实现Comparator接口,覆盖compara方法(此种方法 ...
    
			
    7. 
						
  7. centos下为大硬盘分区(大于2T)
			
    问题:centos/redhat下使用分区工具fdisk创建大于2TB的分区,无法创建 关键字:MBR.GPT.CHS.LBA MBR:主引导记录 GPT:GUID 分区表 CHS:磁柱 磁头 扇区  ...
    
			
    8. 
						
  8. xss其他标签下的js用法总结大全
			
    前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓           Default <script src=js地址></script> 1 <scr ...
    
			
    9. 
						
  9. sql rowversion
			
    RowsVersion就是timestamp   丢失更新的解决方法      丢失更新概念:当用户同时修改一行数据,他们先读取数据,放在前端进行修改,当修改后,再提交数据,这样最后提交的数据会覆盖先 ...
    
			
    10. 
						
  10. ffmpeg编译与移植问题
			
    1.下载ffmpeg. 下载网址:http://www.ffmpeg.org/download.html 2.解压缩 tar -zxvf ffmpeg-2.0.1.tar.gz 3.配置,生成Make ...
    
			
    11.