存档

‘JavaScript&JQuery’ 分类的存档

经典海量jQuery插件

2009年12月9日
没有评论

海量的jQuery插件帖，很经典，不知道什么时候开始流传，很早以前就收藏过，为了工作方便还是发了一份放在日志里面。

其中有些已经无法访问，或许是文件移除，或许是被封锁。大家分享的东西，没什么特别的可说的，唯有感谢无私分享的人们。

猫嗔提醒大家在使用的时候注意jQuery包的版本问题，最好是使用相同的版本，因为使用了高版本很有可能出现或多或少的问题。并且其中英文插件在转换成中文时注意编码，推荐utf-8。

jQuery插件-文件上传(File upload)
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

jQuery插件-表单验证(Form Validation)
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

jQuery插件-表单－选取框(Form – Select Box stuff)
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

jQuery插件-表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

阅读全文…

JavaScript&JQuery

前端工程师

2009年9月25日
1 条评论

下午要面试一个前端工程师，想了半天不知道出些什么样的题目，除了基础知识的应用，猫嗔觉得还应该考察一下前端对于没有遇到的问题的解决能力。于是上网想搜罗一些复杂而又不常见的题目。（其实面试的时候一下子解决不了问题没关系，因为大家自己做事的时候也知道，不过多n的人，都有可能需要google的时候，关键是看在解决问题中运用的基础知识方向是否正确和处理的方法。）

最终确定的题目就不多说了，但是在搜索中我觉得几个大家广为流传的面试题真的是很不错的，这里整理贴出，算是给去面试的朋友们一个参考。同时也想说，这几个面试题真的也是看基础是不是扎实了。

第一个是迅雷的面试题：
请用css实现下列要求的效果：
1.一个列表包含标题和时间
2.列表宽度固定，高度自由设置
3.时间紧跟标题，但标题过长时需要隐藏。

 
<!--
ul{list-style:none;}
#t1{float:left;overflow:hidden;height:24px; font-size:12px;}
ul li{overflow:hidden;line-height:24px;width:200px;}
.date{padding-left:10px; font-size:12px; color:#ccc;line-height:24px; position:absolute;}
-->
<ul>
	<li>
<div id="t1"><a href="#">世界上头发最长的美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美世界上头发最长的美美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的美女</a></div>
<span class="date">2009-06-16</span></li>
	<li>
<div id="t1"><a href="#">世界上头发最长的美女</a></div>
<span class="date">2009-06-16</span></li>
</ul>
 
<!--
ul, li {margin:0;padding:0;list-style:none;}
ul {float:left; background:#CCC; width:300px;}
li {font-size:12px;line-height:1.5em;padding-left:10px;position:relative;height:20px;overflow:hidden;padding-right:65px;}
li a {position:relative;left:0px;height:20px;float:left;text-decoration:none;}
span {position:absolute;top:0px;right:-65px;}
-->
<ul>
	<li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场<span>2008-08-27</span> </a></li>
	<li><a href="#">天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li>
	<li><a href="#">天空一声巨响，闪亮全场空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li>
	<li><a href="#">天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li>
	<li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场<span>2008-08-27</span></a></li>
	<li><a href="#">哈哈哈哈哈哈<span>2008-08-27</span></a></li>
	<li><a href="#">哈哈哈哈哈哈哈哈哈<span>2008-08-27</span></a></li>
	<li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场哈哈哈哈<span>2008-08-27</span></a></li>
	<li><a href="#">哈哈哈哈哈哈哈哈哈哈<span>2008-08-27</span></a></li>
	<li><a href="#">天空一声巨响，超越闪亮全场天空一声巨响，超越闪亮全场哈哈哈哈哈哈哈哈<span>2008-08-27</span></a></li>
</ul>
 
<!--
  *{margin:0;padding:0;}
  #muem ul{background:#FFC;width:310px;}
  #muem ul li{margin:5px;height:30px;line-height:30px;text-align:left;list-style:none;width:300px;overflow:hidden;display:inline-block;}
  #muem ul li a{font-size:12px;float:left;padding-right:60px;}
  #muem ul li span{color:#CCCCCC; font-family:Tahoma, Geneva, sans-serif; font-size:12px;display:inline-block;float:left;margin-left:-50px;}
-->
<div>
<div id="muem">
<ul>
	<li><a>杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练杂技团美女演员的训练</a><span>2008-07-14</span></li>
	<li><a>最昂贵内衣惊艳出炉</a><span>2008-07-14</span></li>
	<li><a>[组图]让人喷饭的日喷饭的日</a><span>2008-07-14</span></li>
	<li><a>世界上头发最长的美女：人惊奇的</a><span>2008-07-14</span></li>
	<li><a>世界八大最喜欢吃人的的虹顺利产</a><span>2008-07-14</span></li>
	<li><a>亿万富翁的超级奢侈</a><span>2008-07-14</span></li>
	<li><a>日本小姐选美</a><span>2008-07-14</span></li>
	<li><a>素面朝天吓坏人，化妆虹顺利产</a><span>2008-07-14</span></li>
</ul>
</div>
</div>

Css code, JavaScript&JQuery, 网页前端优化, 软件工具 ,

用js添加书写css样式（批量操作）

2009年9月7日
没有评论

用js控制css样式，能让网页达到良好的的用户体验甚至是动画的效果。
我们用js书写css样式通常会用下面的两种方式：

一般情况下我们用js设置元素对象的样式会使用这样的形式：

var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;

但是上面的方法有一个缺点，样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。

js中有一个cssText的方法：
语法为：obj.style.cssText(”样式”)；
上面的代码我们可以修改成：
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
这种写法可以尽量避免页面的多次reflow，提高页面性能。

JavaScript&JQuery, 网页前端优化

json文件读取简单实例

2009年3月2日
没有评论

关键字：jQuery Ajax 调用Json

刚开始学习Ajax，利用jQuery写了一个调用Json的简单例子。

其实用jQuery写Json很简单了，框架中已经写好了方法，只要简单的调用即可：

首先要引入jQuery库；

接下来是js代码，放在页面中，将方法捆绑在#btnGet元素对象上

<script type=”text/javascript”>

<!–

$(document).ready(function(){
$(”#btnGet”).click(function(){
//读取json文件，并转换为data对象
$.getJSON(”json.txt”,function(data){
//通过循环输出json数据
for (i=0;i<data.user.length;i++)
{
$(”#note”).append(”</div><div class=’person’></div><div mce_tmp=”1″>”);
$(”#note .person:eq(”+i+”)”).append(”</div><div class=’name’>”+data.user[i]+”</div><div mce_tmp=”1″>”);
$(”#note .person:eq(”+i+”)”).append(”</div><div class=’address’>”+data.address[i]+”</div><div mce_tmp=”1″>”);

}
//点击后让按钮不可点
$(”#btnGet”).attr(”disabled”,”disabled”);
});
});
});
// –>

</script>

接下来是html文档中的对象

<button id=”btnGet”>jquery远程获取Json数据</button>
<div id=”note”>
</div>

最后是json文件，我用了txt文件，当然你可以输出php的asp的都同样原理：

{”user”:["王总","李总"],”address”:["shenzhen","jiangxi"],}

demo的地址

JavaScript&JQuery

JS读写Cookie以及设置过期时间

2009年3月2日
没有评论

关键字：js cookie 读写删除 设置过期时间

//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date(); 
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + ”=”+ escape (value) + ”;expires=” + exp.toGMTString();
}
//读取cookies
function getCookie(name)
{
var arr,reg=new RegExp(”(^| )”+name+”=([^;]*)(;|$)”);
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
//删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + ”=”+cval+”;expires=”+exp.toGMTString();
}
//使用示例
setCookie(”name”,”hayden”);
alert(getCookie(”name”));
//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time){
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + ”=”+ escape (value) + ”;expires=” + exp.toGMTString();
}
function getsec(str){
alert(str);
var str1=str.substring(1,str.length)*1; 
var str2=str.substring(0,1); 
if (str2==”s”){
return str1*1000;
}else if (str2==”h”){
return str1*60*60*1000;
}else if (str2==”d”){
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
//暂时只写了这三种
setCookie(”name”,”hayden”,”s20″);

JavaScript&JQuery