《JQuery学习笔记》doc版.docVIP

第一章 JQuery框架简介1.1 JQuery简介1.1.1 为什么要学jquery框架Jquery其实就是一个简单的js封装包（里面封装了一个个函数）。JQuery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。 1) 解决了js用dom操作不同浏览器写法不同的问题。2) 简单：用原生javascript要实现一个效果可能要几十几行，甚至几十行代码，jquery可能只要几行就可以实现同样的效果。而且有很多插件可以用，一些复杂的功能和效果都有插件，只要引入再调用一下方法就OK，大大节省了开发时间流行：很多公司或者网站都是用的jquery.1.1.2 JQUERY历史jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Joumln Zaeffere ，罗马尼亚的Stefan Petre等等。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。JS和jQuery 的关系，有点像C#和NET框架的关系1.1.3 jQuery能做什么JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。程序员：简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。用户： 改善了页面视觉效果，增强了与页面的交互性，体验更绚丽的网页1.1.4 主流的JavaScript框架YUIDojomooTools PrototypejQuery More.1.2 JQuery的优势写得少, 做得多. 优势如下:1）轻量级2）强大的选择器3）出色的 DOM 操作的封装4) 可靠的事件处理机制5) 完善的 Ajax6) 出色的浏览器兼容性7) 链式操作方式 链式语法 ：$(p.surprise).addClass(ohmy).show(slow); CSS 1-3 选择器：支持CSS选择器选定DOM对象 跨浏览器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 简单：较其它JS库更容易入门，中、英文档很齐全 易扩展： JQUERY UI 、 JQUERY FX 已经有很完善的基于JQUERY的用户界面库 和网页特效1.3初步使用Jquery1.3.1 Jquery的下载和安装jQuery下载 当前版本1.4.2官方网站下载：/ jQuery安装VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用,然后引用jquery-1.4.2.js，jquery-1.4.2-vsdoc.js放到同目录下在页面头部head中，添加js 这两个文件有什么区别 jquery-1.4.2.js和jquery-1.4.2.min.js两者都可以在开发中都可使用。但min是压缩版：当我们发布应用程序时使用，没什么注释。所以更小另一个有很好的注释。所以更大vsdoc（相当于js库提供的方法的说明库）1.3.2 Jquery的初次使用document.ready()和传统的方法 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。ready（）方法可出现多次 window.onload= function () alert(aaaaa); ;例子1(显示Hello) $(document).ready(function() alert(hello world!); ); 例子2（操作符） $(document).ready(function() $(a).click(function() alert(Hello world!); ); ); 选择器$(“a”)是一个jquery的选择器（selector）$()其中的字段就是元素的标记。比如$(div)就是click是函数对象的一个方法。方法为点击鼠标事件！例子3（2个div，点哪个div就隐藏）无标题文档 .div1margin:10px; width:300px; height:200px; background:#090; $(document).ready ( function() $(.div1).click ( function() $(this).hide(slow); ); ); $(document).ready ( function() $(input).click ( function() $(this).hide(slow); ); ); saaaaaaaaaaaaaaaa hide(show) 表示慢速隐藏，去掉show就是快速隐藏1.3 支持JQuery的开发工具1） 记事本2） Macromedia Dreamweaver（装插件）3） Visual Studio（2010直接使用，vs2008要装插件）4） Aptana5） MyEclipse（装插件）让Dreamweaver支持jQuery自动提示代码功能，方法很简单，下载一个插件jQuery_API.mxp点击下载。在Dreamweaver里依次选择“命令” - “扩展管理” - “安装扩展” - ，就会自动安装了。成功后重启Dreamweaver，就大功告成了。第二章 JQuery选择器2.1 基本选择器 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用). 2.1.1 ID选择器选择器：#id描述：根据给定的id匹配一个元素返回：单个元素 $(document).ready(function() /id选择器 $(#mydiv).css(background,#f96); );2.1.2 class选择器选择器：.class描述：返回给定的类名匹配的元素返回： 集合元素 $(document).ready(function() /class选择器 $(.mini).css(background,#f96); );2.1.3标签element选择器：element描述：根据给定的元素名匹配元素返回：集合元素 $(document).ready(function() /element选择器 $(div).css(background,#f96); );功能：改变元素名是的所有元素的背景色2.1.4所有元素*选择器：*描述：改变匹配的所有html标签元素返回值：集合元素 $(document).ready(function() /*选择器 $(*).css(background,#f96); );功能：改变所有html元素标签的背景色2.1.5 selector1、selector2、.selectorN选择器：selector,selector2,.selectorN描述：将每一个选择器匹配到的元素合并后一起返回返回：集合元素示例： $(document).ready(function() /selector1,selector2,.selectorN选择器 $(.mini,p).css(background,#f96); );功能：改变class名为mini和段落p元素的背景色2.1.6 基本选择器的综合练习无标题文档 div width:300px; height:100px; border:solid; border-width:1px; border-color:#FF0000; margin:10px; $(document).ready ( function() $(#btn1).click( function() $(#div1).css(background-color,green); );$(#btn2).click( function() $(.div2).css(background-color,yellow); );$(#btn3).click( function() $(*).css(background-color,red); ); $(#btn4).click( function() $(div).css(background-color,red); ); $(#btn5).click( function() $(#div1,.div2).css(background-color,black); ); ); 我的id是div1 我的class是div2 2.2 层次选择器 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器. Name: LastName: Password: Newsletter: 2.2.1 层次选择器后代元素(ancestor descendant)选择器：$(ancestor descendant) /其中ancestor是指任何有效的元素，descendant是ancestor的后代元素描述：选择ancestor元素里的所有后代元素descendant。返回值：集合元素 $(document).ready(function() $(form input ).css(border,1px solid red); );功能：改变form表单内所有input元素的边框属性2.2.2 层次选择器子元素选择器（parent child）选择器：$(parent child) /parent是指任何有效的元素，child是parent元素的子元素描述：选择parent元素下的子元素child，其跟后代选择器$(ancestor descendant)是有区别的，前者只能选择到子元素，而后者能选择到所有后代元素，比如说子元素还有孙子辈的元素等 。返回值：集合元素 $(document).ready(function() $(form div ).css(border,1px solid red); );功能：选择form表单的子元素div的边框属性实例效果：2.2.3 层次选择器相邻元素选择器（prev + next）选择器：$(prev + next) /其中prev是任何有效果选择器，而next是prev元素相邻的下一个元素（也就是紧接着pre的元素）描述：选择紧接在prev元素后的next元素实例： $(document).ready(function() $(div+input ).css(border,1px solid red); );2.2.4 层次选择器兄弟选择器（prevsiblings）选择器：$(prev siblings) /prev是指任何有效果的元素选择器，而siblings是指prev元素后面的所有兄弟元素描述：选取prev元素之后的所有siblings兄弟元素。返回值：集合元素实例： $(document).ready(function() $(div div ).css(border,1px solid red); );功能：改变表单div元素后面的所有div兄弟元素的边框属性。 2-5 $(document).ready(function() /选择 body内的所有div元素. $(#btn1).click(function() $(body div).css(background,#bbffaa); ) /在body内的选择 元素名是div 的子元素. $(#btn2).click(function() $(body div).css(background,#bbffaa); ) /选择 所有id为two 的下一个div元素. $(#btn3).click(function() $(#two + div).css(background,#bbffaa); ) /选择 id为two的元素后面的所有div兄弟元素. $(#btn4).click(function() $(#two div).css(background,#bbffaa); ) ); 层次选择器. 手动重置页面元素 点击下列按钮时先自动重置页面 id为one,class为one的div class为mini id为two,class为one,title为test的div. class为mini,title为other class为mini,title为test class为mini class为mini class为mini class为mini class为mini class为mini class为mini,title为tesst style的display为none的div class为hide的div 包含input的type为hidden的div 2.2.5 层次选择器的综合例子无标题文档 div width:400px; height:100px; border:solid; border-width:1px; border-color:#FF0000; margin:10px; .div1 width:300px; height:70px; border:solid; border-width:1px; border-color:#66CCFF; margin:10px; .div2 width:200px; height:50px; border:solid; border-width:1px; border-color:#00CC66; margin:10px; $(document).ready( function() $(#btn1).click( function() $(.div1 .text1).css(background-color,black);); $(#btn2).click( function() $(.div1.text1).css(background-color,black);); $(#btn3).click( function() $(.pwd+.text1).css(background-color,black);); $(#btn4).click( function() $(.pwd.text1).css(background-color,black);); ); 2.3 过滤选择器过滤从字面上大家非常清楚，就是过滤掉自己不想要的东西，也就是说经过过滤后留下来的都是自己需要的，那么其用到jQuery选择器中就是通过特定的过滤规则来筛选出所需的DOM元素，jQuery选择器的过滤规则与CSS中的伪类选择器语法是相同的。过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.2.3.1 基本过滤器基本选择器的例子无标题文档 $(document).ready ( function() $(#btn1).click ( function() $(tr:first).css(background-color,green); ) $(#btn2).click ( function() $(tr:last).css(background-color,yellow); ) $(#btn3).click ( function() $(tr:not(:#tr11).css(background-color,red); ) $(#btn4).click ( function() $(tr:even).css(background-color,black); ) $(#btn5).click ( function() $(tr:odd).css(background-color,red); ) $(#btn6).click ( function() $(tr:eq(1).css(background-color,red); ) $(#btn7).click ( function() $(tr:gt(0).css(background-color,red); ) $(#btn8).click ( function() $(tr:lt(1).css(background-color,red); ) $(#btn9).click ( function() $(:header).css(background-color,red); ) $(#btn10).click ( function() $(:animated).css(background,#bfa); ); ); Header 1 V