Jquery常见问题解决
最常见的20个jQuery面试问题及答案
最常见的20个jQuery面试问题及答案
1. jQuery 库中的 $() 是什么?(答案如下)
$() 函数是 jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。
一旦你适应了,你会爱上它的简洁。
$() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。
你甚至可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。
这个问题我已经见过好几次被提及,尽管它非常基础,它经常被用来区分一个开发人员是否了解 jQuery。
2. 网页上有 5 个< div> 元素,如何使用 jQuery来选择它们?(答案)
另一个重要的jQuery 问题是基于选择器的。
jQuery 支持不同类型的选择器,例如ID 选择器、class 选择器、标签选择器。
鉴于这个问题没提到 ID 和 class,你可以用标签选择器来选择所有的 div 元素。
jQuery 代码:$('div'),这样会返回一个包含所有5 个div 标签的jQuery 对象。
更详细的解答参见上面链接的文章。
解决jQuery使用append添加的元素事件无效的问题
解决jQuery使⽤append添加的元素事件⽆效的问题jquery api官⽅的例⼦在新增的元素上添加事件$(document).on("click",'#lyysb a',function(){if(!$(this).hasClass('cur')){$(this).addClass('cur');} else {$(this).removeClass('cur');}});on() ⽅法在被选元素及⼦元素上添加⼀个或多个事件处理程序。
⾃ jQuery 版本 1.7 起,on() ⽅法是 bind()、live() 和 delegate() ⽅法的新的替代品。
注意:使⽤ on() ⽅法添加的事件处理程序适⽤于当前及未来的元素(⽐如由脚本创建的新元素)。
提⽰:如需移除事件处理程序,请使⽤ off() ⽅法。
提⽰:如需添加只运⾏⼀次的事件然后移除,请使⽤ one() ⽅法。
*把事件绑定在docunmet就和原来的live⽅法没有区别了。
原先的live()⽅法,处理函数是默认绑定在document对象上不能变的,如果DOM嵌套结构很深,事件冒泡通过⼤量祖先元素会导致较⼤的性能损失。
⽽使⽤.on()⽅法,事件只会绑定到$()函数的选择符表达式匹配的元素上,因此可以精确地定位到页⾯中的⼀部分,⽽事件冒泡的开销也可以减少。
例如我会在zkdiv中动态添加多个class=”zk”的dom节点,也想对动态增加的节点绑定相同的事件则可以通过以下代码实现<div id="zkdiv"><input type="button" value="展开" id="zk" class="zk"/> <br></div>//展开按钮点击触发事件$("#zkdiv").on("click",".zk",function(){console.log("on 点击⼀次");});var html2 = "<input type='button' class='zk' value='新⽣成的展开' />";$("#zkdiv").append(html2);*这样⼀来处理函数就绑定到#zkdiv的选择器上去了,事件冒泡导致的性能损失会⼤⼤降低(使⽤该⽅法时要确保.on前⾯的选择器能选择到对象否则不起作⽤)click是点击事件,但是在页⾯加载完之后,jquery事件新添加的元素,⽤click的话是⽆法获取元素的,这个时候要⽤on去获取元素事件,简单的说页⾯加载完成时候页⾯显⽰的元素可以⽤on,也可以⽤click,但是页⾯加载完成之后后期再追加的元素只能⽤on。
jquery submit失败处理方法
jquery submit失败处理方法【最新版3篇】目录(篇1)I.提交失败的原因A.服务器端响应不正确B.表单数据格式不正确C.jQuery插件冲突II.提交失败的处理方法A.使用try-catch语句捕获异常B.使用jQuery的ajax方法提交表单数据C.避免使用插件冲突正文(篇1)提交失败的原因可能有很多,例如服务器端响应不正确、表单数据格式不正确、jQuery插件冲突等。
在处理提交失败时,我们可以使用try-catch语句捕获异常,或者使用jQuery的ajax方法提交表单数据,避免使用插件冲突。
在使用jQuery提交表单数据时,有时候会出现提交失败的情况。
这可能是因为服务器端响应不正确、表单数据格式不正确或者jQuery插件冲突等原因导致的。
为了处理提交失败的情况,我们可以使用try-catch 语句来捕获异常,或者使用jQuery的ajax方法提交表单数据。
为了避免使用插件冲突导致的提交失败,我们可以先检查是否有其他插件与我们的插件冲突。
如果有冲突,我们可以尝试修改插件代码或者删除冲突的插件来解决这个问题。
如果没有冲突,我们也可以使用jQuery 的ajax方法提交表单数据来避免插件冲突导致的提交失败。
总之,在处理提交失败的情况时,我们需要先确定导致提交失败的原因,然后选择合适的方法来处理。
如果是因为服务器端响应不正确导致的提交失败,我们可以尝试修改服务器端代码来解决这个问题。
如果是因为表单数据格式不正确导致的提交失败,我们可以使用jQuery的ajax方法提交表单数据来避免数据格式错误导致的提交失败。
目录(篇2)I.提交失败的处理方式A.使用Ajax异步提交B.使用jQuery的submit事件C.使用try-catch语句II.Ajax异步提交的优点A.减少页面刷新B.减少网络请求次数C.更好的用户体验III.try-catch语句在处理异步请求时的应用A.捕获可能出现的异常B.对异常进行处理C.确保程序正常运行IV.使用jQuery的submit事件的优势A.无需编写额外的代码B.实现表单验证和提交功能C.兼容多种浏览器和平台正文(篇2)在开发Web应用程序时,表单提交是必不可少的一部分。
jquery submit失败处理方法
jQuery submit失败处理方法概述在使用jQuery的submit()方法提交表单时,有时会遇到提交失败的情况。
这可能是由于网络问题、服务器错误或用户输入错误等原因导致的。
为了提供更好的用户体验,我们需要对提交失败进行适当的处理。
本文将介绍一些常见的jQuery submit失败处理方法,帮助开发者解决这类问题。
目录1.使用submit()方法提交表单2.处理submit失败的常见问题3.提交失败处理方法1.显示错误信息2.重试提交3.回滚表单数据4.跳转到错误页面4.总结使用submit()方法提交表单在介绍submit失败处理方法之前,我们先来了解一下如何使用jQuery的submit()方法提交表单。
$('form').submit(function(event) {event.preventDefault(); // 阻止表单默认提交行为// 执行表单提交操作});首先,我们使用选择器选择需要提交的表单元素,然后调用submit()方法。
在提交事件中,我们可以执行一些操作,例如验证表单数据、发送AJAX请求等。
在示例代码中,我们使用event.preventDefault()方法阻止表单的默认提交行为,以便我们可以自定义处理逻辑。
处理submit失败的常见问题提交表单时可能会遇到各种失败的情况,例如网络连接中断、服务器错误、用户输入错误等。
在处理submit失败时,我们需要考虑以下几个常见问题:1.如何获取提交失败的原因?2.如何向用户显示错误信息?3.如何处理重试提交?4.如何回滚表单数据?5.如何跳转到错误页面?下面我们将逐个介绍这些问题的解决方法。
提交失败处理方法显示错误信息当提交失败时,我们需要向用户显示错误信息,以便他们知道发生了什么问题。
可以通过以下几种方式显示错误信息:1. 使用alert()方法弹出错误信息$.ajax({url: 'submit.php',type: 'POST',data: $('form').serialize(),success: function(response) {// 处理成功响应},error: function(xhr, status, error) {alert('提交失败:' + error);}});在error回调函数中,我们使用alert()方法弹出错误信息。
jQuery3.0中存在问题及解决办法
jQuery3.0中存在问题及解决办法jQuery 前阶段推出了3.0版本,改动⾮常⼤,如果要使⽤ 3.0 的话,建议先仔细了解⼀下新特性,否则会引起⼀些⼩问题,例如下⾯的代码。
⼤家对不了解的朋友可以参考下本篇⽂章。
<html><head><meta charset="utf-8"><script src="jquery-3.0.min.js"></script><script>$(function (){$('#container').html('你好');})</script></head><body><div id="container"></div></body></html>⾮常简单,此时没有任何问题,可以正常显⽰内容,但如果 $(function (){... }) 内部出现异常,让⼈困扰的问题便来了添加⼀个异常后的状态$(function (){throw new Error('出错了');$('#container').html('你好');});页⾯不显⽰内容是正常的,但控制台也没有显⽰任何错误信息,显然和我们的预期不⼀样因为在使⽤ jquery 2 时,这种情况下,控制台是可以提⽰错误的<script src="jquery-2.1.3.min.js"></script><script>$(function (){throw new Error('出错了');$('#container').html('你好');});</script>解决办法因为 jquery 3.0 正式⽀持了 promise,所以可以对 .ready() 使⽤ promise 形式,使⽤ fail 抛出异常例如$.ready.then (function() {throw new Error('出错了');$('#container').html('你好');}).fail (function(error) {throw error;});这时控制台就可以显⽰出错误信息了。
jqx教学重难点设计
JQX教学重难点设计引言:JQX(JQuery eXtensions)是一个基于JavaScript库的扩展库,它通过对JQuery库进行扩展,提供了更多的功能和特性。
在JQX的教学过程中,学生可能会遇到一些重要而棘手的难题。
本文将探讨JQX教学中的重难点,并提供一些有效的解决方案,以帮助教师和学生更好地掌握和理解JQX的实用技术。
一、选择器的灵活运用选择器是JQX中最基础且最重要的部分之一。
学生在学习JQX 时,经常会遇到选择器灵活运用方面的困惑。
为了帮助学生理解和掌握选择器的使用,教师可以引导学生进行实践操作。
以下是一些建议的实践活动:1. 创建一个包含不同类别元素的HTML页面,并使用不同的选择器选取它们。
教师可以示范使用元素选择器、类选择器、ID选择器以及属性选择器等。
2. 在一个具有层级关系的HTML结构中,选择特定的元素进行样式修改。
教师可以引导学生使用父子选择器、相邻选择器和同胞选择器等。
3. 针对常见的表单元素,教师可以引导学生使用相关的选择器进行操作。
比如通过选择器选取表单元素的值、设定表单元素的属性等。
通过这些实践活动,学生可以更好地理解选择器的使用规则和注意事项,提高对选择器的熟练度和灵活运用能力。
二、事件处理与绑定事件处理与绑定是JQX教学中另一个重要而棘手的难点。
学生需要掌握如何通过JQX来绑定和处理不同种类的事件,以及如何传递参数、获取事件对象等。
以下是一些解决方案:1. 教师可以设计一系列与事件处理相关的实际问题,并要求学生使用JQX来解决。
比如,当鼠标悬停在某个元素上时,改变另一个元素的颜色等。
2. 引导学生使用各种不同的事件处理方法,如click()、mouseover()、keydown()等,并对比它们之间的异同点。
3. 引导学生使用on()方法来绑定事件,以及使用off()方法来解除事件绑定。
通过上述实践,学生可以更加熟悉和掌握事件处理与绑定的技巧,从而提高代码的可读性和可维护性。
jquery动态改变onclick属性导致失效的问题解决方法
jquery动态改变onclick属性导致失效的问题解决⽅法复制代码代码如下:
<li id="" onclick =""></li>
虽然在很多时候,都是⾮常不推荐这样写的,但是还有有些时候会碰到这样的代码。
那么你可能在某些时候需要去修改onclick 的属性如下:
复制代码代码如下:
$("#id").attr("onclick",url);
这样的代码,在chrome和firefox 中可以得到你想要的结果。
遗憾的是在ie中,⾄少是ie7 以下是没有效果的,⾄于i8好像也是没有效果的。
办法就是使⽤jquery 绑定.
复制代码代码如下:
$("#id").attr("onclick","").click(function(){
//
});
这⾥需要先清除onclick属性的值,再去绑定⽅⽰。
如果本来就没有设定onclick属性,刚不需要清除.
复制代码代码如下:
$("#id").click(funciton(){
//
});。
使用Jquery EasyUi常见问题解决方案
*
* @return 所选记录的id字符串(多个id用逗号隔开)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
var rows = $('#'+dataTableId).datagrid('getSelections');
*
*@return通过当前窗口和对应的百分比计算出来的具体宽度
*/
function fillsize(percent){
var bodyWidth = document.body.clientWidth;
return (bodyWidth-90)*percent;
}
/**
* 获取所选记录行(单选)
/**
*清空指定表单中的内容,参数为目标form的id
*注:在使用Jquery EasyUI的弹出窗口录入新增内容时,每次打开必须清空上次输入的历史
*数据,此时通常采用的方法是对每个输入组件进行置空操作:$("#name").val(""),这样做,
*当输入组件比较多时会很繁琐,产生的js代码很长,这时可以将所有的输入组件放入个form表单
var num = rows.length;
var ids = null;
if(num < 1){
if (null != noOneSelectMessage)$.messager.alert('提示消息',noOneSelectMessage,'info');
jQuery库冲突解决办法
本文由我司收集整编,推荐下载,如有疑问,请与我司联系jQuery 库冲突解决办法2017/05/15 0 一次面试中面试官问到jQuery 和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了。
我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名字,比如传入jq,那我就挂载在window.jq 上。
var myControl=“jq”;(function(name){ var $=name ||”$”; //name 存在$的值就是name 的值,不存在或为null,$的值为字符串”$”console.log($); window[$]=function(){ alert(“123”);}})(myControl)window[myControl]();事实上这肯定不是jquery 解决冲突的办法了。
那就看看jQuery 怎么解决冲突吧。
jQuery 多个版本或和其他js 库冲突主要是常用的$符号的冲突。
一、冲突的解决1、同一页面jQuery 多个版本冲突解决方法body !-- 引入1.6.4版的jq -- script src=“ajax.googleapis/ajax/libs/jquery/1.6.4/jquery.js” /script script var jq164 = jQuery.noConflict(true); /script !-- 引入1.4.2 版的jq -- script src=“ajax.googleapis/ajax/libs/jquery/1.4.2/jquery.js”/script script var jq142 = jQuery.noConflict(true); /script script (function($){ //此时的$是jQuery-1.6.4 $(‘#’);})(jq164);/script script jq142(function($){ //此时的$是jQuery-1.4.2 $(‘#’);});/script /body 2、jQuery 库在其他库之后导入jQuery noConflict() 方法会释放会$标识符的控制,这样其他脚本就可以使用它了。
jquery绑定事件不生效的解决方法
jquery绑定事件不生效的解决方法今天在开发前台页面时发现jquery绑定click事件,怎么都不生效。
代码如下:1.html:<input id="ceshisub" type="button" value="单击事件" >2.html引用的test.js中的方法函数:复制代码代码如下:$("#ceshisub").bind("click",function(){var a=1;a +=1;alert("ceshisub");});出现的问题就是在页面中点解“单击事件”按钮没有任何反应,打开js调试窗口在var a=1;这一行打的断点没有进来。
解决的办法是:一、在上述js函数上添加加载事件:添加后的代码如下:复制代码代码如下:$(function(){$("#ceshisub").bind("click",function(){var a=1;a +=1;alert("ceshisub");});});这样的话,绑定事件就生效了。
js的加载函数共有三个,除了上述的复制代码代码如下:$(function(){alert("第1种方法。
");});还有以下两个方法:复制代码代码如下:window.onload=function(){alert("第2种方法。
");}$(document).ready(function(){alert("第3种方法。
");});二、如果不采用js加载函数来对绑定事件进行初始化的话还有一个方法:将引用js的语句<script language="javascript" src="/js/test.js"></script>放到页面的最后面进行加载。
jquery里的缓存问题如何解决-AJAX面试题
jquery里的缓存问题如何解决?AJAX面
试题
问题:jquery里的缓存问题如何解决?AJAX面试题回答:
如果直接用jQuery里的$.ajax()方法的话,去除缓存很简单,只需要配置一下缓存属性cache为false,但如果想要简单写法getJSON(),去除缓存就不能通过配置来解决了。
因为getJSON根本没有这个缓存属性让你来配置。
因为如果其调用的地址URL和之前的一样的话,回调函数会直接在缓存里面读取数据,而不是进后台调用相应的方法。
解决方法就是让他的每次请求的URL地址不一样就行,但是同时又要不影响请求的服务所需要的数据,那么可以有一下几种方法:
1、$.getJSON( URL t= +new Date(),function(json) 就是原有的URL基础上加一个时间变量,每次的请求地址就不一样了。
2、$.getJSON( URL rand= +Math.random,function(json) 就是原有的URL基础上加上一个随机变量,不过这个方法有风险,万一随机数一样。
3、第三种方法就是自己定义一个递增变量,在URL后面加上这个递增变量,每次请求完后,就递增一下。
$.get()去除缓存的方法和$.getJSON()相同。
jquery插件冲突(jquery.noconflict)解决方法分享
jquery插件冲突(jquery.noconflict)解决⽅法分享许多的 JS 框架类库都选择使⽤$符号作为函数或变量名,jQuery是其中最为典型的⼀个。
在 jQuery 中,$ 符号只是window.jQuery 对象的⼀个引⽤,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾。
jQuery 的 API 设计充分考虑了多框架之间的引⽤冲突,我们可以使⽤ jQuery.noConflict ⽅法来轻松实现控制权的移交。
jQuery.noConflict ⽅法包含⼀个可选的布尔参数[1],⽤以决定移交 $ 引⽤的同时是否移交 jQuery 对象本⾝:复制代码代码如下:jQuery.noConflict([removeAll])缺省情况下,执⾏ noConflict 会将变量 $ 的控制权移交给第⼀个产⽣ $ 的库;当 removeAll 设置为 true 时,执⾏ noConflict 则会将 $ 和 jQuery 对象本⾝的控制权全部移交给第⼀个产⽣他们的库。
例如在 KISSY 和 jQuery 混⽤,并且惯⽤ $ = KISSY 来简化 API 操作的时候,就能够通过这个⽅法解决命名冲突的问题。
那么这个机制是如何实现的呢?阅读 jQuery 源码开头[2],⾸先做的⼀件事情是这样的:复制代码代码如下:// Map over jQuery in case of overwrite_jQuery = window.jQuery,// Map over the $ in case of overwrite_$ = window.$,容易理解的是,jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象,以防⽌变量被强⾏覆盖。
⼀旦noConflict ⽅法被调⽤,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交⽅式,具体的代码如下:noConflict: function( deep ) {if ( window.$ === jQuery ) {window.$ = _$;}if ( deep && window.jQuery === jQuery ) {window.jQuery = _jQuery;}return jQuery;}再来看上⾯所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本⾝完好⽆损。
JQueryMobile_开发常见问题
JQueryMobile 开发常见问题目录[1 什么是jQuery Mobile2 jQueryMobile的优劣3 快速开始做第一个jQueryMobile页面4 jQueryMobile学习资源o 4.1 在线学习资源o 4.2 配置参考和资源o 4.3 推荐中文书o 4.4 英文书资源5 深入jQuery Mobileo 5.1 追信魔盒PhoneGap打包模式下的最佳模式o 5.2 固定顶部导航栏以及可能引发的问题o 5.3 点击链接响应速度慢的问题o 5.4 对载入文字和错误文字的汉化o 5.5 整合PhoneGap(Cordova)o 5.6 手机环境下jQuery的DOM性能问题jQuery Mobile 是jQuery 在手机上和平板设备上的版本。
jQuery Mobile 不仅会给主流移动平台带来jQuery 核心库,而且会发布一个完整统一的jQuery移动UI框架。
支持全球主流的移动平台。
jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。
移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
:今天,jQuery 驱动着Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序越来越少。
现在,主流移动平台上的浏览器功能都赶上了桌面浏览器,因此jQuery 团队引入了jQuery Mobile(简称JQM)。
JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个Internet上的内容更加丰富—不管使用哪种查看设备。
(以上摘自百度百科)更多介绍见:Jquery Mobile 中文API站追信魔盒提供的网页壳模式和PhoneGap打包模式,支持使用jQueryMobile来构筑属于自己的WebAPP,以下将详细描述我们在实际开发中的经验。
jQueryMobile的优劣相比其他移动框架,jQueryMobile优势特别突出1.学习成本低。
jQuery不兼容input的change事件问题解决过程
jQuery不兼容input的change事件问题解决过程最近开发⼀个项⽬,需要实现⽤户在WEB表单⾥的多个INPUT框中输⼊数量后,⽴即⾃动计算加总各项输⼊的数量之和,并显⽰在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现,代码如下:复制代码代码如下:$("input.syxcost").change(function(){computeReceivedsyxcost();}function computeReceivedsyxcost(){ //计算加总var syxcost=0;$("input.syxcost").each(function(){var cost=parseFloat($(this).val());if (!isNaN(cost))syxcost=syxcost + cost;});$("#receivedsyxcost").val(syxcost); //显⽰最终结果}原以为这样就解决了,在⾕歌浏览器确实是OK的,但在IE 9中,却发现在INPUT中输⼊数量后,并不会⽴即触发change事件,存在兼容问题,在⽹上搜了许多,也都说存在这个问题,没有办法,我就只有⾃⼰来依据实现情况来写,我的思路是:当INPUT获取焦点时,就获取当前的VALUE并存⼊该INPUT的⾃定义的属性中(如:data-oval),然后在INPUT失去焦点的时候,就获取当前的VALUE与之前存在⾃定义的属性中的值是否相同,若不相同,则说明VALUE被改变,就需要重新计算,否则忽略,实现代码如下:复制代码代码如下:$("input.syxcost").focus(function(){$(this).attr("data-oval",$(this).val()); //将当前值存⼊⾃定义属性}).blur(function(){var oldVal=($(this).attr("data-oval")); //获取原值var newVal=($(this).val()); //获取当前值if (oldVal!=newVal){computeReceivedsyxcost(); //不相同则计算}});经反复验证,在所有的浏览器下均显⽰正常,解决了兼容的问题!。
jquery submit失败处理方法
jquery submit失败处理方法在前端开发中,jQuery 是一种经常使用的 JavaScript 库,它简化了HTML 文档遍历、事件处理、动画效果等操作。
而在开发过程中,我们常常需要通过表单提交数据,并处理可能出现的提交失败情况。
本文将介绍一些常用的 jQuery submit 失败处理方法。
1. 使用 Ajax 提交表单数据在 jQuery 中,可以使用 Ajax 方法来提交表单数据,并在提交过程中处理错误。
以下是一个示例代码:```javascript$('form').submit(function(e) {e.preventDefault(); // 阻止表单的默认提交行为var formData = $(this).serialize(); // 序列化表单数据$.ajax({url: 'submit.php', // 提交的后台地址type: 'POST',data: formData,success: function(response) {// 处理成功的回调函数console.log(response);},error: function(xhr, status, error) {// 处理失败的回调函数console.log(error);}});});```在上述代码中,首先通过 `e.preventDefault()` 阻止了表单的默认提交行为,接着使用 `$(this).serialize()` 对表单数据进行序列化,然后使用 `$.ajax()` 方法发送 POST 请求,并在成功和失败时分别执行对应的回调函数。
2. 显示错误信息除了捕获错误并输出到控制台,我们还可以将错误信息显示在页面上,以便用户能够清楚地知道发生了什么问题。
以下是一个示例代码:```javascript$('form').submit(function(e) {e.preventDefault(); // 阻止表单的默认提交行为var formData = $(this).serialize(); // 序列化表单数据var $errorContainer = $('<div class="error-container"></div>'); // 创建错误信息容器$.ajax({url: 'submit.php', // 提交的后台地址type: 'POST',data: formData,success: function(response) {// 处理成功的回调函数console.log(response);},error: function(xhr, status, error) {// 处理失败的回调函数$errorContainer.text('提交失败,请稍后重试。
Jquery实战中遇到的错误整理
Jquery实战中遇到的错误整理
1.创建的jQuery元素对象不能直接当做dom节点添加到HTML文档中。
2.在一个节点集合中选择特定下标的节点不应该在属性集合后缀get(index)而是在选择器中直接使用(:eq(index))。
3.Juqery的本质是JavaScript,因此许多方法实现的方法依赖于JavaScript,JavaScript通通常有一个全局函数,其他函数响应事件触发都依赖于它,jQuery 同样如此。
因此这些代码需要放在这个主函数中否则不会被触发。
4.jQuery中也可以使用for循环且用法与Java中类似。
5.在脚本语言中也要活用面向对象的思想。
6.jQuery全局对象要定义在所有函数体外。
7.活用jQuery选择器可以十分方便的遍历dom树上的节点,节省大量代码。
8.jQuery中声明的函数是立刻执行的因此当使用setinterval与settimeout一类的函数时应该在参数列表外声明函数,并且引用的是函数名(一个字符串)而不是函数本身。
jQuery冲突问题解决方法
jQuery冲突问题解决⽅法
在前端开发中,$是jQuery中的⼀个函数,如果$的参数不同,那实现的功能不同。
在编程过程中,$作为⼀个符号,可能与其他⽂件中的定义名称相冲突。
那这个冲突如何处理呢?本⽂⼩编介绍两种⽅法:
1、通过jQuery框架中释放 $ 符号的使⽤权解决;
2、使⽤⾃定义访问符号解决。
⽅法⼀:通过jQuery框架中释放 $ 符号的使⽤权解决
处理说明:$只是jquery的⼀个别名⽽已,如果需要使⽤ jquery 之外的另⼀ js 库,可以通过调⽤ $.noConflict() 向该库返回控制权。
jQuery.noConflict();
jQuery(function () {
alert("hellow")
});
注意:释放操作必须在编写其他jQuery代码之前编写,且释放之后就不能⽤$,改为使⽤jQuery。
⽅法⼆:使⽤⾃定义访问符号解决
处理说明:⾃定义⼀个nj 来代替 $ 的功能
var nj =jQuery.noConflict();
nj(function(){
alert("hello inj ⾃定义访问符号")
});
到此这篇关于jQuery冲突问题解决⽅法的⽂章就介绍到这了,更多相关如何处理jQuery冲突问题内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!。
使用jQueryqueue(队列)遇到的问题及解决方案
使⽤jQueryqueue(队列)遇到的问题及解决⽅案应⽤场景描述:我现在要做⽂章列表的批量⽣成,使⽤AJAX将⽣成的进度情况展⽰给⽤户。
⾸先要⽣成⽂章列表页,然后在⽣⽂章内容详细页。
假如有10页每页10条记录,就会10个⽂章列表页 + 总录数(100条记录)= 110个页⾯,也就是说这次要⽣成110个静态页⾯。
为了使⽤页⾯⽣成展⽰给⽤户的界⾯更⽣动,让⽤户了解系统就在⽣成哪个页,及完成情况,我使⽤了jquery 的queue 及dequeue⽅法下⾯是有问题的代码:(这些代码仅⽣列表,不包括⽣详细内容部分)$.ajaxjsonext('run.ashx', 'action=articlepagecount&navbarid=' + navid, function (msg) {$('#w').data("pagecount", msg); //存放总页数var _fun = []; //空的数组,此处保存将要按序执⾏的AJAX请求代码BuildArticleListFunction(_fun,navid); //将要执⾏的AJAX请求封装成函数存⼊数组中。
navid 为栏⽬ID$('#detail').append('准备数据完成。
<br>');$('#detail').append('⽂章列表共 ' + $('#w').data("pagecount")+ ' <br>');$(document).queue('ajax_article', _fun); //var _takeOne = function () {$(document).dequeue('ajax_article');};_takeOne(); //执⾏队列中的AJAX请求函数});function BuildArticleListFunction(arrfun,navid) {pagecount = $('#w').data("pagecount");for(var i=1;i<=pagecount;i++){arrfun.push(function () {//⽂章列表$.ajaxjsonext('run.ashx', 'action=articlelist&navbarid=' + navid + '&pageindex=' + (i), function (state) {if (state.success) {$('#detail').append(state.fn + ' 创建成功。
使用jquery.qrcode生成二维码及常见问题解决方案
使⽤jquery.qrcode⽣成⼆维码及常见问题解决⽅案⼀、jquery.qrcode.js介绍⼆、参数说明1. text : "https:///jeromeetienne/jquery-qrcode" //设置⼆维码内容2. render : "canvas",//设置渲染⽅式(有两种⽅式 table和canvas,默认是canvas)3. width : 256, //设置宽度4. height : 256, //设置⾼度5. typeNumber : -1, //计算模式6. correctLevel : 0,//纠错等级7. background : "#ffffff",//背景颜⾊8. foreground : "#000000" //前景颜⾊三、jquery.qrcode使⽤1. 加载 jQuery 和 jquery.qrcode.js: <script type='text/javascript' src='/jquery/2.1.1/jquery.min.js'></script> <script type="text/javascript" src="/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>2. 创建⼀个⽤于包含 QRcode 图⽚的 DOM 元素,⽐如 div:<div id="qrcode"></div>3.通过下⾯代码⽣成 QRcode: 最简单⽅式:jQuery('#qrcode').qrcode("/mr_smile2014"); ⾃定义⽅式:jQuery('#qrcode').qrcode({render:canvas,width: 64,height: 64,correctLevel:0,text: "/mr_smile2014"});四、常见问题1.在chorme浏览器中⼆维码⽣成成功后⽆法扫描解决⽅法: //改成使⽤table的渲染⽅式,亲测⽀持各种各版本的浏览器 jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,render: "table",text: "/mr_smile2014"});2.在微信或⼿机浏览器中⽣成的⼆维码⽆法扫描解决⽅法; //改成使⽤默认的渲染⽅式,⽀持微信和QQ内置浏览器及其它⼿机浏览器 jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: "/mr_smile2014"});jquery-qrcode这个库是采⽤ charCodeAt() 这个⽅式进⾏编码转换的,这个⽅法默认会获取它的 Unicode 编码,⼀般的解码器都是采⽤UTF-8, ISO-8859-1等⽅式。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
$('#lal').append('sometext');
12. 在创建元素时,如何使用对象字面量(literal)来定义属性
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
19. 如何检测各种浏览器:
检测Safari (if( $.browser.safari)),检测IE6及之后版本
(if ($.browser.msie && $.browser.version > 6 )),检测IE6及之前版本
(if ($.browser.msie && $.browser.version <= 6 )),检测FireFox 2及之后版本
// element- 一个DOM元素// index – 栈中的当前循环索引// meta – 有关选择器的元数据
// stack – 要循环的所有元素的栈// 如果包含了当前元素就返回true// 如果不包含当前元素就返回false
};// 定制选择器的用法:
$('.someClasses:test').doSomething();
23. 如何检查某个元素是否存在
if ($('#someDiv').length) {//万岁!!!它存在……}
24. 如何使用jQuery来检测右键和左键的鼠标单击两种情况:
$("#someelement").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
(if ($.browser.mozilla && $.browser.version >= '1.8' ))
20. 如何替换串中的词
var el = $('#id');
el.html(el.html().replace(/word/ig, ''));
21. 如何禁用右键单击上下文菜单:
//例如,就table来说,以前你会用
//.live()$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); });});//现在用$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover");});
jQuery.preloadImages = function() {
for(var i = 0; i < arguments.length; i++) {
$("<img />").attr('src', arguments[i]);
}};//用法$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
jQuery.fn.autoscroll = function(selector) {
$('html,body').animate( {
scrollTop: $(selector).offset().top
}, 500 };}//然后像这样来滚动到你希望去到的class/area上。$('.area_name').autoscroll();
//而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠)
$(".mydiv").delay(5000).hide('blind', {}, 500);
27. 如何把已创建的元素动态地添加到DOM中:
var newDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body');
9. 如何从一个未排序的集合中找出某个元素的索引号
$("ul > li").click(function () { var index = $(this).prevAll().length;});
10. 如何把函数绑定到事件上:
$('#foo').bind('click', function() { alert('User clicked on "foo."');});
<input type="text" value="Enter Username here.." class="swap" />
26. 如何在一段时间之后自动隐藏或关闭ቤተ መጻሕፍቲ ባይዱ素(支持1.4版本):
//这是1.3.2中我们使用setTimeout来实现的方式
setTimeout(function() { $('.mydiv').hide('blind', {}, 500)}, 5000);
//这种情况下有些开发者使用:
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass('blueButton');
<li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li>
</ul>
5. 如何正确地使用ToggleClass:
//切换(toggle)类允许你根据某个类的//是否存在来添加或是删除该类。
return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } });};//用法$('#mytextarea').maxLength(500);
alert("Left Mouse Button Clicked");
}
else if(e.button == 2) { alert("Right Mouse Button Clicked"); }});
25. 如何显示或是删除input域中的默认值
//这段代码展示了在用户未输入值时,//如何在文本类型的input域中保留
var ob = e || event;
var keyCode = ob.keyCode;
var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
//一个默认值
wap_val = [];$(".swap").each(function(i){ wap_val[i] = $(this).val();
$(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]); } });});
//找出你希望切换的媒体类型(media-type),然后把href设置成新的样式表。
$('link[media='screen']').attr('href', 'Alternative.css');
4. 如何限制选择范围(基于优化目的):
//尽可能使用标签名来作为类名的前缀,
//这样jQuery就不需要花费更多的时间来搜索
//你想要的元素。还要记住的一点是,
//针对于你的页面上的元素的操作越具体化,