jquery 常用方法

jquery 常用方法

java技术 2008-11-23 08:36:47 阅读32 评论0 字号：大中小

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(){ //添加事件1

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

})

.bind (“click”,fnMyfun2=function(){//添加事件2

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

})

.bind (“click”,fnMyfun3=function(){//添加事件3

       $(“#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;  //返回大于4的值，过虑了小于等于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的默认设置