首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQuery中常用方法备忘

JQuery中常用方法备忘

作者头像
乔达摩@嘿
发布2020-09-11 15:39:43
1.3K0
发布2020-09-11 15:39:43
举报
文章被收录于专栏:嘿dotNet嘿dotNet

本文转载自博客园,原文地址 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(){ //添加事件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的默认设置

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-03-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档