Tag: jQuery

FCKEditor+jQuery+PHP实现分页

没有评论

2010 年 12 月 04 日 at 下午 3:38分类:CSS | JavaScript | jQuery | PHP

一、插入新闻
FCKEditor是一款很流行的即插即用WEB编辑器,它支持ASP、PHP、Java等语言。这里要介绍的是利用编辑器的“插入分页符”功能,实现页面的无刷新分页。
编辑新闻时,在需要插入分页的段落处插入分页符,保存即可。
二、读取新闻
在读取新闻字段时,通过PHP分页函数对新闻字段数据进行处理,代码如下:

function pageBreak($content)
{
    $content  = $content;
    $pattern  = "/<div style=\"page-break-after: always\"><span style=\"display: none\">&nbsp;<\/span><\/div>/";
    $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY); 
    $count    = count($strSplit);
    $outStr   = ""; 
    $i        = 1;
    
    if ($count > 1 ) {
        $outStr   = "<div id='page_break'>";
        foreach($strSplit as $value) {
            if ($i <= 1) {
                $outStr .= "<div id='page_$i'>$value</div>";
            } else {
                $outStr .= "<div id='page_$i' class='collapse'>$value</div>";
            }
            $i++;
        }
        
        $outStr .= "<div class='num'>";
        for ($i = 1; $i <= $count; $i++) {
            $outStr .= "<li>$i</li>";
        }
        $outStr .= "</div></div>";
        return $outStr;
    } else {
        return $content;
    }
}

CSS样式控制分页的样式,代码如下

#page_break {
    
}
#page_break .collapse {
    display: none;
}
#page_break .num {
    padding: 10px 0;
    text-align: center;
}
#page_break .num li{
    display: inline;
    margin: 0 2px;
    padding: 3px 5px;
    border: 1px solid #FF7300;
    background-color: #fff;
    
    color: #FF7300;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    font-size: 12px;
    overflow: hidden;
}
#page_break .num li.on{
    background-color: #FF7300;
    
    color: #fff;
    font-weight: bold;
}

使用jQuery代码实现分页,代码如下:

$(document).ready(function(){
    $('#page_break .num li:first').addClass('on');
        
    $('#page_break .num li').click(function(){
        //隐藏所有页内容
        $("#page_break div[id^='page_']").hide();
                
        //显示当前页内容。
        if ($(this).hasClass('on')) {
            $('#page_break #page_' + $(this).text()).show();            
        } else {
            $('#page_break .num li').removeClass('on');
            $(this).addClass('on');
            $('#page_break #page_' + $(this).text()).fadeIn('normal');
        }
    });
});

根据以上步骤,即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。

JQuery上传插件Uploadify使用详解

没有评论

2010 年 12 月 04 日 at 下午 12:53分类:jQuery

原文地址:
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。

  • 官方下载
  • 官方文档
  • 官方演示
  • 一个上传的功能,依靠函数uploadify实现,uploadify函数的参数为json格式,可以对json对象的key值的修改来进行自定义的设置,如multi设置为true或false来控制是否可以进行多文件上传,下面就来介绍下这些key值的意思:
    uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。
    script : 后台处理程序的相对路径 。默认值:uploadify.php
    checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
    fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
    method : 提交方式Post 或Get 默认为Post
    scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain
    folder : 上传文件存放的目录 。
    queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。
    queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。
    multi : 设置为true时可以上传多个文件。
    auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
    fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:

    fileExt : 设置可以选择的文件的类型,格式如:’*.doc;*.pdf;*.rar’ 。
    sizeLimit : 上传文件的大小限制 。
    simUploadLimit : 允许同时上传的个数 默认值:1 。
    buttonText : 浏览按钮的文本,默认值:BROWSE 。
    buttonImg : 浏览按钮的图片的路径 。
    hideButton : 设置为true则隐藏浏览按钮的图片 。
    rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。
    width : 设置浏览按钮的宽度 ,默认值:110。
    height : 设置浏览按钮的高度 ,默认值:30。
    wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。
    cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:


    上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
    onInit : 做一些初始化的工作。
    onSelect :选择文件时触发,该函数有三个参数
    event:事件对象。
    queueID:文件的唯一标识,由6为随机字符组成。
    fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。

    onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象有以下几个属性:
    fileCount:选择文件的总数。
    filesSelected:同时选择文件的个数,如果一次选择了3个文件该属性值为3。
    filesReplaced:如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。
    allBytesTotal:所有选择的文件的总大小。

    onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数,前三个参数同onSelect 中的三个参数,data对象有两个属性fileCount和allBytesTotal。
    fileCount:取消一个文件后,文件队列中剩余文件的个数。
    allBytesTotal:取消一个文件后,文件队列中剩余文件的大小。

    onClearQueue :当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel 中的两个对应参数。
    onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
    onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。
    type:错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’
    info:错误的描述

    onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数,参数的解释同上。
    onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列,在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数,前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed:
    percentage:当前完成的百分比
    bytesLoaded:当前上传的大小
    allBytesLoaded:文件队列中已经上传完的大小
    speed:上传速率 kb/s

    onComplete:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed
    fileCount:剩余没有上传完成的文件的个数。
    speed:文件上传的平均速率 kb/s
    注:fileObj对象和上面讲到的有些不太一样,onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。

    onAllComplete:文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,分别为:
    filesUploaded :上传的所有文件个数。
    errors :出现错误的个数。
    allBytesLoaded :所有上传文件的总大小。
    speed :平均上传速率 kb/s

    相关函数介绍
    在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数,除此之外还有几个函数:
    uploadifySettings:可以动态修改上面介绍的那些key值,如下面代码

    $('#uploadify').uploadifySettings('folder','JS');

    如果上传按钮的事件写成下面这样,文件将会上传到uploadifySettings定义的目录中

    <a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
    $('#uploadify').uploadifyUpload()">上传</a>

    uploadifyCancel:该函数接受一个queueID作为参数,可以取消文件队列中指定queueID的文件。

    $('#uploadify').uploadifyCancel(id);

    jQuery Sizzle

    没有评论

    2010 年 10 月 15 日 at 下午 1:35分类:JavaScript | jQuery

    jquery1.3将选择器引擎独立,定名为Sizzle,这也是jQuery第一个独立的模块。在Sizzle的介绍里,关于它的首要目的就是在”最常用的选择器使用”比之前版本的引擎更快。(什么是”最常用的选择器使用”,请参见 http://ejohn.org/blog/selectors-that-people-actually-use )
    实际上,选择器引擎的运用对于页面性能起了至关重要的作用。使用合适的选择器表达式可以轻易的提高性能、增强语义并简化逻辑,而你所需要做的,不过是培养几个习惯而已。
    旧习惯我 们最常用的简单选择器包括”id选择器”、”类选择器”、”标签选择器”,毫无疑问的是id选择器有着最好的速度。这取决于dom内置的函数 getElementById,其次是标签选择器,使用的是dom内置的函数getElementsByTag,最差的是类选择器,其需要通过正则解析 html,并且需要在浏览器内核外递归,这种递归遍历是无法被优化的。就需求来说,css中选择器是为了通过语义来渲染样式,而jQuery中大部分情况只是为了选出一类DOMElement,加以同一逻辑的操作。而在”最常用的选择器使用”中,类选择器以13.082%的使用率排在第二位。也就是说在13.082%的情况下,整个document的html被解析了一遍,并递归到DOM树的叶子节点。这部分无意义的性能损耗令人发指。

    使用率 统计数
    #id 51.290% 1431
    .class 13.082% 365
    tag 6.416% 179
    tag.class 3.978% 111
    #id tag 2.151% 60
    tag#id 1.935% 54
    #id:visible 1.577% 44
    #id .class 1.434% 40
    .class .class 1.183% 33
    * 0.968% 27
    #id tag.class 0.932% 26
    #id:hidden 0.789% 22
    tag[name=value] 0.645% 18
    .class tag 0.573% 16
    [name=value] 0.538% 15
    tag tag 0.502% 14
    #id #id 0.430% 12
    #id tag tag 0.358% 10
    最重要的四个建议习惯
    1.以#id开始
    任何情况下,请从id选择器开始,哪怕不存在这个id,也请为选择器操作添加一个id。因为这样选择器会从一个相对末端的DOMNode开始。

    2.使用tag.class代替.class

    关于选择器性能,jQuery官方文档有这么一段描述:

    For example, “.class” is far more popular than “tag.class” even though
    the second one is much more performant. What’s especially important
    about this is that the degree of performance hit isn’t that much of an
    issue. For example, the difference between 4ms and 30ms is virtually
    imperceptible.

    标签是有限的,而类则可以看作是拓展标签的语义的一种方法,那么大部分情况下,使用同一个类的标签也是相同的。

    3.尽可能使用parent>child而非parent child

    “>”是child选择器,只从子节点里匹配,不递归。而” “是后代选择器,递归匹配所有子节点及子节点的子节点(后代节点)。
    4.缓存选出的jQuery对象
      for (i = 0 ; i < 1000 ; i ++ ) … { 
          var myList = $( ‘ .myList ‘ ); 
         myList.append( ‘ This is list item ‘ + i); 

    // case 2 
    var myList = $( ‘ .myList ‘ ); 

    for (i = 0 ; i < 1000 ; i ++ ) … { 
         myList.append( ‘ This is list item ‘ + i); 
    }

    如果选出结果不发生变化的话,不妨缓存选出的jQuery对象,哪怕只有一会儿。比如下面的代码里,这种性能差异就被循环放大了,养成缓存jQuery对象的习惯可以让你在不经意间就完成主要的性能优化。其他建议习惯

    1.摒除表达式中的冗余部分,类似于#id2 #id1 或者 tag#id1 的表达式中,都存在冗余部分,实际上只要#id1即可。
    2.选择特定的表单元素使用[name=x
    虽然name选择器写法上属于属性选择器,但是实际上普通的属性选择器使用的是递归遍历子节点来匹配,而name选择器解析优先级更高,并调用DOM内置
    函 数getElementsByName。虽然在IE和Opera里,指定了name但未指定id的DOMElement也会可以使用
    getElementById得到,但是在jQuery里,为了保证跨浏览器,$(“#id”)会多做一次判断,把这些不一致的结果给过滤掉。所以
    name选择器成了jQuery下的唯一选择。

    3.选择同一type的input元素使用[:type]

    这是唯一符合需要的简单写法。

    4.有条件的使用反向选择器,反向选择器是指类似于”:not(exp)”的表达式。反向选择器实际上性能并不比同逻辑的正向选择器差很多。而在一些情况
    下,为了达到反向选择器的效果,
    我们或许要写出很复杂的表达式,或需要添加额外的类,或需要选出结果后再筛选一遍。这都不如使用反响选择器,无论是在性能上还是在保持逻辑的简单上。而
    jQuery 1.3里,反向选择器得到了增强,之前只可以接受简单的反向表达式。关于jQuery 1.3的变化,大家也可以参考( jQuery
    1.3 发布

    )

    5.有条件的使用prev + next,在语义化的DOM里,我们常常使用结构来为两个DOMElement建立关系,以表达它们对应的实体的意义。

    请参考下面的html片段

    < div id =”entities” > 
    < div id =”entityid” class =”entity” > 
    < div class =”namelabel” > name </ div > 
    < div class =”name” > entityname </ div > 
    </ div > 
    </ div >
    当我们需要对所有.entity的.namelabel进行操作的的时候,我们可以
    用$(“#entities>div.entity>div.namelabel”)来选择。这里的关系就是通过.entity
    和.namelabel父子节点的结构来建立的。

    不过有的时候我们无法选出一个合适的父节点来,例如<dt></dt><dd></dd>,或
    是<label></label><input/>。

    其实相邻节点也是我们惯用的表达关系的结构,而且这种关系用jQuery选择器效率比父子选择器更好。

    prev + next用来表示1对1的关系,在1对多的情况下,可以考虑使用prev ~ siblings

    结论:jQuery的选择器引擎非常强大,正因为如此,我们才更应该谨慎的并充分的使用它。

    来源:http://space.cnblogs.com/group/topic/9737

    在”最常用的选择器使用”比之前版本的引擎更快。(什么是”最常用的选择器使用”,请参见 http://ejohn.org/blog/selectors-that-people-actually-use
    )

    实际上,选择器引擎的运用对于页面性能起了至关重要的作用。使用合适的选择器表达式可以轻易的提高性能、增强语义并简化逻辑,而你所需要做的,不过是培养几个习惯而已

    jQuery.noConflict()

    没有评论

    2010 年 10 月 13 日 at 下午 2:33分类:jQuery

    运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
    这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$(“div p”)的地方,就必须换成jQuery(“div p”)。

    Run this function to give control of the $ variable back to whichever library first implemented it.
    This helps to make sure that jQuery doesn’t conflict with the $ object of other libraries. By using this function, you will only be able to access jQuery using the ‘jQuery’ variable. For example, where you used to do $(“div p”), you now must do jQuery(“div p”).

    返回值

    jQuery

    示例

    将$引用的对象映射回原始的对象。

    jQuery 代码
  • jQuery.noConflict();  
  • // 使用 jQuery  
  • jQuery(“div p”).hide();  
  • // 使用其他库的 $()  
  • $(“content”).style.display = ‘none’;   

  • 恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

    jQuery 代码
  • jQuery.noConflict();  
  • (function($) {  
  •    $(function() {  
  •     // 使用 $ 作为 jQuery 别名的代码  
  •    });  
  • })(jQuery);  
  • // 其他用 $ 作为别名的库的代码  

  • 创建一个新的别名用以在接下来的库中使用jQuery对象。

    jQuery 代码
  • var j = jQuery.noConflict();  
  • // 基于 jQuery 的代码  
  • j(“div p”).hide();  
  • // 基于其他库的 $() 代码  
  • $(“content”).style.display = ‘none’;  
  • jquery.fn.extend与jquery.extend的区别和使用

    没有评论

    2010 年 10 月 12 日 at 下午 7:46分类:JavaScript

    jQuery为开发插件提拱了两个方法,分别是:

    JavaScript代码

  • jQuery.fn.extend(object);   
  • jQuery.extend(object);   
  • jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

    jQuery.fn.extend(object);给jQuery对象添加方法。

    fn 是什么东西呢。查看jQuery代码,就不难发现。

     JavaScript代码

  • jQuery.fn = jQuery.prototype = {      
  •    init: function( selector, context ) {//….    
  •   
  •    //……   
  •   
  • };   
  • 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

    虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

    jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

    jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

     XML/HTML代码

  • $.extend({   
  •   
  •   add:function(a,b){return a+b;}   
  •   
  • });   
  • 便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

    JavaScript代码
  • $.add(3,4); //return 7  
  • jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

    比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

    JavaScript代码
  • $.fn.extend({        
  •         
  •      alertWhileClick:function(){        
  •        
  •          $(this).click(function(){        
  •        
  •               alert($(this).val());        
  •           });        
  •         
  •       }        
  •         
  • });        
  •         
  • $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>    
  • $(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

     真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

    自己写的练习:

    $(function(){
     $.extend({bin:function(a,b){
      return  a+b;
     }})
     var x = $.bin(3,4);
     //alert(x);
     $.fn.extend({
      yan:function(){
       $(this).click(function(){
        alert($(this).val());
       })
      }
     })
     $(“#button”).yan();
     //var b = $.browser;alert(b.opera); //返回浏览器的类型
     $.each( [0,1,2], function(i, n){ //遍历对象或者是数组或者是json数据:$.each( { name: “John”, lang: “JS” }, function(i, n){alert( “Name: ” + i + “, Value: ” + n ); });
      //alert( “Item #” + i + “: “+ n );
     });
     $.extend({change:function(array){ //自己写的一个让数组的组倒着显示的插件
      var arr = array;
      var ar  = new Array;
      for(var i = arr.length;i >= 0;i–){
       ar[i] = arr[arr.length - i];
      }
      return ar;
     }
     })
     var tempArr=[0,1,2];
     var b = $.change(tempArr);alert(b);
    })

    jQuery技巧收集

    没有评论

    2010 年 10 月 11 日 at 下午 8:54分类:jQuery

    1、关于页面元素的引用
    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

     

    2、jQuery对象与dom对象的转换
    只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
    普通的dom对象一般可以通过$()转换成jquery对象。
    如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery的方法。
    由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
    如:$(“#msg”)[0],$(“div”).eq(1)[0],$(“div”).get()[1],$(“td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
    以下几种写法都是正确的:
    $(“#msg”).html();
    $(“#msg”)[0].innerHTML;
    $(“#msg”).eq(0)[0].innerHTML;
    $(“#msg”).get(0).innerHTML;

    3、如何获取jQuery集合的某一项
    对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
    $(“div”).eq(2).html();    //调用jquery对象的方法
    $(“div”).get(2).innerHTML; //调用dom的方法属性

    4、同一函数实现set和get
    Jquery中的很多方法都是如此,主要包括如下几个:
    $(“#msg”).html();    //返回id为msg的元素节点的html内容。
    $(“#msg”).html(“<b>new content</b>”);
    //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

    $(“#msg”).text();    //返回id为msg的元素节点的文本内容。
    $(“#msg”).text(“<b>new content</b>”);
    //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

    $(“#msg”).height();    //返回id为msg的元素的高度
    $(“#msg”).height(“300″);//将id为msg的元素的高度设为300
    $(“#msg”).width();    //返回id为msg的元素的宽度
    $(“#msg”).width(“300″); //将id为msg的元素的宽度设为300

    $(“input”).val(“); //返回表单输入框的value值
    $(“input”).val(“test”); //将表单输入框的value值设为test

    $(“#msg”).click(); //触发id为msg的元素的单击事件
    $(“#msg”).click(fn); //为id为msg的元素单击事件添加函数
    同样blur,focus,select,submit事件都可以有着两种调用方法

    5、集合处理功能
    对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
    包括两种形式:
    $(“p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i]})
    //为索引分别为0,1,2的p元素分别设定不同的字体颜色。

    $(“tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
    //实现表格的隔行换色效果

    $(“p”).click(function(){alert($(this).html())})   
    //为每个p元素增加了click事件,单击某个p元素则弹出其内容

    6、扩展我们需要的功能
    $.extend({
    min: function(a, b){return a < b?a:b; },
    max: function(a, b){return a > b?a:b; }
    }); //为jquery扩展了min,max两个方法
    使用扩展的方法(通过“$.方法名”调用):
    alert(“a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

    7、支持方法的连写
    所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
    例如:
    $(“p”).click(function(){alert($(this).html())})
    .mouseover(function(){alert(‘mouse over event’)})
    .each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

    8、操作元素的样式
    主要包括以下几种方式:
    $(“#msg”).css(“background”);    //返回元素的背景颜色
    $(“#msg”).css(“background”,”#ccc”) //设定元素背景为灰色
    $(“#msg”).height(300); $(“#msg”).width(“200″); //设定宽高
    $(“#msg”).css({ color:”red”, background: “blue” });//以名值对的形式设定样式
    $(“#msg”).addClass(“select”); //为元素增加名称为select的class
    $(“#msg”).removeClass(“select”); //删除元素名称为select的class
    $(“#msg”).toggleClass(“select”); //如果存在(不存在)就删除(添加)名称为select的class

    9、完善的事件处理功能

    Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
    如:
    $(“#msg”).click(function(){alert(“good”)}) //为元素添加了单击事件
    $(“p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i]})
    //为三个不同的p元素单击事件分别设定不同的处理
    jQuery中几个自定义的事件:
    (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
    //当鼠标放在表格的某行上时将class置为over,离开时置为out。
    $(“tr”).hover(function(){
    $(this).addClass(“over”);
    },
    function(){
    $(this).addClass(“out”);
    });
    (2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){alert(“Load Success”)})
    //页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
    (3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
    //每次点击时轮换添加和删除名为selected的class。
    $(“p”).toggle(function(){
       $(this).addClass(“selected”);
    },function(){
       $(this).removeClass(“selected”);
    });
    (4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
    例如:
    $(“p”).trigger(“click”);    //触发所有p元素的click事件
    (5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
    从每一个匹配的元素中(添加)删除绑定的事件。
    例如:
    $(“p”).bind(“click”, function(){alert($(this).text());});//为每个p元素添加单击事件
    $(“p”).unbind();//删除所有p元素上的所有事件
    $(“p”).unbind(“click”) //删除所有p元素上的单击事件

     10、几个实用特效功能
    其中toggle()和slidetoggle()方法提供了状态切换功能。
    如toggle()方法包括了hide()和show()方法。
    slideToggle()方法包括了slideDown()和slideUp方法。

    11、几个有用的jQuery方法
    $.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
    $.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

    $.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: “+ n ); });
    等价于:
    var tempArr=[0,1,2];
    for(var i=0;i<tempArr.length;i++){
    alert(“Item #”+i+”: “+tempArr[ i ]);
    }
    也可以处理json数据,如
    $.each( { name: “John”, lang: “JS” }, function(i, n){alert( “Name: ” + i + “, Value: ” + n ); });
    结果为:
    Name:name, Value:John
    Name:lang, Value:JS
    $.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
    如:
    $.extend(settings, options);
    //合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
    var settings = $.extend({}, defaults, options);
    //合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
    可以有多个参数(合并多项并返回)
    $.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
    如:
    var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
    tempArr内容为:[4,5,6]
    var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
    tempArr内容为:[2,3]
    $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
    如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
    $.trim(str):删除字符串两端的空白字符。
    如:$.trim(“   hello, how are you? “);//返回”hello,how are you? ”

    12、解决自定义方法或其他类库与jQuery的冲突
    很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
    使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(“#msg”)改为jQuery(“#msg”)。
    如:
    jQuery.noConflict();
    // 开始使用jQuery
    jQuery(“div p”).hide();
    // 使用其他库的 $()
    $(“content”).style.display = ‘none’;

    一些应该熟记于心的jQuery函数和技巧

    没有评论

    2010 年 09 月 19 日 at 上午 10:17分类:jQuery

    http://developer.51cto.com/art/201006/205042.htm

    http://developer.51cto.com/art/201005/202450.htm

    //jquery从入门到精通学习网站

    jQuery学习笔记

    没有评论

    2010 年 09 月 19 日 at 上午 9:32分类:jQuery

    query 学习笔记和部分实例代码,教程是《Jquery基础教程》,在VeryCD下的PDF版本。比较乱,大家将就一下
    ——————————————————————————
    筛选出可见的元素 ,.filter(“:visible”).这个选择器在hide()和show()时常用
    $(“#play_list a”).filter(“:visible”).fadeOut(500).parent().children().eq(i).fadeIn(1000);
    ——————————————————————————
    定时与取消定时
    t = setInterval(“showAuto()”, 2000);
    clearInterval(t)},
    jquery在图片联播时的
    t = setInterval(“showAuto()”, 2000);
    $(“#play”).hover(function(){clearInterval(t)}, function(){t = setInterval(“showAuto()”, 2000);});
    ——————————————————————————
    表单的确认提交
    $(“input[name='submit']“).click(
    function(){
    //这里可先插入检查内容的代码
    sure=window.confirm(‘你确定要提交吗’);
    if(sure){
    $(this).parent().submit();
    }else
    {return false;}
    });
    ——————————————————————————
    //DOM加载完后执行
    $(document).ready( )
    ——————————————————————————
    //ID下的某个子元素
    $(‘#selected-play > li’)
    选择ID为selected-play 子元素(>)中所有的列表项(li)
    没有>则选取了所有的后代元素li
    ——————————————————————————
    //ID为#zhu下的后代li元素中不属于test类的li 注意引号的位置
    $(‘#zhu li:not(.test)’).addClass(‘test2′);
    ——————————————————————————
    XPath选择符  //严重怀疑教程使用的Jquery版本过低或者错误使用方法
    这个主要是针对元素的子元素或属性来筛选元素。
    属性选择符   元素[@属性]         //选到的元素为要操作的对象
    选择所有带title属性的链接,个人怀疑不用@才是正确的。
    $(‘a[@title]‘)
    选择包含一个ol的所有div元素  //貌似也不灵。
    $(‘div[ol]‘)

    //这个很值得怀疑。@根本不用使用。使用了反而行不通
    $(‘a[@href^=”‘).addClass(‘mailto’);
    //可以使用正则表达式对属性元素筛选
    $(‘a[href^=mailto]‘).addClass(‘mailto’);
    $(‘a[href$=".pdf"]‘).addClass(‘pdf’);
    $(‘a[href*="52mtk"]‘).addClass(‘inlink’);
    ——————————————————————————
    自定义选择符
    $(‘div.horizontal:eq(1)’) /*类名为horizontal的第二个div元素*/
    $(‘a.inlink:eq(0)’).addClass(‘new’).removeClass(‘inlink’);
    $(‘li:eq(1)’).addClass(‘new’); /*所有匹配li的元素的第二项   js索引从0开始 自定义选择符*/
    $(‘div:nth-child(1)’).addClass(‘newer’); //第一个div.   CSS索引从1开始。CSS选择符
    ——————————————————————————
    :odd 奇数
    :even偶数
    第一个元素从0开始 ,其中0是偶数

    $(‘li:odd’).addClass(‘odd’);
    $(“li:even”).addClass(‘even’); //第一个li (以0开始)应用了偶数 的样式。
    ——————————————————————————
    :contains(“..”) 包含某内容

    <li>dream</li>
    //可这样得到
    $(‘li:contains(“dream”)’).addClass(‘highlight’);
    ——————————————————————————
    //注意:相同属性的最终选择与样式表中定义的顺序有关
    ——————————————————————————
    $(‘tr’).filter(‘:odd’).addClass(‘odd’); ==$(‘tr:odd).addClass(‘odd’);
    ——————————————————————————
    parent() 选择父结点。即使有多个th,但JQ不会重复给同一个父结点增加相同的类。
    $(‘th’).parent().addClass(‘class’) ;
    $(‘tr:not([th]):odd).addClass(‘class’) ;结合Xpath。注意:not([th])这个写法。
    ——————————————————————————
    next() 下一项
    $(‘td:contains(“2″)’).parent().next().addClass(‘hl2′);
    ——————————————————————————
    兄弟元素,有点问题的。。。
    sibling()
    ——————————————————————————
    查找 .find(‘element’) 排除条件.not(“:contains(‘XXX’)”)
    $(‘td:contains(“4″)’).parent().find(‘td’).not(“:contains(’4′)”).addClass(‘hl2′);
    ——————————————————————————
    get 返回一个DOM对象
    $(‘#my-element’).get(0) 可简写成$(‘#my-element’)[0]
    如下取得DOM对象标签名
    var myTag=$(‘#my-element’).get(0).tagName;
    ******************************************************************************
    事件
    $(document).ready() 一般比onload事件优越。
    但是有时可能由于支持文件未下载完,所以类似图像的宽度和高度这样的属性未必有效,这时可以利用jQuery 的load()来处理
    ——————————————————————————
    $(document).ready(function(){…});
    另一写法
    $().ready(function() { …});
    再一写法
    $(function(){…});
    但第一种最常用 。
    ——————————————————————————
    样式切换
    绑定元素到点击事件在 $().ready()中
    $(‘#id’).bind(‘click’,function(){…}); 等价于$(‘#id’).click(function(){…});
    $(this).addClass(‘myclass’);
    这里的this是一个DOM对象
    可以这样判断
    if(this.id==’large’)
    $(this).addClass(‘large’);
    ——————————————————————————
    toggle点击元素时交替执行两个函数 /接受两个参数是函数
    $(‘#hid’).toggle(function(){
    $(‘#switcher’).addClass(‘hidden’);
    this.value=’显示’;},
    function(){
    $(‘#switcher’).removeClass(‘hidden’);
    this.value=’隐藏’;
    }
    )
    也可以用toggleClass来交替使用类
    $().ready(function() {
    $(‘#hid’).click(function(){$(‘#hid’).toggleClass(‘hidden’);})
    });
    ——————————————————————————
    hover 放在元素上面的时候执行一个函数,离开时执行另一个操作,参数同toggle
    $(‘#hov’).hover(
    function() {$(this).addClass(‘hover’);
    $(‘.normal’).addClass(‘hidden’)
    },
    function(){ $(this).removeClass(‘hover’);
    $(‘.normal’).removeClass(‘hidden’);}
    );

    ——————————————————————————
    事件捕获 (从一般到具体)与事件冒泡(从具体到一般)
    DOM的标准是先从一般到具体,再通过事件冒泡返回DOM树的顶层
    事件处理程序可以注册到这个过程的任何一部分

    /*演示事件冒泡 ,点击div的后代元素也会触发该事件*/
    $(‘#switcher’).click(function(){
    $(‘p’).toggleClass(‘hidden’);
    });
    ——————————————————————————
    解决方法:加入JS的event.target与this的DOM目标元素比较
    $(‘#switcher’).click(function(event){
    if(event.target==this){
    $(‘p’).toggleClass(‘hidden’);
    }
    });
    ——————————————————————————
    方法二:event.stopPropagation();
    但还是会冒泡,无论是火狐还是IE!奇怪了。
    ——————————————————————————
    阻止默认动作
    $(“a:contains(‘link’)”).click(function(){
    return false;//相当于同时调用了.stopPropagation()和.preventDefault()
    }); //如此,点击<a href=”Xpath1.htm”>it’s a link</a><br />并不跳转了。
    ——————————————————————————
    .unbind 注意函数不加引号
    $(‘#switch’).unbind(‘click’,somefunction);
    .one方法   切换操作只会发生一次。
    toggleStylesSwitcher是事先定义的。
    $().ready(function(){
    $(‘#switcher’).one(‘click’,toggleStylesSwitcher);
    });
    ——————————————————————————
    hide方法
    $(‘#switcher’).hide();
    ——————————————————————————
    .trigger()模拟事件操作
    $().ready(function(){
    $(‘#switcher’).trigger(‘click’); //模拟点击了。触发对象的click事件
    });
    ******************************************************************************
    操作CSS
    ——————————————————————————
    .css方法 两种参数
    .css(‘property’,'value’)  //属性值对
    .css({property1: ‘value1′, ‘property2:’value2′}) //对象字面量

    ——————————————————————————
    改变字号
    $(document).ready(function() {
    $(‘#larger’).hover(function(){
    $(this).css({“cursor”:”pointer”});
    });

    $(‘#larger’).click(function(){
    var $speech=$(‘div.speech’);
    var currentSize=$speech.css(‘fontSize’);
    var num=parseFloat(currentSize); 字符串转浮点数,开头为数字,后面字符忽略
    var unit=currentSize.slice(-2); //相当于PHP的substr
    num*=1.5;
    $speech.css(‘fontSize’,num + unit);

    console.log(num);

    });
    ——————————————————————————
    一般都是通过取得一组jquery对象,通过this.id筛选
    $(document).ready(function() {
    $(‘div.button’).hover(function(){
    $(this).css({“cursor”:”pointer”});
    });

    $(‘div.button’).click(function(){
    var $speech=$(‘div.speech’);
    var currentSize=$speech.css(‘fontSize’);
    var num=parseFloat(currentSize);
    var unit=currentSize.slice(-2);
    if(this.id==’larger’){
    num*=1.5;}
    else if(this.id==’smaller’)
    {num/=1.5;}else {
    num=12;
    }

    $speech.css(‘fontSize’,num + unit);

    console.log(num);

    });

    })
    隐藏显示与动画效果:

    $(‘p:eq(1)’).hide();

    $(‘span.more’).click(function(){
    $(‘p:eq(1)’).fadeIn(‘slow’); //渐显效果

    $(this).hide();
    });

    $(‘span.less’).click(
    function(){
    //$(‘p:eq(1)’).fadeTo(‘slow’);
    $(‘p:eq(1)’).hide(‘fast’); //收缩时动画效果,不加参数则无

    $(‘span.more’).show();
    }
    );
    ——————————————————————————
    动画参数:第一个类似.css方法,第二个速度,第三个可选的缓动类型,最后一个是回调函数(可选)
    .animate({param1:’value1′,param2:’value2′}, speed,[easing] ,function(){alert(‘…’)});
    /*动画效果*/
    $(‘#moveText’).toggle(function(){

    $(‘span#animate’).animate({left:800},’slow’);
    },function(){
    $(‘span#animate’).animate({left:0},’slow’);
    });
    ——————————————————————————
    .css(‘属性’) 取得对象的CSS属性,
    $(‘div.button:eq(1)’).css(‘width’) 带有单位px
    $(‘div.button:eq(1)’).width() 这个不带px
    $(‘div.button:eq(1)’).css(‘backgroundColor’); 属性骆驼命名法,跟JS是一样的
    ——————————————————————————
    连缀的写法
    $(‘span#animate’).animate({left:0},’slow’).animate({top:0},’slow’);
    ——————————————————————————
    //$(‘span#animate’).slideUp(‘slow’);//幻灯片式向上折叠消失
    ——————————————————————————
    $(this).slideUp(‘slow’).next().slideDown(‘slow’);          //对一组元素,(这里是$(this)和$(this).next()  )如果不使用回调 函数,这两个效果是同时发生的。。。。

    ——————————————————————————
    使用回调函数安排多个元素的顺序
    var $thisPara=$(this);
    $thisPara.next().slideDown(‘slow’,function(){$thisPara.slideUp(‘slow’)});
    //第二个元素先从下切入,第一个元素再向上切出
    ——————————————————————————
    对同一个元素的不动方法如.animate后使用.css 也可以使用回调函数的做法。
    $(this).next() 这样使用后$(this)已经改变了。。。。
    为了安全使用可以var $thisPara=$(this)先
    ——————————————————————————
    DOM操作
    ******************************************************************************
    属性工具
    $(‘div.article a’).attr({‘rel’:'external’})
    ——————————————————————————
    .each的循环遍历,index是计数器,text()是链接的文本
    $(‘div.article a’).each(function(index){
    var $thisLink=$(this);
    $thisLink.attr({‘title’:'点击了解更多关于:’+$thisLink.text(),’id’:'article_’+parseInt(index+1)});
    });
    ——————————————————————————
    创建节点与加入到元素
    //before与insertBefore
    //after与insertAfter
    //append与appendTo
    //prepend…
    //区别在于连缀的元素不同。
    $(“<a href=’#top’>回到顶部</a>”).insertAfter(‘div.article p’);
    另一写法
    $(‘div.article p’).after(“<a href=’#top’>回到顶部</a>”)
    ——————————————————————————
    在其他元素中插入元素
    prependTo
    ——————————————————————————
    从第二个段落开始添加一个链接到页面顶部
    //gt ==greater than 索引从0开始。
    //lt  /less than
    //eq  /equal
    $(“<a class=’goTop’ href=’#top’ >回到顶部</a>”).insertAfter(‘div.article p:gt(1)’);
    $(“<a id=’top’></a>”).prependTo(‘body’);
    ——————————————————————————
    添加到子节点
    //append与appendTo
    添加子节点/依附到某母节点 ,顺序是按after
    //prepend与prependTo
    添加子节点/依附到某母节点 , 顺序是before
    ——————————————————————————
    这段代码表现注释的链接和反链接回去
    $(‘span.footNote’).each(function(index){
    $(this).before(‘<a href=#foot-’+parseInt(index+1)+ ‘ id=content-’+parseInt(index+1)+’><sup>’+parseInt(index+1)+’</sup></a>’)
    .appendTo(‘#notes’)
    .append(‘<a href=#content-’+parseInt(index+1)+’ id=foot-’+(index+1)+’><sup>’+'返回</sup></a>’);
    });

    $(‘a[id*="foot"]‘).each(function(index){
    $(this).click(function(){
    $(‘a#content-’+parseInt(index+1)).css(‘backgroundColor’,'blue’);
    });
    });
    ——————————————————————————
    wrap
    包装,创建一个新元素并把自己作该元素的子节点
    .wrap(‘<li id=”foot-note-’+(index+1)+’”></li>’);
    ——————————————————————————
    克隆
    .clone()
    如果只不克隆子节点,如Text Node 可加入参数false
    $(‘p:eq(0)’).clone(false);
    ——————————————————————————
    $(this).clone()
    此时操作的是clone后的结点
    ——————————————————————————
    /*引言设置*/
    $(‘span.pull-quote’).each(function(index){
    var $parentPara=$(this).parent(‘p’);
    $parentPara.css(‘position’,'relative’);
    var $clonePara=$(this).clone(false);
    $clonePara.addClass(‘pulled’).prependTo($parentPara);
    $clonePara[0].id=’quote_’+(index+1);

    });
    ——————————————————————————
    find查找后返回原对象
    $clonePara.find(‘span’).html(‘&hellip’).end()
    ——————————————————————————
    .html / .text() 修改对象的文本节点
    要移除每个匹配元素中的元素
    .empty()
    要从文档中移除每个匹配的元素及其后代元素,但并不实际删除它们
    使用
    .remove()
    ******************************************************************************
    Ajax
    ——————————————————————————
    $(‘div#test’).load() 将取得的内容直接放入元素内
    $(‘div#test’).load(‘http://localhost/11/joinarray.php’,function(){alert(‘finished’);});
    ——————————————————————————
    Json
    全局函数
    $.getJSON(json文件,回调函数)
    $.getJSON(‘../11/json.php’,function(data){
    $(‘div#test’).empty();
    $(‘div#test’).text(data.name);
    });
    ——————————————————————————
    用for …in遍历
    $.getJSON(‘../11/json.php’,function(data){
    $(‘div#test’).empty();
    var key;
    for(key in data) {
    for(key2 in data[key]){
    console.log(data[key][key2]);
    }
    }

    ——————————————————————————
    用全局函数each遍历
    $.each(data,function(entryIndex,entry){ //索引与条目,映射或数组

    var html =’<div>’;
    html+=’<div>’+entry.num+’</div>’;
    html+=’<div>’+entry.name+’</div>’;
    html+=’</div>’;
    //$(‘div.entry’).appendTo(‘#test’);
    $(‘#test’).append(html); //新创建的节点貌似多用原有节点append,用appendTo主动依附好像不行。appendTo应该多用于移动复制节点的操作
    }
    或者可以这样,用this关键字
    $each (data,function(){
    alert (this.num);

    });
    ——————————————————————————
    全局函数$.getScript(‘a.js’);
    立即加载并执行一个脚本!
    ——————————————————————————
    加载XML $.get(‘d.xml’)
    用find操作子节点
    用attr操作子节点属性
    用text()取得节点的文本
    用原有元素.append加入新元素

    /*取得XML数据*/
    $(‘#getXml’).click(function(){

    $(‘div#test’).empty();
    $.get(‘d.xml’,function(data){
    //console.log(data);
    $(data).find(‘entry’).each(function(){
    var $entry=$(this);
    var html=’<div>’;
    html+=’<h3>’+$entry.attr(‘term’)+’</h3>’;//取得属性值
    html+=’<h3>’+$entry.attr(‘part’)+’</h3>’;
    html+=’<div>’;
    html+=$entry.find(‘definition’).text();  //取得节点的文本
    var $quote=$entry.find(‘quote’);
    if($quote.length) { //判断是否存在
    html+=’<div>’;
    $quote.find(‘line’).each(function(){
    html+=’<div>’+$(this).text()+’</div>’;

    })
    }
    if ($quote.attr(‘author’)) {
    html+=’<div>’+$quote.attr(‘author’)
    +’</div>’;

    }

    html +=’</div>’;
    html +=’</div>’;
    $(‘#test’).append(html);

    });
    });
    /*遍历DOM*/

    }) ;
    ——————————————————————————
    我的实验 全局变量与未定义变量的判断和使用

    var queryId=$(this).attr(“value”);
    /*定义只有两次输入不同数字时才会进行提交*/
    if(typeof(oldId)!=”undefined” && oldId==queryId) {return false;} //其中typeof(oldId)!=”undefined”相当于php的!isset
    oldId=queryId;              //这里调用了全局变量

    ——————————————————————————
    POST与GET  //为了对付IE的缓存:多使用了一个随机参数
    gt=new Date();
    sgt=gt.getTime();
    GET:
    - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
    $(‘a.link#get’).click(function(){
    gt=new Date();
    sgt=gt.getTime();
    $.get(‘../11/testBrowser.php’,{‘phrase’:$(this).text(),’rbs’:sgt},
    function(data){
    $(‘#test’).empty();
    $(‘#test’).html(data);
    });
    return false;
    });

    POST:LOAD方法实际使用的是POST,但 更简洁
    - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
    $(‘a.link#post’).click(function(){
    /*  $.post(‘../11/testBrowser.php’,{‘phrase’:$(this).text()},
    function(data){
    $(‘#test’).empty();
    $(‘#test’).html(data);
    });*/
    /*这里的POST等价于LOAD*/
    $(‘#test’).load(‘../11/testBrowser.php’,{‘phrase’:$(this).text()});

    return false;

    });
    - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
    每隔一秒取得服务器时间 ,这里也要加参数,否则在IE有缓存问题
    但这个参数不必可变,因为是POST的
    setInterval(myTime,1000);
    function myTime(){
    /*
    $.get(‘../11/getTime.php’,function(data){
    $(‘#time’).text(data);

    });*/
    $(‘#time’).load(‘../11/getTime.php’,{‘id’:'ii’});
    //alert(‘hello’);
    return false;
    }
    ——————————————————————————
    $(‘form’).submit 方法与提交按钮的click方法效果是一样的。
    ——————————————————————————
    $(this).find(‘input’).serialize() ;注意这个序列化语句

    ——————————————————————————
    完整的序列化操作
    //序列化 ,但在处理多选项目时有些问题。
    $(“form”).submit(function(){

    if($(‘#sendMe’).val()==” || $(‘#sendPassword’).val()==”) {
    $(“#state”).html(‘<b>字段不能为空</b>’);
    // console.log($(‘input[@value=""]‘).attr(‘id’));//.focus();
    return false;
    }
    $.post(“../11/testAjax.php”,$(this).find(‘input’).serialize(),function(data){
    //判断登录是否成功
    if(data==’0′) { var html=’登陆失败,请重试’;}
    if(data==’1′) {
    var html=’登录成功,欢迎你,’+$(‘#sendMe’).val();
    //后台写入session,前台隐藏登录框
    $(‘#login’).hide();

    }

    $(‘#state’).html(html);

    });
    return false;
    });
    ——————————————————————————
    /*ajax状态控制*/
    //以下两个方法是全局的,只要页面有ajax触发,就会执行这些动作
    $(‘#state’).ajaxStart(function(){
    var loading=”<img src=’images/loading.gif’ />”;

    $(‘#state’).html(loading);

    }).ajaxStop(function(){
    var finish=’ <font color=”red”>done!</font>’

    var ok=$(‘#state’).html()+finish;
    $(‘#state’).html(ok);
    //$(‘#state’).append(finish);
    });
    ——————————————————————————
    用load处理Ajax时
    load是这样一个玩意:根据提交的内容要决定提交的方法,之前认为默认是POST的理解是错误的。
    对于json方式的数据,使用POST来提交,对于字符串或者序列化以后的数据,一般 也就是采用serialize()方法处理过的输入内容,使用的是GET方法提交.
    手册上是这样说的:
    载入远程 HTML 文件代码并插入至 DOM 中。
    默 认使用 GET 方式 – 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。
    ——————————————————————————
    用.post()提交数据,并处理返回的json格式字符串,一个重要的JS函数 eval()
    eval():把字符串语句当JS执行。。。
    注意,返回的json格式字符串并非json对象。
    $data=$(this).find(‘input’).serialize();
    $.post(‘../11/arrayPost.php’,$data,function(result){
    eval(‘var myjson=’ + result + ‘;’); //这里是关键,作用是把result从字符串转化为对象。
    console.log(myjson);//firebug测试,显示是对象
    $(‘div#result’).html(myjson.name);
    });
    ——————————————————————————
    渐显,要先使用hide方法。。
    $(‘#submit’).click(function(){
    $data=$(‘input’).serialize();
    $(‘div#feedback’).hide().load(“../11/arrayPost.php”,$data,function(){
    $(this).fadeIn(2000); //渐显,要先使用hide方法。。。

    });
    return false;
    });
    ——————————————————————————
    双触发与作用域
    $()函数的第二个参数
    $(‘h3′,scope)
    //第一个bindBehaviors绑定到document对象作用域,第二个绑定到feedback的div。
    作用域不同,如果不设定这个参数,则同为document作用域,提交表单操作后再操作先前的h3,则为执行了两次bindBehaviors,所以样式不会改变。
    $(document).ready(function() {
    var bindBehaviors=function(scope){
    $(‘h3′,scope).click(function(){$(this).hide().fadeIn(1000).toggleClass(‘customh3′);});
    }
    bindBehaviors(this);
    $(‘#submit’).click(function(){
    $data=$(‘input’).serialize();
    $(‘div#feedback’).hide().load(“../11/returnHtml.php”,$data,function(){
    $(this).fadeIn(1000); //渐显,要先使用hide方法。。。
    bindBehaviors(this);
    });
    return false;
    });

    });
    ——————————————————————————
    使用事件冒泡 解决 双触发       event.target
    is(expr)用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
    绑定到一个公共父元素。通过对事件目标的判断进行动作,效果同上
    $(‘body’).click(function(event){
    if ($(event.target).is(‘h3′) ) {
    $(event.target).toggleClass(‘customh3′);
    }
    });
    ——————————————————————————
    AJAX取得外部域数据:不使用服务器代理
    1.动态加载第三方脚本。
    $(document.createElement(‘script’))
    .attr(‘src’,'http://外部域/XXX.js).appendTo(‘head’);
    2.使用<iframe>加载第三方服务器的数据,
    这些iframe的脚本需要向文档的父对象提供数据。

    ******************************************************************************
    第七章:表格操作
    ******************************************************************************

    jQuery 写一个插件方法

    .blur()方法
    $(‘form > input[name="blur"]‘).css(‘color’,'#999999′).val(‘请输入内容’).click(function(){
    if($(this).val()==’请输入内容’)
    $(this).val(”);
    }).blur(function(){

    if($(this).val()==”) {$(this).val(‘请输入内容’);}
    //else $(this).unbind(“click”);
    });

    —————————————————————————
    未试验
    因为IE6不支持  list-style-type:upper-alpha;
    所以用JS和jquery做以下事件:
    1.浏览器/能力检测
    2.加上标志
    $(‘ul.questions’).each({ function(){
    var chars=array(‘A’,'B’,'C’,'D’,'E’,'F’);
    var $qs=$(this);
    count=$qs.find(‘li’).size();
    for(i=0;i<count;i++){
    var newText=chars+’.'+$qs.find(‘li’).eq(i).text();
    $qs.find(‘li’).eq(i).text(newText);
    }
    )

    jQuery学习笔记一

    没有评论

    2010 年 09 月 15 日 at 下午 6:37分类:jQuery

    1、内部插入:向一些元素的内部插入内容
    (1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如
    描述:
    向所有段落中追加一些HTML标记。
    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $(“p”).append(“<b>Hello</b>”);
    结果:
    [ <p>I would like to say: <b>Hello</b></p> ]

    (2)appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
    描述:
    把所有段落追加到ID值为foo的元素中。
    HTML 代码:
    <p>I would like to say: </p>
    <div></div><div></div>
    jQuery 代码:
    $(“p”).appendTo(“div”);
    结果:
    <div><p>I would like to say: </p></div>
    <div><p>I would like to say: </p></div>

    (3) prepend(content) 向每个匹配的元素内部前置内容
    描述:
    向所有段落中前置一些HTML标记代码。
    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $(“p”).prepend(“<b>Hello</b>”);
    结果:
    [ <p><b>Hello</b>I would like to say: </p> ]

    (4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
    描述:
    把所有段落追加到ID值为foo的元素中。
    HTML 代码:
    <p>I would like to say: </p><div id=”foo”></div>
    jQuery 代码:
    $(“p”).prependTo(“#foo”);
    结果:
    <div id=”foo”><p>I would like to say: </p></div>

    2、内部插入:向一些元素的外部插入内容
    (1)after(content)在每个匹配的元素之后插入内容。
    描述:
    在所有段落之后插入一些HTML标记代码。
    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $(“p”).after(“<b>Hello</b>”);
    结果:
    <p>I would like to say: </p><b>Hello</b>

    (2)before() 在每个匹配的元素之前插入内容
    描述:
    在所有段落之前插入一些HTML标记代码。
    HTML 代码:
    <p>I would like to say: </p>
    jQuery 代码:
    $(“p”).before(“<b>Hello</b>”);
    结果:
    [ <b>Hello</b><p>I would like to say: </p> ]
    (3)insertafter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    描述:
    把所有段落插入到一个元素之后。与 $(“#foo”).after(“p”)相同
    HTML 代码:
    <p>I would like to say: </p><div id=”foo”>Hello</div>
    jQuery 代码:
    $(“p”).insertAfter(“#foo”);
    结果:
    <div id=”foo”>Hello</div><p>I would like to say: </p>

    (4)insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
    描述:
    把所有段落插入到一个元素之前。与 $(“#foo”).before(“p”)相同。
    HTML 代码:
    <div id=”foo”>Hello</div><p>I would like to say: </p>
    jQuery 代码:
    $(“p”).insertBefore(“#foo”);
    结果:
    <p>I would like to say: </p><div id=”foo”>Hello</div>

    3、包裹:把一些元素包裹起来
    (1)wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来
    描述:
    把所有的段落用一个新创建的div包裹起来
    HTML 代码:
    <p>Test Paragraph.</p>
    jQuery 代码:
    $(“p”).wrap(“<div class=’wrap’></div>”);
    结果:
    <div><p>Test Paragraph.</p></div>

    (2) wrap(elem) 把所有匹配的元素用其他元素的结构化标记包装起来
    描述:
    用ID是”content”的div将每一个段落包裹起来
    HTML 代码:
    <p>Test Paragraph.</p><div id=”content”></div>
    jQuery 代码:
    $(“p”).wrap(document.getElementById(‘content’));
    结果:
    <div id=”content”><p>Test Paragraph.</p></div><div id=”content”></div>

    (3)wrapAll(html) 将所有匹配的元素用单个元素包裹起来
    描述:
    用一个生成的div将所有段落包裹起来
    HTML 代码:
    <p>Hello</p><p>cruel</p><p>World</p>
    jQuery 代码:
    $(“p”).wrapAll(“<div></div>”);
    结果:
    <div><p>Hello</p><p>cruel</p><p>World</p></div>

    (4) wrapAll(elem)将所有匹配的元素用单个元素包裹起来
    描述:
    用一个生成的div将所有段落包裹起来
    HTML 代码:
    <p>Hello</p><p>cruel</p><p>World</p>
    jQuery 代码:
    $(“p”).wrapAll(document.createElement(“div”));
    结果:
    <div><p>Hello</p><p>cruel</p><p>World</p></div>
    (5) wrapInner(html)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
    描述:
    把所有段落内的每个子内容加粗
    HTML 代码:
    <p>Hello</p><p>cruel</p><p>World</p>
    jQuery 代码:
    $(“p”).wrapInner(“<b></b>”);
    结果:
    <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
    (6) wrapInner(elem)
    描述:
    把所有段落内的每个子内容加粗
    HTML 代码:
    <p>Hello</p><p>cruel</p><p>World</p>
    jQuery 代码:
    $(“p”).wrapInner(document.createElement(“b”));
    结果:
    <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
    4、替换:用制定的元素替换一些HMTL或者DOM元素
    (1)replaceWith(content) 将所有匹配的元素替换成指定的HTML或DOM元素
    描述:
    把所有的段落标记替换成加粗的标记。
    HTML 代码:
    <p>Hello</p><p>cruel</p><p>World</p>
    jQuery 代码:
    $(“p”).replaceWith(“<b>Paragraph. </b>”);
    结果:
    <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
    (2) repalceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
    描述:
    把所有的段落标记替换成加粗标记
    HTML 代码:
    <p>Hello</p><p>cruel</p><p>World</p>
    jQuery 代码:
    $(“<b>Paragraph. </b>”).replaceAll(“p”);
    结果:
    <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

    5、删除:删除制定的元素
    (1)empty() 删除匹配的元素集合中所有的子节点。
    描述:
    把所有段落的子元素(包括文本节点)删除
    HTML 代码:
    <p>Hello, <span>Person</span> <a href=”#”>and person</a></p>
    jQuery 代码:
    $(“p”).empty();
    结果:
    <p></p>
    (2)remove([expr]) 从DOM中删除所有匹配的元素
    描述:
    从DOM中把所有段落删除
    HTML 代码:
    <p>Hello</p> how are <p>you?</p>
    jQuery 代码:
    $(“p”).remove();
    结果:
    how are
    描述:
    从DOM中把带有hello类的段落删除
    HTML 代码:
    <p>Hello</p> how are <p>you?</p>
    jQuery 代码:
    $(“p”).remove(“.hello”);
    结果:
    how are <p>you?</p>
    5、复制:克隆匹配的元素
    (1)Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
    描述:
    克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。
    HTML 代码:
    <b>Hello</b><p>, how are you?</p>
    jQuery 代码:
    $(“b”).clone().prependTo(“p”);
    结果:
    <b>Hello</b><p><b>Hello</b>, how are you?</p>

    (2) clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本

    描述:
    创建一个按钮,他可以复制自己,并且他的副本也有同样功能。
    HTML 代码:
    <button>Clone Me!</button>
    jQuery 代码:
    $(“button”).click(function(){
    $(this).clone(true).insertAfter(this);
    });
    终于整理完毕。以上内容参考与Jquery1.3中文参考。
    希望此篇对初学者有益。
    详细出处参考:http://www.jb51.net/article/18332.htm

    jQuery学习笔记二

    没有评论

    2010 年 09 月 15 日 at 下午 6:34分类:jQuery

    1、属性: 为所有匹配的元素设置一个计算的属性值

    //为所有的input添加属性class=”btn”
    //$(“input”).attr(“class”,”btn”);
    2、CSS:为每个匹配的元素添加指定的类名
    //对所有的提交按钮添加样式
    $(“input:submit”).addClass(“btn”);
    3、值:获得第一个匹配元素的当前值
    //取的某一按钮的值
    //alert($(“#Button1″).val());
    4、Html代码:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
    //输出div之间的html代码
    //alert($(“#div1″).html());

    //对Div中的html重新赋值
    //$(“#div1″).html(“<input type=’text’/>”);
    5、文本:取得所有匹配元素的内容

    结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
    //输出div之间的文本值
    //alert($(“#div1″).text());

    //对div中的文本重新赋值
    //$(“#div1″).text(“100″);

    6、 //单选按钮选中
    $(“#select1″).val(“选项2″);
    // if( $(“#select1″).val()==’选项2′)
    // {
    // alert(“你选择了选项2″);
    // }

    7、将一个或多个DOM元素转化为jQuery对象
    //设置页面背景色
    $(document.body).css(“background”,”#c0c0c0″);

    //隐藏一个表单中所有元素 【不可用】
    //$(div.elements).hide();

    8、each用法 以每一个匹配的元素作为上下文来执行一个函数
    // $(“button”).click(function () {
    // $(“div”).each(function (index, domEle) {
    // // domEle == this
    // $(domEle).css(“backgroundColor”, “yellow”);
    // if ($(this).is(“#stop”)) {
    // $(“span”).text(“Stopped at div index #” + index);
    // return false;
    // }
    // });
    // });

    9、这个函数的返回值与 jQuery 对象的’length’ 属性一致
    //button的个数
    //alert($(“input:submit”).size()+” and “+$(“input:submit”).length);

    10、 取得所有匹配的 DOM 元素集合
    //alert($(“input”).get().reverse());
    //取得其中一个匹配的元素。 num表示取得第几个匹配的元素
    //alert($(“input”).get(1));
    详细出处参考:http://www.jb51.net/article/18331.htm