JQuery中常用方法备忘

本文转载自博客园，原文地址 http://www.cnblogs.com/xzf158/archive/2008/10/14/logan.html

1.Window.onload 的JQuery方法

$(document).ready(function(){

//The Code!

})

可以简写为:

$(function(){

//The Code!

})

2.添加和去除Css类

$(function(){

$(“a.alink”).mouseover(function(){

this.addClass(“over”); //添加样式

}).mouseout(function(){

this.removeClass(“over”); //去除样式

})

})

3.动态切换样式

$funciotn(){

$(a.alink).click(function(){

This.toggleClass(“highline”); //动态切换,当有时去除,当没有时添加

})

}

4.给表格的偶数行添加样式

$(".mytable tr:even").addClass("tr1");

5.在选中元素上添加内容

如:$("p ").wrap(“<div class=’aa’></div >”);

原代码:<p>测试</p>

运行后效果: <div class=’aa’><p>测试</p></div >

6.直接获取、编辑内容

var sString = $(“p:frist”).text(); //获取第一个P标签的文本值

$(“p:last”).html(sString); //把值赋给最后一个P标签，以Html形式赋给，也就是说可以包含Html标签

7.页面元素有克隆

$(“img.eq(1)”).clone().appendTo($(“p”)); //将第一个图片克隆到所有的P标签中

8.事件的监听

$(“img”)

.bind (“click”,fnMyfun1=function(){

$(“#show”).append(“事件1”); //在id为show的标签中添加文本

})

.bind (“click”,fnMyfun2=function(){

$(“#show”).append(“事件2”);

})

.bind (“click”,fnMyfun3=function(){

$(“#show”).append(“事件3”);

}) //可以同时添加多个事件

9.移除监听的事件

$(“input(type=button)”).click(function(){

$(“img”).unbind(“click”,” fnMyfun1”); //移除事件监听fnMyfun1

})

10.JQuery制作动画与特效――元素的显示与隐藏效果

$(“img”).hide();

$(“img”).hide(3000); //设置渐隐的时间，单位毫秒

$(“img”).show ();

$(“img”).show (3000);

还有更多特效如：fadeIn() fadeout() slideUp() slideDown()

11.JQuery的功能虑数

·浏览器的检测

用$.browser方法

$.browser.verson  //获取浏览器版本号

function detect(){

if($.browser.msie)

return “IE”;

if($.browser.mozilla)

return “Mozilla”;

if($.browser.safari)

return “Safari”;

if($.browser.opera)

return “Opera”;

}

12.盒子模型类型

$.boxModel 如果是True，则是标准W3C，False则是其他。

13. $.each遍历

var aArray = [“sdf”,”dasd”,”dsa”]; //数组

$.each(aArray,function(iNum,value){

document.write(“序号：”+iNum+”  值：”+value);

});

var oObj = {one:1,two:2,three:3};

$.each(aArray,function(property,value){

document.write(“属性：”+ property +”  值：”+value);

});

14.数据过虑

var aArray = [1,3,5,6,7,8,6,8];

var aResulr = $.grep(aArray,function(){

return value > 4;  的值

});

15.数组的转换

var aArray = [“a”,”b”,”c”,”d”];

aArray = $.map(aArray,function(value,index){

return (value.toUpperCase()+index);

});

16.JQuery中使用Ajax

$(“#display”).load(“aaa.aspx”);  //display为接收数据的容器

$.get(url,[data],[callback]) //get方式

$.post(url,[data],[callback],[type]) //post方式

例：

function createQuerystring()

{

var username =  encodeURI($(“#userName”).val);
//userName为文本框的id

var password = encodeURI($(“#passWord”).val);

var queryString = {username:username, password:passWord};

return queryString;

}

$.get(“aa.aspx”, createQuerystring(), function(data){

$(“#serverResponse”).html(decodeURI(data));

});

Ajax 细节设置

$.ajax({

type : ”GET”,

url : “aa.aspx”,

data : createQuerystring(),

success : function(data){

$(“#serverResponse”).html(decodeURI(data));

}

})

Ajax全局设置

$.ajaxSetup({

url : “aa.aspx”,

data : createQuerystring(),

success : function(data){

$(“#serverResponse”).html(decodeURI(data));

}

}) //这个设置后，就成为了Ajax的默认设置