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 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
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
用来给图片加水印的PHP类
2008/04/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python入门篇之正则表达式
2014/10/20 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
python解包概念及实例
2021/02/17 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
2014年大班元旦活动方案
2014/02/26 职场文书
房地产广告策划方案
2014/05/15 职场文书
物理课外活动总结
2014/08/27 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
合作协议书范本
2014/10/25 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书