再谈jQuery跨任何域

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

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

PHP - 利用P3P实现跨域

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

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

js脚本

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

服务端代码

$arr = array("jquery","ajax",array("cross domain","sjolzy.cn"));
$arr['name'] = "kuayu";
echo $_GET['callback'].
"(".json_encode($arr).");";

/* 红色部分是霸气的跨任何域的关键。*/

标签: AJAX, jQuery, 跨域, jsonp

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,
    beforeSend:function(){},
    success: function(data){
        //...
    },
    complete:function(){}
});

在这里, 我的async设为了false, 原意是想返回数据了再执行$.Ajax后面的脚本, 没想到这个地方却导致了在火狐浏览器下出现闪屏.(Firefox 11.0), 滚动条下拉到底部触发ajax的情况.闪屏

最后将async:false注释掉, 也就是async为ture的情况下, 成功解决了火狐浏览器滚动条下拉到底部触发ajax出现闪屏的问题.

JQuery和Prototype区别小结

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

页面载入

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

 

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

 

  1. // Prototype
    
  2. document . observe ( 'dom:loaded' , function () {
  3.         // Code
  4. });

 

根据ID获取

  1. // JQuery
    
  2. $ ( "#idname" );
  1. // Prototype
    
    
  2. $ ( "idname" );

 

根据类名

  1. // JQuery
    
  2. $ ( ".classname" );
  1. // Prototype
    
    
  2. $$ ( '.classname' );

 

根据第一个符合的类名

  1. // JQuery
    
  2. $ ( ".classname:first-child" );
  1. // Prototype
    
    
  2. $$ ( '.classname' )[ 0 ];

 

根据ID绑定监听事件

  1. // JQuery 
    
  2. $ ( "#item" ). bind ( 'click' , function () {
  3.         // Code
  4. });
  5.  
  6. // JQuery Shorthand
  7. $ ( "#item" ). click ( function () {
  8.         // Code
  9. });
  1. // Prototype
    
  2. $ ( "#item" ). observe ( 'click' , function () {
  3.         // code
  4. });

 

根据符合的类名绑定监听事件

  1. $(".classname").bind('click',function(){
    
  2.         // code
  3. });
  4.  
  5. // JQuery Shorthand
  6. $ ( ".classname" ). click ( function () {
  7.         // code
  8. });

 

  1. // Prototype
    
  2. $$ ( ".classname" ). invoke ( 'observe' , 'click' , function () {
  3.         // code
  4. });

 

结束终止事件

  1. // JQuery
    
  2. $ ( "#id" ). click ( function () {
  3.  
  4.         //code
  5.         return false ;
  6. });
  1. // Prototype
    
  2. $ ( "id" ). observe ( 'click' , function ( e ) {
  3.         //code
  4.         Event . stop ( e );
  5. });

 

处理观察的元素

  1. // JQuery
    
  2. $ ( '#idname' ). click ( function () {
  3.         this . hide (); // Hide the item clicked
  4. });
  1. // Prototype
    
  2. $ ( 'idname' ). observe ( 'click' , function ( e ) {
  3.         el = e . findElement ;
  4.         el . hide (); // hide the item clicked
  5. });

 

根据ID操作类名

  1. // JQuery
    
  2. $ ( '#id' ). addClass ( 'red' );
  3. $ ( '#id' ). removeClass ( 'red' );
  1. // Prototype
    
  2. $ ( 'id' ). addClassName ( 'red' );
  3. $ ( 'id' ). removeClassName ( 'red' );

 

根据类名操作类名。。

  1. // JQuery
    
  2. $ ( '.class' ). addClass ( 'red' );
  3. $ ( '.class' ). removeClass ( 'red' );
  1. // Prototype
    
  2. $$ ( '.class' ). invoke ( 'addClassName' , 'red' );
  3. $$ ( '.class' ). invoke ( 'removeClassName' , 'red' );

 

AJAX请求和JSON应用

  1. $.get(url,function(data){
            alert(data . name );
    
  2. }, 'JSON' );

 

  1. // Prototype
    new   Ajax . Request ( url ,   {
  2.         method : 'get' ,
  3.         onSuccess : function ( transport , json ) {
  4.                 alert ( json . name );
  5.         }
  6. });

可以得出结论:jQuery和Prototype大部分是极为相似的,多用几次就都熟了。。

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);
        $panel.animate({left:box_left+2*(40-10*i)},50);
    }
}

shake函数的参数o就是dom元素的ID,一般就是div的ID。shake('panel'); 简单这样调用就能实现左右抖动的效果。。我用来提示 挺好的

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;
    width:600px;
    overflow:hidden;
    position:relative;
    background-color: #000;
}#list ul,#list li{
    list-style:none;
    margin:0;
    padding:0;
}
#list a{
    position:absolute;
    text-decoration: none;
    color:#666;
}
#list a:hover{
    color:#ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="list">
    <ul>
                <li><a href="//sjolzy.cn/Php.html">PhP</a></li>
                <li><a href="//sjolzy.cn/jQuery.html">jQuery</a></li>
                <li><a href="//sjolzy.cn/Magento.html">Magento</a></li>
                <li><a href="//sjolzy.cn/MySql_.html">MySql</a></li>
                <li><a href="//sjolzy.cn/Js.html">Js</a></li>
                <li><a href="//sjolzy.cn/HTML.html">HTML</a></li>
                <li><a href="//sjolzy.cn/CSS.html">CSS</a></li>
                <li><a href="//sjolzy.cn/Ajax.html">Ajax</a></li>
                <li><a href="//sjolzy.cn/ThinkPHP.html">ThinkPHP</a></li>
                <li><a href="//sjolzy.cn/Apache.html">Apache</a></li>
                <li><a href="//sjolzy.cn/Linux.html">Linux</a></li>
                <li><a href="//sjolzy.cn/Python.html">Python</a></li>
                <li><a href="//sjolzy.cn/Category.html">web</a></li>
                <li><a href="//sjolzy.cn/Category.html">xhtml</a></li>
           
            </ul>
        </div>
<script type="text/javascript">
$(document).ready(function(){
    var element = $('#list a');;
    var offset = 0;
    var stepping = 0.03;
    var list = $('#list');
    var $list = $(list)
    $list.mousemove(function(e){
        var topOfList = $list.eq(0).offset().top
        var listHeight = $list.height()
        stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
    });
   
    for (var i = element.length - 1; i >= 0; i--){
        element[i].elemAngle = i * Math.PI * 2 / element.length;
    }
    setInterval(render, 20);
function render(){
        for (var i = element.length - 1; i >= 0; i--){
            var angle = element[i].elemAngle + offset;
            x = 120 + Math.sin(angle) * 30;
            y = 45 + Math.cos(angle) * 40;
            size = Math.round(40 - Math.sin(angle) * 40);
            var elementCenter = $(element[i]).width() / 2;
            var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
            $(element[i]).css("fontSize", size + "pt");
            $(element[i]).css("opacity",size/100);
            $(element[i]).css("zIndex" ,size);
            $(element[i]).css("left" ,leftValue);
            $(element[i]).css("top", y + "%");
        }
        offset += stepping;
    }
});
</script>
</body>
</html>


查看DEMO

标签: jQuery, 3D