在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
 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. echarts之tooltip-showContent
			
    当trigger:为'axis'时 tooltip : { trigger: 'axis', showContent:false } 当trigger:为'item'时 tooltip : { tri ...
    
			
    2. 
						
  2. EditText键盘弹出时，会将布局底部的导航条顶上去(解决方法之一)
			
    这只是其中一种方法android:windowSoftInputMode有很多属性可以添加,必须是一个state...|ajust... 我只是觉得这种比较好用 在项目的AndroidManifest ...
    
			
    3. 
						
  3. Sort Methods
			
    heyheyhey ~~ It has been a long time since i come here again...whatever today i will summerize some  ...
    
			
    4. 
						
  4. css的margin
			
    1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...
    
			
    5. 
						
  5. Thinkphp3.2.3 执行query命令  包括在模板中使用<php> </php>时 query的使用方法
			
    $sql="select * from `rjshop_productbase` where `id`=1"; $Model =M();$query=$Model->quer ...
    
			
    6. 
						
  6. PHP常见的低级错误
			
    写代码的时候,最讨厌的莫过于因为粗心而范的低级错误了,下面这些,你们是不是也经常犯呢? 1.标点符号缺失,诸如:“$”(美元符),“,”(逗号),“;”(分号),"->"(单 ...
    
			
    7. 
						
  7. 浅谈SQL Transaction在请求中断后的行锁表锁
			
    最近在维护Web Service接口时,由于数据数据量达到千万级别,接口调用不时出现错误让人不胜烦恼,经过性能测试查出瓶颈在数据库数据处理上,可着实忙了一番.相信众多程序猿和DBA都会头痛性能的问题, ...
    
			
    8. 
						
  8. 20155315庄艺霖--对做中学的理解及对c语言和Java的看法
			
    关于做中学的理解及技能训练的思考 在写这篇博客之前,我首先阅读了娄老师的博客,对做中学的概念很感兴趣.我们常说知识要学以致用,做中学强调的是在用的过程中有新的收获和体会来进一步巩固学习.细数我学过的课 ...
    
			
    9. 
						
  9. 用VB实现SmartQQ机器人
			
    这里为了便于介绍程序设计的流程,更多以代码形式给出,具体可用火狐浏览器的firebug插件来抓包分析,或者用谷歌浏览器的开发者工具进行抓包.抓包地址是:http://w.qq.com 第一步,是二维码 ...
    
			
    10. 
						
  10. Ubuntu安装Oracle SQLDeveloper
			
    1、下载Oracle安装文件 这里我下载的是Linux RPM版本，文件名为sqldeveloper-4.0.3.16.84-1.noarch.rpm http://www.oracle.com/te ...
    
			
    11.