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获取图片大小的函数代码
Sep 20 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
Augularjs-起步详解
2016/07/08 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
python基础知识小结之集合
2015/11/25 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
django中间键重定向实例方法
2019/11/10 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
办公室前台岗位职责范本
2013/12/10 职场文书
文明寄语大全
2014/04/11 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
vue使用echarts实现折线图
2022/03/21 Vue.js
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python