jQuery入门学习培训

jQuery及其应用内容纲要用户体验设计1jQuery系统知识构建2jQuery应用３一、用户体验设计用户体验并不是指一件产品本身是如何工作的。它是指产品如何与外界发生联系并发挥作用的，也就是人们如何接触和使用它。人们使用的每一件产品都具有用户体验：报纸、调味罐、活动背靠椅、手机。在网站上，用户体验比任何一个其他产品都显得重要。•用户在使用网站前，没有说明书、培训以及克服，只能依靠自己的经验和智慧来独自面对这个网站。当被困在某个地方时，只能依靠自己找到出路。•绝大多数互联网产品在刚开始起步时，只关注网站内容，依靠内容来吸引客户。但随着功能的不断膨胀，网站越来越复杂，却很少去关注用户真正喜欢什么。•如果用户得到一次不好的用户体验，那么他们将不再回来。二、jQuery系统知识构建jQuery核心函数•jQuery(expression,[context])这个函数接收一个包含CSS选择器的字符串，然后用这个字符串去匹配一组元素。•jQuery(html)根据提供的原始HTML标记字符串，动态创建由jQuery对象包装的DOM元素。•jQuery(elements)将一个或多个DOM元素转化为jQuery对象。•jQuery(callback)允许你绑定一个在DOM文档载入完成后执行的函数。jQuery对象访问•each(callback)以每一个匹配的元素作为上下文来执行一个函数。•size()jQuery对象中元素的个数。•lengthjQuery对象中元素的个数•get()取得所有匹配的DOM元素集合。•get(index)取得其中一个匹配的元素jQuery选择器-基本•#id根据给定的ID匹配一个元素。•element根据给定的元素名匹配所有元素•.class根据给定的类匹配元素•selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回。jQuery选择器-层级•ancestordescendant在给定的祖先元素下匹配所有的后代元素•parentchild在给定的父元素下匹配所有的子元素•prev+next匹配所有紧接在prev元素后的next元素•prev~siblings匹配prev元素之后的所有siblings元素jQuery选择器-简单•:first匹配找到的第一个元素•:last•:not(selector)•:even•:odd•:eq(index)jQuery选择器-内容•:contains(text)匹配包含给定文本的元素•:empty•:has(selector)•:parent活动一：体验jQuery的几个功能•选择器-基本-#id.class•属性-属性-attr(name)•筛选-查找-parent([expr])•文档处理-外部插入-after(content)before(content)•事件-事件-click（）•vartemp=$(“#mydiv”).html();•alert(“test”);三、jQuery应用综合应用一：移动与折叠•$(function(){•$(a).click(function(){•for(vark=0;k50;k++){•if($(this).attr(class).substring(0,7)==upbtn+k){•varindex=$(.upbtn+k).index(this);•varbeforeIndex=0;•if(index==0||index==-1){•alert(已到最顶端！);•return;•}•else{•beforeIndex=index-1;•varbeforeObject=$(.upbtn+k)[beforeIndex];$(beforeObject).parent().parent().parent().parent().parent().parent().parent().parent().before($(this).parent().parent().parent().parent().parent().parent().parent().parent());•}•}•});•});•varupimage=instructionPlan/images/fold02.jpg;•vardownimage=instructionPlan/images/fold01.jpg;•$(img).click(function(){–varspeed=1000;–for(vark=0;k50;k++){•vartoggleSrc=$(this).attr(alt);•if($(this).attr(id).substring(0,7)==up+k){–if(toggleSrc==点击折叠){»$(this).attr(src,downimage);»$(this).attr(alt,点击展开);–}else{»$(this).attr(src,upimage);»$(this).attr(alt,点击折叠);•}•$(#table+k).toggle(speed);•event.stopPropagation();•}–}//for•});综合应用二：异步数据传输•functionupforward(planId,itemId){–varparams=planId=+planId+&itemId=+itemId+&mark=up;–$.ajax({•type:POST,•url:/hep/do/instrQuestion?action=changeLevel,•data:params,•success:function(msg){}–});•}•publicActionForwardtestJquery(ActionMappingmapping,ActionFormform,HttpServletRequestrequest,HttpServletResponseresponse){–response.setContentType(text/html;charset=UTF-8);–response.setHeader(Cache-Control,no-cache);–PrintWriterout;–try{•out=response.getWriter();•out.println(成功);•out.close();–}catch(IOExceptione){•e.printStackTrace();–}•returnnull;•}综合应用三：遮罩•scripttype=text/javascript•$(document).ready(function(){•//alert(test);•$(img[rel]).overlay();•});•/script•$(document).ready(function(){•vartriggers=$(.modalInput).overlay({•//somemasktweakssuitableformodaldialogs•mask:{•color:'#ebecff',•loadSpeed:200,•opacity:0.9•},•closeOnClick:false•});•varbuttons=$(#yesnobutton).click(function(e){•//getuserinput•varyes=buttons.index(this)===0;•//dosomethingwiththeanswer•triggers.eq(0).html(Youclicked+(yes?yes:no));•});•});