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 相关文章推荐
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
May 15 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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实现的下载css文件中的图片的代码
2010/02/08 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js实现日期级联效果
2014/01/23 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python 处理数据的实例详解
2017/08/10 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
山楂树之恋观后感
2015/06/11 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书