云梦博客

淡泊以明志 宁静以致远

//资讯向上滚动轮换

function AutoScroll(obj) {

$(obj).find(“ul:first”).animate({

marginTop: “-30px”

}, 500, function () {

$(this).css({ marginTop: “0px” }).find(“li:first”).appendTo(this);

});

}

$(document).ready(function () {

setInterval(‘AutoScroll(“#gdnotice-link”)’, 3000)

});

说到延时，离不开window下的setTimeout方法，本实例的jQuery方法的核心也是setTimeout。代码不长，完整如下：

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            hoverEvent: function(){
                $.noop();
            },
            outEvent: function(){
                $.noop();
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
            $(this).hover(function(){
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(sets.outEvent, sets.outDuring);
            });
        });
    }
})(jQuery);

这段代码的目的在于让鼠标经过事件和延时分离的出来，延时以及延迟的清除都已经由此方法解决了。您所要做的，就是设定延时的时间大小，以及相应的鼠标经过或是移除事件即可。举个简单的例子吧，如下代码：

$("#test").hoverDelay({
    hoverEvent: function(){
        alert("经过我！");
    }
});

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我！”文字字样的弹出框。

Jquery

1. . 开始：
   $(document).ready(function() {}); 可缩写成：$(function(){});
2. 选择器：引号中可以有多个一起选择
   

   $(“#id”)要求id唯一
   $(“.class”) class名对应的元素
   $(“HTML标签”)所有标签元素对象
   $(“*”)所有元素
   $(“a b”)a元素下的所有子孙b元素
   $(“a>b”)a元素下的所有子b元素
   $(“a+b”)a元素后的下一个b元素 等价于 $(“a”).next(“b”);
   $(“a~b”)a元素后的所有b元素 等价于 $(“a”).nextAll(“b”);
   $(“#a”).siblings(“div”)#a元素的所有同辈div元素

3. 过滤选择器：
   

   :first 第一个元素
   :last 最后一个元素
   :not(selector) 除selector选择器对应的之外的所有元素
   :even 索引为偶数的所有元素（索引从0开始）
   dd 索引为奇数的所有元素
   :eq(index) 索引等于index的元素
   :gt(index) 索引大于index的元素
   :lt(index) 索引小于index的元素
   :header 所有标题元素(h1~h6)
   :animated 正在执行动画的所有元素
   :contains(text) 含有文本内容为text的元素
   :empty 不包含子元素或文本的空元素
   :has(selector) 含有selector选择器所匹配的元素的元素
   :parent 含有子元素或者文本的元素
   :hidden 所有不可见元素
   :visible 所有可见元素

4. 属性过滤选择器：多个可合并
   

   [att] 拥有此属性的元素
   [att=val] 属性值为val的元素
   [att!=val] 属性值不等于val的元素
   [att^=val] 属性值以val开始的元素
   [att$=val] 属性值以val结束的元素
   [att*=val] 属性值含有val的元素

5. 子元素过滤选择器
   

   :nth-child(index/even/odd/equation)每个父元素下的第index个子元素或者奇偶元素index从1开始也可以是2n…代表2的倍数
   :first-child每个父元素的第一个子元素
   :last-child每个父元素的最后一个子元素
   nly-child每个父元素中只有一个子元素的子元素

6. 表单对象属性过滤选择器
   

   :enabled 所有可用元素
   :disabled 所有不可用元素
   :checked 所有选中元素（单选、复选）
   :selected 所有选中元素（下拉列表）

7. 表单选择器
   

   :input 所有imput，textarea，select，button
   :text 所有单行文本框
   :password 所有密码框
   :radio 所有单选框
   :checkbox 所有多选框
   :submit 所有提交按钮
   :image 所有图像按钮
   :reset 所有重置按钮
   :button 所有按钮
   :file 所有上传域
   :hidden 所有不可见元素

8. Object.filter(exp)筛选出与exp匹配的元素集合。exp可以是多个选择器的组合
9. 交互处理: 两个function中来回切换调用
   

   Object.hover(enter,leave):鼠标移上，移出事件
   Object.toggle(fn1,fn2,…fnN):多次点击事件
   例如：Object.toggle(function(){
   //显示元素代码
   },function(){
   //隐藏元素代码
   })

10. 交互使用class样式：Object.toggleClass(“className”)重复交替使用class
11. Object.show([time]) time ms时间显示Object对应的元素(宽高和透明度同时)
    

    Object.hide([time]) time ms时间隐藏Ojbect对应的元素(宽高和透明度同时)
    若无时间则瞬间
    Object.fadeIn();增加不透明度使显示，只改变元素的不透明度
    Object.fadeOut();降低不透明度
    Object.slideUp();元素由下到上缩短隐藏
    Object.slideDown();元素由上至下延伸显示
    都可以指定三种参数：”slow”,”normal”,”fast”分别是600,400,200ms，都可以设定一个回调函数
    自定义动画：Object.animate(params,speed[,callback]);params:key/val的键值对，speed:速度，callback:动画完成执行函数.例如：$(“div”).animate({left:”+=500px”},3000);3s内向右移动500px.其中的值可以是数字，+=代码原来基础上向右500，也可以-=，也可500px
    控制滚动条用scrollTop属性
    停止动画：stop([clearQueue][,gotoEnd]),两参数都可选同为boolean值，第一个代表是否清空未执行完的动画队列，第二个代表是否直接将正在执行的动画跳转到末状态。默认都为false
    判断元素是否正处于动画状态：Object.is(“:animated”)
    Object.toggle();交替显示/隐藏元素(可见性)。
    Object.slideToggle();交替显示/隐藏元素(元素高度)。
    Object.fadeTo();交替显示/隐藏元素(元素不透明度)。可含参数：时间，不透明度

12. var $XXX = jQuery对象 var XXX=DOM对象
    

    13. jQuery对象和DOM对象间方法不可混用，可将jQuery对象转换成DOM对象后使用原本DOM对象的方法：$XXX[0]或者$XXX.get(0);将DOM对象转换成jQuery对象：var $XXX = $(XXX)，可将XXX的DOM对象转换成jQuery对象
    14. 判断复选框是否选中：$XXX.is(“:checked”)

13. 解决和其他js框架的冲突：
    

    ① 后导入jQuery库
    一开始调用方法：jQuery.noConflict();
    使用：其他的可以用$，jQuery的只能用jQuery(“…”)
    或者开始定义：var $j = jQuery.noConflict();然后其他的用$，jQuery的用$j(“…”)
    共同使用$：
    jQuery.noConflict();
    (function($){
    $(function(){
    //jQuery代码可以使用$(“…”)
    });
    })(jQuery);
    //其他js框架使用$(“…”)
    ② 先导入jQuery库：不需要调用jQuery.noConflict();其他一样使用

14. 判断元素是否存在：
    

    if($(“#id”).length > 0) 或者if($(“#id”)[0]) 而不能用if($(“#id”))

15. 获取对象的属性：Object.attr(“属性的key”)
    

    设置对象的属性：Object.attr(“属性的key”,”属性的val”)或者Object.attr({key:val,key:val…})
    删除对象的属性：Object.removeAttr(“属性的key”)

16. 追加样式：Object.addClass();
    

    修改样式：可用attr来做
    移除样式：Object.removeClass();多个之间用空格分隔

17. 创建HTML,DOM：$(“HTML标签”)例创建一个li：var $li1=$(“<li></li>”)
18. 添加节点：
    

    Object.append(Object2);在Object中追加Object2。例$(“ul”).append($li1);
    Object.appendTo(Object2); 与上一个相反，将Object追加到Object2中。$li1.appendTo(“ul”)
    Object.prepend(Object2);在Object前追加Object2。
    Object.prependTo(Object2);与上一个相反
    Object.after(Object2);在Object后增加Object节点。
    Object.insertAfter(Object2); 与上一个相反
    Object.before(Object2); 在Object前增加Object节点。
    Object.insertBefore(Object2); 与上一个相反

19. 删除节点：
    

    Object.remove();删除Object匹配的节点（包括其子孙后代），返回值为该被删除的Object
    Object.empty();删除Object的子孙后代节点并将自身的内容清空

20. 复制节点：
    

    Object.clone();得到一个Object节点
    Object.clone(true);得到一个Object节点且该节点（包含原有绑定的所有事件）

21. 替换节点：
    

    Object.replaceWith(Object2);用Object2替换所有Object匹配的节点
    Object.replaceAll(Object2);与上一个相反
    注：原来节点所绑定的事件都没有了，需要重新绑定。

22. 包裹节点：
    

    Object.wrap(Object2);用Object2把Object元素包裹起来。例$(“li”).wrap(“<ul></ul>”)结果为：<ul><li></li></ul><ul><li></li></ul>
    Object.wrapAll(Object2);将Object2所有元素用一个Object包裹起来。例$(“li”).wrapAll(“<ul></ul>”)结果为：<ul><li></li><li></li></ul>。若Object中隔有其他元素则将其他元素放在整体之后显示
    Object.wrapInner(Object2);用Object2包裹Object元素里面的内容

23. 点击事件：Object.click(function(){…})
24. 鼠标移上去事件：Object.hover(function(){…})
25. 增加样式：Object.addClass(“className”)
26. 删除样式：Object.removeClass(“className”)
27. 判断是否有某个样式：Object.hasClass(“className”)
28. 文档中ID为list下的列表项：$(“#list > li”)
29. 文档中ID为list下的最后一个列表项：$(“#list li:last”)
30. 获取对象的HTML代码：Object.html();设置对象的HTML代码：Object.html(“HTML代码”)
31. 获取对象的文本内容：Object.text();设置对象的文本内容：Object.text(“文本内容”);
32. 获取/设置对象的值：Object.val();
    

    若对象是下拉框/单复选框：单复选框只匹配value
    O.val(“值”)：从最后一个选项倒着读取选项，选项中value或text任意一个匹配则选中
    多选：O.val([“值1”,”值2”,…])

33. 当前对象的默认值：Object.defaultValue;
34. 遍历节点：
    

    匹配元素的子元素集合：Objecet.children();
    匹配元素后面紧邻的同辈元素：Object.next();
    匹配元素前面紧邻的同辈元素：Object.prev();
    匹配元素的所有同辈元素：Object.siblings();
    Object.closest():匹配最近的匹配元素：若当前元素匹配则返回当前元素，否则向上查找父元素，逐级向上知道找到匹配元素，若全无则返回一个空jQuery对象

35. 获取对象的CSS：Object.css(“css的key”)
    

    设置对象的CSS：Object.css(“css的key”,”css的val”)多个用json数组
    获取元素在当前视窗的相对偏移量（只对可见元素有效）：Object.offset();返回的对象含有top和left两属性
    获取元素相对于最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移：Object.position();返回的对象含有top和left两属性
    获取元素的滚动条距顶端和左侧的距离：Object.scrollTop();Object.scrollLeft();若有int型参数则控制滚动条到指定位置

36. 对象绑定事件：Object.bind(type[,data],fn);第一个为事件类型(如click等，就是js的事件去了on)也可以自定义类型，第二个作为event.data属性值传递给事件对象的额外数据对象，第三个为处理函数。等价于Object.事件类型(function(){});
    

    取消事件绑定：Object.unbind([type][,data]);第一个为事件类型，第二个是将要移除的函数，若无参数则删除所有事件
    只执行一次就删除的事件：Object.one(type[,data],fn);
    模拟触发事件：Object.trigger(type[,data]);系统定义事件可以：Object.事件();例：$(“#btn”).click();data是数组的参数，赋值给事件的fn:function(event,data…).若是流量器默认事件则用Object.triggerHandler(type[,data])则只触发绑定的事件

     

     

     

     

     

     

37. 停止事件的冒泡处理：event.stopPropagation();绑定事件时的fn需要一个参数event
    

    阻止元素的默认行为(如表单提交，连接跳转)：event.preventDefault();
    也可以用return false来取代上面两个或一个
    得到事件类型:event.type;
    触发事件的元素：event.target;
    触发事件的相关元素：event.relatedTarget;
    获取光标相对于页面的x/y坐标：event.pageX/event.pageY
    获取鼠标的左中右键：event.which;(1/2/3?左/中/右)
    键盘中Ctrl按键：event.metaKey;
    指向原始事件对象：event.originalEvent
    事件命名空间：事件名.命名空间名;例如：click.a
    同名不同命名空间下的方法trigger时事件名后加！则代表匹配所有不包含命名空间中的事件，不加！则匹配所有绑定的事件

38. Object.slice(n);截取Object，n为负数则是从倒数第|n|个开始截取

39. $(“#list”).find(“li”).each(function(i) {
    $(this).html( $(this).html() + ” BAM! ” + i );
    });
    $(“#list).find(“li”) == $(“#list li”)

40. ID为form1的表单reset：$(“#form1″)[0].reset()
41. 所有表单reset：$(“form”).each(function() {
    this.reset();
    });
42. 设置css：Object.css(“border”,”1px solid black”);
43. 选择了所有的li元素，然后去除了有ul子元素的li元素:
    $(“li”).not(“:has(ul)”)
    $(“li”).not(“[ul]“)
44. 选择所有的带有name属性的链接: $(“a[name]“)
45. 选择一个有特点href属性的链接: $(“a[href*=http://www.jshuwei.org.cn]“)
46. 问答模式（点击收缩）：
    

    $(/”#faq/”).find(/”dd/”).hide().end().find(/”dt/”).click(function() {
    var answer = $(this).next();
    if (answer.is(/”:visible/”)) {
    answer.slideUp();
    } else {
    answer.slideDown();
    }
    });
    <dl id=”faq”>
    <dt>q1.……?</dt>
    <dd>a1.…….</dd>
    <dt>q2.……?</dt>
    <dd>a2.…….</dd>
    </dl>

47. 每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后执行一次:
    

    $(function() {
    var addClickHandlers = function() {
    $(“a.clickMeToLoadContent”).click(function() {
    $(“#target”).load(this.href, addClickHandlers);
    });
    };
    addClickHandlers();
    });

48. 得到复选框：$(/”input:checkbox/”)
49. $each(数组/对象,function(key/index,value){…})遍历数组或对象,return false即可退出循环
50. Ajax
    

     

    1. Object.load(url[,data][,callback]):载入远程HTML代码并插入DOM中，并且当前DOM中定义的文档样式可直接应用到载入的HTML代码上
       url:String,请求的URL，同时可以指定选择器加载其中的部分内容。格式为：url selector
       data:Object,发送至服务器的key/value数据
       callback:Function,回调函数，无论请求是否成功:function(responseText, textStatus,XMLHttpRequest){}参数分别为：请求返回的内容，请求状态(success,error,notmodified,timeout)，XMLHttpRequest对象
    2. $.get(url[,data][,callback][,type])
       url:String,请求的URL
       data:Object,发送至服务器的key/value数据
       callback:Function,回调函数，只当成功时回调:function(data,textStatus){}参数分别为：请求返回的内容，请求状态(同上)
       type:String,服务器返回内容的格式(xml,html,script,json,text,_default)
    3. $.post(url[,data][,callback][,type])同$.get()
    4. $.getScript(js_url[,function(){…}])加载js文件并且自动执行
    5. $.getJSON(json_url,function(data){…})加载json文件，data为返回的数据
    6. $.ajax(options):options是以key/value形式的一串参数
       url:String,默认为当前页地址，发送请求的地址
       type:String,请求方式(GET/POST,默认为GET。PUT/Delete也可以使用，但不一定支持)
       timeout:Number,请求超时时间(ms).将覆盖$.ajaxSetup()方法的全局设置
       data:Object/String,参数数据(url形式或Object形式)
       dataType:String,预期服务器返回的数据类型(xml/html/script/json/jsonp/text)。
       beforeSend:Function,发送请求前处理函数。function(XMLHttpRequest){this;//调用本次请求的options参数}
       complete:Function,请求完成后回调函数(无论成功失败)。function(XMLHttpRequest,textStatus){ this;//调用本次请求的options参数}
       success:Function,请求成功后回调函数。function(data,textStatus){this; //调用本次请求的options参数}
       error:Function,请求失败后回调函数。function(XMLHttpRequest,textStatus,errorThrown){//通常后两个参数只有一个含有信息。this; //调用本次请求的options参数}
       global:Boolean,是否触发全局Ajax事件(true/false:触发/不触发，默认为true).

     

51. Object.serialize();将对象的值序列化成字符串，表单中可以$(“#form1”).serialize();即可作为$.get()的data参数传递值
52. Object.serializeArray();将对象的值序列化成json格式的数据
53. $.param(Object/Array);将对象或数组按照key/value进行序列化
54. Ajax全局事件：
    

    1) ajaxStart():Ajax请求开始时触发
    2) ajaxStop():Ajax请求结束后触发
    3) ajaxComplete():Ajax请求完成时执行的函数
    4) ajaxError():Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
    5) ajaxSend():Ajax请求发送前执行的函数
    6) ajaxSuccess():Ajax请求成功时执行的函数
    $(“#loading”).ajaxStart(function(){
    $(this).show();
    }).ajaxStop(function(){
    $(this).hide();
    });//所有Ajax请求在请求阶段都会显示id为loading的元素

55. $(“status”,xml):在xml文档中查找status标签。.text()获取标签的值
56. jQuery插件：：
    

     

    1. Validation表单验证(提示信息全是英文，若要中文则引入脚本库：jquery.validate.messages_cn.js)
       方法一：
       1. 引入jquery.validate.js脚本库
       2. $(“#form1”).validate();
       3. 字段设置class=”…”.(…为验证规则如：required/email/url等)
       4. 长度验证设置字段的minlength,maxlength属性
       方法二：
       1. 引入jquery.validate.js及jquery.metadata.js脚本库
       2. $(“#form1”).validate({meta:”validate”});
       3. 字段设置class=”{validate:{…}}”.(…为key:value对，多个用”,”分隔)
       方法三：
       1. 引入jquery.validate.js脚本库
       2. 字段都定义一个name属性
       3. $(“#form1”).validate({
       rules:{
       name1:{
       required:true,
       minlength:2
       }
       [,name2:{…}]
       }
       })
       自定义提示消息：
       class=”{validate:{required:true,minlength:2,messages:{required:’请输入用户名’,minlength:’请至少输入两个字符’}}}”
       提示消息美化：
       1. css部分em.error{…} em.success{…}
       2. jQuery部分(与rules并列)
       errorElement:”em”,//同css中定义的一样
       success:function(label){ //label指向上面那个错误提示信息标签em
       label. addClass(“success”);
       }
    2. 自定义验证规则
       1. $validator.addMethod(
       “formula”,//验证方法名称
       function(value,element,param){//验证规则
       return value == eval(param);
       },
       “请正确输入验证信息”//验证提示信息
       );
       2. 调用的时候：name1:{formula:”7+9”}
    3. Form表单插件(使表单模拟ajax提交)
       1. 引入jquery.form.js脚本库
       2. $(“#form1”).ajaxForm(function(){…});或者
       $(“#form1”).submit(function(){
       $(this).ajaxSubmit(function(){…});
       return false;
       });
       参数可以不紧紧是一个回调函数，可以是一个对象：
       {target:”id”,//服务器返回的内容放入id的元素中
       beforeSubmit:Fn1,//提交前回调函数
       success:Fn2,//提交后的回调函数
       url:url,//默认是form的action,若写则会覆盖action的
       type:type,//默认是form的method, 若写则会覆盖action的
       dataType:dt,//接受服务器返回的类型：xml/script/json
       clearForm:Boolean,//成功提交后，是否清楚所有表单元素的值
       resetForm:Boolean,//成功提交后，是否重置所有表单元素的值
       timeout:time//限制请求超时时间，单位ms
       }
       提交前回调函数(Fn1)：function(formData,jqForm,options){
       formData//数组对象(提交的表单数据,可以用$.param(formData)将其转换成字符串)
       jqForm//一个jQuery对象，封装了表单的元素
       options//构造时的ajaxForm/ajaxSubmit参数
       return flase时表单不提交可用作表单验证
       }
       提交后回调函数(Fn2)：function(responseText,statusText){
       statusText//请求的状态(success/error……)
       responseText//请求返回的内容
       }
    4. livequery动态绑定事件插件(可以给元素绑定事件同时包括后来动态加载进来的元素)
       1. 引入jquery.livequery.js脚本库
       2. Object.livequery(“事件名称”,function(){…})
    5. Cookie插件
       写入cookie：$.cookie(“name”,”val”[,opts]);
       读取cookie：$cookie(“name”);
       删除cookie：$cookie(“name”,null);
       opts:
       {
       expires:Number/Date //(number天)有效期
       path:String //cookie的路径，默认是创建该Cookie的页面路径
       domain:String //cookie的域名，默认是创建该Cookie的页面域名
       secure:Boolean //true则该Cookie的传输要求一个安全协议(如https)
       }

     

57. web site: ：
    

    http://interface.eyecon.ro/
    http://visualjquery.com/

    http://jquery.com