jQuery_讲义

jQuery基础培训内容简介jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery常用技巧四jQueryUI三五RIA技术RIA(RichInternetApplications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。常见的RIA技术AjaxFlexSliverlightJavaScript及其框架是实现RIA的重要工具JavaScript框架简介随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）当前流行的JavaScript库有:jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性jQuery理念:写得少,做得多jQuery的使用下载：框架下载。通常只需下载最小的jQuery包（Minified）即可。目前最新的版本jquery-1.9.1.min.js文件只有90.4KB引用：scriptsrc=jquery.min.js/script将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。第一个jQuery程序scriptsrc=jquery.min.js/scriptscript$(document).ready(function(){alert(HelloWorld!);});/script引入jQuery等待DOM文档载入后执行类似于window.onload弹出一个对话框jury对象与DOM对象jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#tab”).html();jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法建议约定：如果获取的是jQuery对象,那么要在变量前面加上$.var$variable=jQuery对象varvariable=DOM对象jQuery对象转成DOM对象jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM方法的时候,有如下两种处理方法:(1)jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象.$(#msg)[0](2)使用jQuery中的get(index)方法得到相应的DOM对象$(#msg).get(0)DOM对象转成jQuery对象对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.例如：$(document.getElementById(“msg”))转换后就可以使用jQuery中的方法了jQuery对象与dom对象的转换举例以下几种写法都是正确的：$(#msg).html();$(#msg)[0].innerHTML;$(#msg).eq(0)[0].innerHTML;$(#msg).get(0).innerHTML;如：$(#msg)[0]，$(div).eq(1)[0]，$(div).get()[1]，$(td)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法jQuery的选择器jQuery选择器选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器jQuery选择器的优点:简洁的写法完善的事件处理机制基本选择器基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标记名来查找DOM元素基本选择器示例改变id为one的元素的背景色为红色$(#one).css(backgroundColor,red);改变元素名为p的所有元素的背景色为#bbffaa，字体颜色为红色$(p).css({color:red,backgroundColor:#bbffaa});改变第一个p元素的背景色为红色$(p).eq(0).css(backgroundColor,red);改变所有h1元素和id为one的元素的背景色为#bbffaa$(h1,#one).css(backgroundColor,#bbffaa);层次选择器如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器注意:(“prev~div”)选择器只能选择“#prev”元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取层次选择器示例改变body内所有div的背景色为#bbffaa$(“bodydiv)改变body内子div的背景色为#bbffaa$(“bodydiv)改变id为one的下一个div的背景色为#bbffaa$(#one+div)改变id为two的元素后面的所有兄弟div的元素的背景色为#bbffaa$(#two~div)改变id为two的元素所有p兄弟元素的背景色为#bbffaa$(#two).siblings(p)过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以“:”开头按照不同的过滤规则,过滤选择器又可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.基本过滤选择器表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤表单选择器基本过滤选择器示例改变第一个div元素的背景色为#bbffaa$(div:first)改变id不为one的所有p元素的背景色为#bbffaa$(p:not('#one'))改变索引值为偶数的tr元素的背景色为#bbffaa$(“tr:even)改变索引值为大于3且为奇数的p元素的背景色为#bbffaa$(“p:gt(3):odd)改变所有的标题元素的背景色为#bbffaa$(:header)改变当前正在执行动画的所有元素的背景色为#bbffaa删除节点remove():从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.empty():清空节点–清空元素中的所有后代节点(不包含属性节点).jQuery常用技巧与要点jQuery常用技巧与要点1.jQuery事件与绑定基础事件静态与动态事件2.jQueryAjax基础AjaxAjax中文传递异步与同步3.jQuery自定元素属性与元素迭代遍历jQuery自定义元素属性JQuery选择器选择自定义元素节点jQuery元素迭代遍历jQuery事件与绑定jQuery基础事件jQuery事件与绑定jQuery事件与绑定jQuery事件与绑定jQuery拥有JavaScript所有的事件，且jQuery拥有额外的事件方法，提供了更丰富的事件交互。$(‘#id’).focus(function(){});$(‘#id’).Click(function(){});上述事件绑定方式为静态事件绑定。静态绑定是当页面加载时完毕时，自动寻找指定元素进行事件绑定；如果特定元素由jQuery代码或者js代码动态生成，那么该元素将无法绑定静态事件，必须采用动态绑定,采用live()方法来进行动态绑定。$(“#id”).live(“click”,function(){});jQuery事件与绑定移除某按钮上的所有click事件:$(“btn”).unbind(“click”)移除某按钮上的所有事件:$(“btn”).unbind();one():该方法可以为元素绑定处理函数.当处理函数触发一次后,立即被删除.即在每个对象上,事件处理函数只会被执行一次.事件冒泡a.什么是事件冒泡子节点产生的事件会依次向上抛给对应的父节点。事件会按照DOM层次结构像水泡一样不断向上直至顶端b.如何取消冒泡事件解决：在事件处理函数中返回false,会对事件停止冒泡event.cancelBubble=true;事件对象的属性事件对象：当触发事件时，事件对象就被创建了.c.如何获取事件对象？只需要给事件处理函数添加event作为参数,该事件对象只有事件处理函数才能访问到.事件处理函数执行完毕后，事件对象就被销毁了.比如ahref…onclick=“clickA(event);”d,事件对象的作用?作用1：找到事件源Event.target;firefox,chrome支持Event.srcElement;ie支持所以在写程序时都写上：event.target||event.srcElement作用2：获得鼠标点击的坐标event.clientX;event.clientY;jQueryAjax定义和用法jQuery的ajax请求由其ajax()方法来实现。该方法是jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。常用结构代码：$.ajax({type:POST,url:'url',contentType:,data:{},error:function(){},success:function(data){}});jQueryAjax中文传递ajax()方法通过HTTP请求加载远程数据。所以该方法遵循HTTP协议传递，如传递参数包含中文，请求段将需要进行转码操作，接收端则需要解码操作。过程相对叫繁琐，jQueryAjax则提供了一种简便的解决办法，在ajax()方法中提供了contentType参数解决中文参数问题，请求端与接收端无需做任何转码操作，代码如下：$.ajax({contentType:application/x-=UTF-8,}jQuery异步与同步在项目中，可能需要绑定ajax请求为同步请求，保证其它操作必须等待请求完成才可以执行。在jQueryajax方法中一样给我们提供了方便的解决方案，如同中文参数一致，也是由方法内的一个配置项实现。代码如下：$.ajax({async:false,});该配置默认值：true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。jQuery自定义元素属性HTML拥有很多标签元素，例如input标签元素，该标签元素拥有id、name、value等属性，均为HTML规定元素属性。当HTML规定元素属性无法满足我们的开发需求时，我们便会思考，能否自定义元素属性呢，在jQuery的角度来看，完全是可以的，但是自定义元素属性只能作为存储数据或者标识作用，无法被浏览器识别。自定义元素属性其实很简单，例如代码所示：JQuery选择器选择自定义属性元素inputid=“”name=“”ncs_gr=“projectTeam”如上述HTML标签所示，nsc_gr为自定义属性，并且已赋值。在jQuery当中可通过attr方法取出该属性value。例：$(“#id”).attr(“ncs_gr“);在jQuery当中可通过该方式获得自定义属性，提供该元素额外的属性及标识，便于处理复杂的交互操作与数据传递。jQuery元素迭代遍历在项目开发中，前台交互页面中，可能存在相同标识的标签元素，并且需要获取相同标识的所有信息。