jQuery 学习 几种常用方法


Posted in Javascript onJune 11, 2009

jQuery事件处理

ready(fn)

代码:

$(document).ready(function(){// Your code here...});

作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码:

$("p").bind("click", function(){alert( $(this).text() );});

作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)

代码:

$("td").toggle(function () {$(this).addClass("selected");},function () {$(this).removeClass("selected");});

作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)

jQuery外观效果

addClass(class)和removeClass(class)

代码:

$(".stripe tr").mouseover(function(){  $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");})});

也可以写成:

$(".stripe tr").mouseover(function() { $(this).addClass("over") });$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码

css(name,value)

代码:

$("p").css("color","red");

作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码:

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])

作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。

查找筛选

map(callback)

HTML 代码:

Values:  http://ejohn.org/%22/

jQuery 代码:

$("p").append( $("input").map(function(){return $(this).val();}).get().join(", ") );

结果:

[ John, password, http://ejohn.org/%3C/p> ]

作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

Hello, how are you?jQuery 代码: $("p").find("span") 结果: [ Hello ]

作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)

HTML 代码:

jQuery 代码:
$("img").attr("src","test.jpg");

作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)

HTML 代码:

Hello

jQuery 代码:

$("div").html();

结果:

Hello

作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html) HTML 代码: Test Paragraph. jQuery 代码: $("p").wrap(" "); 结果: Test Paragraph.

作用:把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()

HTML 代码:

Hello, Person and person

jQuery 代码:

$("p").empty();

结果:

作用:删除匹配的元素集合中所有的子节点。

Ajax处理

load(url,[data],[callback])

url (String) : 待装入 HTML 网页网址。

data (Map) : (可选) 发送至服务器的 key/value 数据。

callback (Callback) : (可选) 载入成功时回调函数。

代码:

$("#feeds").load("feeds.aspx", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});

作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()

HTML 代码:

Results:

    Single    Single2     Multiple    Multiple2    Multiple3  check1 check2 radio1 radio2

jQuery 代码:

$("#results").append( "" + $("form").serialize() + "" );

作用:序列化表格内容为字符串。用于 Ajax 请求。

工具

jQuery.each(obj,callback)

代码:

$.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});//遍历数组$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name: " + i + ", Value: " + n );//遍历对象});

作用:通用例遍方法,可用于例遍对象和数组。

jQuery.makeArray(obj)

HTML 代码:

FirstSecond Third Fourth

jQuery 代码:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

结果:

Fourth

Third

Second

First

作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)

作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。

小结:在实际的开发中我们可能会用到其他的方法和属性,以上只是个人认为新手初学jQuery时,必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

Javascript 相关文章推荐
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
javascript 冒号 使用说明
Jun 06 #Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 #Javascript
Firefox outerHTML实现代码
Jun 04 #Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 #Javascript
js 鼠标点击事件及其它捕获
Jun 04 #Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 #Javascript
javascript globalStorage类代码
Jun 04 #Javascript
You might like
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python实现rest请求api示例
2014/04/22 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python文字转语音的实例代码分析
2019/11/12 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
如何理解python面向对象编程
2020/06/01 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
拓展策划方案
2014/06/03 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
拆迁委托协议书
2014/09/15 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
小学教师求职信范文
2015/03/20 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers