分类目录归档：jquery

jQuery实现随即颜色标签云

发表于 2012/03/14 由 前端开发-武方博  537 views

js代码： <script type="text/javascript"> $(function(){ var obj=$("#wrap a"); function rand(num){ return parseInt(Math.random()*num+1); } function randomcolor(){ var str=Math.ceil(Math.random()*16777215).toString(16);    if(str.length<6){     str="0"+str;    }    return str; } for(len=obj.length,i=len;i--;){ obj[i].style.left=rand(600)+"px";    obj[i].style.top=rand(400)+"px";    obj[i].className="color"+rand(5);    obj[i].style.zIndex=rand(5);    obj[i].style.fontSize=rand(12)+12+"px";    obj[i].style.color="#"+randomcolor(); }   }) </script> html代码: <div id="wrap"> <a href="#">web标准学习</a><a href="#">css</a>      <a href="#">javascript</a><a href="#">html5</a>    ......查看更多>>

发表在 jquery | 标签为 , | 留下评论

jQuery加分动画效果实例

发表于 2012/02/27 由 前端开发-武方博  470 views

演示地址：http://www.wufangbo.com/demo/jquery/17/index.html 下载地址：http://www.wufangbo.com/demo/jquery/17/17.rar <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> jQuery加分动画效果示例 </TITLE> <script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script> <script src=”Scripts/jquery.message.js” type=”text/javascript”></script> <link href=”Css/jquery.message.css” rel=”stylesheet” type=”text/css” /> <script> $(function(){ $(“#add”).click(function(){ //取得要加的分数 var fen = $(“#fen”).val(); //取得现在的分数 var result = $(“#result”).text()*1; //分数验证 if(!(/^(([0-9])|([1-9]+[0-9]*))$/.test(fen)) ){ alert(‘不是有效数字’); return false; } //文本框......查看更多>>

发表在 jquery | 标签为 , , | 一条评论

jquery收藏本站代码 带cookies判断

发表于 2012/02/27 由 前端开发-武方博  362 views

//jQuery.cookie 插件 jQuery.cookie = function(name, value, options) { if (typeof value != ‘undefined’) { // name and value given, set cookie options = options || {}; if (value === null) { value = ”; options.expires = -1; } var expires = ”; if (options.expires && (typeof options.expires == ‘number’ || options.expires.toUTCString)) { var date; if (typeof options.expires == ‘number’) { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = ‘; expires=’ + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate......查看更多>>

发表在 jquery | 标签为 , , , | 留下评论

DOM对象和jQuery对象的定义和互相转换

发表于 2012/02/24 由 前端开发-武方博  268 views

一：定义 DOM对象指的是通过传统的javaScript方法获取的元素对象，如下代码： var DomObj1 = document.getElementById(“id1″); var DomObj2 = document.getElementsByName(“name2″); //IE下不支持 var DomObj3 = document.getElementsByTagName(“div”); jQuery对象指的是通过jQuery语法包装原始的DOM对象后生成的新对象，如下代码： var $JQObj1 = $(“#id1″); var $JQObj2 = $(“[name='name2']“); var $JQObj3 = $(“div”); 二：注意点 值得注意的是DOM对象不能调用jQuery对象的方法，如以下代码即为出错： var DomObj = document.getElementsByTagName(“input”); var ObjValue = DomObj.val(); 同时，jQuery对象也不能调用DOM对象的方法，如以下代码即为出错： var $JQObj = $(“input”); var ObjValue = $JQObj.value; 三：相互转换 DOM对象转换成jQuery对象，只需要通过jQuery提供的$()进行包装即可； jQuery对象转换成DOM对......查看更多>>

发表在 jquery | 标签为 , | 留下评论

jQuery1.7.1 API的整理和总结

发表于 2012/02/24 由 前端开发-武方博  441 views

本文基于jQuery1.7.1版本，是对官方API的整理和总结，完整的官方API见http://api.jquery.com/browser/ 0、总述 jQuery框架提供了很多方法，但大致上可以分为3大类：获取jQuery对象的方法、在jQuery对象间跳转的方法，以及获取jQuery对象后调用的方法 其中第一步是怎样获取jQuery对象。大致来说，是通过最核心的$()方法，将页面上的元素（或者在页面上不存在的html片段）包装成jQuery对象。 $()方法里面支持的语法又包括3大类，分别是表达式（包括类表达式.，id表达式#，元素表达式等）、符号（包括后代符号space，next符号+等）、过滤器（包括:过滤器和[]过滤器）。 通过以上3种的组合，“查询”得到想要操作的元素或者元素集合，作为$()的参数，得到jQuery对象（或者jQuery对象的集合） 第二步是在jQuery对象间的跳转。也就是说，已经得到了一个jQuery对象，但是并不是想要的，那么可以通过一系列的跳转方法，比如parent()、next()、children()、find()等，......查看更多>>

发表在 jquery | 标签为 , | 留下评论

类似新浪腾讯微博输入@弹出框的效果模拟

发表于 2012/02/23 由 前端开发-武方博  362 views

大家在玩新浪或者腾讯微博的时候会发现你再输入@后输入字符会弹出一个框提示你要@的对象，这个效果其实原理很简单，但是难点就难在了如何判断光标的坐标上，ie下这个问题很简单就是使用document.selection.createRange()而在其他浏览器下歇菜了，网上找了一通，找到个实现的，代码好几百行，并且兼容性很差。这时候想起了以前模拟textarea的自适应高度的时候的方法，就尝试了模拟了一下这个，结果效果很不错，兼容目前的主流浏览器。但是由它的弊端，大家看到代码就明白它的弊端在哪里，如过说就一个类似微博的输入框可以使用，但是多了的话，这个不是好的选择。（原理就是把textarea的文字在keyup的时候拷贝到我们事先生成好的一个div里面，并且设置div的css属性和textarea完全相同，这里才能模拟的准确。div里面还有两个span，一个放置拷贝过来的文字，一个用来作为钩子获取坐标的，相信你看了源代码一切都明白了） <!DOCTYPE html PUBLIC “-//W3C//DT......查看更多>>

发表在 jquery | 标签为 | 留下评论

JQuery上传插件Uploadify使用实例详解(Java附件上传)

发表于 2012/02/18 由 前端开发-武方博  623 views

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。 官方下载 官方文档 官方演示 event:事件对象。 queueID：文件的唯一标识，由6为随机字符组成。 fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。 fileCount：选择文件的总数。 filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。 filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。 allBytesTotal：所有选择的文件的总大小。 fileCount：取消一个文件后，文件队列中剩余文件的个数。 allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。 type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’ info：错误的描述 percentage：当前完......查看更多>>

发表在 jquery | 标签为 , , , , | 2 条评论

jquery滚动新闻公告效果

发表于 2012/02/18 由 前端开发-武方博  681 views

仿Twitter的公告效果：   方法如下： 1、HTML 部分： <ul id=”twitter”> <li>第一条消息</li> <li>第二条消息</li> <li>第三条消息</li> </ul> 关于输出 twitter 消息的方法很多，有兴趣的朋友可以看一下。 2、载入 JQuery 直接用 google 托管的就行。 <script type=”text/javascript”src=”http://ajax.googleapis.com/ajax/libs/jquery /1.2.6/jquery.min.js”></script> 3、JQuery 执行代码 $(document).ready(function(){ $(“#twitter li:not(:first)”).css(“display”,”none”); var B=$(“#twitter li:last”); var C=$(“#twitter li:first”); setInterval(function(){ if(B.is(“:visible”)){ C.fadeIn(500).addClass(“in”);B.hide() }else{ $(“#twitter li:visible”).addClass(“in”); $(“#twitter li.in”).next().fadeIn(500); $(“li.in”).hide().remov......查看更多>>

发表在 jquery | 标签为 , , | 留下评论

jQuery图片延迟加载解决方法

发表于 2012/02/18 由 前端开发-武方博  421 views

今天看到乐淘网图片延迟加载，感觉很好！具体效果： 效果： 1、图片没加载时，有一个正在加载中的动态图片 2、只加载一部分图片，即加载让用户看到的图片，当拖动滚动条时，再加载其他图片 好处： 这样可以大大的减少服务器负担，特别对于图片库这个东西，有时候用户只看第一屏的图片，没必要全部把图片都加载出来，加载一部分，即可以减少服务器负担又可以让用户少了等待的时间！ 想看看其方法，通过查看代码发现了另一种解决之道。 方法： 第一步：定义样式，此步骤为了在图片还未完全加载，显示一个动态的正在加载中的图片 假如：图片放在<div class=’imgList’><ul><li><a>图片</a></li></ul></div> 样式为： <style type="text/css"> .imgList ul{ list-style:none; margin:0px; padding:0px } .imgList ul li{ list-style:none; margin:0px; padding:0px; display:inline} .imgList......查看更多>>

发表在 jquery | 标签为 , , , | 留下评论

js动态修改input输入框的type属性

发表于 2012/02/17 由 前端开发-武方博  702 views

需要实现的效果：一个输入框，当输入框未获得焦点的时候，value 值为 “密码”；当输入框失去焦点的时候，输入内容显示为”*****” <input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” /> 我们很直接会想到下面的js $(“#showPwd”).focus(function(){ $(this).attr(‘type’,'password’); }); 发现并没有实现预期效果，出现 uncaught exception type property can’t be changed 错误，查看jQuery 1.42源码 1488 行 // We can’t allow the type property to be changed (since it causes problems in IE) if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) { jQuery.error( “type property can’t be changed” ); } jQuery 修改不了用源生的JS呢？ $(“#pwd”).focus(function(){ $(“#pwd”)[0].type = ‘......查看更多>>

发表在 jquery | 标签为 , | 留下评论

JQuery判断一个元素下面是否有内容或者有某个标签

发表于 2012/02/16 由 前端开发-武方博  426 views

网站开发时，我们时常需要把没有内容的标签隐藏或者去掉。在用JQ有两种好的解决办法： 一、判断文本是否为空 var jqObj = $(this); if(jqObj.text().trim()){ //trim()方法是去空格，$.trim()函数删除提供字符串的所有换行符,空格（包括非中断空格），开始和结束tab。如果这些空白字符在字符串中间发生时，它们将被保留。 jqObj.hide(); } 二、判断这个标签下是否有某个已知的元素，比如判断ul标签下是否有li元素 var jqObj = $(this); if(!jqObj.has(‘li’).length){ jqObj.hide(); }   查看更多>>

发表在 jquery | 标签为 , | 留下评论

jQuery数组处理详解含实例演示

发表于 2012/02/16 由 前端开发-武方博  171 views

演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1. $.each遍历示例[常用] $.each(_mozi,function(key,val){ //回调函数有两个参数,第一个是元素索引,第二个为当前值 alert(‘_mozi数组中 ,索引 : ‘+key+’ 对应的值为: ‘+val); }); 2. $.grep()过滤数组[常用] $.grep(_mozi,function(val,key){ //过滤函数有两个参数,第一个为当前元素,第二个为元素索引 if(val==’墨子’){ alert(‘数组值为 墨子 的下标是: ‘+key); } });var _moziGt1=$.grep(_mozi,function(val,key){ return key>1; }); alert(‘_mozi数组中索引值大于1的元素为: ‘+_moziGt1); var _moziLt1=$.grep(_mozi,function(val,key){ return key>1; },true); //此处传入了第三个可靠参数,对过滤函数中的返回值取反 alert(‘_mozi数组中索引值小于等于1的元素为: ‘+_moziLt1); 3. $.map()按给定条......查看更多>>

发表在 jquery | 标签为 , | 留下评论

jQuery插件的机制及实战

发表于 2012/02/16 由 前端开发-武方博  217 views

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法，appendTo()方法等。 2、封装全局函数 可以将独立的函数加到jQuery命名空间下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery内部作为全局函数的插件附加到内核上去的。 3、选择器插件 虽然jQuery的选择器十分强大，但在少数情况下，还是会需要用到选择器插件来扩充一些自己喜欢的选择器。 jQuery插件的机制 jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。 jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种，jQuery.extend()用于扩展后两种插件。这两个方法都接受一个参数，......查看更多>>

发表在 jquery | 标签为 , , | 留下评论

jQuery之end()和pushStack()

发表于 2012/02/16 由 前端开发-武方博  250 views

pushStack()方法在jQuery的DOM操作中被频繁的使用, 如在parent(), find(), filter()中, 当然还有其他许多类似的方法, 它们往往需要返回一个jQuery封装过的DOM结果集.但在我们自己写jQuery代码的时候,却很少关注或使用过pushStack(). 如果我们需要写个涉及DOM遍历的插件,它就会显得尤其有用. 在jQuery内部,pushStack()方法通过改变一个jQuery对象的prevObject属性来”跟踪”链式调用中前一个方法返回的DOM结果集(被jQuery封装过,也是个jQuery对象,说是”跟踪”,是因为实际存储的是个引用). 当我们再链式调用end()方法后, 内部就返回当前jQuery对象的prevObject. 具体更多细节, 直接看源码即可. 这里只做个简单的分析, 直接来个例子: html: 1 2 3 4 5 6 7 8 9 <div id="grandparent">         I am grandparent.         <div id="parent">             I am parent.             <div id="......查看更多>>

发表在 jquery | 标签为 , , | 留下评论

jQuery仿新浪微博和腾讯微博首页动态向下滚动效果

发表于 2012/01/17 由 前端开发-武方博  1,081 views

直接贴上代码啦 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> <title>jQuery仿新浪微博和腾讯微博首页动态向下滚动效果</title> <style type=”text/css”> *{ margin:0; padding:0;} body {font-size:12px;} ul,ol,li {list-style:none;} .dongtai {background:#f6f6f6; width:700px;border:1px solid #e2e2e2; height:130px; overflow:hidden;} .dongtai .tit {   border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;} ul {display:b......查看更多>>

发表在 jquery | 标签为 , , , , | 留下评论
第 1 页，共 5 页12345