jquery 倒计时
倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。
html代码:
<div class="box3 " data-endtime="<?php echo strtotime('2015-12-1');?>" ></div> <div class="box3 " data-endtime="1448928000"></div>
js代码
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var serverTime = <?php echo time();?> * 1000; $(function(){ var dateTime = new Date(); var difference = dateTime.getTime() - serverTime; setInterval(function(){ $("[data-endtime]").each(function(){ var obj = $(this); var endTime = new Date(parseInt(obj.data('endtime')) * 1000); var nowTime = new Date(); var nMS=endTime.getTime() - nowTime.getTime() + difference; var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); var myH=Math.floor(nMS/(1000*60*60)) % 24; var myM=Math.floor(nMS/(1000*60)) % 60; var myS=Math.floor(nMS/1000) % 60; var myMS=Math.floor(nMS/100) % 10; if(myD>= 0){ var str = "开班倒计时:"+myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒"; }else{ var str = "已结束!"; } obj.html(str); }); }, 100); }); </script>
DD_belatedPNG完美解决ie6下png图片半透明问题,支持背景平铺,定位等属性
解决png在ie6下半透明的方法有很多,这里之所以推荐 DD_belatedPNG 是因为 DD_belatedPNG 可以完美的支持
背景平铺 :background-repeat:(no-repeat ,repeat-x,repeat-y ,repeat)
背景定位:background-position:60px 80px;
背景固定:background-attachment:fixed;
等属性。
还支持:鼠标经过效果 a:hover{}
官方网站:http://www.dillerdesign.com/experiment/DD_roundies/
官方引用地址:
0.0.8a.js (官方未压缩版本, ~12Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js
0.0.8a-min.js (官方压缩版, ~7Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js
———————————-
使用方法 :
<!--[if IE 6]> <script type="text/javascript" src="DD_belatedPNG.js" ></script> <script type="text/javascript"> DD_belatedPNG.fix('.trans,.box , a:hover, .png_bg'); </script> <![endif]-->
引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用 PNG-24 的 CSS 选择器(可使用ID选择器和类选择器)和应用类型(分为 img 标签和 background 属性两种)。
如
<script type="text/javascript"> DD_belatedPNG.fix('#box, img'); </script>
或者
<script type="text/javascript"> DD_belatedPNG.fix('.header, background'); </script>
等,这些可以简写成
<script type="text/javascript"> DD_belatedPNG.fix('#box-one, .header, img, background'); </script>
在或者像本例子中直接使用 * 号,表示应用所有 css 选择器及 xhtml 标签。
<script type="text/javascript"> DD_belatedPNG.fix('*'); </script>
DD_belatedPNG.rar:百度网盘http://pan.baidu.com/s/1dDwKBXv
百度JS模板引擎 baiduTemplate
BaiduTemplate
最简单好用的JS模板引擎,JS语法学习无成本,调用也只是一个函数哦!
项目地址:http://tangram.baidu.com/BaiduTemplate/
//直接复制即可使用,记得要下载baiduTemplate.js //index.html <!doctype html> <html> <head> <meta charset="utf-8"/> <title>test</title> <!-- 引入baiduTemplate --> <script type="text/javascript" src="./baiduTemplate.js"></script> </head> <body> <div id='result'></div> <!-- 模板1开始,可以使用script(type设置为text/html)来存放模板片段,并且用id标示 --> <script id="t:_1234-abcd-1" type="text/html"> <div> <!-- 我是注释,语法均为Javascript原生语法,默认分割符为 <% %> ,也可以自定义,参见API部分 --> <!-- 输出变量语句,输出title --> <h1>title:<%=title%></h1> <!-- 判断语句if else--> <%if(list.length>1) { %> <h2>输出list,共有<%=list.length%>个元素</h2> <ul> <!-- 循环语句 for--> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>没有list数据</h2> <%}%> </div> </script> <!-- 模板1结束 --> <!-- 使用模板 --> <script type="text/javascript"> var data={ "title":'欢迎使用baiduTemplate', "list":[ 'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API', 'test2:', 'test3:', 'test4:list[5]未定义,模板系统会输出空' ] }; //使用baidu.template命名空间 var bt=baidu.template; //可以设置分隔符 //bt.LEFT_DELIMITER='<!'; //bt.RIGHT_DELIMITER='!>'; //可以设置输出变量是否自动HTML转义 //bt.ESCAPE = false; //最简使用方法 var html=bt('t:_1234-abcd-1',data); //渲染 document.getElementById('result').innerHTML=html; </script> </body> </html>
基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll
基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll
下载地址:http://pan.baidu.com/s/1bnq9jwb
—————————————————
mobiscroll_all.rar
http://pan.baidu.com/s/1o6ifnZG
———————————————
mobiscroll.rar
http://pan.baidu.com/s/1kTl9iJH
———————————————————————-
演示地址:http://www.wglong.com/index/demos/mobiscroll/index.html
相关文章:http://www.wglong.com/index/demos/mobiscroll/index.html
var currYear = (new Date()).getFullYear(); var optDate = { preset: 'date', //日期 theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 lang:'zh', showNow: true, nowText: "今", startYear:currYear, //开始年份 endYear:currYear + 10 //结束年份 }; var optDateTime = { preset: 'datetime', //日期 theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 lang:'zh', showNow: true, nowText: "今", startYear:currYear, //开始年份 endYear:currYear + 10 //结束年份 }; var optTime = { preset: 'time', //日期 theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 lang:'zh', showNow: true, nowText: "今", startYear:currYear, //开始年份 endYear:currYear + 10 //结束年份 }; $("#appDate").mobiscroll(optDate); $("#appDatetiem").mobiscroll(optDateTime); $("#apptiem").mobiscroll(optTime);
<input type="text" name="appDate" id="appDate" /> <input type="text" name="appDatetiem" id="appDatetiem" /> <input type="text" name="apptiem" id="apptiem" />
Mobiscroll移动端日期时间插件精简实例
mobiscroll_手机上下滚动选择日期时间
利用Data URL(data:image/jpg;base64,)加速网页加载的方法
利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式
先来看下下边这段代码:
<img src=”data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAA
JQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaM
k+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iG
xcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nL
XAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEA
DAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQF
CgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2
LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnA
agwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoA
CwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQF
CgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWE
j6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwB
ABEADAADAAACBYSPqcsFADs=
“>
其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的Data URL,就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于:
<img src=”http://www.lrxin.com/images/loading.gif”>
显示结果:
Data URL它现将图片转换成base64编码,以文本的形象随着文件加载。
再由浏览器在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用。
语法:
data:image/jpg; 声明数据协议及类型名称
base64, 编码形式为base64
/9j/4AAQSkZ…… base64编码结果
最后附上Data URL的生成方法(PHP):
<?php //php读取和保存base64编码的图片内容 header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 //$image_file = './loading.gif'; $image_file = 'http://www.lrxin.com/images/loading.gif'; $image_info = getimagesize($image_file); $base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file))); ?> <img src="<?php echo $base64_image_content;?>" />
需要注意:本方法适合于小图片,大图片就不要考虑了,另外IE8以下浏览器不支持这种方法。
用这种方法会加重客户端的CPU和内存负担,总之有利有弊。
IE8 之前的浏览器不支持 Data URL
在线生成工具:
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html
简单的说,data类型的Url大致有下面几种形式。
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/plain;charset=UTF-8;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,<base64编码的gif图片数据>
data:image/png;base64,<base64编码的png图片数据>
data:image/jpeg;base64,<base64编码的jpeg图片数据>
data:image/x-icon;base64,<base64编码的icon图片数据>
让ie9以下版本(ie6、7、8)兼容html5新特性的方法
一直以来ie浏览器都是web程序猿所痛恨,丫的兼容性真让人无解了,下面是针对操蛋浏览器兼容html5新标签的方法
一:JavaScript 语句 document.createElement(“myHero”) 是为了为 IE 浏览器添加新的元素。(ie8及一下版本不支持)
二:
国内不建议使用
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]–>
建议这个
<!–[if lt IE 9]>
<script src=”http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js”></script>
< ![endif]–>
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
虽然这个解决方案对操蛋浏览器识别新标签有一定作用,但是限制挺多的,所以呼吁所有的程序猿同胞们用这段代码
<!–[if lt IE 9]>
<script type=”text/JavaScript”>
alert(“请使用ie9或更高版本的浏览器或是更高级的浏览器,推荐使用谷歌浏览器、火狐浏览器,以便您浏览本站优质内容”);
</script>
< ![endif]–>
js获取当前域名,当前网站url
<script language="javascript"> //获取域名 host = window.location.host; host2=document.domain; //获取页面完整地址 url = window.location.href; document.write("<br>host="+host) document.write("<br>host2="+host2) document.write("<br>url="+url) </script>
微信分享js
微信分享js
<script type="text/javascript"> window.shareData = { "imgUrl": "http://www.baidu.com/img/baidu_jgylogo3.gif", "timeLineLink": "http://www.lrxin.com", "tTitle": "这里是标题", "tContent": "这里是描述文字" }; document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('showOptionMenu'); WeixinJSBridge.on('menu:share:appmessage', function(argv) { WeixinJSBridge.invoke('sendAppMessage', { "img_url": window.shareData.imgUrl, "link": window.shareData.timeLineLink, "desc": window.shareData.tContent, "title": window.shareData.tTitle }, function(res) { }) }); WeixinJSBridge.on('menu:share:timeline', function(argv) { WeixinJSBridge.invoke('shareTimeline', { "img_url": window.shareData.imgUrl, "img_width": "640", "img_height": "640", "link": window.shareData.timeLineLink, "desc": window.shareData.tContent, "title": window.shareData.tTitle }, function(res) { }); }); }, false); </script>
用fastclick插件解决jquery中.live方法添加的click事件在苹果iso浏览器下不好用问题
jquery.live()可以对未来加载到页面中html标签写click点击事件。针对未来的html这一特性,我们非常喜欢用.live()
但是 在iso浏览器下,
$('.live').live({ 'click':function(){ alert('live'); } });
却没有反应。上网上找了一些有这么解决的 吧 click 事件 改成 touchstart 事件
$('.live').live({ 'touchstart':function(){ alert('live'); } });
或者 同时给两个事件都加上
$('.live').live({ 'click , touchstart':function(){ alert('live'); } });
这样 苹果手机的iso浏览器的确可以了,可以触发事件。
但是当我想手指移动页面时如果正好点在这个div的时候就出发这个事件了,请问如何在手机端将触摸和触摸移动分开? 这有出现了一个问题。
—————我是分割线——————-
后来又找了一些文章 发现了 FastClick 这个js插件。发现他很神奇的解决了这个问题。使用也很简单。
引用fastclick.js这个js文件,然后 在页面加载完事后运行 FastClick.attach(document.body); 就可以了。
<script type=”text/javascript”></script>
<script src="js/fastclick.js" ></script> <script type="text/javascript"> $(function() { FastClick.attach(document.body); }); </script>
如果页面中某些 html元素 不希望收到 FastClick 的影响,可以给这个元素添加 needsclick 这个类。
例如:
<a class="needsclick">忽略 FastClick </a> <a class="dropdown-toggle needsclick" data-toggle="dropdown">Dropdown</a>
项目主页:https://github.com/ftlabs/fastclick
备用下载地址:http://pan.baidu.com/s/1jG0xTpc
javascript 的 “!function” 是什么意思?
叹号后面跟函数!function
和加号后面跟函数+function
都是跟(function(){})();这个函数是一个意思,都是告诉浏览器自动运行这个匿名函数的,因为!+()这些符号的运算符是最高的,所以会先运行它们后面的函数
;!function(window, undefined){ //code... }(window); (function(){ //code... })(); (function (window, undefined){})(window);
这是javascript的匿名函数,其实就是定义了一个匿名方法,然后再调用它。
什么时候可以用这种方式呢?就是当方法须被调用且只会被调用一次的时候。
闭包的好处之一:对js进行压缩的时候,
(function(window, undefined))里的window和undefined
均可以替换成其他简写字符,从而减少文件大小,因为他们被视为局部变量使用。
window: 表示 BOM 浏览器对象模型中的 window 对象,
对于undefined,因为他不是javascript关键字。
如果jQuery的写法是这样的
(function( window ) { ... // code goes here })(window);
必然造成中间代码里的 undefined 遭到污染。
因为在默认情况下,对于一个未定义的变量,它的值应该是 undefined,
假如用户使用
var undefined = ‘myValue’;
// 或者
window.undefined = ‘myValue’;
进行赋值,那么,jQuery 中的 undefined 的值就变成了用户指定的值(这里是字符串 ‘myValue’)。这样会造成 jQuery 内部异常。
而 jQuery 采用的这种写法,就很好的避免了这个问题。
最后那个(window),表示调用此函数时候只传入的window对象。
jQuery在执行匿名函数的时候,只传递一个参数 window,而不传递 undefined,
那么函数体中的 undefined 局部变量的值,刚好就是 undefined,此举甚为巧妙!
举个例子,如下:
(function( a, b) { if(b) alert(a + b); else alert(a); })(1);
结果是:1
JS获取当前时间戳的方法-JavaScript 获取当前时间戳
JavaScript 获取当前时间戳:
第一种方法:
var timestamp =Date.parse(new Date());
结果:1280977330000
第二种方法:
var timestamp =(newDate()).valueOf();
结果:1280977330748
第三种方法:
var timestamp=newDate().getTime();
结果:1280977330748
第一种:获取的时间戳是把毫秒改成000显示,
第二种和第三种是获取了当前毫秒的时间戳。
JS的trim()方法,js去首尾空格
js去空格,js中本身没有trim函数。无法像其他程序语言使用trim、ltrim 或 rtrim取出空格。因为在js中却没有这3个内置方法,所以需要手工编写。
下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去。
写成类的方法格式如下:(str.trim();)
<script language="javascript"> String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } String.prototype.ltrim=function(){ return this.replace(/(^\s*)/g,""); } String.prototype.rtrim=function(){ return this.replace(/(\s*$)/g,""); } </script>
写成函数可以这样:(trim(str))
<script type="text/javascript"> function trim(str){ //删除左右两端的空格 return str.replace(/(^\s*)|(\s*$)/g, ""); } function ltrim(str){ //删除左边的空格 return str.replace(/(^\s*)/g,""); } function rtrim(str){ //删除右边的空格 return str.replace(/(\s*$)/g,""); } </script>
jquery select 获取,添加,设置
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。
比如<select class=”selector”></select>
1、设置value为pxx的项选中
$(".selector").val("pxx");
2、设置text为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);
这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
$(".selector").val();
4、获取当前选中项的text
$(".selector").find("option:selected").text();
这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。
很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。
如:
$(".selector1").change(function(){ // 先清空第二个 $(".selector2").empty(); // 实际的应用中,这里的option一般都是用循环生成多个了 var option = $("<option>").val(1).text("pxx"); $(".selector2").append(option); });
jQuery获取Select选择的Text和Value:
1. var checkText=jQuery(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text
2. var checkValue=jQuery(“#select_id”).val(); //获取Select选择的option Value
3. var checkIndex=jQuery(“#select_id “).get(0).selectedIndex; //获取Select选择的索引值
4. var maxIndex=jQuery(“#select_id option:last”).attr(“index”); //获取Select最大的索引值
jQuery添加/删除Select的Option项:
1. jQuery(“#select_id”).append(“<option value=’Value’>Text</option>”); //为Select追加一个Option(下拉项)
2. jQuery(“#select_id”).prepend(“<option value=’0′>请选择</option>”); //为Select插入一个Option(第一个位置)
3. jQuery(“#select_id option:last”).remove(); //删除Select中索引值最大Option(最后一个)
4. jQuery(“#select_id option[index=’0′]”).remove(); //删除Select中索引值为0的Option(第一个)
5. jQuery(“#select_id option[value=’3′]”).remove(); //删除Select中Value=’3’的Option
6. jQuery(“#select_id option[text=’4′]”).remove(); //删除Select中Text=’4’的Option
内容清空:
jQuery(“#select_id”).empty();
第三方js的api接口获取用户ip地址以及所在城市信息
第三方js的api接口获取用户ip地址以及所在城市信息
利用第三方的api js 接口就可以获取用户的ip地址以及所在城市
新浪的IP查询接口:
新浪的:http://counter.sina.com.cn/ip?ip=IP地址
返回Js数据,感觉不是很精确,可以把问号后面的去掉,直接返回本机对应的IP所在地
http://counter.sina.com.cn/
太平洋电脑网IP查询接口:
http://whois.pconline.com.cn/?ip=0.0.0.0
把0.0.0.0换成IP地址,页面上还有其他无关内容,这些内容是告诉我们哪些接口可以调用、接口调用参数和使用方法等
通过上边的js接口调用就可以判断用于属于哪个城市,直接显示该城市的相关信息了,对于需要城市切换的网站,首次判断用户来源非常有帮助。
ps:个人感觉太平洋的这个准确。
JavaScript模板引擎Arttemplate
现在程序开发一般都使用MVC这样的设计开发模式,将数据的输入、处理、输出三步明确的分开,有利于项目开发中的分工与提高开发效率。将M与V分开后,可以将数据输出到各种前端展现方式,在V的层面一系列数据你可以用柱状图表现,也可以用HTML表格表现,V的分离使得死的数据可以被活灵活现的展示给用户,提高用户体验度。至于MVC的模式的优缺点,不是此文的目的,就不多叙了。
前端展示的多样化,加大了前端开发人员的工作量,也对前端开发人员的能力有了更多的要求,但使用“模板引擎”一定程度上帮助前端开发人员使用自己熟悉的标签语言就能达到开发要求。
一般的web开发要使用和后台开发程序配合的模板引擎,但随着用户体验的更高追求,页面无刷新或部分刷新的ajax被广泛应用后,js发送ajax请求回来的数据格越来越多,这些数据返回后一般都使用简洁的json格式,节约流量和提高效率,但json并不能直接在页面展示,而要通过js再转换拼装成html代码,将json这类的数据转换成html代码输出的这个过程就是本文要说的正题了。
Arttemplate 超快的前端模板引擎
artTemplate 新一代 javascript 模板引擎
artTemplate 是新一代 javascript 模板引擎,它在 v8 中的渲染效率可接近 javascript 性能极限,在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍(性能测试)。
引擎支持调试。若渲染中遇到错误,调试器可精确定位到产生异常的模板语句,解决前端模板难以调试的问题(详情)。
另外,artTemplate 的模板还支持使用自动化工具预编译,支持将模板转换为 js 文件。
官方网站:
http://aui.github.io/artTemplate/
相关网站:
http://cdc.tencent.com/?p=5723
https://github.com/aui/artTemplate
Js动态添加与删除Option对象
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS动态添加删除option</title> <script> //动态删除select中的所有options: function delAllOptions(){ document.getElementById("user_dm").options.length=0; } //动态删除select中的某一项option: function delOneOption(indx){ document.getElementById("user_dm").options.remove(indx); } // 动态添加select中的项option: function addOneOption(){ //document.getElementById("user_dm").options.add(new Option(2,"mytest")); var selectObj=document.getElementById("user_dm"); alert(selectObj.length); selectObj.options[selectObj.length] = new Option("mytest", "2"); } </script> </head> <body> <select id="user_dm" name="user_dm"> <option value="0" selecte>==请选择人员==</option> <option value="1">test</option> </select><br> <input type="button" onClick="addOneOption()" value="添加"> <input type="button" onClick="delOneOption(1)" value="删除第一个"> <input type="button" onClick="delAllOptions()" value="清空"> </body> </html>
———————–
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Js动态添加与删除Option对象</TITLE> <script language="JavaScript"> // 添加选项 function addOption(pos){ var objSelect=document.getElementById("mySelect"); // 取得字段值 //var strName = document.myForm.myOptionName.value; // var strValue = document.myForm.myOptionValue.value; // 建立Option对象 var objOption = new Option("aaaaaaaa","bbbbbbbbb"); if (pos == -1 & pos > objSelect.options.length) objSelect.options[objSelect.options.length] = objOption; else objSelect.add(objOption, pos); } // 删除 function deleteOption(type){ var objSelect=document.getElementById("mySelect"); if (type == true) objSelect.options[objSelect.selectedIndex] = null; else objSelect.remove(objSelect.selectedIndex); } // 显示选项信息 function showOption(){ var objSelect=document.getElementById("mySelect"); var name = objSelect.options[objSelect.selectedIndex].text; var value = objSelect.options[objSelect.selectedIndex].value; alert(name + " = " + value); } //动态删除select中的所有options: function clearAllOptions(){ var objSelect=document.getElementById("mySelect"); objSelect.options.length=0; } </script> </HEAD> <BODY> <h2>Js动态添加与删除Option对象</h2> <hr> <select id="mySelect" name="mySelect"> <option value="中国" Selected>中国</option> <option value="日本">日本</option> <option value="美国">美国</option> </select> <input type="button" onclick="showOption(this.form)" value="显示"> <input type="button" onclick="deleteOption(true)" value="删除"> <input type="button" onclick="deleteOption(false)" value="Remove方法"><br><br> 选项名称 : <input type="text" name="myOptionName" value="英国"><br> 选项的值 : <input type="text" name="myOptionValue" value="value4"> <input type="button" onclick="addOption(-1)" value="添加"> <input type="button" onclick="addOption(0)" value="插入到最前面"> <input type="button" onclick="clearAllOptions()" value="清空"> </BODY> </HTML>
Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值
jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked").val()); } } jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $("select[name=items] option[selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $('input[name=items]').get(1).checked = true; 获取值: 文本框,文本区域:$("#txt").attr("value"); 多选框checkbox:$("#checkbox_id").attr("value"); 单选组radio: $("input[type=radio][checked]").val(); 下拉框select: $('#sel').val(); 控制表单元素: 文本框,文本区域:$("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容 多选框checkbox: $("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 单选组radio: $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框 刚开始接触jquery,很多东西不熟悉 在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值 后来终于在伟大的百度帮助下,找到了问题的原因: $("")是一个jquery对象,而不是一个dom element value是dom element的属性 jquery与之对应的是val val() :获得第一个匹配元素的当前值。 val(val):设置每一个匹配元素的值。 所以,代码应该这样写: 取值:val = $("#id")[0].value; 赋值: $("#id")[0].value = "new value"; 或者$("#id").val("new value"); 或者这样也可以:val = $("#id").attr("value"); jQuery中each非常好用,常用它取代javascript的for循环 例如在一个function里有一个each,在each里某种条件 成立的话,就把这个function返回true或者false function methodone(){ .... $.each(array,function(){ if(条件成立){ return true; } }); .... } 结果发现老是不对。 后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式 break----用return false; continue --用return ture; 所以当我在each里想使用return true给这个function返回时,其实只是让each继续执行而以 连each都没有中断,所以function也就不能return了 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked").val()); } }
JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js
这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件)。都适合在一些商城类、产品类的网页中使用。希望大家会喜欢。
Enlarge.js
Enlarge.js 是一个基于 jQuery 的插件,可以非常方便地实现图放大镜的效果,适用于大多数商品类网站,例如在线商城、电子商务、企业产品介绍等。
更多介绍及下载:http://www.abelcode.com/enlarge/
EnlargeTouch.js
EnlargeTouch.js 是 Enlarge 插件面向触摸屏使用的版本,它原生基于 JavaScript 实现,无需依赖第三方类库,可方便部署于移动版的网站或客户端,节省流量,同时为网站提升用户体验。
更多介绍及下载:http://www.abelcode.com/enlarge-touch/
window resize和scroll事件的基本优化
同事在项目中使用scroll事件去加载数据,结果IE下悲剧了。给了一个简单优化方法,效果明显。
只要用户改变窗口大小,会对内部一些元素大小重新计算,可能导致整个页面重新渲染,最终导致大量消耗 CPU。比如调用 resize 方法,用户改变窗口大小时会不停的被触发, 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的IE也会陷入假死状态。
基本的优化思路:在一定的时间之内,只执行一次resize事件函数。
var resizeTimer = null; $(window).on('resize', function () { if (resizeTimer) { clearTimeout(resizeTimer) } resizeTimer = setTimeout(function(){ console.log("window resize"); }, 400); } );
scroll事件优化同理。