JQuery-学习总结及实例

JQuery-学习总结及实例

ID:32527827

大小:78.79 KB

页数:44页

时间:2019-02-11

JQuery-学习总结及实例_第1页
JQuery-学习总结及实例_第2页
JQuery-学习总结及实例_第3页
JQuery-学习总结及实例_第4页
JQuery-学习总结及实例_第5页
资源描述:

《JQuery-学习总结及实例》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、JQuery学习总结及实例1、JQuery简介   普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库,比如Prototype、Dojo、ExtJS、JQuery等,这些库对JavaScript进行了封装,简化了开发。这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQuery内部这句函数帮我们调用JavaScript中的代码几十句,因为JQuery就是JavaScript

2、语法写的一些函数类,内部仍然是调用JavaScript实现的,所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术,Jquery本身就是一堆JavaScript函数。       (1、Jquery是最火的JavaScript库,已集成到VS2010,MS的Ajaxtoolkit和JQuery结合也是最方便,JQuery的扩展插件也是非常多。      (2、JQuery的优点:尺寸小、使用简单方便(WriteLess,DoMor

3、e,吃得少干得多。           链式编程($("#div1").draggble().show().hide().fly())、           隐式迭代  (自动对于多个元素进行迭代方法调用))、          屏蔽浏览器差异跨浏览器兼容性好(IE6.0+,FF2+,Safari3.0+,Opera9.0+,Chrome)、插件丰富、 开源、免费。      (3、VS中JavaScript、JQuery的自动完成功能:在VS2010中直接有,VS008需要安装VisualStudi

4、o和VS90SP1-KB958502-x86补丁会更强更好用,下          载地址见备注。然后引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放到同目录下,不需要在页面引用。      (4、vsdoc是vs2008sp1以后增加的一个技术,将js文件对应的vsdoc(相当于js库提供的方法的说明库)放到和js一起,就有会第三方js的自动提示的功能 2、简单的JQuery之Ready    (1、注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样

5、的事件。$(document).ready(function(){           alert("加载完毕!");       });(2、当页面Dom元素加载完毕时执行代码,可以简写为:        $(function(){           alert("加载完毕!");      });   (3、和onload类似,但是onload只能注册一次(没有C#中的+=机制),后注册的取代先注册的,而ready则可以多次注册都会被执行。          window.onload=func

6、tion(){alert("1")};window.onload=function(){alert("2")};//结果只弹出2   (4、JQuery的ready和Dom的onload的区别(*):onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发,而ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。      $(function(){alert("1111")

7、;});//简写方式 3、JQuery的函数   $.map(array,fu)得到函数的返回值和$.each(array,fn)调用函数处理没有返回值1234</ti</p><p>8、tle>5<scriptsrc="js/jquery-1.4.2.js"type="text/javascript"></script>6<scripttype="text/javascript">7/*$.map(array,fu)8vararr1=[1,2,3];9vararrOne=$.map(arr1,function(item){returnitem*2;});10alert(arrOne);*/1112/*$.each(array,fn)*/</p> </div> <div class="mt-3 bg-white"> <div class="d-lg-block d-none px-3 px-lg-4 py-3 border-bottom text-center font-18"> 当前文档最多预览五页,下载文档查看全文 </div> <div class="detail-fixed-feature d-none d-lg-block" id="detailFixedFeatureBox"> <div class="px-3 px-lg-4 py-3 d-flex align-items-center justify-content-between fixed-feature-box" id="detailFixedFeature"> <div class="d-lg-flex d-none align-items-center"> <div> <a class="btn btn-outline-danger article-state" href="javascript:;" data-id="32527827" data-code="438274" data-title="JQuery-学习总结及实例"> <span>侵权申诉</span> </a> <button type="button" class="btn btn-outline-secondary with-light ml-2" data-toggle="modal" data-target="#reportModal" data-id="32527827"><span>举报</span></button> </div> <nav class="d-flex align-items-center ml-4" id="anchorPoint"> <a href="javascript:;" class="btn btn-light anchor-pre px-2"><i class="iconfont text-muted"></i></a> <div class="text-muted mb-0 pre-point-list" id="prePointList"> <a class="px-2 active nav-link" href="#anchorImg0">1</a> <a class="px-2 nav-link" href="#anchorImg1">1</a> <a class="px-2 nav-link" href="#anchorImg2">2</a> <a class="px-2 nav-link" href="#anchorImg3">3</a> <a class="px-2 nav-link" href="#anchorImg4">4</a> <a class="px-2 nav-link" href="#anchorImg5">5</a> / <span class="px-2" id="prePageNums">44</span> </div> <a href="javascript:;" class="btn btn-light anchor-next px-2"><i class="iconfont text-muted"></i></a> </nav> </div> <div class="d-flex align-items-center"> <p class="d-lg-block d-none font-14 text-black-50 mb-0 mr-2">此文档下载收益归作者所有</p> <button class="btn btn-danger detail-download-btn px-3 ml-0 font-16" data-btn="downloadfile" style="width:128px;height:40px;" data-id="32527827" data-price="1500" data-size="78.79 KB" data-page="44页" data-type="docx" data-binddown="true" data-isold="new_content" data-vip="0" data-title="JQuery-学习总结及实例">下载文档</button> </div> </div> </div> </div> <div class="d-block d-lg-none px-3 px-lg-4 py-3 border-bottom text-center font-14" style="color:#999">当前文档最多预览五页,下载文档查看全文</div> <button class="btn d-block w-100 d-lg-none btn-danger detail-download-btn px-3 ml-0 font-16" data-btn="downloadfile" data-id="32527827" data-price="1500" data-size="78.79 KB" data-page="44页" data-type="docx" data-binddown="true" data-isold="new_content" data-vip="0" data-title="JQuery-学习总结及实例">点击下载本文档 </button> </div> <div class="px-3 px-lg-4 py-3 bg-white mt-3"> <ul class="nav custom-tab border-bottom" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active px-0 mr-4 font-16 font-weight-light pb-3" id="tips-tab" data-toggle="tab" href="#showTips" role="tab" aria-controls="showTips" aria-selected="true">版权提示</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link px-0 pb-3 font-16 font-weight-light text-black-50" href="/d-32527827.html" >下载文档</a> </li> <dl class="flex-grow-1 mb-0 d-lg-none"> <li class="ml-3 float-right d-lg-none"> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#reportModal" data-id="32527827"><span>举报</span></button> </li> </dl> </ul> <div class="tab-content with-content pt-3" id="myTabContent"> <div class="tab-pane fade show active font-14" id="showTips" role="tabpanel" aria-labelledby="showTips-tab"> 温馨提示: <br> 1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。<br> 2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。<br> 3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。<br> 4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。 <br> </div> </div> </div> </div> <div class="detail-sidebar d-none d-lg-block"> <div id="columnDetailSiderRight"> <div class="detail-yourlike mt-0 pb-2" id="relativeArticle"> <div class="border-bottom py-2 d-flex align-items-center justify-content-between"> <h5 class="font-16">相关文章</h5> <a class="font-14 hover-letter-spacing" href="/ucenter/search/index.html?text=JQuery-学习总结及实例" target="_blank" rel="nofollow">更多<i class="iconfont font-12 pl-1"></i></a> </div> <ul class="font-14 like-list"> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-doc" href="/p-5810384.html" title="学习英语的技巧及实例" target="_blank"><span class="text-danger">学</span><span class="text-danger">习</span>英语的技巧<span class="text-danger">及</span><span class="text-danger">实</span><span class="text-danger">例</span></a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-doc" href="/p-30323933.html" title="ospf多实例学习的总结" target="_blank">ospf多<span class="text-danger">实</span><span class="text-danger">例</span><span class="text-danger">学</span><span class="text-danger">习</span>的<span class="text-danger">总</span><span class="text-danger">结</span></a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-pdf" href="/p-33743839.html" title="expect学习笔记及实例详解" target="_blank"><span class="text-danger">e</span>xp<span class="text-danger">e</span>ct<span class="text-danger">学</span><span class="text-danger">习</span>笔记<span class="text-danger">及</span><span class="text-danger">实</span><span class="text-danger">例</span>详解</a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-docx" href="/p-35294252.html" title="contentprovider的学习实例总结" target="_blank">cont<span class="text-danger">e</span>ntp<span class="text-danger">r</span>ovid<span class="text-danger">e</span><span class="text-danger">r</span>的<span class="text-danger">学</span><span class="text-danger">习</span><span class="text-danger">实</span><span class="text-danger">例</span><span class="text-danger">总</span><span class="text-danger">结</span></a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-doc" href="/p-37915258.html" title="JavaWeb实例学习的总结内容" target="_blank"><span class="text-danger">J</span>avaW<span class="text-danger">e</span>b<span class="text-danger">实</span><span class="text-danger">例</span><span class="text-danger">学</span><span class="text-danger">习</span>的<span class="text-danger">总</span><span class="text-danger">结</span>内容</a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-ppt" href="/p-40848362.html" title="JQuery-第03章DOM操作" target="_blank"><span class="text-danger">J</span><span class="text-danger">Q</span><span class="text-danger">u</span><span class="text-danger">e</span><span class="text-danger">r</span><span class="text-danger">y</span><span class="text-danger">-</span>第03章DOM操作</a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-doc" href="/p-43092223.html" title="VC程序实例学习及心得" target="_blank">VC程序<span class="text-danger">实</span><span class="text-danger">例</span><span class="text-danger">学</span><span class="text-danger">习</span><span class="text-danger">及</span>心得</a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-doc" href="/p-49070418.html" title="VC程序实例学习及心得.doc" target="_blank">VC程序<span class="text-danger">实</span><span class="text-danger">例</span><span class="text-danger">学</span><span class="text-danger">习</span><span class="text-danger">及</span>心得.doc</a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-pdf" href="/p-52960941.html" title="jQuery-参考手册-2010年9月27日.pdf" target="_blank">j<span class="text-danger">Q</span><span class="text-danger">u</span><span class="text-danger">e</span><span class="text-danger">r</span><span class="text-danger">y</span><span class="text-danger">-</span>参考手册<span class="text-danger">-</span>2010年9月27日.pdf</a> </li> <li class=""> <a class="text-ellipsis office-icon text-dark office-icon-doc" href="/p-55160378.html" title="ospf多实例学习总结.doc" target="_blank">ospf多<span class="text-danger">实</span><span class="text-danger">例</span><span class="text-danger">学</span><span class="text-danger">习</span><span class="text-danger">总</span><span class="text-danger">结</span>.doc</a> </li> </ul> </div> <div class="detail-yourlike pb-2"> <div class="border-bottom py-2"> <h5 class="font-16">相关标签</h5> </div> <ul class="font-14 like-list d-flex flex-wrap"> <a class="search-tag" href="/tags/1456227/" target="_blank">实例</a> <a class="search-tag" href="/tags/540182/" target="_blank">总结</a> <a class="search-tag" href="/tags/540984/" target="_blank">学习</a> </ul> </div> <script src="/d/js/acmsd/thea1.js"></script> </div> </div> </div> <footer> <div class="container d-none d-lg-block mb-4"> <div class="d-flex justify-content-between footer-nav"> <ul class="d-flex foot-nav"> <li> <h5>常见问题</h5> <a class=text-decoration-none href=/help/wenti/upload/ target=_blank> 关于上传 </a><a class=text-decoration-none href=/help/wenti/xiazai/ target=_blank> 关于下载 </a><a class=text-decoration-none href=/help/wenti/qinquan/ target=_blank> 关于侵权 </a><a class=text-decoration-none href=/help/wenti/fenxaing/ target=_blank> 分享文档赚钱教程 </a> </li> <li> <h5>关于我们</h5> <a class=text-decoration-none href=/help/about/wzjs/ target=_blank> 网站介绍 </a><a class=text-decoration-none href=/help/about/gywm/ target=_blank> 关于我们 </a><a class=text-decoration-none href=/help/about/lxwm/ target=_blank> 联系我们 </a> </li> <li> <h5>版权问题</h5> <a class=text-decoration-none href=/help/banquan/bqsm/ target=_blank> 版权声明 </a><a class=text-decoration-none href=/help/banquan/qqcl/ target=_blank> 侵权处理 </a><a class=text-decoration-none href=/help/banquan/mzsm/ target=_blank> 免责声明 </a> </li> <li> <h5>协议条款</h5> <a class=text-decoration-none href=/help/xieyi/yhxy/ target=_blank> 用户协议 </a><a class=text-decoration-none href=/help/xieyi/fwtk/ target=_blank> 用户服务条款 </a><a class=text-decoration-none href=/help/xieyi/ysbh/ target=_blank> 用户隐私保护 </a> </li> <li> <h5>网站导航</h5> <a class="text-decoration-none help-nav-item" href="/sitemaps.xml" data-name="网站地图" target="_blank">网站地图</a> <a class="text-decoration-none help-nav-item" href="/list.html" data-name="全部分类" target="_blank">全部分类</a> <a class="text-decoration-none help-nav-item" href="/sitemaps/index.html" data-name="资源地图" target="_blank">资源地图</a> </li> </ul> <div class="foot-qrcode d-flex"> <div> <div class="subsitute-bg"><img src="https://www.wenku365.com/d/file/2022/07-08/f23df57d987ef7ad9acb33fe5abf9854.jpg"></div> <p>关注公众号<br></p> </div> </div> </div> </div> <div class="footer-copyright"> <p><a href="/" target="_blank">天天文库</a>站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有【成交的100%(原创)】。</p> <p>本站是网络服务平台方,若您的权利被侵害,侵权客服QQ:3074922707 欢迎举报。</p> <p>Copyright 2004-2021 <a href="https://www.wenku365.com/" target="_blank">wenku365.com</a> All Rights Reserved <a href="https://beian.miit.gov.cn/#/Integrated/index" rel="nofollow" target="_blank">闽ICP备15016911号-5 </a></p> <p>闽公网安备 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35052402000320" rel="nofollow" target="_blank">35052402000320</a></p> <p> <a href="https://www.wenku365.com/zt.html" target="_blank">专题文集</a> <a href="https://www.wenku365.com/zt-90007.html" target="_blank">丨职业培训</a> <a href="https://www.wenku365.com/zt-90005.html" target="_blank">丨实用范文</a> <a href="https://www.wenku365.com/zt-90010.html" target="_blank">丨商业材料</a> <a href="https://www.wenku365.com/zt-90013.html" target="_blank">丨合同协议</a> <a href="https://www.wenku365.com/zt-90009.html" target="_blank">丨PPT专题</a></p> </div> </footer> <script src="//static.wenku365.com/wenku365/js/global.min.js?"></script> <script src="//static.wenku365.com/wenku365/js/clipboard.min.js?"></script> <script src="//static.wenku365.com/wenku365/js/jquery.treeview.js?"></script> <script src="//static.wenku365.com/wenku365/js/jquery.share.min.js?"></script> <script src="//static.wenku365.com/wenku365/js/common.min.js?"></script> <script src="//static.wenku365.com/wenku365/js/downloadFile.js?"></script> <script src="//static.wenku365.com/wenku365/js/loginWindow.js?"></script> <script src="//static.wenku365.com/wenku365/js/windowRecharge.js?"></script> <script src="//static.wenku365.com/wenku365/js/viewer.min.js?"></script> <script src="//static.wenku365.com/wenku365/js/detail.js?"></script> <!-- 2023-05-07 05:19:36 --> </body> </html>