HTML<divid="mask"></div>CSS#mask{position:absolute;top:0px;filter:alpha(opacity=60);background-color:#777;z-index:0;left:0px;opacity:0.0;-moz-opacity:0.5;}根据实际情况进行设置。z-index为遮罩的层级，小于遮罩层级的将会被遮盖。opacity为IE下遮罩透明度，-moz-opacity为火狐浏览器下遮罩透明度设置。JQueryfunctionshowMask(){$("#mask").css({"height":$(document).height(),"width":$(document).width()});$("#mask").show();}functionhideMask(){$("#mask").hide();}showMask显示遮罩、hideMask隐藏遮罩。
现在工作的时候,绝大部分场景使用的是异步请求,可以使用ajaxfetchaxios等技术实现;其中最常用的是jquery的ajax方法;$.ajax({url:"XXX",//请求路径data:{param1:jsonObj1,params2:str2...},type:"POST",//GET//dataType:"JSON",//需要返回JSON对象(如果Ajax返回的是手动拼接的JSON字符串,需要Key,Value都有引号)success:function(resp){//处理resp.responseText;},error:function(a,b,c){//a,b,c三个参数,具体请参考JQueryAPI}})但是在某些场景下,我们需要同步请求,比如我在构建Grid控件的时候,动态列的情况;一旦Grid对象创建完成,渲染到浏览器的时候,如果没有配置列,或者列配置选项错误,那么这个页面会提示错误,即Grid没有成功渲染;因此这里我们需要在newGrid之前.首先获取动态列数据,进行列模型的构建;我们这样子做:给出一个简单例子varcmObjStr=eval("("+$.ajax({url:"XXX",async:false,//关键是这个参数是否异步请求=>false:使用同步请求type:"POST",data:{params1:value1}}).responseText+")");这里返回的是列模型所需要的列信息,还需要手动创建列模型对象;总结一下:所有支持异步请求的方法,需要看相关的文档API,看是否存在async这个参数;设置async为false为同步请求,只有请求返回了,浏览器线程才会执行下一行的JS;
在Jquery里格式化Date日期时间数据functiontimeString(time){vardatetime=newDate();datetime.setTime(time);varyear=datetime.getFullYear();varmonth=datetime.getMonth()+1<10?"0"+(datetime.getMonth()+1):datetime.getMonth()+1;vardate=datetime.getDate()<10?"0"+datetime.getDate():datetime.getDate();varhour=datetime.getHours()<10?"0"+datetime.getHours():datetime.getHours();varminute=datetime.getMinutes()<10?"0"+datetime.getMinutes():datetime.getMinutes();varsecond=datetime.getSeconds()<10?"0"+datetime.getSeconds():datetime.getSeconds();returnyear+"-"+month+"-"+date+""+hour+":"+minute+":"+second;}调用timeString(time)方法进行格式化$(function(){//当前时间格式化yyyy-MM-ddHH:mm:ssalert(timeString(newDate().getTime()));alert(timeString(newDate().getTime()));debugger;});
Jquery的鼠标事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript"src="./js/jquery.min.js"></script></head><body><divid="one"style="width:50px;float:left;"><p>背景色</p></div><divid="two"style="width:50px;float:left;margin:16px10px;"><span>背景色</span></div><scripttype="text/javascript">//鼠标移入事件$("p").mouseover(function(){$("p").css("background-color","#00ffff");});//鼠标移出事件$("#onep").mouseout(function(){$(this).css("background-color","#E9E9E4");});//鼠标移入事件$("#two").mouseover(function(){$(this).css("background-color","#00ffff");});//鼠标移出事件vartwo=$("#two");two.mouseout(function(){two.css("background-color","#E9E9E4");});</script></body></html>
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><!--抽屉-start--><divid="drawer"style="display:none;"><divclass="close">X</div><divclass="self-drawer-content"><h1>需要填写的内容</h1></div></div><!--抽屉-end--><buttonid="open">打开抽屉</button><!--引入jquery--><scriptsrc="jquery.js"></script><script>//扩展jquery功能(function($){$("body").append('<divclass="drawerMask"style="position:fixed;width:100%;height:100%;background:black;left:0px;top:0px;z-index:888;display:none;opacity:0.5;"></div>')$.fn.extend({//初始化"drawerInit":function(){var_this=this;varwidth=window.innerWidth;varheight=window.innerHeight;_this.css('width',width+"px").css('height',height+"px")//.css('background',"rgba(0,0,0,.5)").css('position',"fixed").css('top',"0px").css('z-index',999).css('right',-width+"px");varstartX=0vardistance=0_this.bind("touchstart",function(e){vartouch=e.originalEvent.touches[0];startX=touch.clientX;})_this.bind("touchmove",function(e){vartouch=e.originalEvent.touches[0];varmoveX=touch.clientX;distance=moveX-startX;if(distance<0){distance=0;}_this.css('right',-distance+"px");})_this.bind("touchend",function(e){varwidth=window.innerWidth;if(distance>=width/3){_this.animate({right:-width+"px"},300,function(){$(".drawerMask").hide()});}if(distance<width/3){_this.animate({right:"0px"},300);}distance=0;})varcontent=_this.find(".self-drawer-content");content.css('width',(width*0.8)+"px").css('height',height+"px").css('background',"white").css('position',"absolute").css('top',"0px").css('right',"0px")varclose=_this.find(".close");close.css('width',"20px").css('height',"20px").css('font-size',"15px").css('display',"flex").css('justify-content',"center").css('align-items',"center").css('background',"white").css('position',"absolute").css('top',"0px").css('right',"0px").css('z-index',999).css('border',"1pxsolidblack").css('border-radius',"100%")close.click(function(){_this.animate({right:-width+"px"},500,function(){$(".drawerMask").hide()});})},//展示抽屉"drawerShow":function(){var_this=this;$(".drawerMask").show()_this.show();_this.animate({right:"0px"},500);},//关闭抽屉"drawerHide":function(){var_this=this;varwidth=window.innerWidth;_this.animate({right:-width+"px"},500,function(){$(".drawerMask").hide()});},});})(jQuery);/**-------------------以上代码可放入单独的js文件中--------------------**/window.onload=function(){//初始化$("#drawer").drawerInit();//点击按钮展示抽屉$("#open").click(function(){$("#drawer").drawerShow();})}</script>
1.获取整个url链接window.location.href2.获取url问号后面部分包括问号window.location.search;3.获取url问号后面部分window.location.search.substr(1);window.location.search.substring(1);下面直接上方法functiongetUrlParams(key){varurl=window.location.search.substr(1);if(url==''){returnfalse;}varparamsArr=url.split('&');for(vari=0;i<paramsArr.length;i++){varcombina=paramsArr[i].split("=");if(combina[0]==key){returncombina[1];}}returnfalse;}
设值或属性:$(“p”).addClass(css中定义的样式类型);给某个元素添加样式$(“img”).attr({src:”test.jpg”,alt:”testImage”});给某个元素添加属性/值，参数是map$(“img”).attr(“src”,”test.jpg”);给某个元素添加属性/值$(“img”).attr(“title”,function(){returnthis.src});给某个元素添加属性/值$(“元素名称”).html();获得该元素内的内容（元素，文本等）$(“元素名称”).html(“newstuff“);给某元素设置内容$(“元素名称”).removeAttr(“属性名称”);给某元素删除指定的属性以及该属性的值$(“元素名称”).removeClass(“class”);给某元素删除指定的样式$(“元素名称”).text();获得该元素的文本$(“元素名称”).text(value);设置该元素的文本值为value$(“元素名称”).toggleClass(class);当元素存在参数中的样式的时候取消,如果不存在就设置此样式$(“input元素名称”).val();获取input元素的值$(“input元素名称”).val(value);设置input元素的值为value操作：$(“元素名称”).after(content);在匹配元素后面添加内容$(“元素名称”).append(content);将content作为元素的内容插入到该元素的后面$(“元素名称”).appendTo(content);在content后接元素$(“元素名称”).before(content);与after方法相反$(“元素名称”).clone(布尔表达式);当布尔表达式为真时，克隆元素（无参时，当作true处理）$(“元素名称”).empty();将该元素的内容设置为空$(“元素名称”).insertAfter(content);将该元素插入到content之后$(“元素名称”).insertBefore(content);将该元素插入到content之前$(“元素”).prepend(content);将content作为该元素的一部分，放到该元素的最前面$(“元素”).prependTo(content);将该元素作为content的一部分，放content的最前面$(“元素”).remove();删除所有的指定元素$(“元素”).remove(“exp”);删除所有含有exp的元素$(“元素”).wrap(“html”);用html来包围该元素$(“元素”).wrap(element);用element来包围该元素$(html).appendTo(“body”)相当于在body中写了一段html代码$(elems)获得DOM上的某个元素$(function(){……..});执行一个函数$(“div>p”).css(“border”,“1pxsolidgray”);查找所有div的子节点p，添加样式$(“input:radio”,document.forms[0])在当前页面的第一个表单中查找所有的单选按钮$.extend(prop)prop是一个jquery对象举例：jQuery.extend({min:function(a,b){returna<b?a:b;},max:function(a,b){returna>b?a:b;}});jQuery(expression,[context])⇒$(expression,[context]);在默认情况下，$()查询的是当前HTML文档中的DOM元素。each(callback)以每一个匹配的元素作为上下文来执行一个函数举例：1$("span").click(function){$("li").each(function(){$(this).toggleClass("example");});});举例：2$("button").click(function(){$("div").each(function(index,domEle){//domEle==this$(domEle).css("backgroundColor",“yellow");if($(this).is("#stop")){$("span").text("Stoppedatdivindex#"+index);returnfalse;}});});事件:ready(fn);$(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。bind(type,[data],fn)为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,errorone(type,[data],fn)为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。trigger(type,[data])在每一个匹配的元素上触发某类事件。triggerHandler(type,[data])这一特定方法会触发一个元素上特定的事件(指定一个事件类型)，同时取消浏览器对此事件的默认行动。unbind([type],[data])反绑定，从每一个匹配的元素中删除绑定的事件。$(“p”).unbind()移除所有段落上的所有绑定的事件$(“p”).unbind(“click”)移除所有段落上的click事件hover(over,out)over,out都是方法,当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。$("p").hover(function(){$(this).addClass("over");},function(){$(this).addClass("out");});toggle(fn,fn)如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。$("p").toggle(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});元素事件列表说明注：不带参数的函数，其参数为可选的fn。jQuery不支持form元素的reset事件。事件描述支持元素或对象blur()元素失去焦点a,input,textarea,button,select,label,map,areachange()用户改变域的内容input,textarea,selectclick()鼠标点击某个对象几乎所有元素dblclick()鼠标双击某个对象几乎所有元素error()当加载文档或图像时发生某个错误window,imgfocus()元素获得焦点a,input,textarea,button,select,label,map,areakeydown()某个键盘的键被按下几乎所有元素keypress()某个键盘的键被按下或按住几乎所有元素keyup()某个键盘的键被松开几乎所有元素load(fn)某个页面或图像被完成加载window,imgmousedown(fn)某个鼠标按键被按下几乎所有元素mousemove(fn)鼠标被移动几乎所有元素mouseout(fn)鼠标从某元素移开几乎所有元素mouseover(fn)鼠标被移到某元素之上几乎所有元素mouseup(fn)某个鼠标按键被松开几乎所有元素resize(fn)窗口或框架被调整尺寸window,iframe,framescroll(fn)滚动文档的可视部分时windowselect()文本被选定document,input,textareasubmit()提交按钮被点击formunload(fn)用户退出页面windowJQueryAjax方法说明:load(url,[data],[callback])装入一个远程HTML内容到一个DOM结点。$(“#feeds”).load(“feeds.html”);将feeds.html文件载入到id为feeds的div中$("#feeds").load("feeds.php",{limit:25},function(){alert("Thelast25entriesinthefeedhavebeenloaded");});jQuery.get(url,[data],[callback])使用GET请求一个页面。$.get("test.cgi",{name:“John",time:“2pm"},function(data){alert("DataLoaded:"+data);});jQuery.getJSON(url,[data],[callback])使用GET请求JSON数据。$.getJSON("test.js",{name:“John",time:“2pm"},function(json){alert("JSONData:"+json.users[3].name);});jQuery.getScript(url,[callback])使用GET请求javascript文件并执行。$.getScript("test.js",function(){alert("Scriptloadedandexecuted.");});jQuery.post(url,[data],[callback],[type])使用POST请求一个页面。ajaxComplete(callback)当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件$("#msg").ajaxComplete(function(request,settings){$(this).append("<li>RequestComplete.</li>");});ajaxError(callback)当一个AJAX请求失败后，执行一个函数。这是一个Ajax事件$("#msg").ajaxError(function(request,settings){$(this).append("<li>Errorrequestingpage"+settings.url+“</li>");});ajaxSend(callback)在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件$("#msg").ajaxSend(function(evt,request,settings){$(this).append("<li<Startingrequestat"+settings.url+“</li<");});ajaxStart(callback)在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件，当AJAX请求开始(并还没有激活时)显示loading信息$("#loading").ajaxStart(function(){$(this).show();});ajaxStop(callback)当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件当所有AJAX请求都停止时，隐藏loading信息。$("#loading").ajaxStop(function(){$(this).hide();});ajaxSuccess(callback)当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件、当AJAX请求成功完成时，显示信息。$("#msg").ajaxSuccess(function(evt,request,settings){$(this).append("<li>SuccessfulRequest!</li>");});jQuery.ajaxSetup(options)为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。设置默认的全局AJAX请求选项。$.ajaxSetup({url:“/xmlhttp/",global:false,type:“POST"});$.ajax({data:myData});serialize()以名称和值的方式连接一组input元素。实现了正确表单元素序列functionshowValues(){varstr=$("form").serialize();$("#results").text(str);}$(":checkbox,:radio").click(showValues);$("select").change(showValues);showValues();serializeArray()连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。从form中取得一组值，显示出来functionshowValues(){varfields=$(":input").serializeArray();alert(fields);$("#results").empty();jQuery.each(fields,function(i,field){$("#results").append(field.value+"“);});}$(":checkbox,:radio").click(showValues);$("select").change(showValues);showValues();JQueryEffects方法说明show()显示隐藏的匹配元素。show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。hide()隐藏所有的匹配元素。hide(speed,[callback])以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。slideDown(speed,[callback])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。slideUp(speed,[callback])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐藏起来。slideToggle(speed,[callback])通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐藏或显示。fadeIn(speed,[callback])通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。fadeOut(speed,[callback])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。fadeTo(speed,opacity,[callback])把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。stop()停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。queue()取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)queue(callback)在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数queue(queue)以一个新的动画序列代替所有匹配元素的原动画序列dequeue()执行并移除动画序列前端的动画animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。animate(params,options)创建自定义动画的另一个方法。作用同上。JQueryTraversing方法说明eq(index)从匹配的元素集合中取得一个指定位置的元素，index从0开始。filter(expr)返回与指定表达式匹配的元素集合，可以使用”,”号分割多个expr，用于实现多个条件筛选。filter(fn)利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。is(expr)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。map(callback)将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。not(expr)从匹配的元素集合中删除与指定的表达式匹配的元素。slice(start,[end])从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。add(expr)把与表达式匹配的元素添加到jQuery对象中。children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。contents()取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点，不包括文本节点)，如果元素为iframe，则取得其中的文档元素。find(expr)搜索所有与指定表达式匹配的元素。next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。nextAll([expr])取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合closest([expr])沿DOM树向上遍历，直到找到已应用选择器的一个匹配为止。parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。parents([expr])取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。prevAll([expr])取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。andSelf()将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，添加background类属性$(“div”).find(“p”).andSelf().addClass(“border”);$(“div”).find(“p”).addClass(“background”);end()结束当前的操作，回到当前操作的前一个操作找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性$(“p”).find(“span”).end().css(“border”,“2pxredsolid”);JQuery选择器基本选择器$(“#myDiv”)匹配唯一的具有此id值的元素$(“div”)匹配指定名称的所有元素$(“.myClass”)匹配具有此class样式值的所有元素$(“*”)匹配所有元素$(“div,span,p.myClass”)联合所有匹配的选择器层叠选择器$(“forminput”)后代选择器，选择ancestor的所有子孙节点$(“#main>*”)子选择器，选择parent的所有子节点$(“label+input”)临选择器，选择prev的下一个临节点$(“#prev~div”)同胞选择器，选择prev的所有同胞节点基本过滤选择器$(“tr:first”)匹配第一个选择的元素$(“tr:last”)匹配最后一个选择的元素$(“input:not(:checked)+span”)从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）$(“tr:even”)匹配集合中偶数位置的所有元素(从0开始)$(“tr:odd”)匹配集合中奇数位置的所有元素(从0开始)$(“td:eq(2)”)匹配集合中指定位置的元素(从0开始)$(“td:gt(4)”)匹配集合中指定位置之后的所有元素(从0开始)$(“td:gl(4)”)匹配集合中指定位置之前的所有元素(从0开始)$(“:header”)匹配所有标题$(“div:animated”)匹配所有正在运行动画的所有元素内容过滤选择器$(“div:contains(‘John’)”)匹配含有指定文本的所有元素$(“td:empty”)匹配所有空元素(只含有文本的元素不算空元素)$(“div:has(p)”)从原元素集合中再次匹配所有至少含有一个selector的所有元素$(“td:parent”)匹配所有不为空的元素(含有文本的元素也算)$(“div:hidden”)匹配所有隐藏的元素，也包括表单的隐藏域$(“div:visible”)匹配所有可见的元素属性过滤选择器$(“div[id]”)匹配所有具有指定属性的元素$(“input[name=’newsletter’]”)匹配所有具有指定属性值的元素$(“input[name!=’newsletter’]”)匹配所有不具有指定属性值的元素$(“input[name^=’news’]”)匹配所有指定属性值以value开头的元素$(“input[name$=’letter’]”)匹配所有指定属性值以value结尾的元素$(“input[name*=’man’]”)匹配所有指定属性值含有value字符的元素$(“input[id][name$=’man’]”)匹配同时符合多个选择器的所有元素子元素过滤选择器$(“ulli:nth-child(2)”),$(“ulli:nth-child(odd)”),匹配父元素的第n个子元素$(“ulli:nth-child(3n+1)”)$(“divspan:first-child”)匹配父元素的第1个子元素$(“divspan:last-child”)匹配父元素的最后1个子元素$(“divbutton:only-child”)匹配父元素的唯一1个子元素表单元素选择器$(“:input”)匹配所有的表单输入元素，包括所有类型的input,textarea,select和button$(“:text”)匹配所有类型为text的input元素$(“:password”)匹配所有类型为password的input元素$(“:radio”)匹配所有类型为radio的input元素$(“:checkbox”)匹配所有类型为checkbox的input元素$(“:submit”)匹配所有类型为submit的input元素$(“:image”)匹配所有类型为image的input元素$(“:reset”)匹配所有类型为reset的input元素$(“:button”)匹配所有类型为button的input元素$(“:file”)匹配所有类型为file的input元素$(“:hidden”)匹配所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器$(“:enabled”)匹配所有可操作的表单元素$(“:disabled”)匹配所有不可操作的表单元素$(“:checked”)匹配所有已点选的元素$(“selectoption:selected”)匹配所有已选择的元素JQueryCSS方法说明css(name)访问第一个匹配元素的样式属性。css(properties)把一个”名/值对”对象设置为所有匹配元素的样式属性。$("p").hover(function(){$(this).css({backgroundColor:"yellow",fontWeight:"bolder"});},function(){varcssObj={backgroundColor:“#ddd",fontWeight:“",color:“rgb(0,40,244)"}$(this).css(cssObj);});css(name,value)在所有匹配的元素中，设置一个样式属性的值。offset()取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性，top和left，属性值为整数。这个函数只能用于可见元素。varp=$(“p:last”);varoffset=p.offset();p.html(“left:”+offset.left+“,top:”+offset.top);width()取得当前第一匹配的元素的宽度值，width(val)为每个匹配的元素设置指定的宽度值。height()取得当前第一匹配的元素的高度值，height(val)为每个匹配的元素设置指定的高度值。JQueryUtilities方法说明jQuery.browser.msie表示iejQuery.browser.version读取用户浏览器的版本信息jQuery.boxModel检测用户浏览器针对当前页的显示是否基于w3cCSS的盒模型jQuery.isFunction(obj)检测传递的参数是否为functionfunctionstub(){}varobjs=[function(){},{x:15,y:20},null,stub,“function"];jQuery.each(objs,function(i){varisFunc=jQuery.isFunction(objs[i]);$("span:eq("+i+“)").text(isFunc);});jQuery.trim(str)清除字符串两端的空格，使用正则表达式来清除给定字符两端的空格jQuery.each(object,callback)一个通用的迭代器，可以用来无缝迭代对象和数组jQuery.extend(target,object1,[objectN])扩展一个对象，修改原来的对象并返回，这是一个强大的实现继承的工具，这种继承是采用传值的方法来实现的，而不是JavaScript中的原型链方式。合并settings和options对象，返回修改后的settings对象varsettings={validate:false,limit:5,name:“foo"};varoptions={validate:true,name:“bar"};jQuery.extend(settings,options);合并defaults和options对象，defaults对象并没有被修改。options对象中的值代替了defaults对象的值传递给了empty。varempty={}vardefaults={validate:false,limit:5,name:“foo"};varoptions={validate:true,name:“bar"};varsettings=$.extend(empty,defaults,options);jQuery.grep(array,callback,[invert])通过一个筛选函数来去除数组中的项$.grep([0,1,2],function(n,i){returnn>0;});jQuery.makeArray(obj)将一个类似数组的对象转化为一个真正的数组将选取的div元素集合转化为一个数组vararr=jQuery.makeArray(document.getElementsByTagName("div"));arr.reverse();//useanArraymethodonlistofdomelements$(arr).appendTo(document.body);jQuery.map(array,callback)使用某个方法修改一个数组中的项，然后返回一个新的数组jQuery.inArray(value,array)返回value在数组中的位置，如果没有找到，则返回-1jQuery.unique(array)删除数组中的所有重复元素，返回整理后的数组
前言最近复习了一下jQuery的一些内容，特此整理一下一些能用的得到的知识点，以前才学jQuery的时候压根就没有注意到那么多的细节，另外最近一直都在整理前端的一些工作中学到的小经验，大概还会有十篇左右的内容，就会慢慢开始整理后端，框架，以及数据库的一些小知识点jQuery动画的三种方式今天的知识点就一个jQuery动画的三种表示方式：默认显示和隐藏方式滑动显示和隐藏方式淡入淡出显示和隐藏方式1.默认的显示和隐藏方式1.1.show([speed,[easing],[fn]])->如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。1.2.hide([speed,[easing],[fn]])->隐藏,如果选择的元素是隐藏的，这个方法将不会改变任何东西。1.3.toggle([speed],[easing],[fn])->如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。1.speed：动画的速度，可以自定义值(如：1000)毫秒数，它还有三个预定义的值(“slow”,“normal”,“fast”)2.easing：用来指定切换效果，默认是"swing"，可用参数"linear"->swing：动画执行时效果是先慢，中间快，最后又慢->linear：动画执行时速度是匀速的3.fn：在动画完成时执行的函数，每个元素执行一次。以下所有的的speed，easing，function都是一样的2.滑动显示和隐藏方式2.1.slideDown([speed],[easing],[fn])->通过高度变化（向下增大）来动态地显示所有匹配的元素。2.2.slideUp([speed,[easing],[fn]])->通过高度变化（向上减小）来动态地隐藏所有匹配的元素2.3.slideToggle([speed],[easing],[fn])->与toggle功能相同，只是显示的动画效果不同3.淡入淡出显示和隐藏方式3.1.fadeIn([speed],[easing],[fn])->淡入效果（渐渐浮现）3.2.fadeOut([speed],[easing],[fn])->淡出效果（渐渐隐藏）3.3.fadeToggle([speed,[easing],[fn]])->与toggle功能相同，只是显示的动画效果不同用法示例如下（示例）：<imgid="imgpic"src="../img/test.jpg"width="600px"height="600px"/>//默认方式$("#imgpic").toggle("slow");//$("#imgpic").show(5000,"linear");//5秒后匀速显示$("#imgpic").hide(5000,"swing");//5秒后隐藏，速度先先慢，中间快，最后又慢创作不易，如果这篇文章能够帮助到你，希望能关注或收藏一下，如果文章内容有问题也可留言讨论，我们一起学习，一起进步！！
采用如下的:$(this).prop('checked',false);$("#控件的id值").prop('checked',false);使用这种不行.$("#控件的id值").removeAttr("checked");
<aid="targetEl"href=""target="_blank">走你！</a>平时使用jQuery时，会遇到类似场景，将a标签的href动态替换掉，然后触发其点击事件。我们一不小心就会写成如下：$('#targetEl').click();但是，这样写，并不能实现触发a标签的点击事件，正确的写法应该是下面这样：$('#targetEl').attr('href','xxxxx');$('#targetEl')[0].click();
中国互联网举报中心