九、效果

  基本:

    1$("p").show() 显示隐藏的匹配元素

    2$("p").hide() 隐藏显示的元素

    3$("p").show("slow"); 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

      speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (Function) : (Optional) 在动画完成时执行的函数,每个元素执行一次。

   用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!

   <p style="display: none">Hello</p>

   jQuery 代码:

   $("p").show("fast",function(){

   $(this).text("Animation Done!");

   });

   4$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。

   5$("p").toggle() 切换元素的可见状态

   6$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数

淡入淡出:

1$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

2$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

3$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数

自定义:

   1$("#block").animate({

    width: "90%",

    height: "100%",

    fontSize: "20em",

    borderWidth: 10

201}, 1000 );用于创建自定义动画的函数。

十、事件

   事件处理:

   1$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数

   2$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候,显示所有其文本

   3trigger(type,[data])在每一个匹配的元素上触发某类事件

事件委派:$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。与bind()不同的是,live()一次只能绑定一个事件

事件切换:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

   $("td").hover(

function () {

    $(this).addClass("hover");

},

function () {

    $(this).removeClass("hover");

}

);鼠标悬停的表格加上特定的类

 

4、每次点击后依次调用函数。

$("td").toggle(

function () {

    $(this).addClass("selected");

},

function () {

   $(this).removeClass("selected");

}

);

5、事件:

   1$("p").blur(); 触发每一个匹配元素的blur事件

   2$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数

   3change()change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触

   4change(fn);在每一个匹配元素的change事件中绑定一个处理函数。

   5$("p").click(); 触发每一个匹配元素的click事件

   6$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数

   7dblclick()dblclick事件会在元素的同一点双击时触发。

   8$("p").dblclick( function () { alert("Hello World!"); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。

   9$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。

   10$("input[type=text]").focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。

   11keydown()keydown事件会在键盘按下时触发。

   12keydown(fn);在每一个匹配元素的keydown事件中绑定一个处理函数。

   13keypress();触发每一个匹配元素的keypress事件

   14keypress(fn);在每一个匹配元素的keypress事件中绑定一个处理函数。

   15keyup();触发每一个匹配元素的keyup事件

   16keyup(fn);在每一个匹配元素的keyup事件中绑定一个处理函数。

   17mousedown();

   18mouseup();

   19mousemove();

   20mouseover();

   21mouseout();

   22$("form:first").submit();提交本页的第一个表单。

   23$("form").submit(function(){return false;});阻止页面提交。

十一、ajax

      ajax请求:

       1、通有方式:$.ajax(prop);prop是一个hash表,它可以传递的key/value有以下几种:

         (String)type:数据传递方式(getpost)

         ((String)url:数据请求页面的url

         ((String)data:传递数据的参数字符串,只适合post方式

         ((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script", "json")

         ((Boolean)ifModified 当最后一次请求的相应有变化是才成功返回,默认值是false

         ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout

         ((Boolean)global:是否为当前请求触发ajax全局事件,默认为true

         ((Function)error:当请求失败时触发的函数。

         ((Function)success:当请求成功时触发函数

         ((Function)complete:当请求完成后出发函数

     

      2$.get(url, params, callback) get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!

         eg:$.get(   "ajax.asp",

            { name: "young", age: "25" },

            function(data){ alert("Data Loaded: " + data); }

          )

      3$.getJSON(url, params, callback) get方式向远程json对象传递参数,请求完成后处理函数callback

      4$.post(url, params, callback) post方式向远程页面传递参数,请求完成后处理函数callback

十二、工具类

数组和对象操作:

     1$.each(obj,callback); 通用例遍方法,可用于例遍对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。

       $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});

     2jQuery.grep(array,callback,[invert]);使用过滤函数过滤数组元素,此函数至少传递两个参数:待过滤数组和过滤函数

     3$.map(array,callback);将一个数组中的元素转换到另一个数组中

     4$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),0开始。

     5$.merge( [0,1,2], [2,3,4] ) ;合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素,不去掉重复项。

     6$.unique(array);删除数组中重复元素

     7$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格

     8$.isArray(obj);测试对象是否为数组。

     9$.isFunction(obj); 测试对象是否为函数

   URL:

   1$.param(obj);将表单元素数组或者对象序列化。是.serialize()的核心方法。

     eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);

   2$("form").serialize() ;序列表单内容为字符串,用于 Ajax 请求

十三、jquery操作单选框

   if($("input[type='radio']:checked")){

     var tt=$("input[name='chk']:checked").val();

}

十四、jquery操作复选框

    var chkArr="";

$(".cc:checked").each(function(){

       chkArr+=$(this).val()+"|";

});

1

十五、jquery实现复选框全选

   var checked=$("#allchk").attr("checked");

$(".ww").each(function(){

   if($(this).attr("checked")!=checked){$(this).click();}

});