《jQuery常见操作实现和常用函数方法总结》由会员分享，可在线阅读，更多相关《jQuery常见操作实现和常用函数方法总结（9页珍藏版）》请在金锄头文库上搜索。
1、一个优秀的 JavaScript 框架，一篇 jQuery 常用方法及函数的文章留存备忘。jQuery 常见操作实现方式$(标签名) /取html元素 document.getElementsByTagName()$(#ID) /取单个控件document.getElementById()$(div #ID) /取某个控件中 控件$(#ID #ID) / 通过控件ID取其中的控件$(标签.class样式名) /通过class来取控件$(#ID).val(); /取value值$(#ID).val(); /赋值$(#ID).hide(); /隐藏$(#ID).show(); /显示$(#ID).
2、text(); /相当于取innerHTML$(#ID).text(); /相当于innerHTML=$(#ID).css(属性,值) /添加CSS样式$(form#表单id).find(#所找控件id).end() /遍历表单$(#ID).load(*.html) /载入一个文件例如：$(form#frmMain).find(#ne).css(border, 1px solid #0f0).end() / end()返回表单.find(#chenes).css(border-top,3px dotted #00f).end()$.ajax( url: Result.aspx, /数据请求页面
3、的urltype:get, /数据传递方式(get或post)dataType:html, /期待数据返回的数据格式(例如 xml, html, script,或 json)data: chen=h, /传递数据的参数字符串，只适合get方式timeout:3000, /设置时间延迟请求的时间success:function(msg)/当请求成功时触发函数$(#stats).text(msg);,error:function(msg) /当请求失败时触发的函数$(#stats).text(msg););$(document).ready(function();$(#description).m
4、ouseover(function();/ajax方法$.get( Result.aspx, /数据请求页面的url chen: 测试,age:25, /传递数据的参数字符串function(data) alert(Data Loaded: + data); /触发后的函数);););/取得下拉选单的选取值$(#testSelect option:selected).text(); /取文本值或$(#testSelect).find(option:selected).text();或$(#testSelect).val();jQuery中常用的函数方法总结事件处理ready(fn)代码：$(d
5、ocument).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 () $(
6、this).addClass(selected);,function () $(this).removeClass(selected););作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)外观效果addClass(class)和removeClass(class)代码：$(.stripe tr).mouseover(function() $(this).
7、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);作用：很简单，就是在匹配的元素中，设置一个
8、样式属性的值。这个个人感觉和上面的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)以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发
9、一个回调函数。animate(params,duration,easing,callback)作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。查找筛选map(callback)HTML 代码:Values: jQuery 代码:$(p).append( $(input).map(function()return $(this).val();).get().join(, ) );结果: John, password, http:/ 作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用$.m
10、ap()来方便的建立。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 代
11、码:HellojQuery 代码:$(div).html();结果:Hello作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。wrap(html)HTML 代码:Test Paragraph.jQuery 代码:$(p).wrap();结果:Test Paragraph.作用：把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。empty()HTML 代码:H
12、ello, Person and personjQuery 代码:$(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: SingleSingle2select name=multiple multiple=multi
