jQuery应用 | jQuery推荐插件文件 | jQuery转换24 May 2012 18:32 Thursday

再谈jQuery跨任何域

跨域相关的文章老早写过几篇：

jquery url检测遇到的jquery跨域问题及JSONP的使用

PHP - 利用P3P实现跨域

HTTP和HTTPS跨域共享session解决办法

本文是对第一篇的实例补充。

js脚本

$.getJSON ('http://sjolzy.cn/?callback=? &a=1&b=2', function(data) {
    if (typeof(data) == 'object') {
        $.each(data,function(i,j){
            // ...
        });
    }
});

服务端代码


2012-04-09 11:25:33阅读全文>>>

jquery ajax的async参数导致火狐浏览器闪屏

先提下关于jQuery的$.Ajax 的async的作用,

官方的解释是

async Boolean Default: true
By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

async默认是true, 即为异步方式, $.Ajax执行后, 会继续执行ajax后面的脚步, 直到服务器端返回数据后, 触发$.Ajax里的success方法. 这时候执行的是两个线程.

我的出现闪屏的情况是:

$.ajax({
    type: "post",
    url: "index.php",
    data: { },
    async:false,


2012-04-06 11:15:09阅读全文>>>

JQuery和Prototype区别小结

jQuery使用得比较顺手也比较喜欢，不得已也要用Prototype，小小整理下区别。。

页面载入

  1. // JQuery
  2. $ ( document ). ready ( function () {
  3.         // Code
  4. });

 

  1. // JQuery Shorthand
  2. $ ( function () {
  3.         // Code
  4. });

 

  1. // Prototype

2011-07-22 16:35:44阅读全文>>>

jQuery函数 - 左右抖动效果，用于提示

Wordpress博客后台登录输入错误的话登录窗口有左右抖动的效果。弄成jQuery函数方便调用（前提已载入jQuery包）

function shake(o){
    var $panel = $("#"+o);
    box_left = ($(window).width() -  $panel.width()) / 2;
    $panel.css({'left': box_left,'position':'absolute'});
    for(var i=1; 4>=i; i++){
        $panel.animate({left:box_left-(40-10*i)},50);


2011-05-13 13:50:52阅读全文>>>

jQuery 3D文字特效(备用)

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery 3D文字</title>
<style type="text/css">
body{
    font-family: Arial, "MS Trebuchet", sans-serif;
    background-color: #111;
}
#list{
    margin:0 auto;
    height:600px;


2011-01-26 21:10:21阅读全文>>>

解决jQuery插件Uploadify上传中文文件出现乱码的问题

jQuery.Uploadify是一个方便的jqyery文件上传插件，

今天项目需要拿来使用，

但是出现了个问题：上传中文文件的时候会出现乱码

 

通过一番研究，最终解决：

修改uploadify.php文件，


2010-09-30 13:16:24阅读全文>>>

使用jquery插件测试url链接是否有效及js ping url

jquery的ping插件：//要用的需要明白代码及自己改些地方

(function($) {
    $.fn.ping = function(options) {
        var opts = $.extend({}, $.fn.ping.defaults, options);
        var stime = new Date().getTime();
        return this.each(function() {
            var ping, requestTime, responseTime ;
            var target = $(this);
            function ping(){
                $.ajax({url: opts.getUrl(target.html())+'/'+ Math.random() + '.html',  //设置一个空的ajax请求
                    type: opts.type,
                    dataType: 'html',
                    timeout: opts.timeout,
                    beforeSend : function() {
                        requestTime = new Date().getTime();
                    },
                    complete : function() {
                        responseTime = new Date().getTime();
                        ping = Math.abs(reque


2010-07-06 16:18:56阅读全文>>>

jquery url检测遇到的jquery跨域问题及JSONP的使用

jsonp的ibm上的资料：

使 用 JSONP 实现跨域通信，第 1 部分: 结 合 JSONP 和 jQuery 快速构建强大的

 

跨 域限制的原因

 跨域问题存在实际上源于浏览器的同源策略(same origin policy),简单讲,同源就是要求域名,协议,端口三者都一致;而同源策略就是指页面上的脚本不能访问非同源的资源(包括 HTTP响应和Cookie);

    很多人会想到一个很熟悉的东西:document.domain

    同 源策略有点放松的就是:b.a.com上的页面无法通过a.com的同源验证,但是设置b.a.com页面的document.domain 属性为a.com,就可以通过浏览器对a.com的同源检测;但是,document.domain只允许设置成更上级的域名,而不是 其它域名,例如c.com就不行; 提到这里很多人都会想到多级域 名下共享Cookie的路子就是把Cooki设置成上级域名;在Web2.0的时代,这种本质上同域跨级解决方案远远不能满足我们跨域的需求;

 

JQUERY 的解决办法


2010-07-03 09:56:48阅读全文>>>

基于jquery的页面定时跳转

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>err.html</title>
   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script src="scripts/jQuery/jquery.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function() {
            function jump(count) {
                window.setTimeout(function(){
                    count--;
                    if(count > 0) {


2010-06-27 09:25:21阅读全文>>>

jquery筛选数组之grep、each、inArray、map的用法及遍历json对象

grep
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var array = [1,2,3,4,5,6,7,8,9];
        var filterarray = $.grep(array,function(value){
            return value > 5;//筛选出大于5的
        });
        for(var i=0;i<filterarray.length;i++){
            alert(filterarray[i]);
        }
        for (key in filterarray){
            alert(filterarray[key]);
        }
    }
);
</script>

 

each
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javasc


2010-06-25 08:47:14阅读全文>>>

php使用jquery.imgareaselect插件上传图片

 

在开发中难免碰到图片上传问题！图片上传问题很好解决，而上传到服务器上的图片尺寸大小不一，使表现层无法使用统一的规格显示被上传的图片。 
那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍！ 
使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题； 

jquery.imgareaselect 官方网站：http://odyniec.net/projects/imgareaselect/ 

导入jquery和jquery.imgareaselect后

 

例1.

$(window).load(function () {  

  $('#myimg').imgAreaSelect({ selectionColor: 'blue', selectionOpacity: 0.2,  

    borderWidth: 2 });  

});  

注释：
myimg:需要处理的图片 


2010-04-08 09:47:53阅读全文>>>

使用jquery过滤上传文件的类型和限制文件的大小

 

<script type="text/javascript"> 

$(document).ready(function(){ 

$("#form0").submit(function() {

var filepath=$("input[name='myFile']").val(); 

        var extStart=filepath.lastIndexOf("."); 

        var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 

        if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){ 

         alert("图片限


2010-03-01 02:55:29阅读全文>>>

jquery 使div层定时消失

 

使某一div定时消失，

jquery：setTimeout("$('#alertmsg').css('display','none')",3000);   #alertmsg为div的id  3000为3秒后消失

直接js：setTimeout("alertmsg.style.display='none'",3000);


2010-02-28 18:38:12阅读全文>>>

php json函数在jquery中的应用

 

本文来自小屋sjolzy.cn【原创】

 
鉴于JSON的娇小性和通用性 PHP在5.2的版本之后 默认加上一组针对数据进行JSON互转的函数： 

json_encode ：数据到JSON 

json_decode ：JSON到PHP变量的转换 

这两个函数在使用Ajax诸如：jquery和Ext框架的时候显得尤为重要，Ext默认接受的数据就是JSON格式，而jquery如果让JSON接入之后就显得更加轻松和简洁。本文将用一个实例讨论一下PHP 的JSON数据函数在jquery中的应用。 

Jquery做为一个轻量级的Ajax框架确实显得短小而精悍，比较适合Web编程的前台页面，更加适合和PHP结合。其中jquery中有一个方法是：$.getJSON，这个用来从服务器脚本页面取得JSON格式的数据的。我们按顺序来，首先建立一个名为json.php的PHP脚本，具体程序如下： 

<?php 

//创建一个联合数组，这里我们尽量真实的模拟了一个从数据库中读取的记录 

$a=array('name'=>'dog','sex'


2010-02-27 22:27:13阅读全文>>>

jQuery是魔鬼还是天使

近来jQuery的发展简直是风光无限，各方赞誉之声是此起彼伏，先是放出了微软、 nokia的重磅利好消息，然后是使用了jQuery的各大知名网站名单，现在又开始在css框架领域建立起了她的新帝国。相比一起诞生的其它js框架已 经是不可同日而语了，非常敬佩jQuery团队的运营能力，将一件事从无到有，从有到卓越，从出书到孜孜不倦的发表技术文章，一切都演变得那么自然，仿佛 是一本营销学的教科书。

　　jQuery倡导的简单、快速编写js的方式，彻底改变了那传统琐碎的js编写方式，不再需要担心浏览器的兼容性，无论是简单还是绚烂的功能，也不再需要编写一堆冗赘的代码。她像一个天使让js焕然一新充满了活力........

　　她对js的贡献让我想起了Dreamweaver对互联网发展的贡献，回望历史，在那 web标准方兴未艾、浏览器战火纷飞的年代，Dreamweaver用她兼容一切的table布局方案和视图化的编码方式，让web的制作的门槛视乎降低 到了不可思议的低，让web制作立马走进了千家万户，Dreamweaver的出现让web在量上的发展有了长足的进步，他为互联网的发展起到了不可小视 的历史推动，但在web标准的发展史上，因为Dreamweaver的无所不能、开发简快，渐渐的让HTML标准消失在了人们的视野中，将一代人带上了歧 途，惊醒过来的人们终于又意识到了web标准的存在（在这儿要感谢那些坚持不懈的各种浏览器的生产商）。有了一小群人开始鄙视那个多年不更新的IE6，开 始鄙视那些“Dreamweaver网页工程师”。

　　就像只会用Dreamweaver做页子的人一样，很多都不知道[DIV]与 [SPAN]之间的关系和区别，而只用jQuery写js的人会不会不知道 getElementById()和getElementsByName()之间的关系呢，jQuery巧妙的代码将兼容性问题很好的掩盖，无所不能的特 效、简快的开发方式，正开


2010-01-03 23:08:52阅读全文>>>

jQuery ready vs load

jQuery ready vs load

在使用Javascript操作HTML DOM時，記得要養成網頁載入後才動手的好習慣，不然會有可怕的事發生… (可參考邊做邊學 jQeury 系列 3-jQuery 常用的 Javascript 技巧教學影片，在5分02秒的示範)

在jQuery中，要做到"等網頁載入後再執行"，我們有兩種選擇:

$(document).ready(fn)與$(window).load(fn)

二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，而$(window).load(fn)則會等到"網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。

我 寫了一段示範程式突顯二者的區別。由於Sky_angmap_4.jpg是一張1.2MB的大型圖檔，實際執行時，可以觀察到 “ready event!” –> 圖檔緩慢顯現 -> "load event!”的過程。(嫌下載時間太短，差別不夠明顯的話，可以試試Sky_angmap_7.jpg，XD)


2009-12-26 13:16:34阅读全文>>>

240多个jQuery插件

概述

jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at 上发现了一篇JQuery插件列表的文章 ，特推荐如下。

文件上传(File upload)JQuery_001

Ajax File Upload .
jQUploader .
Multiple File Upload plugin . 
jQuery File Style .
Styling an input type file .
Progress Bar Plugin .

表单验证(Form Validation)

jQuery Validation .
Auto Help .


2009-12-16 23:22:20阅读全文>>>

jquery取值示例

在用$("#id")来获得页面的input元素的时候，发现$("#id").value不能取到值
 
后来终于在伟大的百度帮助下，找到了问题的原因：
$("")是一个jquery对象，而不是一个dom element
 
value是dom element的属性
 
jquery与之对应的是val
 
val() :获得第一个匹配元素的当前值。
 
val(val):设置每一个匹配元素的值。
 
 
 
所以，代码应该这样写

2009-12-15 09:09:24阅读全文>>>

jQuery实例: ToolTip的实现

Tooltip的插件网上很多,这里主要是通过一个简单的实例来学习jQuery.

注:本实例需要jQuery框架.

先看一下实现后的效果:


下面让我们开始,首先,我们需要一个CSS来定义我们的显示效果:

#luluTip
{
    word-wrap:break-word; /*自动换行,在FF中对英文和数字无效*/
    position:absolute;
    width:150px;
    color: #a00;
    background-color:#FFFFCC;
    border:1px solid #a00;
    padding:10px;
    display:none; /*我们先不要让它显示*/


2009-12-14 13:20:02阅读全文>>>

jQuery Ajax 全解析【.ajax .post .get】

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这 个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
		function (responseText, textStatus, XMLHttpRequest){
		this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]	
		//alert(responseText);//请求返回的内容
		//alert(textStatus);//请求状态：success，error

2009-12-14 13:03:04阅读全文>>>

jQuery Div中加载其他页面的实现代码

代码如下:
<script type="text/javascript">
$(document).ready(function() {
loadPage("doc_view", "<?php echo $this->doc_view_url . '/flag/1'; ?>");
});
</script>
<?php
$p = new Portlet();
$p->setCaption("Document View")
->setShowBorder(false)
->addItem("<div id='doc_view'></div>") //这个DIv就是用来显示表单内容的容器
->render();
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list));
?>


2009-12-14 08:39:45阅读全文>>>

让Aptana支持jQuery

此demo将指导您如何创建一个新的jQuery的项目，并获得与您的编码开始使用jQuery库的记录由Aptana提供。


 

  1. Access your projects.访问您的项目。
    1. Click the Project tab to view your Aptana projects.单击项目选项卡查看您的Aptana项目。
  2. Create a new jQuery project.创建一个新的jQuery的项目。
    1. From the Aptana File menu, select New > Project...从Aptana 文件菜单，选择新建 “> 项目...
      The New Project wizard opens. 新建项目向导。
    2. On the New Project wizard, expand the Aptana Projects folder and select General Web Project .在新建项目向导中，展开Aptana项目文件夹并选择一般的Web项目 。
    3. Click the Next button.单击下一步按钮。
    4. In the Project name: field, type a name for your new project.在项目名称：字段中，键入新项目的名称。
    5. Click the Next button.单击下一步按钮。
    6. From the Select Ajax Libraries list, check the box next to jQuery .从选择Ajax库列表中，勾选扩展到 jQuery。 Click Next .单击下一步 。
    7. On the Jaxer Support screen, click the Select All button if you want to automatically add Jaxer support to the project.在Jaxer支持屏幕上，单击全选按钮，如果你想自动添加Jaxer为了支持这个项目。 Click Next .单击下一步 。
    8. On the HTML Preview settings page, configure any special HTML preview settings for your project.在HTML预览设置页，配置任

2009-12-12 23:50:14阅读全文>>>

dreamweaver jquery--让Dreamweaver支持jquery

Dreamweaver也支持jQuery,安装插件后，会有自动提示功能。如下图所示：

 

效果可以吧，实现很简单，下载安装即可。

首先当然要先安装好Dreamweaver了。


2009-12-12 22:37:57阅读全文>>>

jquery表单验证插件

Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。

1、JQuery框架软件包下载

文件: jquery.rar
大小: 29KB
下载: 下载


2、Form插件下载

文件: jquery.form.rar
大小: 7KB
下载: 下载




3、Form插件的简单入门
第一步：先增加一个表单


2009-12-11 23:08:51阅读全文>>>

jQuery 常用方法总结【精】

一个优秀的 JavaScript 框架，一篇 jQuery 常用方法及函数的文章留存备忘。

jQuery 常见操作实现方式

$("标签名") //取html元素 document.getElementsByTagName("")

$("#ID") //取单个控件document.getElementById("")

$("div #ID") //取某个控件中 控件

$("#ID #ID") // 通过控件ID取其中的控件

$("标签.class样式名") //通过class来取控件

$("#ID").val(); //取value值

$("#ID").val(""); //赋值

$("#ID").hide(); //隐藏

$("#ID").show(); //显示

$("#ID").text(); //相当于取innerHTML


2009-12-11 13:08:28阅读全文>>>


发表评论：（这里的评论会加到留言板）