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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
prototype 学习笔记整理
Jul 17 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
使用 JavaScript 制作页面效果
Apr 21 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封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
使用正则替换变量
2007/05/05 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
jQuery设计思想
2017/03/07 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
MVVM框架下实现分页功能示例
2018/06/14 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
python实现随机密码字典生成器示例
2014/04/09 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python中str.format()详解
2017/03/12 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python之yield和Generator深入解析
2019/09/18 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python 5个顶级异步框架推荐
2020/09/09 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
中学生差生评语
2014/01/30 职场文书
校园安全检查制度
2014/02/03 职场文书
经典广告词大全
2014/03/14 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
超市督导岗位职责
2015/04/10 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Python进度条的使用
2021/05/17 Python